Author: Mudi Khaled Alkhaaldi

 

Concept : “Frenzy Jump”

For my project, I decided to create a simple game on p5js.

Idea of the game : For the Arduino part, there are two buttons one functions as a “restart button” to restart the game after losing, and the other functions as an action  button to make the player “triangle” to jump.
The game starts with a background that says “Press red button to start and white button to jump”, upon pressing the red red button the screen will start the game with the player being a “triangle”, as per instruction at the start the user will press the white button for the player to jump over rectangular obstacles, throughout the game there are golden “coins” which are ellipses created to gain extra points on the scoreboard that can be seen on the top right corner of the game. When the user fails with jumping over a certain obstacle, the screen will give you a message saying “GAMEOVER” . To restart the game, the user should press on the red button, and the game will automatically start again.

Inspiration:

I got this idea from a game i think most people have played once in their life, view the image below :

Components:

• 2 LED buttons , red and white
• Resistors are built in the led button i did not use the LED side of the button therefore i did not add extra resistors on the breadboard
• 6 jumper wires

Controller:

Prototype 1 :

Final prototype :

User Experience and Gameplay :

IMG_4787

IMG_4783

IMG_4784

Embedded sketch :

Schematics:

 

its probably incorrect but i tried

 

Testing in Arduino Serial Port :

References :

P5js code : https://editor.p5js.org/mka413/sketches/kwS7JN7Wh

The code that made me proud: I cant choose only one part, because if i must say i am very proud of myself, and what i have achieved this semester, to knowing nothing about coding to creating this simple yet successful simple game. What about difficulties? i will talk about that later on in my blog post.

How does Arduino work with p5js? :

Starting with the code in Arduino after I’ve set up the connections in the controller i wrote the lines of code that we were taught in class about Serial Data communication and put in the corresponding pin numbers for the “restart” and “action”(jump) buttons also i used the Function (pinMode) as  an input for my pins , and the function digitalRead for my pins to be read in values of :false or true lastly, i used the Serial.println to send/print serial data to the port as seen in the lines of code below :

int RedButton= 7;
int whiteButton= 8;
bool isActionButtonPressed = false; //start with false as the buttons are not pressed 
bool isRestartButtonPressed = false;


void setup() {
  Serial.begin(9600); // setting the baud rate for serial data communication 

  pinMode(RedButton, INPUT_PULLUP); 
  pinMode(whiteButton, INPUT_PULLUP);


}

void loop() {
//sending signals whether the buttons are pressed and giving true or false statements to confirm 
  if(digitalRead(RedButton)) {
    if(!isActionButtonPressed) {

      eventActionButtonPressed(RedButton);

      isActionButtonPressed = true;
    }
  }
  else {
    if(isActionButtonPressed) {

      eventActionButtonReleased(RedButton);

      isActionButtonPressed = false;
    }  
  }

  if(digitalRead(whiteButton)) {
    if(!isRestartButtonPressed) {

      eventRestartButtonPressed(whiteButton);

      isRestartButtonPressed = true;
    }
  }
  else {
    if(isRestartButtonPressed) {

      eventRestartButtonReleased(whiteButton);

      isRestartButtonPressed = false; //// printing data to the serial port void eventActionButtonPressed(int pin) 
    }  
  }

}

// printing data to the serial port void eventActionButtonPressed(int pin) 
void eventActionButtonPressed(int pin) {
  Serial.println(String(pin) + ":pressed");
}

void eventActionButtonReleased(int pin) {
  Serial.println(String(pin) + ":released");
}

void eventRestartButtonPressed(int pin) {
  Serial.println(String(pin) + ":pressed");
}

void eventRestartButtonReleased(int pin) {
  Serial.println(String(pin) + ":released");
}

 

After finishing up the Arduino code, now its time to begin serial data communication in p5JS, with firstly adding the ready web serial file that was made available for us, then in the actual p5js sketch code i added these lines of code to make serial data communication work with Arduino IDE :

// Function to read serial data
function readSerial(data) {
  const pin = data.split(':')[0]; 
  const action = data.split(':')[1];
  
  console.log(data);
  
  if(pin == "7" && action == "pressed") {
    if(!player.isJumping) {
      player.isJumping = true;
      player.timeJump = millis();
      player.forceY = -10;
    }
  }
  
   if(pin == "8" && action == "pressed") {
      if(!gameStarted) {
        gameStarted = true;
      }
     
     if(gameover) {
        gameover = false;
        score = 0;
        player.posX = width / 3;
       
        for(const o of obstacles) o.posX += width;

      }
    }

}

// Function to handle key presses
function keyPressed() {
  // If space is pressed, set up serial communication
  if(key == " ") {
    setUpSerial();
  }
  
  // press f to play the game in fullscreen
  if(key == 'f') {
    const fs = fullscreen();
    fullscreen(!fs);
  }
}
// this function is called every time the browser window is resized
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

Difficulties :

I had a lot of difficulties in making my initial acrylic controller to work, which i firstly thought there must be a problem with my code, after numerous attempts in trying to make the button and flip switch to work, i gathered that the connections were not correct or they have been short circuited. Thinking fast, i created the usual breadboard  connections with push button switches that worked instantly when uploading the code to my arduino. Also i had trouble with making the serial data communication to work on p5js where the browser would not pop up so i can make the connection to the serial port, which was nerve wrecking but i eventually after trial and error i got it to work perfectly.

My initial Conntroller :

Changes for the future:

I would really liked to have my first controller to work, it looked really cool, and would have fit in more with my game and its aesthetic. Still i would like to advance more in my coding skills to create something much more complex. Adding more difficult obstacles, and increasing the speed the longer you play, with a high score page also.

 

 

 

 

 

 

“frenzy jump”

so previously i thought about making an instrument using the serial communication between arduino and p5, that turned out to be very difficult , i could have done it, but unfortunately with the time on hand i could not get it finished on time. therefore, i decided to create a very simple game on p5js that consists of a ball jumping over obstacles, and for the arduino part, i have created a remote switch/button panel that contains the arduino, and 4 different components, but i will use only two. The 4 components are 3 paddle switches, and one button, i will use one paddle switch, and one button to control the ball in the game.

My switch panel controller :

components:

Arduino protoshield

arduino board

3 paddle switches

one button

Initial code :

const player = {
  posX: 0,
  posY:  0,
  size: 50,
  forceY: 0,
  isJumping: false
}

const obstacles = [{
  posX: 600,
  height: 50,
  width: 70
},{
  posX: 1800,
  height: 50,
  width: 70
},{
  posX: 2500,
  height: 50,
  width: 70
}];

const gravity = 0.3;
const mapSpeed = 5;

const floorPosition = 100;

let gameover = false;

function setup() {
  createCanvas(window.innerWidth, window.innerHeight);
  
  player.posX = width / 3;
  player.posY = height - floorPosition - 100;
  
}

function draw() {
  background(0);
  
  if(!gameover) {
    
    // Check for serial connection
    if(!serialActive) {
      fill(255);
      text("Press space to select serial port.", 20, 30);  
    }
    else {
      fill(255);
      text("Connected", 20, 30);  

    }

    // Draw game
    drawFloor();
    drawObstacles();
    drawPlayer();


    // Move game
    movePlayer();
    moveObstacles();
  }
}

function drawFloor() {
  fill(255);
  
  rect(0, height - floorPosition, width, floorPosition);
}

function drawPlayer() {
  fill(255, 150, 0);
  
  ellipse(player.posX, player.posY, player.size, player.size);
}

function drawObstacles() {
  fill(255);
  for(o of obstacles) {
    rect(o.posX, height - floorPosition, o.width, -o.height);    
  }
}

function testCollisions(x, y) {
  // Test collide with floor
  if(player.forceY > 0 && y > height - floorPosition - player.size/2) {
    return true;
  }
  
  for(o of obstacles) {
    if(x + player.size / 2 > o.posX && x - player.size / 2 < o.posX + o.width && y > height - floorPosition - o.height - player.size / 2) {
      return true;  
    }
  }
  
  return false;
}

function movePlayer() {
  
  if(testCollisions(player.posX, player.posY)) {
    player.posX -= mapSpeed;
    player.isJumping = false;
    
    if(player.posX < 0 - player.size) {
      // gameover
      gameover = true;
    }

  }
  else if(player.posX < width / 3) {
    player.posX += 0.5;
  }
  
  const nextPos = player.posY + player.forceY;
  
  if(testCollisions(player.posX, nextPos)) {
    player.forceY = 0;
    player.isJumping = false;
  }
  else {
    player.posY += player.forceY;
    player.forceY += gravity;
  }
  
  
}

function moveObstacles() {
  for(o of obstacles) {
    o.posX -= mapSpeed;
    
    if(o.posX < -o.width) {
      o.posX = random(width, width*1.5);
      o.width = random(50, 200);
      o.height = random(20, 200);
    }
  }  
  
  
}

function readSerial(data) {
  const pin = data.split(':')[0]; 
  const action = data.split(':')[1];
  
  console.log(action);
  
  if(action == "pressed") {
    pressed = true;
  }
  else {
    pressed = false;
  }

}

function keyPressed() {
  if(key == " ") {
    setUpSerial();
  }
  
  if(key == 'z' && !player.isJumping) {
    player.isJumping = true;
    player.forceY = -8;
  }
}

 

 

idea of possibly how the game will look like:

 

Exercise 1

In this exercise, a potentiometer connected to an Arduino has been employed to influence the horizontal movement of an ellipse in p5.js. As you turn the potentiometer, the ellipse smoothly moves from side to side.

Exercise 2 :

Concept: Controlling the brightness of an LED using a slide bar in p5js

The left side of the slide bar (owl) will dim the brightness of the LED and the right side of the slide bar (sun) will make the LED brighter. We used the PWM pin 5 for the LED
a 10 K ohm resistor and two jumper wires to make the connection

code :

let brightness = 0; 
let slider;
let img;

//preload images to make sure everything is loaded before initializing the rest of the code
function preload(){
  img= loadImage('sun.png');
  img2 = loadImage('owl.png');
}
function setup() {
  createCanvas(400, 400);
  //create slider
  slider = createSlider(0, 255, 100);
  slider.position(width/2-50,height/2+130);
  slider.style('width', '80px');
}
function draw() {
  background('black');
  image(img,235,130,130,180); 
  image(img2,10,140,160,160);
  
  let val = slider.value();
  brightness = val;
  
  // instructions
  textAlign(CENTER,CENTER);
  textSize(12);
  fill(255)
  textStyle(BOLD)
  text("Controling the brightness of the LED using the slider ",width/2,100);
  
  //connects the serial port
  if (!serialActive) { 
    textSize(10);
    text("Press Space Bar to select Serial Port", 100, 30);
  } else {
    textSize(10);
    text("Connected",100,30);
  }
   
  

 

 

The writer says that in the past, people thought it was better to keep disabilities hidden when making things, and that’s not good. It doesn’t just hide a part of the person but can also make them feel like they should be embarrassed about their disability, which is a part of who they are.

They talk about things made for people with disabilities, like glasses. Glasses show how some people don’t follow the old way of thinking. There are many types and styles of glasses, so people can choose what feels comfy and looks good to them. Some people even wear glasses just because they like how they look, even if they don’t need them to see better. But when they talk about something like a fake leg for someone who lost a leg, some people might think it doesn’t look good and hide it, even if it works fine. I really think this should change. No one should feel bad about having a disability.

I think the main problem isn’t the disability itself; it’s more about the places and things around that make it hard for people with disabilities. When places don’t have things that make it easy for them, it’s tough for them to do things like everyone else. So, if we make places easy to use for everyone and remove things that make it hard, it can help people with disabilities do things more easily and feel like they’re a part of everything.

Lastly, I agree that these things should be simple. When we make things for people with disabilities, the main goal is to help them. The things should be easy for them to use without making them feel stressed.

Concept :

programs used:
sampler

arduino

p5js

For my concept i would like to make an instrument that plays according to what i programmed on p5js.

i am still not sure, but for now this is my initial idea.

i got the idea from this Youtube video :

I agree with Bret Victor about how our hands are essential for interacting with things. He talks about the problems with the “Picture Under Glass” idea, where we use our hands to touch a flat screen. But I think things have changed now because of new technologies like augmented reality, virtual reality, and haptic (touch) devices. While touchscreens are good, we shouldn’t only depend on them. We should look into new ways that make using computers feel more natural and easy, like haptic feedback. This can make our computer interactions more exciting.  Just think about being able to feel the texture of something in a virtual world or moving it around with your hands – when you think about it , how is that even possible? there’s a million of “how’s?” in my head but i guess we will wait and see. Instead of picking just one way, we should try to use different ways together to make the computer experience the best it can be. Combining touch, voice, and visuals can give us the most amazing and easy way to use computers all over.

Concept :
For our musical instrument, we decided to craft an innovative instrument using an Ultrasonic sensor, a button, and a Buzzer. To kick off the musical vibes, just gently hold down the button. Now, here’s where it gets interesting when you wave your hand in front of the ultrasonic sensor at varying distances it unveils a different array of notes!

 

IMG_4039

 

 

 

 

Code snippet :

int trig = 10;
int echo = 11;
int buttonPin;
long duration;
long distance;
void setup() {
pinMode(echo, INPUT);
pinMode(trig, OUTPUT);
Serial.begin(9600);
}
void loop() {
digitalWrite(trig, LOW); //triggers on/off and then reads data
delayMicroseconds(2);
digitalWrite(trig, HIGH);
delayMicroseconds(10);
digitalWrite(trig, LOW);
duration = pulseIn(echo, HIGH);
distance = (duration / 2) * .0344; //344 m/s = speed of sound. We're converting into cm
int notes[7] = {261, 294, 329, 349, 392, 440, 494}; //Putting several notes in an array
// mid C D E F G A B
buttonPin = analogRead(A0); 
if (distance < 0 || distance > 50 || buttonPin < 100) { //if not presed and not in front
noTone(12); //dont play music
}
else if ((buttonPin > 100)) { //if pressed
int sound = map(distance, 0, 50, 0, 6); //map distance to the array of notes
tone(12, notes[sound]); //call a certain note depending on distance
}
}

 

 

 

Challenges:
I wouldn’t call this one a challenge but more of a hiccup really was that we found ourselves repeatedly unplugging and replugging them due to connectivity issues and the Arduino kept on giving errors.

For this assignment i attempted to make  temperature sensor readings using the TMP 36 , and controlling a set of LED’s with a potentiometer.

Temperature sensor components :

• Four LED’s : blue, green, yellow, and red.
• Temperature sensor TMP 36
• Ten jumper wires
• Four 330 ohm resistors

concept:
The TMP 36 is at first measuring the temperature of the room at the moment, the LED lights light up according to how warm or cool the environment is, as you can see from the video below, before placing my finger on the TMP 36 the temperature was ranging from 23 degrees to 24 degrees (yellow LED), after placing my finger on the sensor the temperature was reading a range of 26 degrees to 27 degrees Celsius (red LED).

Code :

const int sensorPin = A0;
const float baselineTemp = 18.5;


void setup() {
  // put your setup code here, to run once:

Serial.begin(9600);
for ( int pinNumber = 2; pinNumber < 6; pinNumber++)
{
  pinMode(pinNumber, OUTPUT);
  digitalWrite(pinNumber, LOW);
}


}

void loop() {
  // put your main code here, to run repeatedly:

int sensorVal = analogRead(sensorPin);

Serial.print("Sensor Value: ");
Serial.println(sensorVal);


float voltage = (sensorVal / 1024.0) * 5.0;

Serial.print(", Volts: ");
Serial.print(voltage);

Serial.print("' degrees C: ");
float temperature = (voltage - 0.5) * 100;
Serial.println(temperature);


if (temperature < baselineTemp + 1.5)
{
  digitalWrite(2, LOW);
  digitalWrite(3, LOW);
  digitalWrite(4, LOW);
  digitalWrite(5, LOW);
  
}


 else if (temperature >= baselineTemp + 1.5 && temperature < baselineTemp + 3)
 {
  digitalWrite(2, HIGH);
  digitalWrite(3, LOW);
  digitalWrite(4, LOW);
  digitalWrite(5, LOW);
 }


 else if (temperature >= baselineTemp + 3 && temperature < baselineTemp + 4.5)
 {
  digitalWrite(2, LOW);
  digitalWrite(3, HIGH);
  digitalWrite(4, LOW);
  digitalWrite(5, LOW);
 }


 else if (temperature >= baselineTemp + 4.5 && temperature < baselineTemp + 6)
 {
  digitalWrite(2, LOW);
  digitalWrite(3, LOW);
  digitalWrite(4, HIGH);
  digitalWrite(5, LOW);
 }

 else if (temperature >= baselineTemp + 6)
 {
  digitalWrite(2, LOW);
  digitalWrite(3, LOW);
  digitalWrite(4, LOW);
  digitalWrite(5, HIGH);
 }


delay(1);




}

Explanation :

As you can see above , i set the baseline temperature at 18.5 degrees . Every time the temperature increases by 1.5 degrees that determines which color amongst the four LED’s lights up, 2 (blue) the coolest, 3(green), 4(yellow), and 5 (red) the warmest.

 

Difficulties :

I had some issues with setting up the baseline temperature, where at first it did not work, i kept on changing the LOW’s and HIGH’s until it worked how it supposed to.

 

Potentiometer sensor components :

• potentiometer sensor
• Four LED’s
• eleven jumper wires
• Four 330 ohm resistors

 

Concept:
Using the potentiometer, it controlled how many LED’s light up starting from the first blue LED until the last red LED , using voltage as the A5 pin im using reads the voltage   from 0 to 1023 volts.

Readings:

Code :

int potPin = A5 ;
int led1Pin = 2 ;
int led2Pin = 3 ;
int led3Pin = 4 ;
int led4Pin = 5 ;





void setup() {
  // put your setup code here, to run once:

pinMode(potPin, INPUT);
pinMode(led1Pin, OUTPUT);
pinMode(led2Pin, OUTPUT);
pinMode(led3Pin, OUTPUT);
pinMode(led4Pin, OUTPUT);
Serial.begin(9600);

}

void loop() {
  // put your main code here, to run repeatedly:

int potMeasure = analogRead(A5);
Serial.println(potMeasure);

if (potMeasure < 256 )
{
  digitalWrite(led1Pin, HIGH);
  digitalWrite(led2Pin, LOW);
  digitalWrite(led3Pin, LOW);
  digitalWrite(led4Pin, LOW);
}

else if (potMeasure < 512)
{
 digitalWrite(led1Pin, HIGH);
  digitalWrite(led2Pin, HIGH);
  digitalWrite(led3Pin, LOW);
  digitalWrite(led4Pin, LOW); 
}


else if (potMeasure < 768)
{
 digitalWrite(led1Pin, HIGH);
  digitalWrite(led2Pin, HIGH);
  digitalWrite(led3Pin, HIGH);
  digitalWrite(led4Pin, LOW); 
}



else if (potMeasure < 1024)
{
 digitalWrite(led1Pin, HIGH);
  digitalWrite(led2Pin, HIGH);
  digitalWrite(led3Pin, HIGH);
  digitalWrite(led4Pin, HIGH); 
}
}

Explanation :

Starting at a low range of 256 volts, if pot measure is less than this measure LED 1 pin will turn on therefore, every time this range increases by 256 the other LED’s will turn on respectively until the last LED which stops at a range of 1024 volts.

 

Thoughts :

I enjoyed creating this assignment, but i would like to create something more creative and complex in the coming up assignments.

 

 

 

 

 

Arduino Ultrasonic Sensor :

For my assignment  i attempted to use the ultrasonic sensor in my arduino kit accompanied by three 330 ohm resistors, eight jumper wires and three LED’s yellow, green, and red. Each color corresponds/lights up to how far my hand is away from the ultrasonic sensor, yellow being ‘close’ , green being ‘too close’ , and red being ‘the maximum’ distance.

 

For improvements:

I would like to add a buzzer that initiates a buzzing sound according to how close an object is to the ultrasonic sensor.