pong-knob.js

// constant speed
// knob toggles paddle direction (moving up or moving down)
// paddle never stops moving

var serial; // variable to hold an instance of the serialport library
var sensorValue;

var paddle;
var ball;

function Ball() {
  this.x = width/2;
	this.y = height/2;
  this.diameter = 6;
  
  this.xSpeed = 1;
  this.ySpeed = 2;
  
  this.inBounds = true;
  
  this.display = function() {
    fill(255);
		noStroke();
    rect(this.x, this.y, this.diameter, this.diameter);
  };
  
  this.move = function() {
    // detect if ball is in same xPos as paddle
    if (this.x-this.diameter/2 <= paddle.x+paddle.width/2) {
      // if the paddle is at the same vertical location as ball
      if (this.y >= paddle.y-paddle.height/2 && this.y <= paddle.y+paddle.height/2) {
        this.inBounds = true;
        this.xSpeed = -this.xSpeed;
      } else {
        this.inBounds = false;
      }
    }
    
    if (this.x >= width-this.diameter/2) {
      this.xSpeed = -this.xSpeed;
    }
    
    if (this.y >= height-this.diameter/2 || this.y <= this.diameter/2) {
      this.ySpeed = -this.ySpeed;
    }
    
    if (this.inBounds) {
    	this.x = this.x + this.xSpeed;
    	this.y = this.y + this.ySpeed;
    } else {
      // player missed ball
      this.x = -15;
      this.y = -15;
      this.xSpeed = 0;
      this.ySpeed = 0;
      background(255,0,0);
    }
    
    this.reset = function() {
      this.x = width/2;
			this.y = height/2;
      
      this.xSpeed = 1;
      this.ySpeed = 2;
  
  		this.inBounds = true;
    };
  };

}

function Paddle() {
	this.x = 15;
	this.y = height/2;
	this.width = 5;
	this.height = 35;
  
  this.speed = 0;
	
	this.display = function() {
		fill(255);
		noStroke();
		rect(this.x, this.y, this.width, this.height);
	};
  
  this.move = function() {
    // detect if mouse is outside vertical canvas dims
    if (this.y > height-this.height/2) {
      this.y = height-this.height/2;
    } else if (this.y < 0+this.height/2) {
      this.y = this.height/2;
  	} else {
    	this.y = this.y + this.speed;
    }
  };
}

// 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 setup() { 
  createCanvas(300, 300);
  
  //initialize serial
  serial = new p5.SerialPort(); // make a new instance of  serialport library
  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.usbmodem1411"); // open a port
  serial.write("X");
  
  
	rectMode(CENTER);
  ellipseMode(CENTER);
  
  // create paddle and ball
	paddle = new Paddle();
  ball = new Ball();
} 

function draw() { 
  background(0);
  
  fill(255);
  if (paddle.speed == 2) {
    // up arrow
    triangle(20, 15, 30, 15, 25, 25);
  } else {
    triangle(20, 25, 30, 25, 25, 15);
  }
  
  
  paddle.display();
  paddle.move();
  
  ball.display();
  ball.move();
}

function mousePressed() {
  ball.reset();
}


function serialEvent() {
  var inString = serial.readLine();
  if (inString.length > 0) {
    inString = inString.trim();
    sensorValue = Number(inString);

    if (sensorValue <= 200) {
      // paddle moves up
      paddle.speed = 2;
    } else {
      // paddle moves down
      paddle.speed = -2;
    }
    serial.write("X");
  }
}