Generating Shapes

Learn how to create, modify, and animate algorithmic shapes using code.

1. Basic Shape Creation

Start with fundamental shapes like circles, rectangles, and triangles.

function setup() {
  createCanvas(400, 400);
  noFill();
}

function draw() {
  background(30);
  stroke(255);
  ellipse(200, 200, 300, 300);
  rect(100, 100, 200, 200);
}
                        

2. Parameter Customization

Modify shape properties like size, position, and color dynamically.

function draw() {
  background(30);
  fill(255, 0, 200);
  noStroke();
  
  let size = map(mouseX, 0, 400, 50, 300);
  ellipse(width/2, height/2, size, size);
}
                        

3. Interactive Shapes

Add mouse interaction to create dynamic art.

function draw() {
  background(30);
  fill(255, 0, 200);
  
  let x = map(mouseX, 0, 400, 0, 300);
  let y = map(mouseY, 0, 400, 0, 300);
  ellipse(x, y, 50, 50);
}
                        

Continue Learning