Author: Hoor Sakr

For this assignment, Izza and I worked together to come up with the idea of using the push buttons from our kit as keys for a piano. We used cardboard to create the piano keys and poked the push buttons through the bottom layer. We then used copper tape to cover the push button’s pins and give the alligator clips something to attach to in order to connect the buttons with wires that went into the breadboard. For our analog sensor, we used a potentiometer to control the length of the sound made once a key was pressed. The result can be seen here:

https://drive.google.com/file/d/187WqUyYvRZ6KFFVMn0NtSO0ycqEzKyXq/view?usp=sharing

Our circuit diagram can also be seen here:

We’re really proud of the fact that we were able to complete the circuit using a variety of tools like the copper tape and alligator pins and were able to have a creative and working result. We are also really proud of the code that was inspired by the toneMelody exercise we did in class for the pitches. The code can be seen below:

#include "pitches.h"

const int speakerPin = 8;
const int potPin = A0;

const int buttonPins[] = {2, 3, 4, 5};
const int numButtons = 4;

// Define the notes for each button
int notes[] = {NOTE_C4, NOTE_D4, NOTE_E4, NOTE_F4};

void setup() {
  for (int i = 0; i < numButtons; i++) {
    pinMode(buttonPins[i], INPUT_PULLUP);  // Internal pull-up resistor
  }
  pinMode(speakerPin, OUTPUT);
}

void loop() {
  int potValue = analogRead(potPin);  // 0–1023
  int noteDuration = map(potValue, 0, 1023, 100, 1000);  // Adjusts the lengths of the notes

  for (int i = 0; i < numButtons; i++) {
    if (digitalRead(buttonPins[i]) == LOW) {  // Button is pressed
      tone(speakerPin, notes[i], noteDuration);
      delay(noteDuration * 1.3);  // Pause between tones
      noTone(speakerPin);
    }
  }
}

We had some difficulty getting the buttons to connect with the alligator clips using the copper tape since it kept poking through the tape and was very fragile to move around. Even with a double reinforcement, the pins would still stick through. If we were to recreate it, we may seek another alternative that is thicker. We also encountered an unknown issue with some ghost keys where sounds would appear even if no key was pressed. This could be due to the copper tape issue as well.

Overall though, we are proud of the fact that the piano keys worked when pressed and the potentiometer properly adjusted the length of the notes as seen in the video.

For this project, we were asked to use both a digital and an analog sensor to control two separate light bulbs. I chose an LDR as the analog sensor and a push button switchas the digital one.

The circuit was designed with both connections set up in parallel, but each individual sensor and its LED were wired in series. That means the LDR is connected to a resistor and then to an LED in one path, while the button switch is connected to a resistor and another LED in a separate path. Both paths share power and ground—so they’re technically in parallel, but operate independently.

My favorite part of the project was seeing how the LDR affected the brightness of the LED in real-time. The more light it receives, the dimmer the LED gets, and vice versa. It was satisfying to see that dynamic shift as I covered and uncovered the sensor.

For the digital sensor, the behavior is much simpler: the LED turns on when the button is pressed and turns off when it’s released. There’s no change in brightness—just a clean on/off action.

One challenge I faced was protecting the LEDs from burning out. I ended up frying three of them before realizing that I needed to be more careful with resistor values and connections. In the end I started disconnecting my board from power before making any changes to the connections which I realize now I should’ve done from the start but I just forgot about it.

For future improvements, I’d love to swap the LDR for a microphone sensor and make the LED respondto sound intensity instead of light. I thinkit would be fun to experiment with how volume or rhythm could control brightness, especially for interactive or musical projects.

Hand-drawn schematic diagram:

Switch not pushed. LDR exposed to room light.

Switch not pushed. LDR covered.

Switch pushed. LDR exposed to room light.

For this project, I got inspired by bowling, and so I wanted to use a  rolling ball to control the LED light. The idea was to turn it into a competition between two players, where the goal is to light up a bulb three times before the other player.

To build this, I created a mini bowling alley out of cardboard. At the center of the alley, there’s a handle wrapped in copper tape. The game starts with the handle tilted at an angle, and each player takes turns rolling a ball, trying to push the handle into the exact center position. When the handle aligns just right, it connects with another piece of copper tape, completing the circuit and lighting up an LED. The first player to do this successfully three times wins the game.

My favorite part of this project was designing the handle mechanism and experimenting with the balance between accuracy and force.

One challenge I faced was adjusting the friction of the handle. At first, it slid way too easily, which made the game too simple and boring. But when I added more resistance, it became too difficult, and no one could win. After asking multiple people to try the game and integrating their feedback I finally reached a state where the game worked as I pictured it at the start and became enjoyable to play.

Things I’d like to improve in the future include adding a digital scoreboard to track each player’s progress and wins. I’d also like to experiment with different materials as cardboard was really hard to work with due to differences in friction between different kinds and cuts of cardboard.

Starting/Losing:

Winning: 

For this project, I decided to transform a short fantasy story I wrote in primary school into an interactive game using p5.js. This game is played by a single player who guides the protagonist, Eden, on her quest to slay the dargon and save her village. The game has multiple choices that affect the storyline, but in the end, all paths lead to the same outcome. There are a total of 5 key decision points and 14 different screens in the game.

How it works:

The game’s structure is built around a series of screens, each representing a different part of Eden’s journey. The transitions between screens are managed efficiently through the mousePressed() function and buttons. The game utilizes object-oriented programming (OOP) for button management.

Proud Achievements and Technical Decisions
One of the most significant achievements in this project is the implementation of the OOP approach for button management. Initially, built-in functions were used, but switching to OOP proved to be a more flexible and maintainable solution. This decision allows for easier customization of button behavior and appearance across different screens.

Another achievment is the overall structure of thegame, with its multiple screens and decision points. This took a long time and required  careful planning and implementation to ensure smooth transitions and logical flow of the story.

The integration of background images and music also adds to the immersive experience of the game. These elements help bring the fantasy world of EverLand to life for the player.

The buttons code:

//Creating the buttons class
class GameButton {
  //initializing the state of the button
  constructor(label) {
    this.label = label;
    this.x = 0;
    this.y = 0;
    this.width = 105;
    this.height = 30;
    this.visible = false;
  }
  //method to show button at specified coordinates
  show(x, y) {
    this.x = x;
    this.y = y;
    this.visible = true;
    fill("white");
    noStroke();
    rect(this.x, this.y, this.width, this.height);
    fill("black");
    textSize(13);
    textAlign(CENTER, CENTER);
    text(this.label, this.x + this.width / 2, this.y + this.height / 2);
    fill("white") //so trhat the text itself is white
    textSize(15); //so that the text itself has a size of 15
  }
  //method to hide button
  hide() {
    this.visible = false;
  }

  //method to identify if mouse is hovering over button
  isMouseOver() {
    return (
      this.visible &&
      mouseX > this.x &&
      mouseX < this.x + this.width &&
      mouseY > this.y &&
      mouseY < this.y + this.height
    );
  }
}

The screens code:

function draw() {
  //calling the function that displays the screen based on the screen assignment which happens when the mouse is pressed
  if (screen === 0) {
    showStartScreen();
  } else if (screen === 1) {
    showBirthdayScreen();
  } else if (screen === 11) {
    showSuppliesScreen();
  } else if (screen === 12) {
    showWeaponScreen();
  } else if (screen === 111 || screen === 121) {
    showNightScreen();
  } else if (screen === 112 || screen === 122) {
    showMorningScreen();
  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {
    showRiverScreen();
  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {
    showForestScreen();
  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {
    showNextScreen();
  } else if (screen === 5000) {
    showDragonCaveScreen();
  } else if (screen === 5001) {
    showInsideScreen();
  } else if (screen === 5002) {
    showOutsideScreen();
  } else if (screen === 5003) {
    showTrapScreen();
  } else if (screen === 262626) {
    showFinalScreen();
  }
}

//function to hide all buttons which i will use when switching screens so that the previous buttons don't appear on the screen
function hideAllButtons() {
  enterButton.hide();
  suppliesButton.hide();
  weaponButton.hide();
  nightButton.hide();
  morningButton.hide();
  riverButton.hide();
  forestButton.hide();
  fishButton.hide();
  riverspiritsButton.hide();
  next1Button.hide();
  insideButton.hide();
  outsideButton.hide();
  trapButton.hide();
  next2Button.hide();
  forestspiritsButton.hide();
  firefliesButton.hide();
  playButton.hide();
  quitButton.hide();
}

//assigns screen with next number based on the previous screen and the button pressed and also hides all buttons so that they aren't layered on top of one another
function mousePressed() {
  if (screen === 0 && enterButton.isMouseOver()) {
    screen = 1;
    hideAllButtons();
  } else if (screen === 1) {
    if (suppliesButton.isMouseOver()) {
      screen = 11;
      hideAllButtons();
    }else if (weaponButton.isMouseOver()) {
      screen = 12;
      hideAllButtons();
    }
  } else if (screen === 11 || screen === 12) {
    if (nightButton.isMouseOver()) {
      screen = screen * 10 + 1;
      hideAllButtons();
    }else if (morningButton.isMouseOver()) {
      screen = screen * 10 + 2;
      hideAllButtons();
    }
  }else if (screen === 111 || screen === 112 || screen === 121 || screen === 122) {
    if (riverButton.isMouseOver()) {
      screen = screen * 10 + 1;
      hideAllButtons();
    } else if (forestButton.isMouseOver()) {
      screen = screen * 10 + 2;
      hideAllButtons();
    }
  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {
    if (fishButton.isMouseOver()) {
      screen = 11000;
      hideAllButtons();
    } else if (riverspiritsButton.isMouseOver()) {
      screen = 12000;
      hideAllButtons();
    }
  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {
    if (firefliesButton.isMouseOver()) {
      screen = 21000;
      hideAllButtons();
    } else if (forestspiritsButton.isMouseOver()) {
      screen = 22000;
      hideAllButtons();
    }
  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {
    if (next1Button.isMouseOver()) {
      screen = 5000;
      hideAllButtons();
    }
  } else if (screen === 5000) {
    if (insideButton.isMouseOver()) {
      screen = 5001;
      hideAllButtons();
    } else if (outsideButton.isMouseOver()) {
      screen = 5002;
      hideAllButtons();
    } else if (trapButton.isMouseOver()) {
      screen = 5003;
      hideAllButtons();
    }
  } else if (screen === 5001 || screen === 5002 || screen === 5003) {
    if (next2Button.isMouseOver()) {
      screen = 262626;
      hideAllButtons();
    }
  } else if (screen === 262626) {
    if (playButton.isMouseOver()) {
      restartGame();
    } else if (quitButton.isMouseOver()) {
      quitGame();
    }
  }
}

Areas for Improvement:
While the current version of the game is functional, there are several areas for potential improvement:

Expanding the storyline: Adding more options and choices would increase replayability and make the game more interactive. For example, allowing players to pick specific weapons or have more detailed interactions with characters like the spirits could add depth to the game.

Enhanced interactivity: Implementing features like dialogue systems for conversations with spirits or other characters could make the game more engaging. This could involve creating a more complex dialogue management system.

Challenges:

One of the main challenges faced was transitioning from built-in button functions to the OOP approach. This required refactoring a significant portion of the code and it would’ve been so much easier if I just started with OOP.

Moving forward, the focus will be on enriching the game content and enhancing the player’s ability to influence the story through their choices.

The game sketch:

For this project, I decided to transform a short fantasy story I wrote in primary school into an interactive game using p5.js. The game has multiple choices that affect the storyline, but in the end, all paths lead to the same outcome. There are a total of 5 key decision points and 14 different screens in the game.

One of my biggest challenges was implementing the buttons. I initially tried to create them using object-oriented programming (OOP), but it became too confusing because the button positions change so frequently from screen to screen so i just used the built-in function createButton().

Currently, the game has a pink background, but I plan to replace it with images that reflect the setting of each screen, adding to the immersive experience. I also intend to incorporate sound effects that correspond to the events in the story to further enhance the game’s atmosphere.

During this week, I’ll be focusing on:

**Using OOP for the buttons instead of builtin functions

**Adding some sounds and background images

The part I’m most proud of so far is the overall structure of the different screens and managing the transitions between them as it  took a lot of time to figure out how to switch between screens smoothly.

Here is the code snippet of the screens and buttons changing:

function draw() {
  background('pink');
  //The Screen is picked based on the screen number
  if (screen === 0) {
    showStartScreen();
    } else if (screen === 1) {
    showBirthdayScreen();
  } else if (screen === 11) {
    showSuppliesScreen();
  } else if (screen === 12) {
    showWeaponScreen();
  } else if (screen === 111) {
    showNightScreen();
  } else if (screen === 112) {
    showMorningScreen();
  } else if (screen === 121) {
    showNightScreen();
  } else if (screen === 122) {
    showMorningScreen();
  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {
    showRiverScreen();
  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {
    showForestScreen();
  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {
    showNextScreen();
  } else if (screen === 5000) {
    showDragonCaveScreen();
  } else if (screen === 5001) {
    showInsideScreen();
  } else if (screen === 5002) {
    showOutsideScreen();
  } else if (screen === 5003) {
    showTrapScreen();
  } else if (screen === 262626) {
    showFinalScreen();
  }
}

function mousePressed() {
  if (screen == 0 && isMouseOver(enterButton)) {
    screen = 1;
    hideAllButtons();
    showBirthdayScreen();
  } else if (screen == 1) {
    if (isMouseOver(suppliesButton)) {
      screen = 11;
      hideAllButtons();
      showSuppliesScreen();
    } else if (isMouseOver(weaponButton)) {
      screen = 12;
      hideAllButtons();
      showWeaponScreen();
    }
  } else if (screen === 11) {
    if (isMouseOver(nightButton)) {
      screen = 111;
      hideAllButtons();
      showNightScreen();
    } else if (isMouseOver(morningButton)) {
      screen = 112;
      hideAllButtons();
      showMorningScreen();
    }
  } else if (screen === 12) {
    if (isMouseOver(nightButton)) {
      screen = 121;
      hideAllButtons();
      showNightScreen();
    } else if (isMouseOver(morningButton)) {
      screen = 122;
      hideAllButtons();
      showMorningScreen();
    }
  } else if (screen === 111) {
    if (isMouseOver(riverButton)) {
      screen = 1111;
      hideAllButtons();
      showRiverScreen();
    } else if (isMouseOver(forestButton)) {
      screen = 1112;
      hideAllButtons();
      showForestScreen();
    }
  } else if (screen === 112) {
    if (isMouseOver(riverButton)) {
      screen = 1121;
      hideAllButtons();
      showRiverScreen();
    } else if (isMouseOver(forestButton)) {
      screen = 1122;
      hideAllButtons();
      showForestScreen();
    }
  } else if (screen === 121) {
    if (isMouseOver(riverButton)) {
      screen = 1211;
      hideAllButtons();
      showRiverScreen();
    } else if (isMouseOver(forestButton)) {
      screen = 1212;
      hideAllButtons();
      showForestScreen();
    }
  } else if (screen === 122) {
    if (isMouseOver(riverButton)) {
      screen = 1221;
      hideAllButtons();
      showRiverScreen();
    } else if (isMouseOver(forestButton)) {
      screen = 1222;
      hideAllButtons();
      showForestScreen();
    }
  } else if (screen === 1111 || screen === 1121 || screen === 1211 || screen === 1221) {
    if (isMouseOver(fishButton)) {
      screen = 11000;
      hideAllButtons();
      showNextScreen();
    } else if (isMouseOver(riverspiritsButton)) {
      screen = 12000;
      hideAllButtons();
      showNextScreen();
    }
  } else if (screen === 1112 || screen === 1122 || screen === 1212 || screen === 1222) {
    if (isMouseOver(firefliesButton)) {
      screen = 21000;
      hideAllButtons();
      showNextScreen();
    } else if (isMouseOver(forestspiritsButton)) {
      screen = 22000;
      hideAllButtons();
      showNextScreen();
    }
  } else if (screen === 11000 || screen === 12000 || screen === 21000 || screen === 22000) {
    if (isMouseOver(next1Button)) {
      screen = 5000;
      hideAllButtons();
      showDragonCaveScreen();
    }
  } else if (screen === 5000) {
    if (isMouseOver(insideButton)) {
      screen = 5001;
      hideAllButtons();
      showInsideScreen();
    } else if (isMouseOver(outsideButton)) {
      screen = 5002;
      hideAllButtons();
      showOutsideScreen();
    } else if (isMouseOver(trapButton)) {
      screen = 5003;
      hideAllButtons();
      showTrapScreen();
    }
  } else if (screen === 5001 || screen === 5002 || screen === 5003) {
    if (isMouseOver(next2Button)) {
      screen = 262626;
      hideAllButtons();
      showFinalScreen();
    }
  }
}

Here is the game:

Before the reading, I thought interactivity was just another word for engagement. I thought that books, movies and anything with a user interface were interactive. But now, I understand that there is a difference between the two and that the word interactive has been majorly overused specially over the last couple of years and mainly for marketing purposes that it has lost its true meaning. Interactivity is closer to a conversation that includes the metaphoric acts of listening, thinking, and speaking (input, processing, output), while engagement is more of a one-sided conversation where there is only output (content) that the audience reacts to. 

What I consider to be the characteristics of a strongly interactive system is one that has all the features to make it interactive in the first place. It has to receive an input, process the  information and produce an output based on the input. All 3 aspects have to be good, and one cannot be the substitute of the other. Something highly interactive for me would make it easy for the user to input (good user interface), quickly process the information (have an efficient system) and produce an accurate output.

To improve the degree of interaction in my p5 sketches, I would try and work on each interactivity aspect individually so that they’re all equally good. For the input: I’d use more of the key and mouse functions and I would make the sketch more aesthetically pleasing, maybe including simple instructions for the user to understand what he’s supposed to do. For processing, I’d use more variables and OOP instead of hardcoding everything in order to make the code run smoother. And as for the output, I’d try and make sure that the program actually does what it’s supposed to do and that it is accurate in its reactions by testing multiple times.

For this project, I got inspired by an animation of random skulls and so I decided to create random smiling faces since I find that using the arc function is somewhat of a challenge and I wanted to practice.The design is generated dynamically with each frame using random values for color and size to create a unique variation every time. The face is composed of basic shapes, including an ellipse for the head, a rectangle for the neck, and circles for the eyes.

My favorite part of this project was using variables to link the eyes and neck to the face so that they automatically adjust to the face’s size and position.

ellipse(skullX, skullY, skullW, skullH)
let neckX = skullX - skullW/4
let neckY = skullY + skullH/4
let neckW = skullW/2
let neckH = skullH/2
rect(neckX, neckY, neckW, neckH)
let eye1X= neckX
let eye2X = neckX +neckW
let eyeY = skullY - skullH/4

One challenge I faced was making the smile look natural. While the arc function works, I’d like to experiment with other approaches to create a more natural expression.

Things I’d like to improve is  adjusting the background colour. Since, it is  randomized, it sometimes blends too much with the skull, making it less visible. So refining how colors are assigned could enhance the contrast and visibility of the design. Also, I’d like to create random facial expressions instead of just a smile.

Casey Reas’ talk about randomness, the intersection between chaos and order, and how art is a form of manifest result made me rethink my definition of what I consider art. I used to see art as paintings where an artist would express his thoughts using shapes or colours, or music where the musician expresses his feelings through notes. To me, art had to be a byproduct of human expression, random and never perfect. As a result I never thought of anything digital as art simply because there is no human aspect to it. However, Casey Reas’ talk about making something artificial have an organic quality made me reconsider. If we just apply natural randomness or disorder, we can make digital creations count as art. The way I plan to do that is by using human expression as inspiration for randomness, the same way buildings and body tissues were used in Reas’ talk. For example, I’d love to maybe use voice frequencies, heart rhythms or random patterns of brain activity to experiment and incorporate randomness into my work to create expressive digital paintings. 

I feel like the optimum balance between total randomness and complete control is somewhere in between. While randomness introduces unpredictability, making a piece feel organic and alive, control ensures coherence and intentionality. By setting parameters, we can guide the chaos in a way that still reflects human intent. As Casey Reas mentions we are the creators of the code and we can implement constraints even with randomness. 

For this project, I created an animated self portrait using  p5.js. The design uses basic shapes like ellipses, arcs, triangles and lines to create the structure of the face.

My 2 favourite things that I spent so much time on is the eyelashes as I had  a hard time adjusting the angles and the coordinates which I couldn’t just calculate, I had to just guess where to place them and see how it looks after running (trial and error).

Here’s the code snippet for the eyelashes:

stroke("Black");
strokeWeight(3);
line(160,170,150,145);
line(240,170,250,145);
line(180,170,190,145);
line(220,170,210,145);
line(170,170,170,142);
line(230,170,230,142);

I also like the interactivity of the portrait. By clicking the mouse, the eyes blink, and the face smiles and upon clicking again the face returns back to its original state.

Here is the portrait:

One thing that I’d like to improve is making the portrait more realistic as that’s what I wanted at first but couldn’t do as I had such a hard time figuring out the coordinates  and the best shapes to use to create the features (ex: the blush on the cheeks and the hair).