Lia_Spirograph

 // Lia Cociorva

//Notes: make each ring another color down the rainbow

//Make it move in opposite direction when clicked

//SPIROGRAPH

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

// also (for inspiration):

// http://ensign.editme.com/t43dances

//

// this p5 sketch uses 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.

//

// your tasks:

// (1) tweak the code to 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.  try to change *both*.  :)

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

// hint: the websites for p5.sound and tone.js have lots of examples.

// try and adapt them.

// another hint: javascript isn't super efficient with a large number of audio playing at once.

// see if there's a simple way to get an effective sound, or limit the number of shapes

// you're working with.

​

var NUMSINES = 5; // how many of these things can we do at once?

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

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

var oscs = new Array(NUMSINES);

var i; // a counter variable

var hue = 100; 

​

// play with these to get a sense of what's going on:

var fund = 0.02; // the speed of the central sine

var ratio = 5; // what multiplier for speed is each additional sine?

var alpha = 50; // how opaque is the tracing system

var trace = false; // are we tracing?

​

function setup()

{

  createCanvas(windowWidth, windowHeight);

  colorMode (HSB, 100);

  rad = height/4; // compute radius for central circle

  background(0); // clear the screen

​

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

  {

    sines[i] = PI; // start EVERYBODY facing NORTH

    oscs[i] = new p5.Oscillator('sine');

    oscs[i].amp(0.05);

    oscs[i].freq(50*1.5*(i+1));

    oscs[i].start();

  }

}

​

function draw()

{

  if (!trace) {

    background(0); // clear screen if showing geometry

    noFill(); // don't fill

    stroke(100, 100, 100);

  } 

​

  // MAIN ACTION

  push(); // start a transformation matrix

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

  var vect = createVector(0,0);

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

  {

    var erad = 0; // radius for small "point" within circle... this is the 'pen' when tracing

    // setup for tracing

    if (trace) {

      stroke(random(0, 255)*(float(i)/sines.length), alpha); // random color

      fill(random(0, 255), alpha/2); // random color

      erad = 5.0*(1.0-float(i)/sines.length); // pen width will be related to which sine

    }

    var radius = rad/(i+1); // radius for circle itself

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

    if (!trace) {

      line(vect.x, vect.y, width/2, height/2);

      ellipse(0, 0, radius*2, radius*2); // if we're simulating, draw the sine

    }

    push(); // go up one level

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

    if (!trace) {

      fill(100, 100, 100);

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

    }

    if (trace) ellipse(0, 0, erad, erad); // draw with erad if tracing

    pop(); // go down one level

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

    oscs[i].amp((sines[i]/TWO_PI)*0.1, 0.05);

    sines[i] = (sines[i]+(fund+(fund*i*ratio)))%TWO_PI; // update angle based on fundamental

    //hue+=20;

  }

  pop(); // pop down final transformation

  if (hue > 100) hue = 0;

}

​

function keyReleased()

{

  if (key==' ') {

    trace = !trace; 

    background(0);

  }

}

​

function mousePressed(){ //press mouse to switch direction of spirograph

  fund = -fund;

}