Spirograph

// SPIROGRAPH: http://en.wikipedia.org/wiki/Spirograph

// use simple transformations to create a Spirograph-like effect with interlocking circles called sines 

// press the spacebar to switch between tracing and showing the underlying geometry

​

// (1) change the simulation so that it draws something you like

// hint: you can change the underlying system, the way it gets traced when you hit the space bar, or both

// (2) use p5.sound or tone.js to make the simulation make sound

// hint: try and adapt the examples on the websites for p5.sound and tone.js

​

var amountt = 10; // the amount of sines

var sinee = new Array(amountt); // an array to hold all the current angles

var radiuss; // an initial radius value for the central sine

var i; // a counter variable

var speedd = 0.5; // the speed of the central sine

var ratioo = 1; // what multiplier for speed is each additional sine

var tracee = false; // Are we tracing?

var soundd;

​

function preload()

{

  soundd = loadSound('universe.wav');

}

​

function setup()

{

  createCanvas(windowWidth, windowHeight);

  radiuss = 100; // compute radius for central circle

  background(0); // clear the screen

   soundd.play();

  for (i = 0; i<sinee.length; i++)

  {

    sinee[i] = PI;

  }

}

​

function draw()

{ 

  {

    frameRate(5);

    fill (255, random(255), random(255));

    noStroke();

    ellipse (random(windowWidth), random(windowHeight), 5, 5);

    ellipse (random(windowWidth), random(windowHeight), 10, 10);

    ellipse (random(windowWidth), random(windowHeight), 15, 15);

   }

  // MAIN ACTION

  push(); // start a transformation matrix

  translate(width/2, height/2); // move to middle of screen

  for (i = 0; i<sinee.length; i++) // go through all the sines

  {

    var radius = radiuss/(i+0.75); // radius for circle itself

    rotate(sinee[i]); // rotate circle

    if (!tracee) ellipse(0, 0, radius*2, radius*2); // draw the sine if we are simulating

    push(); // go up one level

    translate(0, radius+200); // move to sine edge

    if (!tracee) ellipse(0, 0, 5, 5); // draw a little circle

    pop(); // go down one level

    translate(0, radius); // move into position for next sine

    sinee[i] = (sinee[i]+(speedd+(speedd*i*ratioo)))%TWO_PI; // update angle based on fundamental

  }

    pop(); // pop down final transformation

}