Nose Pong

This week, I made the simple game of pong. I was underwhelmed at the impressiveness of the game and I wanted more. My good buddy, David Yang, then introduced the idea of linking a webcam to P5 in order to make the paddle follow my motions. Below is the original version of my game.

I began researching online and getting help from David. His project includes a webcam, so he was familiar with the coding and was able to help me understand it more. Below is the code from P5.js.

let xBall ;

let yBall ;

let directionx = 3;

let directiony = 3;

var xPaddle;

var yPaddle;

var paddleWidth = 100;

var paddleHeight = 25;

var started = false;

let poseNet;

let vid;

let handX = 0;

let hand;

function setup() {

createCanvas(windowWidth, windowHeight);

rectMode(CENTER);

xBall = 100;

yBall = 100;

background(0)

vid = createCapture(VIDEO);

vid.hide();

poseNet = ml5.poseNet(vid, modelReady);

poseNet.on(‘pose’, gotPoses);

}

function gotPoses(poses) {

if (poses.length > 0) {

let newX = poses[0].pose.keypoints[0].position.x;

handX = lerp(handX, newX, 0.5);

hand = map(handX, 0, 640, 0, windowWidth);

}

}

function draw() {

background(137,207,240);

image(vid,0,0);

noStroke();

fill(255,0,120);

ellipse(xBall,yBall,20,20);

xBall += directionx;

yBall += directiony;

if (xBall >= width || xBall <= 0){

directionx = –directionx;

}

if (yBall >= height || yBall <= 0){

directiony = –directiony;

}

if ((xBall > xPaddle &&

xBall < xPaddle + paddleWidth) &&

(yBall + (50/2) >= yPaddle)) {

directionx *= –1;

directiony *= –1;

}

if (!started) {

xPaddle = windowWidth / 2;

yPaddle = windowHeight — 100;

started = true;

}

fill(0,255,255);

noStroke();

xPaddle = hand;

rect(xPaddle, yPaddle, paddleWidth, paddleHeight);

}

function modelReady(){

console.log(‘model ready’);

}

I added in ml5.js in order for the program to understand certain body parts through the webcam. The game runs based on window size, so the larger and smaller your internet window gets, P5 follows it and runs through each size.

I then set the code up to sense my nose moving, making the paddle move with it. It is kind of tricky to get the paddle in the precise location needed to bounce the ball back, but it works! Below is the final product of Nose Pong.