​

//visuals:

var r = 255;

var g = 255;

var b = 255;

var a = 0; //rotating angle

var aSpeed = 0.05; //rotating speed

var scalingSpeed = 1.1; //scaling speed

var w = 0; //squares w & h

var s = 20; //slider/button w & h

var x1 = 20; //slider 1    //controlled by pot1

var y1 = 20; //slider 1

var x2 = 20; //slider 2    //controlled by pot2

var y2 = 60; //slider 2

var sliderLength = 700 / 4; //width/4

var sliderStart = 20;

var sliderEnd = 20 + sliderLength;

var button = 0;            //controlled by button  

​

//serial communication

var serial;

var portName = '/dev/cu.usbmodem1451';

​

function setup() {

  //visuals:

  smooth();

  createCanvas(700, 700);

  rectMode(CENTER);

  angleMode(DEGREES);

​

  //serial communication:

  serial = new p5.SerialPort();

  serial.on('connected', serverConnected);

  serial.on('open', portOpen);

  serial.on('data', serialEvent);

  serial.on('error', serialError);

  serial.on('close', portClose);

  serial.list();

  serial.open(portName);

}

​

function serverConnected() {

  console.log('connected to server.');

}

​

function portOpen() {

  console.log('the serial port opened.')

}

​

function serialError(err) {

  console.log('Something went wrong with the serial port.' + err);

}

​

function portClose() {

  console.log('The serial port closed.');

}

​

function serialEvent() {

  var inString = serial.readLine(); //read a string of three sensor readings 

  var sensors = split(inString, ",");

  if (sensors.length > 2) {

    //map pot1 value to slider1 xposition x1

    x1 = map(sensors[0], 0, 1023, sliderEnd, sliderStart);

    //map pot2 value to slider2 xposition x2

    x2 = map(sensors[1], 0, 1023, sliderEnd, sliderStart);

    //button state 1 or 0 to change color

    button = sensors[2]; //? 1 & 0

  }

}

​

function draw() {

  //visuals:

  background(0);

​

  //slider1(x1) controlling rotating speed

  strokeWeight(1);

  fill(255);

  text("drag to change rotating speed", sliderEnd + 20, 25);

  //slider1 line

  stroke(255);

  strokeWeight(3);

  line(sliderStart, y1, sliderEnd, y1);

  //function controlled by serial

  moveSlider1(x1);

​

​

  //slider2(x2) controlling scaling speed

  strokeWeight(0.5);

  fill(255);

  text("drag to change scaling speed", sliderEnd + 20, 65);

  //slider2 line

  stroke(255);

  strokeWeight(3);

  line(sliderStart, y2, sliderEnd, y2);

  //function controlled by serial

  moveSlider2(x2);

​

​

  //button to change color

  strokeWeight(0.5);

  fill(255);

  text("click to change color", sliderEnd + 20, 105);

  stroke(255);

  rect(20, 100, s, s);

  //function controlled by serial

    buttonPressed(button);

​

  //loop of squares

  translate(width / 2, height / 2);

  rotate(a);

  for (var i = 0; i < 10; i++) {

    var w = width / 10 * sin(frameCount * scalingSpeed) + 60 + i * 40;

    a = a + aSpeed;

    var c = color(r, g, b, i * 25);

    stroke(c);

    strokeWeight(6);

    noFill();

    rect(0, 0, w, w);

  }

}

​

function buttonPressed(button) {

  if (button == 1) {

    r = random(0, 255);

    g = random(0, 255);

    b = random(0, 255);

  }

}

​

function moveSlider1(_x1) {

  fill(0);

  rect(_x1, y1, s, s);

  aSpeed = map(_x1, sliderStart, sliderEnd, 0, 0.5);

}

​

function moveSlider2(_x2) {

  fill(0);

  rect(_x2, y2, s, s);

  scalingSpeed = map(_x2, sliderStart, sliderEnd, 0, 10)

}