Project Overview: 
The three of us collectively decided to make something similar to an arcade machine as it was a very exciting part of our childhoods. Therefore, the project is a collection of three games that are designed to be played using an Arduino controller. The games include Flappy Bird, a popular mobile game in which the player controls a bird and navigates through obstacles; Racing Game, in which the player controls a race car and avoids colliding with the randomly generated cars as the race car overtakes them; and Space Invaders, a classic arcade game in which the player controls a spaceship and fights against invading aliens.
Arduino to P5js communication:
int button = 2;
int pot = A0;
int lastPotValue;
int lastbutton;
long previousmill = 0;
long timebutton = 500;
void setup() {
// put your setup code here, to run once:
Serial.begin(9600);
pinMode(button, INPUT_PULLUP);
pinMode(pot, INPUT);
}
int getpot(){
int potValue = analogRead(pot)/255 ;
int temp;
if(potValue == 2 || potValue == 1){
temp = 1;
}else if(potValue == 3 || potValue == 4){
temp = 2;
}else{
temp = 0;
}
return temp;
}
void loop() {
int potValue = getpot();
int buttonState = !digitalRead(button);
long currentmill = millis();
Serial.println(String(buttonState) + "," + String(potValue));
if(buttonState == 1 && currentmill - previousmill >= timebutton){
previousmill = currentmill;
lastbutton = buttonState;
}
}
We implemented this using the web serial. Here is how it briefly works:
- The user connects an Arduino board to their computer using a USB cable.
- The user writes and uploads a sketch (see above for the code) to the Arduino board that defines the behavior of the board and the data that it will send to the computer.
- The user opens a P5.js sketch in their web browser and includes the p5.webserial.js library in their code.
- The user adds event listeners to their P5.js sketch that will be called when the user connects or disconnects from the Arduino board, when the Arduino board is ready to be connected to, when there is an error communicating with the Arduino board, or when data is received from the Arduino board.
- The user calls the getPorts() method of the p5.WebSerial object to check for any available Arduino boards. If an Arduino board is available, the portavailable event listener is called, which can be used to open a connection to the Arduino board.
- Once the connection to the Arduino board is established, the user can send data to the Arduino board using the send() method of the p5.WebSerial object. The user can also receive data from the Arduino board using the data event listener, which is called whenever data is received from the Arduino board.
- The user can use the received data from the Arduino board to control the behavior and appearance of their P5.js sketch. The user can also send data from the P5.js sketch to the Arduino board to control the behavior of the Arduino board.
- When the user is finished using the Arduino board, they can close the connection to the board using the close() method of the p5.WebSerial object.
Flappy Bird:
Code:
function restart(){
menu = 0;
bird = new Bird(WIDTH / 2, HEIGHT / 2, 30);
pipes = new Pipes(60, 200, 130);
SCORE = 0;
SCROLL_SPEED = 4;
lives = 5;
}
function getRndInteger(min, max) {
// https://www.w3schools.com/js/js_random.asp
return Math.floor(Math.random() * (max - min)) + min;
}
function StartGame(){
background(bg);
fill("#7cfc00");
rect(0, HEIGHT - GROUND_HEIGHT, WIDTH, HEIGHT);
bird.draw();
bird.update();
bird.checkDeath(pipes);
pipes.update();
pipes.drawPipes();
fill(255);
textSize(60);
textAlign(CENTER);
text(SCORE, WIDTH / 9, HEIGHT / 7);
textSize(30);
text("lives: "+lives,WIDTH - WIDTH / 4, HEIGHT / 9);
textAlign(CORNER);
}
class Bird {
constructor(x, y, size) {
this.x = x;
this.y = y;
this.size = size;
this.vely = 0;
}
draw() {
//fill("#eaff00");
//circle(this.x+112.5, this.y-112.5, this.size);
image(b,this.x-this.size, this.y-this.size,this.size, this.size);
//image("cow.jpg",this.x, this,y);
}
update() {
this.y += this.vely;
this.vely = lerp(this.vely, GRAVITY, 0.05);
this.y = Math.max(this.size / 2, Math.min(this.y, HEIGHT - GROUND_HEIGHT - this.size / 2));
}
flap() {
this.vely = -JUMP_HEIGHT;
jump.play();
}
checkDeath(pipes) {
for (var pipe of pipes.pipes_list) {
if (this.x + this.size / 2 > pipe.x && pipe.height && this.x - this.size / 2 < pipe.x + pipes.width) {
if (this.y - this.size / 2 <= pipe.height || this.y + this.size / 2 >= pipe.height + pipes.gap) {
// window.location.reload();
lives--;
oof.play();
if(lives === 0){
// losing1.play();
// restart();
// break;
window.location.reload();
}
pipes.pipes_list.splice(pipes.pipes_list.indexOf(pipe),1);
pipes.retq();
}
}
if (this.x - this.size / 2 > pipe.x + pipes.width && pipe.scored == false) {
SCORE += 1;
pipe.scored = true;
}
}
}
}
class Pipes {
constructor(width, frequency, gap) {
this.width = width;
this.frequency = frequency;
this.gap = gap;
this.pipes_list = [
{ x: 500, height: getRndInteger(this.gap, HEIGHT - GROUND_HEIGHT - this.gap), scored: false },
{ x: 500 + this.width + this.frequency, height: getRndInteger(this.gap, HEIGHT - GROUND_HEIGHT - this.gap), scored: false }
];
}
update() {
for (var pipe of this.pipes_list) {
pipe.x -= SCROLL_SPEED;
if (pipe.x + this.width <= 0) {
pipe.x = WIDTH;
pipe.height = getRndInteger(this.gap, HEIGHT - GROUND_HEIGHT - this.gap - this.gap);
pipe.scored = false;
}
}
}
retq(){
this.pipes_list = [
{ x: 500, height: getRndInteger(this.gap, HEIGHT - GROUND_HEIGHT - this.gap), scored: false },
{ x: 500 + this.width + this.frequency, height: getRndInteger(this.gap, HEIGHT - GROUND_HEIGHT - this.gap), scored: false }
];
}
drawPipes() {
fill((0),(150),(0));
for (var pipe of this.pipes_list) {
rect(pipe.x, 0, this.width, pipe.height);
rect(pipe.x, HEIGHT - GROUND_HEIGHT, this.width, -HEIGHT + pipe.height + GROUND_HEIGHT + this.gap);
}
}
}
The getRndInteger() function is a helper function that returns a random integer between two given values. This function is used to randomly generate the heights of the pipes in the game. The Bird and Pipes classes define the objects that appear in the game. The Bird class has a draw() method that is used to draw the bird on the screen, an update() method that is used to update the bird’s position and velocity, a flap() method that causes the bird to jump upwards, and a checkDeath() method that checks if the bird has collided with any of the pipes and ends the game if necessary. The Pipes class has an update() method that updates the positions of the pipes and a drawPipes() method that draws the pipes on the screen. Overall, the code defines a simple game in which the player controls a bird and must avoid colliding with pipes by jumping over them. The game keeps track of the player’s score and ends if the bird hits a pipe.
Racing Game: 
The generateCars() function is used to randomly generate cars that appear on the screen and the displayCars() function is used to draw the cars on the screen. The displayScore() function is used to display the player’s current score on the screen. The potentiometer returns three readings: 0,1, and 2 based on the positioning. Based on the number being returned by the potentiometer – we handle the car movement.
Space Invaders: 
function startPage(){
textSize(27);
fill(250);
text("Space invador",27,250);
textSize(15);
text("press enter to start",52,290);
}
function removeRocks(){
rocks.splice(0,rocks.length);
rocksctr = 0;
}
function displaybullets(){
for(let i = 0; i < bullets.length; i++){
bullets[i].display();
if(bullets[i].y < 0){
bullets.splice(i,1);
numBullets--;
}
}
// console.log(numBullets);
}
function generaterocks(){
let rand = int(random(0, 100));
let rand2 = int(random(0, 100));
if(rand % 7 == 0){
if(rand2 % 3 == 0){
if(rand2 % 2 == 0 && rand % 2 == 0){
rocks[rocksctr] = new boulders();
rocks[rocksctr].display();
// console.log(rocksctr);
rocksctr++;
}
}
}
}
function displayrocks(){
for(let i = 0; i < rocks.length; i++){
rocks[i].display();
// console.log(">",rocks.length);
let temp = false;
for(let j = 0; j < bullets.length; j++){
if(bullets[j].didcollide(rocks[i])){
temp = true;
bullets.splice(i,1);
numBullets--;
}
}
if(mainship.didcollide(rocks[i])){
rocks.splice(i,1);
rocksctr--;
gamestatus = "end";
bomb.play();
losing1.play();
}else if(rocks[i].y > height || temp){
rocks.splice(i,1);
rocksctr--;
}
}
}
var timechecker = 0.5;
function makebullet(x,y){
bullets[numBullets] = new bulletClass(x,y);
bullets[numBullets].display();
numBullets++;
}
Game Controls
Flappy Bird: Use the button on the arduino or the UP key to jump.
Racing Game: Use the potentiometer or left and right keys to control the car’s steering.
Space Invaders: Use the potentiometers or left and right keys to control the spaceship’s movement and button or UP key to fire lasers.
Conclusion
This project demonstrates how to create and play games using p5.js and Arduino. The project includes three games that can be controlled using potentiometers and push buttons, and can be easily extended to include additional games and custom controller designs. We’re particularly proud of the aesthetics of the games – we were able to recreate what we initally had in mind. Furthermore, we had a lot of bugs which wouldn’t let the games run smoothly. We figured out how to implement the games smoothly by making changes in our algorithms and by handling specific types of errors which were mostly given by the arduino board. However, there is no proper restart function for flappy bird – if you lose, the canvas simply starts from scratch.
My contribution to the project was coding the flappy bird game, handling errors, debugging, and the documentation.