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 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.on(‘pose’, gotPoses);

}

function gotPoses(poses) {

if (poses.length > 0) {

let newX = poses.pose.keypoints.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;

}

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

directionx *= –1;

directiony *= –1;

}

if (!started) {

started = true;

}

fill(0,255,255);

noStroke();