Category: Spring 2023 – Shiloh

Inspiration

For this creative switch example, I was inspired by these small Buddha statues I bought long ago. I like that there is a specific way for these Buddhas to be lined up, in relation to the Japanese sanbiki no saru. So I have decided to make a creative switch that relates to this initial idea.

Concept

In order to be true to my inspiration, I decided that I wanted the LED to light up when the statues are lined up or at least in close contact with each other, depending on the understanding of the user. This would signify the saying or the concept itself. Therefore, in order to make this concept come true, I had to find an inductive material that I can attach to them, as the statues themselves are from ceramics.

Implementation

I decided to start by figuring out what kind of circuitry I had to build that would light up the LED when the statues are put together. I put tapes under the statues and then connected them to large coins. On the bottom of the coin, for I didn’t see and I don’t know statue, I connected positive and ground wires respectively, while the I didn’t hear statue was only taped above the coin and there was no wire passing true. When it comes to making the circuit work, which is powered by pin 13 of the Arduino automatically when plugged in without any code running, statues have to be put together so that their base coins touch each other, preferably in the proper line-up but would work in any circumstance. The concept of these statues is also a saying in my country which I enjoy using quite a lot. Hence, as a source of wisdom, I like seeing them together, especially in the context of Buddha, and I feel like it gives a similar commentary to enlightenment when they are lined up.

Challenge

It was quite hard to figure out the conductivity and make sure that wires were secured properly to the coins as well as the statues to the coins. Hence, I had to spend time playing around with the wires to make sure that switch would work at all times. It was also challenging to find inspiration as well, but I quite enjoyed settling on the philosophical enlightenment, Buddha, and 3 wise monkeys analogy.

Reflection

This project was quite fun to implement, and I really enjoyed bringing something from my daily life to the project. It was a great start for the future. I’m looking forward to the future motions of playing around with Arduino and projects.

Concept

For this assignment I decided to create a potentially useful and practical switch that can be utilized in real world for detecting the sea level. My switch lights up with three red LEDs indicating that the water level at sea is above a certain point. Sea Level Detector does not use a traditional sensor. Instead, it relies on the conductivity of saltwater to complete the circuit and activate the LEDs.

This project is a great way to raise awareness about rising sea levels and the impact of climate change. By using simple materials and basic electronics, it is accessible to anyone interested in building their own Sea Level Detector. The project can also be modified to include additional features, such as data logging or remote monitoring, to make it even more useful and informative.

Implementation

The Sea Level Detector uses two metal rods, which are connected to the Arduino board and placed in the saltwater. As the water level rises, it comes into contact with both rods, completing the circuit and allowing electricity to flow between them. This results in the LEDs lighting up, indicating that the water level has reached a certain point.

The conductivity of saltwater is due to the presence of ions, specifically Na+ (sodium ions) and Cl- (chloride ions). These ions allow the water to conduct electricity, which is the principle behind the Sea Level Detector.

First picture depicts a high level of water which touches the metal rods conducting electricity through water lighting up the three red LEDs. In contrast, second picture shows the low level of water where rods are not in contact with water thus not conducting the electricity and LEDs are off.

Schematic Diagram

Video Demo

 

Concept

I decided to make my ring a little interactive with this project. Since the ring is made out of conductive material and it leaves just enough room for the two ends of the wires to fit in while it slides into my finger, I thought why not.  Plus, I wear the ring almost every day so using it in an unusual manner was fun. The following is a picture of the circuit diagram that I drew before building the switch to help me out:

Implementation

I started off by mapping the colors of the wires on my drawing to be exactly the ones I would be using in the real-life circuit (except the black one for earth which is white in the diagram). Next, I connected four 1.5V batteries that I had conveniently lying around in my drawer to the circuit board. I added a 330 ohm resistor and left two wires open to act as the switch (yellow and red). Next, the tricky part was to connect the ends of the wires to the ring. I used two small pieces of squash tape to get this done, I left one of the wires partially ‘hanging’ while still being tied to the ring so that the circuit completes only when I wear the ring and the end of the wire is pushed against the surface of the ring.

CONCEPT

The inspiration for this assignment came from the treasure chests I have seen in cartoons as a child. The ones that glow and shine from inside when you open them. I made a box with a “hidden” breadboard that has LEDs on it that turn on when you open the lid of the box. I know that I don’t have the skills or the materials to make a realistic chest, so the vibe for this chest is DIY, something that a child would make to hide secret objects.

IMPLEMENTATION

I used a popcorn box for a chest. Since the inside of the box is brown-grey and looks more like a chest I turned it inside out, and used some tape to put it back together. I then a hole at the bottom of the chest to hide the breadboard, one of the jumping wires on the breadboard, and the two jumping wires that connect to the Arduino. I made a small opening on the lid of the chest for one of the jumping wires to connect the circuit.

The circuit uses 5 LED lights, 5 330Ohm resistors, and 8 jumper cables. The LED lights are each connected to each other using 4 yellow jumper cables. One red jumper cable connects from positive on a breadboard to 5V on Arduino. A black jumper cable is used to connect from the negative on a breadboard to GND on Arduino. Blue (-) and green (LED) jumper cables need to connect to complete the circuit and light the LEDs. The blue cable is hidden under the box and attached by a piece of tape to the back of the box. A piece of foil is attached at the free end of the cable to make the connection area bigger. The free tip of the green cable sticks out of the lid of the box through a small opening. When the box is opened, the lid gets closer to the back of the box, making the green and blue cables touch.

To imitate a chest full of golden bits, I filled the box with ripped yellow paper and covered the breadboard for the most part. I have used yellow jumper cables for the cables that would stay fully inside the box to make them less visible.

DEMO VIDEO

If the video window doesn’t show, use this link to see the demo of the treasure chest.

The Concept

The idea was to create a switch the user can never see. I wanted to achieve this by allowing the circuit to complete only when the user closed their eyes. The second the eyes open, the switch opens and hence, the one controlling the switch can never know whether the switch actually ever made the light turn on or not.

The Circuit

I started by sketching out my circuit and then got to work on the bread board. The idea was to add the switch on the positive wire coming from the Arduino, so I got two pieces of aluminum to form the switch. Thus I attached the two pieces of aluminum on the connection between the arduino and the positive end of the LED. Then I attached those two pieces of aluminum to my eye lids, in a way that the switch closes when I close my eyes. This was a pretty challenging aspect as the jumper cables would weigh down the aluminum and the switch wouldn’t close properly. Eventually I ended up taping parts of the wire to my face and attaching the bread board itself to my face as well, so I can mitigate the gravity issue.

 

The Demo

 

 

This week’s assignment required us to design a straightforward circuit switch without the use of our hands. When thinking about how to remove the hands from creating a switch I thought of the area further up the arm which was the bicep and forearm. The switch turns on by flexing my bicep muscle and completing the circuit.

I began by building a basic circuit that would turn on the LED whenever the circuit was closed. Then I unplugged the ground from the main + and – bus on the breadboard and removed the power to the LED row. I decided to use aluminum foil, which functions as an electrical conductor, to complete the circuit and turn on the switch. The connection was then redirected onto a piece of aluminum foil using wires and a jumper to attach. I was able to close the circuit by securing the piece of aluminum foil to the top of my bicep and bottom of my forearm. This allowed me to complete the circuit by flexing my bicep which brought the 2 pieces of aluminum together and completed the circuit and turn on the LED.

Concept

I decided to create a ‘black-box’ type switch.  The switch consists of two jumper cables which are connected to the insides of a small box. The box is filled with a few metal sheets and balls of copper tape — essentially a few separate pieces of conductive material.

The switch is initially open. It can be closed by shaking or moving around the box. This causes the contents of the box to move around chaotically. With enough movement, they will connect in such a way that the current from one jumper cable can move to the other one, closing the switch and completing the circuit.

However, by deliberate design, the switch is difficult to control. It isn’t easy to close it immediately, or open it afterwards. Also, often, while moving around the box, it closes for only a brief moment, sending a short signal but then stopping. This creates a kind of controlled chaos and I can imagine using it to create interesting effects using Arduino in the future.

Finally, although the switch can be used most easily with hands, it works with any parts of your limbs, as long as you can move the box.

Pictures and video demo

I created a simple circuit to test that the switch works. It looks like this: Arduino 5 Volts -> first jumper cable -> box -> second jumper cable -> LED light -> 300 Ohm resistor -> Arduino ground. The LED light turns on when the switch is closed.

 

You can visit my project titled “3 rooms” by clicking this link: https://editor.p5js.org/iremnaz/full/aFq48HNIB

or

 

Project Background:

This project is a visual, auditory, and interactive experience that hopes to include the user through interactivity allowed only in limited ways. The level of involvement and “the representation” of the user slowly recedes, only to be established somewhat at the end. The experience hopes to be enjoyable, surprising, disorienting, and thought-provoking.

Each room is chosen and designed after many trials and errors, as there is no set way of looking and behaving for each room, except for the feelings it should be awakening.

The Workings Of It:

Prior to each room, the instructions of what you can do is explicitly given.

For room 1 you can use the arrow keys.

For room 2 you can use the mouse to Click only on the decided sections of the screen.

For room 3 you can only press the ENTER key.

The user is able to proceed using the W key between information pages, but can never go back or exit the experience. These were conscious choices.

Things That Work and Do Not Work:

Room 1 definitely turned out well, as I especially love the colors, movements, and songs inside it.

Room 2 feels like there is room for improvements, purely by using self-created and themed artwork instead of outsourcing from royalty-free pieces. I have the feeling that experience in room 2 has more room for improvement.

Room 3 was especially meaningful for me. I feel like I did all of this project to actually be able to make room 3. It also, as a theme, holds a lot of meaning for me, and I totally enjoyed making it.

Code Snippets:

The code for the sketch runner is as follows:

Codes for rooms are not given here as there are nearly 800+ code lines. Please check them out in the p5.js sketch.

let roomChoice = 0;
let tintB=255;

//preloading the necessary images and sounds
function preload() {
  sound1 = loadSound("myMusic.mp3");
  imgT = loadImage("myTrees.png");
  ph2 = loadImage("mount.png");
  ph3 = loadImage("cliff.png");
  img1 = loadImage("1.jpg");
  img2 = loadImage("2.jpg");
  img3 = loadImage("3.jpg");
  img4 = loadImage("4.jpg");
  img5 = loadImage("5.jpg");
  img6 = loadImage("6.jpg");
  sound = createAudio("chatter.mp3");
}

//setting up with the canvas size
function setup() {
  createCanvas(400, 400);
  setRoom2();
  img = img1;
}

//the room selection menu is follows in draw
function draw() {
  switch (roomChoice) {
    case 0:
      main();
      break;
    case 1:
      preRoom1();
      break;
    case 2:
      ready1();
      break;
    case 3:
      situation1 = runRoom1();
      if (situation1 == true) {
        roomChoice = 4;
      }
      break;
    case 4:
      preRoom2();
      break;
    case 5:
      ready2();
      break;
    case 6:
      situation3 = runRoom2();
      if (situation3 == true) {
        roomChoice = 7;
      }
      break;
    case 7:
      preRoom3();
      break;
    case 8:
      ready3();
      break;
    case 9:
      runRoom3();
      break;
  }
}

//this is the main room (intro room)
//setsup the initial aura 
function main() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 15);
  text("Welcome to the experience!", 5, height / 10);
  text("This is you:", 5, (2 * height) / 10);
  hello = new user1(width / 2, height / 2);
  hello.draw();
  text("You will be experiencing 3 rooms.", 5, (8 * height) / 10);
  text("Press W to proceed.", 5, (9 * height) / 10);
  boundary1();
  if(tintB>0){
  background(0,tintB);
  tintB-=1;}
}

//just before the room 1 opens this is the last time 
//to take breather, press 2 to proceed
function ready1() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 15);
  text("Are you ready?", width / 2 - 50, (1.5 * height) / 10);
  text("Press W to proceed.", width / 2 - 65, (9 * height) / 10);
  hello = new user1(width / 2, height / 2);
  hello.draw();
  boundary1();
}

//are you ready page before room 2 resumes
function ready2() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 15);
  text("Are you ready?", width / 2 - 50, (1.5 * height) / 10);
  text("Press W to proceed.", width / 2 - 65, (9 * height) / 10);
  hello = new user1(width / 2, height / 2);
  hello.draw();
}

//are you ready page before room 3 resumes
function ready3() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 15);
  text("Are you ready?", width / 2 - 50, (1.5 * height) / 10);
  text("Press W to proceed.", width / 2 - 65, (9 * height) / 10); 
}

//this is the page where instructions for room 1 is given
function preRoom1() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 50);
  text("Room 1", 5, height / 10);
  textFont("Georgia", 15);
  text("Yellow line is your boundary.", 150, (3 * height) / 10);
  text("You exist, within it.", 7, (4.5 * height) / 10);
  text(
    "Experience room 1 by using the 4 arrow keys to move.",
    10,
    (6 * height) / 10
  );
  text(
    "Don't forget to dance, even if you don't want to.",
    30,
    (7.5 * height) / 10
  );
  text("even if you are lonely.", (2.5 * width) / 4, (8 * height) / 10);
  textFont("Georgia", 20);
  text("We are all happy here.", (1.2 * width) / 4, (8.8 * height) / 10);
  textFont("Georgia", 15);
  text("Press W to proceed to room 1.", 60, (9.5 * height) / 10);
}

//this is where instructions for room 2 is given
function preRoom2() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 50);
  text("Room 2", 5, height / 10);
  textFont("Georgia", 15);
  text("You ONLY exist inside the yellow boundary.", 100, (3 * height) / 10);
  text(
    "When you click while you exist, you give life to the plant.",
    5,
    (4.5 * height) / 10
  );
  text("Experience room 2 by giving life to the plant.", 80, (6 * height) / 10);
  text(
    "When you click, you give love. You show effort.",
    5,
    (6.8 * height) / 10
  );
   text(
    "You have to show effort until you can move on.",
    70,
    (7.5 * height) / 10
  );
  textFont("Georgia", 20);
  text(
    "Is your love enough to grow the plant?",
    (0.4 * width) / 4,
    (8.5 * height) / 10
  );
  textFont("Georgia", 15);
  text("Press W to proceed to room 2.", (2 * width) / 4, (9.5 * height) / 10);
}

//this is where instructions for room 3 are given
function preRoom3() {
  stroke(255);
  strokeWeight(1);
  background(0);
  fill(255);
  textFont("Georgia", 50);
  text("Room 3", 5, height / 10);
  textFont("Georgia", 15);
  text("You DON'T exist.", 150, (2.5 * height) / 10);
  text("Until you are welcome here.", 7, (4 * height) / 10);
  textFont("Georgia", 20);
  text("Until you feel welcome here.", (1.5 * width) / 4, (5 * height) / 10);
  textFont("Georgia", 15);
  text("When you don't, everything looks foreign.", 30, (6 * height) / 10);
  text("Gather your courage and talk.", (2 * width) / 4, (7 * height) / 10);
  text("You talk when you PRESS on it. When you are ready.", 30, (7.8 * height) / 10);
  text(
    "Experience room 3 by pressing the ENTER key.",
    (0.2 * width) / 4,
    (8.8 * height) / 10
  );
  text("Press W to proceed to room 3.", (2 * width) / 4, (9.5 * height) / 10);
}

//this takes the keyboardinformation to change between 
//loading pages as well as the in-room movements
function keyPressed() {
  if (keyCode == ENTER) {
    counter = 0;
  }
  if (keyCode == 87 && roomChoice!=3 && roomChoice!=6) {
    roomChoice++;
    if (roomChoice == 3) setRoom1();
    if (roomChoice == 9) setRoom3();
    if (roomChoice == 10){tintB=255; roomChoice=0;}
  }
}

Reflections:

This midterm project really pushed me out of my comfort zone as I was confronted by artistic and built issues at the same time.

Per artistic issues, I feel that the way I have designed the introductory pages, the theme of the user icon with a ring around, as well as the themes in each room were kind of struggling to come through the other users. This was something I have realized both in my friends as well as classmates. In order to solve this, I did try to reorganize my introductory pages, and have the “Are you ready” pages stay until the user wishes to continue. These pages were where the difference in the user icon was explicitly shown different, and these pages were previously timed so that there were not enough time to grasp differences. However, I can see that even after making changes, the same issues persist to some degree. I think that by changing the design and flow of these intermediary stages between rooms, the experience can be improved. This is something that I definitely should focus on.

Per coding issues, I feel that each room was a struggle to make it work. Especially room 1, it was hard to figure out the pattern changes, their succession, and the user icon interaction with its environment. As there were many loops that are ongoing at the first part, we can see the icon motions lagging. Moreover, it was a lot of trial and error to have a feel for when to have the patterns change according to the song. Similarly, for room 2 sprites were quite the issue as they were not made in equal gaps, so I had to manually try and crop them. There was also a lot of trial and error in their placement in the sketch and the way they are cropped. In room 2, choosing any of the images was quite hard due to their processing but more importantly how they looked together. Room 3 was quite simple and straight forward in terms of the coding part, but figuring out the lines to be printed on the scene was quite hard.

I believe when I look at my journey overall, figuring out the storyline in each room, and the overall cohesion has been quite hard. Even after finishing the project, I can see that there is room for growth. I think an approach to figuring out this issue would be writing down the storyline on paper and seeing how it feels, instead of running the project over and over again.

Overall, I enjoyed making this project very much. However, it was definitely time-consuming as it pushed my creative and coding boundaries during the each stage. I feel excited to come back to this project and let it grow in the future.

Concept

As part of my Mid term project, the idea was to create a game that is similar to the traditional ‘space-ship’ games, combined with the ‘infinite-runner’ game ideology. This would essentially be a canvas, where a rocket starts from the bottom, has freedom to move around, with the background moving, depicting a running environment. The objective would be for the rocket to dodge some meteors falling from the sky, and also to fuel up with cans that become available in intervals.

The graphical objects that I used are:

How it functions?

The outcome, from the above mentioned ideology, is a single-player ‘Rocket Rage’ game, which starts off with the a screen to allow a user to choose the difficulty, and also lay out instructions. On top of this, it also keeps track of the Top Score so far (on the local machine), in both difficulty modes!

The following snippet shows how it will look on the canvas:

Once the user chooses their difficulty, they are progressed to the next phase where they can control the Rocket. The objective is to dodge everything that comes, except the Fuel. There is a running score, and decreasing fuel with only one chance to go!

How that would look like can be seen as follows:

Embedded Sketch:

The p5js final sketch is as follows:

Link to Sketch: https://editor.p5js.org/mzv205/full/ZaD5RILaw

Challenges:

Something I really am proud of are the usage of the rotational ability of moving the rocket at angles, it was particularly challenging to figure out the logic for this. Moreover, I also learnt the usage of local storage, so that was another challenge initially.

Moreover, the appropriate usage and updating of boolean state variables was very challenging to keep track of. Pausing with the mouse click, and making sure the game has started for it to be paused. There were state variables used even for the first Menu Screen as well. This was something that I found to be a hassle to deal with!

Code Snippets:

For Rotating the Rocket:

// ROTATING THE ROCKET
// store the current drawing matrix
push()
// move the origin to where the rocket is
translate(rocketX, rocketY);
// rotate using our angle variable
rotate(radians(angle) )
imageMode(CENTER)
image(rocket,0, 0, 80, 75.6)
// restore the previous drawing matrix
pop()

Code for the Asteroids class:

class Asteroid {

  constructor(){
    // Assigning random position and speed to the asteroid
    this.x = random(60,590);
    this.speed = random(2,5)
    this.size = random(30,90);
    this.y = 5+ this.size/2;
    // Assigning random image to the asteroid
    this.pic = random([asteroid_1, asteroid_2, fireball_1])
    fill(255);
  }

  display(){
    // Displaying the asteroid
    imageMode(CENTER);
    image(this.pic, this.x, this.y, this.size, this.size);
    imageMode(CORNER);

    // Setting the boundaries of each Asteroid

    this.Top = this.y-this.size/2
    this.Bottom = this.y+this.size/2
    this.Right = this.x+this.size/2
    this.Left = this.x-this.size/2+5

    if(this.pic == asteroid_2){
      this.Top = this.y-this.size/3+15
      this.Bottom = this.y+this.size/3
      this.Right = this.x+this.size/3
      this.Left = this.x-this.size/2
    }


    if(this.pic == fireball_1){
      this.Top = this.y-this.size/3+15
      this.Bottom = this.y+this.size/3
      this.Right = this.x+this.size/3-5
      this.Left = this.x-this.size/3+5
    }
  }

  move(){
    // Moving thr asteroid
    this.y += this.speed;
  }

  collision(){
    // Detecting if no collision between rocket and asteroid
    if ((rocketTop > this.Bottom || rocketLeft > this.Right || rocketRight < this.Left || rocketBottom < this.Top)){
      collision = false;
    }
    else{
      // Otherwise ending the game
      resetVariables();
    }
  }

}

 

Areas of Improvement:

I think something that can be improved is having the ability to unlock more levels, or even choose different rockets. Having done the minimum viable product for the game, I tried to build on the functionality of choosing the rocket and it seemed to be breaking the other state variables. Therefore, I think planning out the different states of the games and then coding accordingly is something I can take away from this!