John Legelis – Project 07: Composition with Curves

sketch

// John Legelis
// Section D


//Define canvas width and height
cwidth = 480
cheight = 480

function setup() {
    createCanvas(cwidth, cheight);
    background(0);

    textSize(40);
    fill(255)
    textFont('Helvetica');
    text('mouse over', 120, 240);
}

//Initialize number of points drawn in graph
var npoints = 60
var step = 2 * Math.PI / npoints
//Radius of outer circle
var bigR 
//Radius of inner circle
var r
// offset the graph so it is drawn about the center
var offsetx = cwidth/2
var offsety = cheight/2 
//color variable
var cw


function hypX (t) {
    //Big and little circle radius mapped to x,y mouse and constrained to canvas
    bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
    r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
    var x = ((bigR - r) * cos(t) + r * cos((bigR - r)/r * t) + offsetx)
    return x
}

function hypY (t) {
    //Big and little circle radius mapped to x,y mouse and constrained to canvas
    bigR = map(constrain(mouseX, 0, cwidth),0, 1000, 0, 400)
    r = map(constrain(mouseY, 0, cheight), 0, 700, 0, 400)
    var y = ((bigR - r) * sin(t) + r * cos((bigR - r)/r * t) + offsety)
    return y
}

function draw() {
    //color variable randomized RGB in neon range
    cw = [random(0,200), random(0,200), random(0,200)]


    //for every point in the pattern
    for (theta = 1; theta < 30*PI; theta = theta + 2*PI/npoints) {
        strokeWeight(3)
        stroke(cw)
        // draw a line from the point to the previous point
        line(hypX(theta), hypY(theta), hypX(theta - step), hypY(theta - step))
    }
    // erase everything when mouse mouseIsPressed
    if (mouseIsPressed) {
        background(0)
    }
}

This week’s project was left very open ended, and after some research on Wolfram Alpha World about curves and their mathematical composition, I developed an understanding for how a spirograph creates hypotrochoid shapes by rotating a circle within another circle.

The general formula for the X and Y coordinates of a hypotrochoid curve in reference to theta is:

x(θ) = (R−r)*cosθ + r*cos(θ*(R−r)/r) y(θ) = (R−r)*sinθ − r*sin(θ*(R−r)/r)