Project 1: Alt Pong

For my first project I decided to create a game using a joystick with the Arduino. The Arduino would then pair to the P5.serial control app which would help it run smoothly in P5.js.

I created a makeshift ukulele from cardboard. I then glued it to make sure it could hold the weight of someone tugging on a string. I taped the string to the back side and wrapped the other side around the joystick so that when pulled it will pull the paddle. It is a one person game pong.

I used a Arduino that connected to a P5.serialmonitor which then allowed me to create a pong game in P5.js. I had to just change some things to make sure that the joystick would read and I would be able to use it. The joystick connected to the Arduino by using its 5V, GRN, and VRx so that moving the joystick in the x position would change the paddle.

Underneath is the code for the Pong game followed by the Arduino code. I combined the Pong game that I created and the code from where I can read the serial input from the Arduino Joystick.

var xBall = Math.floor(Math.random() * 300) + 50;
var yBall = 50;
var xSpeed = (2, 7);
var ySpeed = (-7, -2);
var score = 0


var serial;
var portName = '/dev/tty.usbmodem14101';
var x_input = 300;
var y_input = 0;
let ex;
function setup() {
createCanvas(600, 600);
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.open(portName);
}
function draw() {
ex = x_input;
background('#a7d8dc'); 
fill('#e63b49');
  if (ex > 0) {
  rect(ex, 575, 90, 15);
  }
  
  
  
  
  move();
  display();
  bounce();
  paddle();
  
  rect(10,10,150,40)
  fill('#f1f9ef');
  rect(12,12,146,36)
  fill('#477a9d');
  textSize(30);
  text("Score: " + score, 15, 40);
}


function move() {
  xBall += xSpeed;
  yBall += ySpeed;
}
function bounce() {

  if (xBall < 10 ||
    xBall > 600 - 10) {
    xSpeed *= -1;
  }
  if (yBall < 10 ||
    yBall > 600 - 10) {
    ySpeed *= -1;
  }
}
function display() {
  fill('#233959');
  ellipse(xBall, yBall, 30, 30);
}
function paddle() {
  if ((xBall > ex &&
      xBall < ex + 90) &&
    (yBall + 10 >= 575)) {
    xSpeed *= -1;
    ySpeed *= -1;
    score++;

  }
}

function serverConnected(){
console.log('connected to the server');
}
function portOpen(){
console.log('the serial port opened!');
}
function serialEvent(){
var data = serial.readLine();
if(data === "") return;
var split = data.split(',');
console.log(split[0], split[1]);
x_input = split[0];
y_input = split[1];
}
function serialError(err){
console.log('something went wrong with the port. ' + err);
}
function portClose(){
console.log('the port was closed');
}
function printList(portList) {
for (var i = 0; i < portList.length; i++) {
print(i + " " + portList[i]);
}
}

#define VRX_PIN  A0 
#define VRY_PIN  A1 

int xValue = 0; 
int yValue = 0; 

void setup() {
  Serial.begin(9600) ;
}

void loop() {
  xValue = analogRead(VRX_PIN);
  yValue = analogRead(VRY_PIN);
  
  //Serial.print("x = ");
  Serial.println(xValue);
  delay(10);
}