afukuda-Project07-Curves

afukuda-project-07

/* 
 * Name | Ai Fukuda 
 * Course Section | C 
 * Email | afukuda@andrew.cmu.edu
 * Project | 07
 */ 

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

function draw() {
  background(193, 228, 221);
  translate(width/2, height/2);  // translating grid to center 

  drawSpirograph();
}

function drawSpirograph() {
    // Spirograph: 
    // http://mathworld.wolfram.com/Spirograph.html

    var nPoints = 1000;          
    noFill();
    stroke(140, 164, 212);

    var x;
    var y;
    var a = 200;    // fixed radius in which smaller circle (b) rolls around 
    var b = a/constrain(mouseY+10, 50, 350);  // smaller circle radius - making it interactive with mouseY 
    var h = constrain(mouseX+10, 50, 350);  // distance from center of interior circle in which spirograph is traced - mouseX

    beginShape();
        for (var i=0; i < nPoints; i++) {

            var t = map(i, 0, nPoints, 0, TWO_PI);

            x = (a + b) * cos(t) + h * cos((a-b) / b * t);
            y = (a + b) * sin(t) + h * sin((a-b) / b * t);
            vertex(x, y);
        }  
    endShape();

    
} 

My project is based on the Spirograph mathematical curve (link: http://mathworld.wolfram.com/Spirograph.html). Keeping one variable (a) constant, initially I was going to keep things simple by only using small integers (> 10) to create the geometry, but by incorporating mouseX and mouseY for the (b) and (h) variables (see link to see what these variables represent), the geometry became more intricate, more dynamic, and more kaleidoscope-like, which I was compelled by.