In continuation of the upcoming elections, I took a ICM sketch of Hillary & Trump as bouncing balls that I created last week and attached a button switch to make an element appear and a potentiometer to make the element move around the canvas.

When I try to merge the sensorValue to the an element of the sketch that I want to map it to, it doesn’t work. First off, I ran into a couple of obstacles while trying to link the sketch to the sensors:

1) I was running my p5 sketch in Firefox in the “New Private Window”, but I had better luck making the 2 programs communicate when I ran the p5 sketch on Chrome in the “New Incognito Window.”

2) Whenever the sensors didn’t run the values in the serial monitor, I tested the readings of the initial sensorValue (before the mapping line) to make sure data was coming out and what the initial readings were.

3) When something didn’t work after I made an adjustment, I would also shut down all the programs and start fresh to clear the buffer, especially after I keep pressing the buttons to upload the program.

4) When reading the values from the potentiometer, there doesn’t seem to be a huge range in the values. I see it reading from 350 – 500 and with really small variation when I turn the knob from one side to the other. And when I run just a plain sketch of an ellipse to the potentiometer, the ellipse moves only a small distance and not from one side of the screen to the other, even though I use the width of the screen to map out the values.

Right now I’m having problems making the Hillary ball appear with a button click. I see that the sensor values does change from 0 to 1 when clicked, but my p5 sketch isn’t registering under the draw functions. The problem, I think, is just how and where I’m writing my code in p5 so I just need to play around with that more. I also attempted to attached the potentiometer sensorValue to the Hillary ball so she can slide left to right, but that’s also not mapped out correctly in the p5 sketch so the potentiometer values isn’t moving. It was reading some sort of value before, but when I kept adjusting the code in the p5 sketch it stopped. It also could be from my Arduino sketch. I keep tinkering with the map values since the sensor wasn’t moving the ellipse from 0 to 320 on the x axis of the canvas. Despite this not working correctly, this whole exercise made me apply all the serial connection readings and videos that I learned about from the last 2 weeks. I just need to work on my debugging and coding better.

ADRUINO SKETCH FOR SERIAL COMMUNICATION
void setup() {
  // initialize serial communication at 9600 bits per second:
  Serial.begin(9600);
}

// the loop routine runs over and over again forever:
void loop() {
  // read the input on analog pin 0:
  //int sensorValue = analogRead(A0);
  int sensorOriginal = analogRead(A0);
  int sensorValue = map(sensorOriginal, 200, 600, 0, 320);
  //sensorValue = (sensorValue/4);
  //sensorValue = map(sensorValue, 0, 1023, 0, 320);
  //sensorValue = map(sensorValue, 684, 1023, 0, 320);
  // print out the value you read:
  Serial.println(sensorOriginal);
  int sensorValue2 = digitalRead(2);
  Serial.println(sensorValue2);
  delay(1);        // delay in between reads for stability
}

P5.JS SKETCH FOR SERIAL COMMUNICATION
var serial; // variable to hold an instance of the serialport library
var sensorValue = 0;		// ellipse position

// create a trump bouncy ball
 var ball = {
 x: 200,
 y: 30,
 speed: 0,
 };

var trump = {
 x: 180,
 y: 20,
 speed: 0,
 img: 0,
 visible: 1
 };

var clinton = {
 x: 0,
 y: 0,
 //speed: 0,
 img: 0,
 visible: 0,
 };

var gravity = 0.1;
 img = 0;

function preload() {
 trump.img = loadImage("./trump.png");
 clinton.img = loadImage("./clinton.png");
 }

function setup() {
 createCanvas(400, 400);
 serial = new p5.SerialPort(); // make a new instance of serialport libra
 serial.on('list', printList); // callback function for serialport list event
 serial.on('data', serialEvent);// callback for new data coming in
 serial.list(); // list the serial ports
 serial.open("/dev/cu.usbmodemfd121"); // open a port
 serial.write("X");
 }

function displayBall(ball_name) {
 //fill(random(255), 0, 0);

// head
 if(ball_name.visible) {
 image(ball_name.img, ball_name.x - 35, ball_name.y - 35, 70, 70);
 }
 //image(clinton_head_img, clinton.x, clinton.y, 50, 50);
 // ball
 // ellipse(ball.x, ball.y, 24, 24);
 }

function dropClintonBall() {
 clinton.y = clinton.y + 1;
 }

function moveTrumpBall() {
 trump.y = trump.y + trump.speed;
 trump.speed = trump.speed + gravity;
 }

function bounceTrumpBall() {
 if (trump.y > (height - 35)) {
 trump.speed = trump.speed * -0.95;
 }
 }

function draw() {
 background(255);
 stroke(255, 255, 255);
 strokeWeight(1);
 box_width = 100;
 box_height = 20;

for (var i = 0; i < 400; i += box_width) {
 //blue
 fill(102, 217, 255);
 rect(i, 0, i + box_width, box_height);
 //red
 fill(255, 0, 102);
 rect(i, 20, i + box_width, box_height);
 //white
 fill(random(255,240));
 rect(i, 40, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 60, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 80, i + box_width, box_height);
 fill(0, 0, 160, 50);
 fill(random(255,240));
 rect(i, 100, i + box_width, box_height);
 fill(102, 217, 255);
 rect(i, 120, i + box_width, box_height);
 fill(255, 0, 102);
 rect(i, 140, i + box_width, box_height);
 }

for (var i = 0; i < 400; i += box_width) {
 fill(255, 0, 102);
 star(25, 380, 5, 10, 5);
 star(75, 380, 5, 10, 5);
 star(125, 380, 5, 10, 5);
 star(175, 380, 5, 10, 5);
 star(225, 380, 5, 10, 5);
 star(275, 380, 5, 10, 5);
 star(325, 380, 5, 10, 5);
 star(375, 380, 5, 10, 5);
 }

displayBall(trump);
 moveTrumpBall();
 bounceTrumpBall();

displayBall(clinton);
 //dropClintonBall();
 //bounceClintonBall();

//noStroke();
 //fill(255, 0, 0)
 //fill(255, 0, 0, sensorValue);
 //rect(x, y, 50, 50);
 //text(sensorValue, 20, 20)
 // display

}

function mousePressed() {
 clinton.visible = 1;
 clinton.x = mouseX;
 //clinton.x = sensorValue;
 clinton.y = 360;

// if you click on trump, have him bounce up
 if(dist(trump.x, trump.y, mouseX, mouseY) < 50){
 trump.x = random(0, 400);
 trump.y = 20;
 trump.speed = 0;
 }

}

function star(x, y, radius1, radius2, npoints) {
 var angle = TWO_PI / npoints;
 var halfAngle = angle/2.0;
 beginShape();
 for (var a = 0; a < TWO_PI; a += angle) {
 var sx = x + cos(a) * radius2;
 var 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);
 }

// get the list of ports:
 function printList(portList) {
 for (var i = 0; i < portList.length; i++) { // Display the list the console: println(i + " " + portList[i]); } } function mousePressed() { serial.write("X"); } function serialEvent() { var inString = serial.readLine(); if (inString.length > 0) {
 inString = inString.trim();
 //sensorValue = Number(inString/4)
 sensorValue = Number(inString);
 println(sensorValue);
 }