Polygons & Wheels

var sides = [3, 4, 5, 12]; // Drawing wheels of different shapes/sizes

​

var radius = 40;    // Distance from center to corner of shape

var axleX = 300;    // x-coordinate for the wheel

var speed = 1;      // How fast the graph is drawn

​

var axlePositions = [[], [], [], []];

​

var BLUE = color(20, 100, 200);

var PINK = color(255, 0, 175);

var GREEN = color(28, 173, 123);

textSize(20);

textAlign(CENTER, CENTER);

​

var t = 0;          // Time

​

void setup() {

  size(800, 800);

}

​

void draw() {

    background(250);

    t += 2;

    var angle = t % 360;

    for (var i = 0; i < sides.length; i++) {

        var numOfSides = sides[i];

        var theta = 360 / numOfSides;

        var halfTheta = theta / 2;

        var groundY = (i + 1) * 100 - 10;

        strokeWeight(3); // Ground

        stroke(100);

        line(0, groundY, width, groundY);

        fill(0); // Label

        text(numOfSides, width - 25, groundY - 40);         // Pos of axle above ground

        var y = groundY - radius * cos(((angle + halfTheta) % theta - halfTheta)*.0174);       

        axlePositions[i].push(y); // Save the position     

        if (axlePositions[i].length * speed > axleX) {  // Rmv pos that are off screen

            axlePositions[i].shift();

        }

        pushMatrix();

        translate(axleX, y);

        rotate(angle*.0174);    

        noFill();    // Draw shape

        strokeWeight(3);

        stroke(BLUE);      

        beginShape();

        for (var j = 0; j < numOfSides; j++) {

            vertex(radius * sin((j * theta)*.0174), radius * cos((j * theta)*.0174));

        }

        endShape(CLOSE);     

        stroke(GREEN); // Axel

        strokeWeight(2);

        ellipse(0, 0, 8, 8);      

        popMatrix();    

        beginShape();  // Draw axle positions

        var x = axleX;       

        for (var j = axlePositions[i].length; j--;) {

            vertex(x, axlePositions[i][j]);

            x -= speed;

        }

        endShape();

    }

​

};