Project 7: Curves

sketchDownload
var a = 0; //radius of exterior circle
var b = 0; //radius of interior circle
var h = 0; //distance from center of interior circle

var r;
var g;
var b;

var theta = 0; //angle


function setup() {
    createCanvas(500, 500);
    background(220);

}

function draw() {
    r = map(mouseX, 0, width, 45, 191);
    g = map(mouseX, 0, width, 16, 175);
    b = map(mouseY, 0, height, 105, 225);
    background(r, g, b);
    for (var x = 0; x <= width; x += 70) {
        for (var y = 0; y <= height; y += height/5) {
            push();
            translate(x, y);
            drawHypotrochoid();
            pop(); 
        }
    }
}


function drawHypotrochoid() {
    noFill();
    r = map(-mouseX, 0, width, 107, 24);
    g = map(-mouseX, 0, width, 67, 162);
    b = map(-mouseY, 0, height, 67, 162);
    stroke(r, g, b);
    
    a = map(mouseX, 0, width, 1, width/10);
    b = 20;
    h = map(mouseY, 0, height, 1, height/5);
    
    beginShape();
    for (var i = 0; i < 1000; i++) {
        var x = ((a-b) * cos(theta)) + (h * cos((a-b)/b * theta));
        var y = ((a-b) * sin(theta)) - (h * sin((a-b)/b * theta));
        var theta = map(i, 0, 100, 0, TWO_PI);
        vertex(x, y);
    }
    endShape();

}

I chose the hypotrochoid curve because when I was experimenting with it, so many different patterns came out of it and I wanted the result to have as many variations as possible. So as you move your mouse up, down, or diagonal, the curve patterns would change every few movements.

Leave a Reply