Vibrance Graphic Visualizer

vibrance.js

/* Template from Arielle Hein */
/* Graphic Visualizer code by Sarah Manning */

var serial; //variable to hold an instance of the serial port library
var portName = '/dev/tty.usbmodem14101';
var inData;
var p1; var p2; var p3; var p4; var s1; var s2;
var b1; var b2; var b3; var b4; var b5; var b6;
var bR; var bG; var bB;
var speed = 10;
//var direction;
var fR; var fG; var fB;
var sR; var sG; var sB;
var innerRad; var numPoints; var sWidth;
var speed1 = 10;
//var direction1;
var fR1; var fG1; var fB1;
var sR1; var sG1; var sB1;
var innerRad1; var numPoints1; var sWidth1;
var speed2 = 10;
//var direction2;
var fR2; var fG2; var fB2;
var sR2; var sG2; var sB2;
var innerRad2; var numPoints2; var sWidth2;
var layer0; var layer1; var layer2;
var winW = 1440, winH = 800;

function setup() {
  if (document.body && document.body.offsetWidth) {
   winW = document.body.offsetWidth;
   winH = document.body.offsetHeight;
  }
  if (document.compatMode=='CSS1Compat' &&
      document.documentElement &&
      document.documentElement.offsetWidth ) {
   winW = document.documentElement.offsetWidth;
   winH = document.documentElement.offsetHeight;
  }
  if (window.innerWidth && window.innerHeight) {
   winW = window.innerWidth;
   winH = window.innerHeight;
  }
  console.log('Window width = '+winW);
  console.log('Window height = '+winH);
  createCanvas(winW, winH);

  serial = new p5.SerialPort(); //a new instance of serial port library

  //set up events for serial communication
  serial.on('connected', serverConnected);
  serial.on('open', portOpen);
  serial.on('data', serialEvent);
  serial.on('error', serialError);
  serial.on('close', portClose);

  //open our serial port
  serial.open(portName);

  numPoints = 6;
}

function draw() {
  background(bR, bG, bB);

  translate(30, 30);

  if(b1==0 && b2==0){ //layer 0 only
      speed = s1;
      sWidth = p4;
      if(b6==1){
        numPoints = numPoints;
        innerRad = Math.pow(s2,2.718)+Math.pow(s2,2)*2.04;
      }
      else if(b6==0){
        innerRad = innerRad;
        numPoints = s2;
      }


      if(b5==1){
        speed = -speed;
      }

      if(b3==0 && b4==0){
        console.log("fill");
        fR = p1;
        fG = p2;
        fB = p3;
        sR = sR;
        sG = sG;
        sB = sB;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==1 && b4==0){
        console.log("stroke");
        fR = fR;
        fG = fG;
        fB = fB;
        sR = p1;
        sG = p2;
        sB = p3;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==0 && b4==1){
        console.log("background");
        fR = fR;
        fG = fG;
        fB = fB;
        sR = sR;
        sG = sG;
        sB = sB;
        bR = p1;
        bG = p2;
        bB = p3;
      }
  }

  push();
  translate(width*0.5, height*0.5);
  rotate(frameCount / speed); // denominator controls speed
  strokeWeight(sWidth);
  stroke(sR,sG,sB); // change
  fill(fR,fG,fB); //change
  star(0,0,winW-50,innerRad,numPoints); // change
  pop();

  if(b1==1&&b2==0){ //layer 1 and 0 active
    setLayer(1);
      if(b6==1){
        numPoints1 = numPoints1;
        innerRad1 = Math.pow(s2,2.718)+Math.pow(s2,2)*2.04;
      }
      else if(b6==0){
        innerRad1 = innerRad1;
        numPoints1 = s2;
      }
      if(b5==1){
        speed1 = -speed1;
      }

      if(b3==0 && b4==0){
        console.log("fill");
        fR1 = p1;
        fG1 = p2;
        fB1 = p3;
        sR1 = sR1;
        sG1 = sG1;
        sB1 = sB1;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==1 && b4==0){
        console.log("stroke");
        fR1 = fR1;
        fG1 = fG1;
        fB1 = fB1;
        sR1 = p1;
        sG1 = p2;
        sB1 = p3;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==0 && b4==1){
        console.log("background");
        fR1 = fR1;
        fG1 = fG1;
        fB1 = fB1;
        sR1 = sR1;
        sG1 = sG1;
        sB1 = sB1;
        bR = p1;
        bG = p2;
        bB = p3;
      }
      push();
      translate(width*0.5, height*0.5);
      rotate(frameCount / speed1); // denominator controls speed
      strokeWeight(sWidth1);
      stroke(sR1,sG1,sB1); // change
      fill(fR1,fG1,fB1); //change
      star(0,0,winW-50,innerRad1,numPoints1); // change
      pop();
  }

  if(b2==1){ //layer 2 active
    setLayer(2);
      if(b6==1){
        numPoints2 = numPoints2;
        innerRad2 = Math.pow(s2,2.718)+Math.pow(s2,2)*2.04;
      }
      else if(b6==0){
        innerRad2 = innerRad2;
        numPoints2 = s2;
      }
      if(b5==1){
        speed2 = -speed2;
      }

      if(b3==0 && b4==0){
        console.log("fill");
        fR2 = p1;
        fG2 = p2;
        fB2 = p3;
        sR2 = sR2;
        sG2 = sG2;
        sB2 = sB2;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==1 && b4==0){
        console.log("stroke");
        fR2 = fR2;
        fG2 = fG2;
        fB2 = fB2;
        sR2 = p1;
        sG2 = p2;
        sB2 = p3;
        bR = bR;
        bG = bG;
        bB = bB;
      }
      else if(b3==0 && b4==1){
        console.log("background");
        fR2 = fR2;
        fG2 = fG2;
        fB2 = fB2;
        sR2 = sR2;
        sG2 = sG2;
        sB2 = sB2;
        bR = p1;
        bG = p2;
        bB = p3;
      }

      if(b1==1){ //all layers active
        push();
        translate(width*0.5, height*0.5);
        rotate(frameCount / speed1); // denominator controls speed
        strokeWeight(sWidth1);
        stroke(sR1,sG1,sB1); // change
        fill(fR1,fG1,fB1); //change
        star(0,0,winW-50,innerRad1,numPoints1); // change
        pop();
      }

      push();
      translate(width*0.5, height*0.5);
      rotate(frameCount / speed2); // denominator controls speed
      strokeWeight(sWidth2);
      stroke(sR2,sG2,sB2); // change
      fill(fR2,fG2,fB2); //change
      star(0,0,winW-50,innerRad2,numPoints2); // change
      pop();
  }





}

function serverConnected() {
  console.log('connected to the server');
}

function portOpen() {
  console.log('the serial port opened!');
}

//THIS IS WHERE WE RECEIVE DATA!!!!!!
//make sure you're reading data based on how you're sending from arduino
function serialEvent() {
  inData = serial.readLine();
  if(inData.length != 0){
    sensorReadings = split(inData, ",");
    p1 = Number(sensorReadings[0]);
    p2 = Number(sensorReadings[1]);
    p3 = Number(sensorReadings[2]);
    p4 = Number(sensorReadings[3]);
    s1 = Number(sensorReadings[4]);
    s2 = Number(sensorReadings[5]);
    b1 = Number(sensorReadings[6]);
    b2 = Number(sensorReadings[7]);
    b3 = Number(sensorReadings[8]);
    b4 = Number(sensorReadings[9]);
    b5 = Number(sensorReadings[10]);
    b6 = Number(sensorReadings[11]);
  }

}

function serialError(err) {
  console.log('something went wrong with the port. ' + err);
}

function portClose() {
  console.log('the port was closed');
}

// get the list of ports:
function printList(portList) {
  // portList is an array of serial port names
  for (var i = 0; i < portList.length; i++) {
    // Display the list the console:
   // print(i + " " + portList[i]);
  }
}

// star from P5 example here: https://p5js.org/examples/form-star.html
function star(x, y, radius1, radius2, npoints) {
  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 setLayer(currLayer){
  if(currLayer == 0){
      console.log("layer 0");
      //set layer 0 to variable vals
      speed = s1;
      fR = p1;
      fG = p2;
      fB = p3;
      sWidth = p4;
      innerRad = s2;
      numPoints = 5;
      //set others to self
      speed1 = speed1;
      fR1 = fR1;
      fG1 = fG1;
      fB1 = fB1;
      sWidth1 = sWidth1;
      innerRad1 = innerRad1;
      numPoints1 = numPoints1;
      speed2 = speed2;
      fR2 = fR2;
      fG2 = fG2;
      fB2 = fB2;
      sWidth2 = sWidth2;
      innerRad2 = innerRad2;
      numPoints2 = numPoints2;
  }
  else if(currLayer == 1){
      console.log("layer 1");
      //set layer 0 to variable vals
      speed1 = s1;
      fR1 = p1;
      fG1 = p2;
      fB1 = p3;
      sWidth1 = p4;
      innerRad1 = s2;
      numPoints1 = 5;
      //set others to self
      speed = speed;
      fR = fR;
      fG = fG;
      fB = fB;
      sWidth = sWidth;
      innerRad = innerRad;
      numPoints = numPoints;
      speed2 = speed2;
      fR2 = fR2;
      fG2 = fG2;
      fB2 = fB2;
      sWidth2 = sWidth2;
      innerRad2 = innerRad2;
      numPoints2 = numPoints2;
  }
    else if(currLayer == 2){
      //set layer 0 to variable vals
      console.log("layer 2");
      speed2 = s2;
      fR2 = p1;
      fG2 = p2;
      fB2 = p3;
      sWidth2 = p4;
      innerRad2 = s2;
      numPoints2 = 5;
      //set others to self
      speed = speed;
      fR = fR;
      fG = fG;
      fB = fB;
      sWidth = sWidth;
      innerRad = innerRad;
      numPoints = numPoints;
      speed1 = speed1;
      fR1 = fR1;
      fG1 = fG1;
      fB1 = fB1;
      sWidth1 = sWidth1;
      innerRad1 = innerRad1;
      numPoints1 = numPoints1;
  }
}

visual_synth_p5.ino

  int button1 = 4; //layer 1
  int button2 = 2; //layer 2
  int button3 = 7; //2-way up
  int button4 = 8; //2-way down
  int button5 = 12; //direction
  int button6 = 13; //inner rad/points
  int led1 = 3; // layer 1
  int led2 = 5; //layer 2

void setup() {
  // put your setup code here, to run once:
  pinMode(button1, INPUT);
  pinMode(button2, INPUT);
  pinMode(button3, INPUT);
  pinMode(button4, INPUT);
  pinMode(button5, INPUT);
  pinMode(button6, INPUT);
  pinMode(led1, OUTPUT);
  pinMode(led2, OUTPUT);
  Serial.begin(9600);
}

void loop() {
  // put your main code here, to run repeatedly:
  //analog sensors
  int inA0 = analogRead(A0); 
  int inA1 = analogRead(A1); 
  int inA2 = analogRead(A2); 
  int inA3 = analogRead(A3); 
  int inA4 = analogRead(A4);
  int inA5 = analogRead(A5); 
  //map sensors to values for P5
  int p1 = map(inA0, 0, 1023, 255, 0);
  int p2 = map(inA1, 0, 1023, 255, 0);
  int p3 = map(inA2, 0, 1023, 255, 0);
  int p4 = map(inA3, 0, 1023, 0, 255);
  int s1 = map(inA4, 0, 1022, 1, 25);
  int s2 = map(inA5, 0, 1022, 12, 3);
  
  //format and printing data to serial
  Serial.print(p1);
  Serial.print(",");
  Serial.print(p2);
  Serial.print(",");
  Serial.print(p3);
  Serial.print(","); 
  Serial.print(p4);
  Serial.print(",");
  Serial.print(s1);
  Serial.print(",");
  Serial.print(s2);
  Serial.print(",");
  
  if(digitalRead(button1)==HIGH){
     Serial.print("1,");
     //led output indicator
     analogWrite(led1, 20);
  }
  else if(digitalRead(button1)==LOW){
     Serial.print("0,");
     digitalWrite(led1, LOW);
    }
    
  if(digitalRead(button2)==HIGH){
     Serial.print("1,");
     analogWrite(led2, 20);
  }
  else if(digitalRead(button2)==LOW){
    Serial.print("0,");
    digitalWrite(led2, LOW);
  }
  
  if(digitalRead(button3)==HIGH){
     Serial.print("1,");
  }
  else if(digitalRead(button3)==LOW){
    Serial.print("0,");
  }

  if(digitalRead(button4)==HIGH){
     Serial.print("1,");
  }
  else if(digitalRead(button4)==LOW){
    Serial.print("0,");
  }
  
  if(digitalRead(button5)==HIGH){
     Serial.print("1,");
  }
  else if(digitalRead(button5)==LOW){
    Serial.print("0,");
  }
  
  if(digitalRead(button6)==HIGH){
     Serial.println("0");
  }
  else if(digitalRead(button6==LOW)){
    Serial.println("1");
  }
  
}