MarisolPark_Spirograph_final

mySketch
xxxxxxxxxx
 
//voice recognition variables 
var voiceRecognition = new p5.SpeechRec('en-US');
voiceRecognition.onResult = inputspeech;
voiceRecognition.continuous = true;
voiceRecognition.interimResults = true;
​
var whichimage = 0;
// circle and action  variables
var cColor = [0, 191, 250];
var bColor = 0;
var sColor = [0, 191, 250];
var sWeight = 3;
var fColor = [135, 206, 250];
//var shapetype = 0;
var NUMSINES = 7; // 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 i; // a counter variable
​
// play with these to get a sense of what's going on:
var fund = 0.005; // 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?
var oscs = new Array(NUMSINES);
var centerx, centery;
​
function setup() {
  createCanvas(windowWidth, windowHeight);
​
  voiceRecognition.start();
​
  rad = height / 4; // compute radius for central circle
  background(bColor); // clear the screen
​
  for (i = 0; i < sines.length; i++) {
    sines[i] = PI; // start EVERYBODY facing NORTH
    oscs[i] = new p5.Oscillator('SINES');
    oscs[i].amp(0.2);
    oscs[i].freq(50 * 0.9 * (i + 3))
    oscs[i].start();
  }
​
  centerx = width / 2;
  centery = height / 2;
}
​
function draw() {
  if (!trace) {
    background(bColor); // clear screen if showing geometry
    stroke(sColor); // black pen
    strokeWeight(sWeight);
    noFill(); // don't fill
  }
  // MAIN ACTION
  push(); // start a transformation matrix
  translate(centerx, centery); // move to middle of screen
​
  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) {
      //var cColor = [0, 191 * (float(i) / sines.length), 250];
      stroke(cColor, alpha); // blue
      //fill(0, 0, 255, alpha/2); // also, um, blue
      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) {
    if (whichimage == 0) ellipse(0, 0, radius * 2, radius * 2);
    if (whichimage == 1) rect(0, 0, radius * 2, radius * 2);
    if (whichimage == 2) star(0, 0, radius / 2, radius, 5);
    //} // if we're simulating, draw the sine
​
    push(); // go up one level
    translate(0, radius); // move to sine edge
    if (!trace) 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
    sines[i] = (sines[i] + (fund + (fund * i * ratio))) % TWO_PI; // update angle based on fundamental
  }
  pop(); // pop down final transformation
​
}
​
//star shape:
function star(x, y, radius1, radius2, npoints /*, sweight*/ ) {
  //let strokeweight= sweight;
  let angle = TWO_PI / npoints;
  let halfAngle = angle / 2.0;
  beginShape();
  for (let a = 0; a < TWO_PI; a += angle) {
    let sx = x + cos(a) * radius2;
    let sy = y + sin(a) * radius2;
    vertex(sx, sy);
    sx = x + cos(a + halfAngle) * radius1;
    sy = y + sin(a + halfAngle) * radius1;
    vertex(sx, sy);
  }
  endShape(CLOSE);
}
​
function keyTyped() {
  if (key == ' ') {
    trace = !trace;
    background(bColor);
  }
  if (key == '1') {
    bColor = color(255); // later make this a voice command
    background(bColor);
  }
  if (key == '2') {
    bColor = color(0, 0, 128); // later make this a voice command
    background(bColor);
  }
  if (key == '3') {
    bColor = color(139, 0, 0); // later make this a voice command
    background(bColor);
  }
  if (key == '4') {
    bColor = color(75, 0, 130); // later make this a voice command
    background(bColor);
  }
  if (key == '5') {
    sColor = [255, 2, 147];
    cColor = [255, 2, 147 * (float(i) / sines.length)];
  }
  if (key == '6') {
    sColor = [255, 69, 0];
    cColor = [255, 69 * (float(i) / sines.length), 0];
  }
  if (key == '7') {
    sColor = [0, 250, 154];
    cColor = [0, 250, 154 * (float(i) / sines.length)];
  }
  if (key == '7') {
    sColor = [0, 191 * (float(i) / sines.length), 250];
    cColor = [0, 191, 250];
  }
}
​
function inputspeech() {
  a = voiceRecognition.resultString.split(' ').pop().toLowerCase();
  if (a == 'circle') {
    whichimage = 0;
  }
  if (a == 'square') {
    whichimage = 1;
  }
  if (a == 'star') {
    whichimage = 2;
  }
}
​
function mousePressed() {
  centerx = mouseX;
  centery = mouseY;
}