arduino

// punctuation serial communication
//int button1 = 0;

void setup() {
   // configure the serial connection:
   Serial.begin(9600);

   while (Serial.available() <= 0) {
    Serial.println("hello"); // send a starting message
  }
 
 }
 
void loop() {
 //handshaking -- wait for a request 
 if (Serial.available() > 0) {
    // read the sensor:
    int pot1 = analogRead(A0);
    // print the results:
    Serial.print(pot1);
    Serial.print(",");
    
    // read the sensor:
    int pot2 = analogRead(A1);
    // print the results:
    Serial.print(pot2);
    Serial.print(",");

   int pot1_button = analogRead(A2);
    // print the results:
    Serial.println(pot1_button);


 }
}

w.js

var serial; // variable to hold an instance of the serialport library
var portName = '/dev/cu.usbmodem1431'; // fill in your serial port name here

var slider1;
var slider2;
var button1=1;

var trump = {
  x: 0,
  y: 0,
  w: 100,
  h: 138,
  speedx: 0,
  speedy: 0,
};

var candidates = [];

var paddleL;
var paddleR;

var trumpSpeed = 8;
var paddleSpeed = 6;

var instructions = "Player 1 \nA = move up\nZ = move down\n\n\nPress any key to begin.";
var instructions2 = "Player 2 \nUp Arrow = move up \nDown Arrow = move down";
var replay = "Press ENTER to play again.";
var welcome = "Trumpong!";
var star;

var startHeight;
var stage = 0;
var player = 0;

var choose1 = "Player 1: Choose your candidate!";
var choose2 = "Now, Player 2: Choose your candidate!";
var errorMsg = "Candidate already in play, choose again!";
var error = false;

function preload() {
  trump.img = loadImage("assets/trumphead.png");
  star = loadImage("assets/star.png");
}

function setup() {
  createCanvas(1280, 600);
  smooth();

  imageMode(CENTER);
  rectMode(CENTER);



  fill(0, 0, 255);
  textStyle(BOLD);
  textFont("Georgia");
  textSize(48);

  // declare all candidates
  var ben = new Candidate("ben", 0, 0, 100, 147);
  candidates.push(ben);

  var carly = new Candidate("carly", 0, 0, 105, 145);
  candidates.push(carly);

  var chris = new Candidate("chris", 0, 0, 100, 154);
  candidates.push(chris);

  var jeb = new Candidate("jeb", 0, 0, 100, 141);
  candidates.push(jeb);

  var john = new Candidate("john", 0, 0, 100, 136);
  candidates.push(john);

  var marco = new Candidate("marco", 0, 0, 100, 136);
  candidates.push(marco);

  var mike = new Candidate("mike", 0, 0, 100, 137);
  candidates.push(mike);

  var rand = new Candidate("rand", 0, 0, 100, 134);
  candidates.push(rand);

  var ted = new Candidate("ted", 0, 0, 100, 130);
  candidates.push(ted);



  // load all candidates
  for (var i = 0; i < candidates.length; i++) {
    candidates[i].load();
  }


  serial = new p5.SerialPort(); // make a new instance of the serialport library
 // serial.on('list', printList); // set a callback function for the serialport list event
serial.on('connected', serverConnected); // callback for connecting to the server
 serial.on('open', portOpen); // callback for the port opening
  serial.on('data', serialEvent); // callback for when new data arrives
  serial.on('error', serialError); // callback for errors
 serial.on('close', portClose); // callback for the port closing

 // serial.list(); // list the serial ports
  serial.open(portName);

}

/////////////////////////// Serial Functions ///////////


// // 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:
//     println(i + " " + portList[i]);
//   }
// }

function serverConnected() {
 println('connected to server.'); }

function portOpen() {
  println('the serial port opened.');
}

function serialEvent() {
  // read a string from the serial port
  // until you get carriage return and newline:
  var inString = serial.readStringUntil('\r\n');
  //check to see that there's actually a string there:
 
  if (inString.length > 0) {
    if (inString !== 'hello'){
      var sensors = split(inString, ','); // split the string on the commas
      if (sensors.length > 2) { // if there are three elements
        slider1 = map(sensors[0], 0, 1023, 0, height); // element 0 is the locH
        slider2 = map(sensors[1], 0, 1023, 0, height); // element 1 is the locV
        button1 = sensors[2]; 
        
        println(sensors[0] + ", " + sensors[1] + ", " + sensors[2]);
      }
    }
  }
  serial.write('x'); //send a byte to request data
}



function serialError(err) {
  println('Something went wrong with the serial port. ' + err);
}

function portClose() {
  println('The serial port closed.');
}

//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function draw() {

 
  if (stage === 0) {
    homeScreen();
  }

  if (stage === 1) {
    pickPlayer();
  } else if (stage === 2) {
    playGame();
  } else if (stage === 3) {
    playAgain();
  }

}

////////////////////////// Stage 0 ////////////////////
function homeScreen() {
  background(255, 0, 0);

  image(star, width / 7, height / 3, 500, 500);
  image(trump.img, width / 7, height / 3, trump.w, trump.h);

  textSize(100);
  text(welcome, width / 2 - 50, height / 2 + 50, 200, 500);

  textSize(25);
  text(instructions, width / 2 + 100, height / 2, 500, 50);
  text(instructions2, width / 2 + 450, height / 2, 500, 50);

  if (keyIsPressed === true) {
    stage += 1;
  }
}

////////////////////////// Stage 1 ////////////////////

function pickPlayer() {
  background(255, 0, 0);

  // show candidate line up 
  for (var i = 0; i < candidates.length; i++) {
    candidates[i].lineUp(i);
    candidates[i].display();
  }
  textSize(35);
  textStyle(CENTER);

  if (player === 0) {
    text(choose1, width / 2, height / 3, 600, 100);
  } else {
    text(choose2, width / 2, height / 3, 800, 100);
  }

  if (error === true) {
    textSize(20);
    text(errorMsg, width / 2, height / 8 * 7, 600, 100);
  }

}

function keyTyped() {

  if (candidates[key] !== undefined && stage > 0) {
    if (paddleL === undefined) {
      paddleL = candidates[key];
      player += 1;
      console.log(player);
    } else if (paddleR === undefined) {
      if (candidates[key].name === paddleL.name) {
        error = true;
      } else {
        paddleR = candidates[key];
        stage += 1;
        setBoard();
      }
    }

  }
}

////////////////////////// Stage 2 ////////////////////

function playGame() {
  background(255, 0, 0);

  // load trump 
  image(trump.img, trump.x, trump.y, trump.w, trump.h);

  // keep trump moving 
  moveTrump();

  // keep trump on board
  if (trump.y > height || trump.y < 0) {
    bounceTrump();
  }

  // define candidates starting positions
  paddleL.display();
  paddleR.display();
  moveCandidates();


  // paddleL up and down controls ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // if (keyIsDown(65)) {
  //   paddleUp(paddleL);
  // }

  // if (keyIsDown(90)) {
  //   paddleDown(paddleL);
  // }

  // // paddleR up and down controls
  // if (keyIsDown(UP_ARROW)) {
  //   paddleUp(paddleR);
  // }

  // if (keyIsDown(DOWN_ARROW)) {
  //   paddleDown(paddleR);
  // }




  //~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
  // keep paddleL from moving off border of page
  if (paddleL.y <= 0) {
    paddleResetTop(paddleL);
  }

  if (paddleL.y >= height) {
    paddleResetBottom(paddleL);
  }

  // keep paddleR from moving off border of page
  if (paddleR.y <= 0) {
    paddleResetTop(paddleR);
  }

  if (paddleR.y >= height) {
    paddleResetBottom(paddleR);
  }

  // bounce trump off paddleL paddle
  if (trump.x >= getLeft(paddleL) && trump.x <= getRight(paddleL)) {
    if (trump.y >= getTop(paddleL) && trump.y <= getBottom(paddleL)) {
      trump.speedx = Math.abs(trump.speedx) * 1.1;
    }
  }

  // bounce trump off paddleR paddle
  if (trump.x >= getLeft(paddleR) && trump.x <= getRight(paddleR)) {
    if (trump.y >= getTop(paddleR) && trump.y <= getBottom(paddleR)) {
      trump.speedx = Math.abs(trump.speedx) * -1.1;
    }
  }

  // declare winners 
  if (trump.x > width) {
    declareWinner(paddleL);
  }

  if (trump.x < 0) {
    declareWinner(paddleR);
  }
}

////////////////////////// Stage 3 ////////////////////
function playAgain() {
  textSize(30);
  textAlign(CENTER);
  text(replay, width / 2, height / 2 + 100, 500, 200);

  if (button1 < 100) {
    stage = 2;
    setBoard();
  }
}


////////////////////// Declare functions //////////////


// candidate constructor function object
function Candidate(tempName, tempX, tempY, tempW, tempH) {
  this.name = tempName;
  this.x = tempX;
  this.y = tempY;
  this.w = tempW;
  this.h = tempH;

  this.load = function() {
    this.img = loadImage("assets/" + this.name + ".png");
  }

  this.display = function() {
    image(this.img, this.x, this.y, this.w, this.h);
  };

  this.lineUp = function(i) {
    this.x = width / 8 + 120 * i;
    this.y = height / 2;
    textSize(20);
    textAlign(CENTER);
    text(i + " - " + this.name, this.x, this.y + 100);
  }
  
  this.wins = function() {
    return this.name.toUpperCase() + " WINS!!!";
  }
  
  
}





// board setup
function setBoard() {
  paddleL.img = loadImage("assets/" + paddleL.name + ".png");
  paddleR.img = loadImage("assets/" + paddleR.name + ".png");

  trump.x = width / 2,
    paddleR.x = width - 50;
  paddleL.x = 50;

  startHeight = height / 2;

  trump.y = startHeight;
  paddleR.y = startHeight;
  paddleL.y = startHeight;

  trump.speedx = trumpSpeed;
  trump.speedy = trumpSpeed;
}

// Trump movements
function moveTrump() {
  trump.x = trump.x + trump.speedx;
  trump.y = trump.y + trump.speedy;
}

function bounceTrump() {
  trump.speedy = trump.speedy * -1;
}

// Paddle movements
function moveCandidates(){
  
  paddleR.y = slider1;
  paddleL.y = slider2;
}




//~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
function paddleResetTop(player) {
  player.y = 1;
}

function paddleResetBottom(player) {
  player.y = height - 1;
}

function getTop(paddle) {
  return paddle.y - paddle.h;
}

function getBottom(paddle) {
  return paddle.y + paddle.h;
}

function getLeft(paddle) {
  return paddle.x - paddle.w;
}

function getRight(paddle) {
  return paddle.x + paddle.w;
}

// Winner declaration 
function declareWinner(winner) {
  trump.speedx = 0;
  trump.speedy = 0;

  textAlign(CENTER);
  text(winner.wins(), width / 2, height / 2, 500, 200);

  stage += 1;
}