Shape Morph

Indepth: Polygons

const sketchWidth = 400;
const sketchHeight = 400;

function setup() {
createCanvas(sketchWidth, sketchHeight);
}

let pMax = 10;
let rotation = 0;

function draw() {
background(0);
fill('white');
translate(sketchWidth/2, sketchHeight/2);
const radius = 150;
for (let p = 0; p < pMax; p += 1) {
const x = polarX(radius, 360 / pMax * p);
const y = polarY(radius, 360 / pMax * p);
polygon(x, y, 3 + p, 30);
}
rotation += 1;
}

function polygon(x, y, numSides, radius) {
push();
translate(x, y);
rotate(Math.PI / 180 * rotation);
beginShape();
for (let s = 0; s < numSides; s += 1) {
const x = polarX(radius, 360 / numSides * s);
const y = polarY(radius, 360 / numSides * s);
vertex(x, y);
}
endShape(CLOSE);
pop();
}

function polarX(radius, angle) {
const x = radius * Math.cos(Math.PI / 180 * angle);
return x;
}

function polarY(radius, angle) {
const y = radius * Math.sin(Math.PI / 180 * angle);
return y;
}

Back to top