• Black Vimeo Icon

©2020 BY JENNY LIN

Analog Control Over Interacting Diamonds

I connected 4 potentiometers to make the serial application that controls the website I made in ICM class.



  • The first potentiometer is to control the amount of the diamonds.

  • The second potentiometer is to control the color of the diamonds.

  • The third potentiometer is to control the size of the diamonds.

  • The forth potentiometer is to control the shape and speed of the diamonds.



Codes


In Arduino


In p5js

let angle1, angle2;

let diamonds = [];

let serial;

let Num, Col, Siz, Shap;



function setup() {

serial = new p5.SerialPort();

serial.open("/dev/cu.usbmodem1421");

serial.on('data', gotData);

createCanvas(600, 600);

angleMode(DEGREES);

number = createP('Number ');

number.style('align', 'center');

dColor = createP('Color ');

dColor.style('align', 'center');

size = createP('Size ');

shape = createP('Shape ');

for (i = 0; i < 20; i++) {

let d = new Diamond(random(3 / 2 * width), random(3 / 2 * height), random(width / 2), random(150, 255), random(50, 100), random(150, 255), random(1, 2))

diamonds.push(d);

}

}


function gotData() {

var currentString = serial.readStringUntil("\r\n");

if (!currentString) return;

var sensorReadings = split(currentString, ",");

if (sensorReadings.length > 3) {

Num = int(sensorReadings[0]);

Col = int(sensorReadings[1]);

Siz = int(sensorReadings[2]);

Shap = int(sensorReadings[3]);

}

}


function draw() {

background(20, 30);

for (d = 0; d < Num; d++) {

diamonds[d].show();

diamonds[d].move();


let overlapping = false;

for (let other in diamonds) {

if (diamonds[d] !== diamonds[other] && diamonds[d].intersect(diamonds[other])) {

overlapping = true;

}

}

if (overlapping) {

diamonds[d].fillColor();

} else {

diamonds[d].show();

}

}

}


class Diamond {

constructor(_x, _y, _r, _colr, _colg, _colb, _strW) {

this.x = _x;

this.y = _y;

this.r = _r;

this.colr = _colr;

this.colg = _colg;

this.colb = _colb;

this.strW = _strW

}


show() {

stroke(Col, this.colg, this.colb);

strokeWeight(this.strW);

angle1 = map(millis(), 0, 1000, 0, 180);

angle2 = map(millis(), 0, Shap, 180, 0);


push();

translate(this.x, this.y);

beginShape();

vertex(constrain(Siz * cos(angle1), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle1), -Siz, Siz));

vertex(constrain(Siz * cos(angle2), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle2), -Siz, Siz));

endShape();


rotate(180);

beginShape();

vertex(constrain(Siz * cos(angle1), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle1), -Siz, Siz));

vertex(constrain(Siz * cos(angle2), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle2), -Siz, Siz));

endShape();

pop();

}


move() {

this.x += random(-5, 5);

this.y += random(-5, 5);

}


intersect(other) {

let d = dist(this.x, this.y, other.x, other.y);

return (d < (this.r + other.r) / 2);

}


fillColor() {

fill(Col, this.colg, this.colb);

push();

translate(this.x, this.y);

beginShape(TRIANGLES);

vertex(constrain(Siz * cos(angle1), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle1), -Siz, Siz));

vertex(constrain(Siz * cos(angle2), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle2), -Siz, Siz));

endShape();


rotate(180);

beginShape(TRIANGLES);

vertex(constrain(Siz * cos(angle1), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle1), -Siz, Siz));

vertex(constrain(Siz * cos(angle2), -Siz, Siz), 0);

vertex(0, constrain(Siz * sin(angle2), -Siz, Siz));

endShape();

pop();

}

}


#ITP #PComp #PhysicalComputing #serialCommunication #analog #sensor #potentiometer #website #p5js