/*
* 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.