Author: Angela Guo

Final Project Idea

I have two ideas in consideration for my final project. The first is a physical recreation of the onion-chopping mini-game from Wii Party. When I was a kid, my friends and I would always play Wii Board Game Island, and this was one of my favorite mini-games. The user moves their Wii remote down in a chopping motion, and whoever “chops” the most number of times within the time limit wins.

For an Arduino/P5 recreation, I am imagining a chopping board covered in foil, and a knife made out of metal or wood covered in foil/copper tape, so that whenever the knife comes into contact with the chopping board, a switch is activated (similar to our “creative switch” assignment). There would be two players and two chopping boards hooked up to different pins on the Arduino, and these pins would send signals to the P5 screen, which would be a scoreboard. Every time the switch activates (a person chops once), their score would increase by one. The p5 program would also be running a stopwatch for one minute and beep when the minute is up. One issue is that I don’t know what I would use as the thing to be chopped, because unless I use real knives, which would be too dangerous, it would be impossible to actually cut through much. An alternative is to simply not have any object to be chopped, and to simply erect a picture of the Wii Game next to my setup so that people understand the concept.

My second idea is to make a “psychic hotline”, which would kind of be like these Magic 8 balls,

except that it would be a cardboard phone that is hollow inside, to allow for a servo motor and an attached spinning wheel. The phone buttons would be Arduino buttons, and depending on the last button that the user presses, the spinning wheel would rotate until the designated psychic message shows through a cutout in the cardboard. The whimsy of this project would mostly be the aesthetic and the intricacies of cardboard construction, which I have been enjoying in making my previous projects. P5 would function as a backdrop with twinkling stars, instruct users on which number to dial for which type of psychic question (love, career, self-improvement, etc.) and provide error messages if the user has not inputted the correct phone number. The limitation of this project is that there would only be a few interactions before the user gets bored, because the spinning wheel can only accommodate so many messages.

Serial Communication Exercises

1. Make something that uses only one sensor on Arduino and makes the ellipse in p5 move on the horizontal axis, in the middle of the screen, and nothing on Arduino is controlled by p5:

I kept the Arduino and p5 code from the handshake example intact, and added this line of code in p5 to take the value obtained from the potentiometer to control the x-position of the circle.

// draw a circle, alpha value controls the x-position of the circle
circle(map(alpha, 0, 1023, 0, 640), 240, 50)

2. Make something that controls the LED brightness from p5:

Again using the Arduino and p5 code from the handshake example, I added some code to the “keyPressed” function in p5, so that different values would be sent to the “left” LED in Arduino, changing its brightness.

function keyPressed() {
  
  // set up connection with p5:
  if (key == " ") {
    setUpSerial();
  }
  
  //control the brightness of the LED by sending different values to "left"
  if (key == "1"){
    left = 10;
  }
  
  if (key == "2"){
    left = 100;
  }
  
  if(key == "3"){
    left = 255;
  }
}

Exercise 2 P5 code

3. Take the gravity wind example and make it so every time the ball bounces one led lights up and then turns off, and you can control the wind from one analog sensor:

Video demonstration

I transplanted all the code of the gravity wind example into the handshake example, and then added two bits of code to complete the assignment. The first part sends either a “1” or a “0” to the “left” LED in Arduino to turn on and off the LED when the ball bounces.

//send value to "left" LED in arduino 
   // depending on y-position of ball 
  
  // if y-position is greater than 330, light up the LED
  if(position.y >= 330){
    left = 1;
  }
  
  // if y-position is greater than 335, turn off the LED
  if(position.y <= 335){
    left = 0;
  }

The second bit maps the potentiometer values to 1 and -1, allowing the user to control the wind by turning the potentiometer.

//control wind with potentiometer
wind.x = map(alpha, 0, 1023, -1, 1);

Exercise 3 P5 code

 

Resources:

Izah and Zion’s code helped me in completing this assignment.

Cat Composer

By Sneheel & Angela

Concept:

While working on this project, we went over several ideas on how we would make an instrument. One thing we discovered in our ideation process was that both of us had previously made projects that centrally involved cats. Thus, with some more tinkering around – we came up with “The Cat Composer”! The Cat Composer is an all in one musical instrument that can play a variety of simple tunes such as “Hot Cross Buns” and “Mary Had a Little Lamb”. It consists of 2 switches to control 2 beat-making servo motors, a distance sensor to control the notes (C, D, E, and G), and a turning potentiometer to toggle between octaves. Additionally, we incorporated a speaker from the IM Lab inventory to make a better sound than the provided buzzer. This instrument is best played with two people, one to play percussion/toggle between octaves, and one to play the notes.

However, with a bit of practice it is completely possible to play it by oneself! Note: In order for the distance sensor to receive a steady input and play the correct notes, it is best to play not with one’s hands, but with a larger piece of material.

Demonstration Video

Code & Highlights:

The toughest part in the coding process was to ensure that the distance sensor worked exactly as we intended. For example, an issue that we ran into early was the abrupt changing of tune at the border values. Since the sensor isn’t accurate to the exact cm. It would then fluctuate between two tunes. We corrected this by instead using a 5-value moving average. This makes transitions significantly smoother (and the experience much more enjoyable!!)

unsigned int measureDistance() {
  const int numReadings = 5;  // Number of readings to average
  const int maxChange = 150;   // Maximum acceptable change in cm between readings
  static unsigned int lastAverage = 0;  // Store the last valid average distance
  unsigned long totalDuration = 0;


  for (int i = 0; i < numReadings; i++) {
    digitalWrite(trigPin, LOW);
    delayMicroseconds(2);
    digitalWrite(trigPin, HIGH);
    delayMicroseconds(10);
    digitalWrite(trigPin, LOW);


    totalDuration += pulseIn(echoPin, HIGH);
    delay(10); // Short delay between readings
  }


  unsigned int currentAverage = (totalDuration / numReadings) * 0.034 / 2;


  // Check if the change from the last average is within the expected range
  if (abs((int)currentAverage - (int)lastAverage) <= maxChange || lastAverage == 0) {
    lastAverage = currentAverage;  // Update the last valid average
    return currentAverage;
  } else {
    return lastAverage;  // Return the last valid average if the current reading is an outlier
  }
}

Room for improvement:

We can improve our project significantly given more time!

Firstly, we would love the diversify the sounds our project can generate. In our research we discovered that instead of simply using tone() we could perhaps use some other sound generating function. We would love to try this!

Regarding the hardware implementation, the provided potentiometer is too hard to turn and often messes with the wiring. Instead we would love to use a better/larger potentiometer that allows us better access.

Similarly, another change we would like to do is to use a single Arduino Board and breadboard rather than our current 2 board solution. This will make the project more cohesive. Even though this seems easy enough to implement, we let our current design be as of now to simplify our approach.

Lastly, the ultrasonic distance sensor often gives outlier readings. As discussed in the highlight section, we tried our best to resolve this issue, however it still persists. We have some more ideas to remedy this. But we believe that given the scope of this project this was unnecessary. However, we would love to do this in the future.

A Brief Rant on the Future of Interaction Design

Watching the video of Microsoft’s Productivity Vision mainly invoked one emotion in me: apprehension. I quite agree with the author that taking “Pictures Under Glass”, magnifying them, making them 3D, and making them part of all household appliances/human interactions really is not the answer. The author comments on how our hands do so many wonderful things, like grabbing, sensing texture, and feeding us information that we take for granted. There are many more things that our brains also do, actions which would be stifled by the Vision Of The Future. For example, in the video clip, the woman arrives in an airport in Germany, taps her glasses, and immediately hears a translated version of everything around her. Firstly, phones already do this kind of work, so transferring to glasses is the sort of “meaningless step up from the status quo” the author refers to. Secondly, if someone were to go through a foreign country with all relevant information perfectly translated and projected in a hologram in front of them in real time, they would lose so much of the experience of traveling — asking what a word means, sharing a laugh over some funny mispronunciation, finding an amazing spot after getting lost, etc. It seems like these future technologies are designed to minimize mistakes, whether by finishing your sentence for you, or telling you exactly what is in your fridge, when we actually learn a lot from our mistakes. Okay, maybe it would be useful to know when something in your fridge has gone bad, but we are already able to do that with our senses of smell, touch, taste, and sight, again proving the author’s point.

Responses: A Brief Rant on the Future of Interaction Design

The paragraph that stood out to me most from this reading was:

“We’ve almost given up on the body already. We sit at a desk while working, and sit on a couch while playing, and even sit while transporting ourselves between the two. We’ve had to invent this peculiar concept of artificial “exercise” to keep our bodies from atrophying altogether… Why do you want this future? Why would this be a good thing?”

This reminded me of a reading about how the education system is not designed to encourage learning and creativity. Kids naturally learn through moving their bodies, and yet after a certain age, all knowledge is expected to be obtained by sitting at a desk, only engaging the senses of sight and hearing. The ironic thing was, I was doing this reading, learning about the failings of sitting and reading to learn by sitting and reading.

I think the author’s suggestion for truly revolutionary kinesthetic interfaces might alleviate this problem. I don’t know what form it would take, but it sounds like a good opportunity to introduce natural curiosity and bodily feedback back into our daily lives and learning processes.

Cutie Cat

Cat video

Concept:
Ever since coming to the Abu Dhabi campus with its abundance of cats, I have noticed that some of them close their eyes in a very cute manner when you pet them, so I wanted to simulate this adorable interaction.

As I did not have the resources or knowledge to make an eye-closing movement, I decided to have the cat’s nose become brighter when you pet it. The photoresistor was perfect for this, because during our in class exercise, I noticed that, as move your hand closer to it, the value drops in a predictable manner. Thus, I wrote some code that made the LED increase in brightness when you move your hand closer to the cats head. Since we needed to have a digital input/output as well, I made a blue gemstone for my cat’s collar that is activated by pressing the blue button.

Highlight:
I am quite happy with how this project turned out, especially the cardboard portion. The tool training enabled me to use the Exacto knife, and by cutting out the cat’s nose and putting a few layers of tape over the back of the hole, I was able to conceal the LED while still allowing it to emit a glow. I was also able to create reliable electrical connections (better than the ones for my candle last time) by using a foil + tape technique, where I placed two bits of foil separated by a gap on a piece of tape and used it to secure the wire ends to the cardboard.

Challenges:
I wanted the light to become incrementally brighter as I moved my hand closer to the cat, so I set three brightness values for when sensorValue is above 700, between 400 and 700, and below 400. However, there is an unsolved bug in which this incrementation does not actually reflect the LED’s brightness. The LED only increments between two levels. When sensorValue is below 400, the LED is still the same brightness as for when sensorValue is between 400 – 700.

analogWrite(yellowLED, brightness);  // set the brightness of yellow LED

  if (sensorValue < 400) {
    brightness = 255;
    delay(1);  // incrementation of brightness not working
  }

  if (400 < sensorValue < 700) {
    brightness = 100;
    delay(1);
  }

  if (sensorValue > 700) {
    brightness = 25;
    delay(1);
  }

Reflection and improvement:
If I were to do this homework again, I would like to successfully implement the incrementation above, and maybe program even more segments so that the brightness of the nose increases smoothly as you move your hand towards the cat, as if it is delighted to see you. I think there may be some way to do this using the fade example, but I could not figure out how, as of now.

Update:

After talking to my classmate, I now know how to program the LED to make it smoothly fade brighter as your hand moves closer:

// set the brightness of yellow LED
  analogWrite(yellowLED, brightness);  

  // set brightness equal to max sensorValue minus the currently received sensorValues
  // the less the sensorValue (the closer your hand is), the higher the brightness
  brightness = 870 - sensorValue; 
  Serial.println(brightness);

Physical Computing’s Greatest Hits (and misses)

This reading called me out from the first example, because I was thinking about making some sort of theramin-like instrument for my final project. However, it is true that “non-original” does not equal “bad”, and the themes here provide plenty of room for one’s own unique twist. The examples provided were inspiring, and I appreciated how simple interactions (such as stepping on a square) were made engaging by the conceit behind them (learning how to salsa dance). This reading was a great illustration of how the conceptual and emotional aspects of a project are just as important as the technical aspect, and how different concepts can transform the same interaction. After this reading, I have some more ideas on how I could take these themes and make them more unique.

I was thinking it might be interesting to make an “instrument” based on photoresistors which would change the volume of different instrumental tracks (ex. piano, violin, flute), allowing people to “compose” a song by bringing in those tracks. The tracks would only play certain chords so that the composition remains harmonious. Another idea I have is to make a little “pocket pet”, similar to Tamagotchi, that would react to the user’s caresses and pats. However, instead of a “common” pet like a dog or cat, perhaps it could be an endangered species.

Making Interactive Art: Set the Stage, Then Shut Up and Listen

My biggest takeaway from this reading was the quotation, “Your task in designing an interactive artwork is to give your audience the basic context, then get out of their way”. I think this is holds true not only for interactive art but for everything we perceive in life. It almost always benefits us to not enter into things with one set vision about how things must be, and to be open to surprises that happen along the way. As someone who has written and produced songs, I know it is hard to let go of control, but there is only so much you can control, and some of my favorite reactions to my songs are from people who interpreted their own message from it. It is also important to realize that there is no way to please everyone with your art, and just because it is not for one person does not mean that it is inherently flawed.

The Unbirthday Candle

Video of the Unbirthday Candle in action

Concept

When the assignment of making a switch that doesn’t need the use of one’s hands was introduced, I first thought of other body parts that could be used to trigger a switch. Then, I realized that touch is not even needed — a switch could be triggered by blowing! Initially, I wanted to make some sort of fan or windmill that would bring the two ends of the wire together and complete the circuit, but when I was browsing through the IM Lab materials closet, the idea of a candle came to me. A folded piece of foil is attached to the end of one wire, and when one blows on it, the foil swings around and comes into contact with the end of another wire, making the LED light up. I thought it was kind of funny that blowing on the candle caused the LED to light up (since, traditionally, one blows on a candle to put out the light), so I named this candle the “Unbirthday Candle” after the unbirthday celebration from Disney’s Alice In Wonderland film.

via GIPHY

Highlight
A highlight of my design is how the bottom of the candle is attached to the piece of paper I used as a base. I quickly discovered that just taping a tube of paper to another paper was not stable, so I made both the candle and the base thicker by folding the paper a few times. Then, I fanned out the bottom of the candle to create a wider surface that I could then attach to the base, and cut slots for the two wires to be fed through. With these slots, and the holes on top of the candle, it was relatively easy to make adjustments to how much wire I wanted sticking out. 

Reflection
This assignment was very helpful in terms of making me more comfortable with how a breadboard works. Initially, I set up the circuit by copying the image in the lecture notes, like so:

However, after a while, it became clear that it was rather awkward to have the two black wires be so far from the candle. It was hard to adjust them to the desired length. Thus, I used an additional red wire to connect the two power strips so I could freely experiment with different circuit configurations, and eventually settled on the one below, which gives both wires easy access to the slots in my candle.

Ideas for future work or improvements
An improvement could be made by somehow stuffing the inside of the candle with paper or adhesive material, so that the black part of the wire can be completely concealed within the tube. This would make for a more “realistic” looking candle. I would also place a small tube of foil within the two layers of foil that make up my “flame” so that the foil can only rotate, not tilt side to side. Currently, sometimes, the switch does not work because the flame will tilt too much and not connect with the other wire when blown.

Emotion & Design: Attractive things work better

I quite agree with this first reading, as I am a person who is greatly affected by the aesthetics of my surroundings. Norman wrote that there doesn’t have to be a scientific, cognitive explanation in place for us to like something better (as with the example of the color computer displays — there is no information advantage, yet we cannot go back to black & white displays). This brought two pieces of supporting evidence to mind. The first is YouTuber Molly Burke, who is blind and also very into fashion and makeup. I have watched her videos for a long time, and something that she often says is that, just because she can’t see the makeup or the colors of her cute outfit doesn’t mean she can’t enjoy it. This is a twist on what Norman wrote about the teapots: just because he can’t use them every day for brewing tea efficiently, doesn’t mean that they don’t give “satisfaction in their appearance”. While I agree with most of this text, I do think the author is biased, as a designer, when he says that “to be truly beautiful, wondrous, and pleasurable, the product has to fulfill a useful function, work well, and be usable and understandable”. I think true beauty can exist without usability, and might sometimes even exist because of the lack of usability.

Her Code Got Humans on the Moon—And Invented Software Itself

This reading was a fascinating glance into the beginnings of software, and I was both surprised and not surprised at how the tech industry hasn’t changed in terms of gender inequality. In fact, it may have even been less discriminatory back then, because it was the “Wild West” and nobody knew what they were doing. It is notable how Hamilton’s role as a mother and Lauren’s playing with the keyboard led to saving the Apollo 11 mission, because it shows how diverse life experiences in the workplace enhance overall outcomes.

Additionally, I think the inherently exclusionary “inside club” feel of programming persists to this day, because of the learning curve needed to understand and participate in discussions in the community. It’s comparable to jazz music, in the sense that there is a certain level of “work” you need to do to be a part of the culture.

I think this article shows that everything that we take for granted today was conceived and invented by people for the first time, some time ago. For example, I, with no previous knowledge about physical computing, am now able to use breadboards to create circuits that take digital input, but back in Hamilton’s time, a whole team of expert seamstresses was required to wire the 0s and 1s. This raises the question of how current technologies that are inaccessible to laypeople may, in the very near future, be simplified and commercialized enough for anyone to manipulate.

Pride Dragon Generator 🏮🐲🌈

Link to fullscreen: https://editor.p5js.org/eggangie/full/RdxIGV1n8 

Concept:
“Pride Dragon Generator” is essentially a very simplified version of a Picrew avatar maker, in which users can select a LGBTQ+ identity and receive a dragon with spike colors of the corresponding pride flag. They can then press “s” to save the image to their device.

Image of “Bi” dragon saved to device

This project was inspired by my identity as a queer Chinese-American  who has been immersed in queer culture for years, but did not know the terms in Chinese until very recently. These terms are not taught in language classes, and the queerness is oftentimes not spoken about in Chinese or Chinese diasporic families. Additionally, queer narratives in popular culture are overwhelmingly western-centric. Thus, I wanted to combine Chinese imagery (the color red, the lantern images, guqin music, dragons) with queer imagery to represent this intersection of identities. I hope this program makes the process of learning queer Chinese terms a little more cute and memorable than by just typing them into Google Translate.

Parts I’m Proud Of:
The thing I am most proud of in creating this project is not necessarily any single bit of code, since the code is quite basic (to those well versed in p5js —aka not me), but rather stringing it all together to form a functional work of art. In each week’s assignment, I gained individual skills such as drawing with shapes, making classes, and using the mouseClicked and keyPressed functions. The challenge was combining all of these into one project, and at first it kind of felt like starting off on a marathon when you had just learned how to walk. What helped was breaking the project down into chunks, and first establishing the “structure” of the code before actually drawing the details. Here are the steps I followed, roughly in order:

1. Figuring out how to toggle between two screens with true/false & if statements
2. Programming the “S” key and back arrow to save image & return to homepage
3. Creating a Button class and adding functionality (hover and click) to it
4. Drawing the unchanging elements of the homepage and the dragon page
5. Creating a Dragon class
6. Figuring out how to make the scales change color depending on which button was pressed (if I were to do this project again, I would perhaps move step 6 to the beginning and try to figure out the 6 buttons + 6 color schemes while my code was still minimal).

As for the design of the project, I like its minimalistic, cute feel, which I tried to emanate with round rectangle corners, bold Futura font, and pastel colors. I also believe it was a good decision to have the “back” and “save image” functions be keyboard commands, because it decluttered the area under the canvas and foregrounded the LGBTQ+ identity terms that I wanted to highlight.

I also think it was a good idea to have the toggling between scenes controlled by a boolean variable + functions to draw each scene, as it made it very clear which scene was being drawn currently. I had to restructure my program in the middle of my working process, as I realized that it made much more sense to have a dragon class and then call different dragons within one scene than to have different scenes with one dragon each, and call the scenes. Also, originally, the buttons were all on the homepage with only the Chinese terms, which was a bit confusing for the user.

Old version of sketch with buttons on homepage and 5 different scenes: https://editor.p5js.org/eggangie/sketches/Idyuc-bto

After revising, there was a start button on the homescreen and a “canvas” on the second screen, which brings to mind the universal design of familiar drawing programs, creating a more intuitive experience. I also added English to the buttons, because although my original intent was to omit English and have the user learn the terms by associating them with the pride flag colors, I realized this was not explicit enough and also many people may not know or remember which pride flag colors correspond with which identities.

Problems:

I encountered four main bugs in this code, two are resolved and two are still remaining.

The first bug was with the “press ‘s’ to save image” functionality. The bug was that every key being pressed was triggering the program to save the image, not just the “s” key. The issue was that I had written keyCode === "s" instead of keyCode === 83, as keyCode is only intended to work in natural language with special keys such as LEFT_ARROW, whereas for letter keys you need to find its numerical code. Below is the working code:

function keyPressed() {
  // To find keyCode of letter keys:
  // console.log(keyCode);
  if (keyCode === LEFT_ARROW && homePageVisible === false) {
    homePageVisible = true;
    scene1Visible = false;
  }

  if (keyCode === 83 && homePageVisible === false) {
    savedImg = myCanvas.get(0, 0, width, height - 115);
    savedImg.save("my-pride-dragon", "png");
  }
}

The second bug was that the buttons were triggering different scale colors to show up when the user was merely hovering over them, but not clicking them. This was because I was writing code for clicking specific buttons inside the class, which I later learned is unideal because classes are not supposed to know the specifics of each button, they should be as general as possible. Here is the code before, with this section repeated for each button 1-6:

  click(clickX, clickY) {
    if (
      clickX > button1.x - button1.buttonWidth / 2 &&
      clickX < button1.x + button1.buttonWidth / 2 && clickY > button1.y - button1.buttonHeight / 2 &&
      clickY < button1.y + button1.buttonHeight / 2
    ) {
      dragon1Scales();
    } else {
      mainDragonDisplay();
    }
  

And after I corrected the issue within the Button class:

click(clickX, clickY) {
    if (
      clickX > this.x - this.buttonWidth / 2 &&
      clickX < this.x + this.buttonWidth / 2 &&
      clickY > this.y - this.buttonHeight / 2 &&
      clickY < this.y + this.buttonHeight / 2
    ) {
      return true;
    } else {
      return false;
    }

In office hours, I learned that the click within the Button class can be used to make a boolean variable either true or false, and then that true or false can be used in the mouseClicked function to actually detect clicks on different buttons and call each button’s associated actions.

//code for detecting click on buttons to trigger
  //different scale colors
  if (scene1Visible) {
    if (button1.click(mouseX, mouseY)) {
      dragon1Visible = true;
      dragon2Visible = false;
      dragon3Visible = false;
      dragon4Visible = false;
      dragon5Visible = false;
      dragon6Visible = false;
      mainDragonVisible = false;
    }

The third bug, which I have not resolved yet, is one in which the “bi” dragon (dragon3) sometimes shows up as the “default”, what the user sees when entering sceneOne before clicking on any buttons. By putting print statements in every function where dragon3 is called, I was able to see that that something is happening between the moment the user goes back to the homepage and the moment they returns to sceneOne to call dragon3. All the code for the bi dragon is the same as for the other dragons, so I have not been able to figure out what is causing it, in particular, to be called.

Finally, the background audio does not play when the sketch is embedded into this blog post or in fullscreen mode, but it plays fine when the sketch is run in p5js. I am not sure why this is, but perhaps it could be solved by adding a command for playing the audio on the user’s first mouse click. However, the desired effect is that the audio plays before the user clicks, just as ambient background music.

Areas for Improvement:

There are many areas of improvement, both in terms of efficiency of the code and functions and aesthetics I wish the program had. In terms of efficiency, it would be sleeker to have a “dragon selector” variable that would assign a number to each dragon, so instead of writing all of the code below to ensure that only one dragon is true at a time, I could just call the number of each dragon.

if (scene1Visible) {
    if (button1.click(mouseX, mouseY)) {
      dragon1Visible = true;
      dragon2Visible = false;
      dragon3Visible = false;
      dragon4Visible = false;
      dragon5Visible = false;
      dragon6Visible = false;
      mainDragonVisible = false;
    }

    if (button2.click(mouseX, mouseY)) {
      dragon1Visible = false;
      dragon2Visible = true;
      dragon3Visible = false;
      dragon4Visible = false;
      dragon5Visible = false;
      dragon6Visible = false;
      mainDragonVisible = false;
    }

    if (button3.click(mouseX, mouseY)) {
      dragon1Visible = false;
      dragon2Visible = false;
      dragon3Visible = true;
      dragon4Visible = false;
      dragon5Visible = false;
      dragon6Visible = false;
      mainDragonVisible = false;

      //**bug: sometimes dragon does not set back to
      //the default dragon but instead
      //shows dragon 3 as the default
      //when returning to the drawing page
    }

    if (button4.click(mouseX, mouseY)) {
      dragon1Visible = false;
      dragon2Visible = false;
      dragon3Visible = false;
      dragon4Visible = true;
      dragon5Visible = false;
      dragon6Visible = false;
      mainDragonVisible = false;
    }

    if (button5.click(mouseX, mouseY)) {
      dragon1Visible = false;
      dragon2Visible = false;
      dragon3Visible = false;
      dragon4Visible = false;
      dragon5Visible = true;
      dragon6Visible = false;
      mainDragonVisible = false;
    }

    if (button6.click(mouseX, mouseY)) {
      dragon1Visible = false;
      dragon2Visible = false;
      dragon3Visible = false;
      dragon4Visible = false;
      dragon5Visible = false;
      dragon6Visible = true;
      mainDragonVisible = false;
    }
  }
}

function keyPressed() {
  // code to find keyCode of letter keys:
  // console.log(keyCode);
  
  //return to homepage when left arrow is pressed
  //reset dragon to default dragon (sometimes does not work because bug)
  if (keyCode === LEFT_ARROW && homePageVisible === false) {
    homePageVisible = true;
    scene1Visible = false;

    mainDragonVisible = true;
    dragon1Visible = false;
    dragon2Visible = false;
    dragon3Visible = false;
    dragon4Visible = false;
    dragon5Visible = false;
    dragon6Visible = false;
  }

Additionally, since each of my buttons are performing the same hover and click functions, they could perhaps be stored in a button array, instead of being called individually every time:

button1.showButton();
  button2.showButton();
  button3.showButton();
  button4.showButton();
  button5.showButton();
  button6.showButton();

  button1.hover(mouseX, mouseY);
  button2.hover(mouseX, mouseY);
  button3.hover(mouseX, mouseY);
  button4.hover(mouseX, mouseY);
  button5.hover(mouseX, mouseY);
  button6.hover(mouseX, mouseY);

  button1.click(mouseX, mouseY);
  button2.click(mouseX, mouseY);
  button3.click(mouseX, mouseY);
  button4.click(mouseX, mouseY);
  button5.click(mouseX, mouseY);
  button6.click(mouseX, mouseY);

However, I am glad I did things “the long way” for this project, because it was much easier for me to know what each part of my program was doing when I could see every button I was creating, instead of everything being “hidden” in a for loop. I think making the code more efficient would have come at the cost of me understanding my program as I worked on it.

As for features, I wish I had time to add a key command to change background color, as well as a little “wardrobe” for the dragon (another scene that users could enter to select items, such as sunglasses or a shirt, that they could put on their dragon).

Resources:

• Inspiration: @dinosaurcouch, @catalina_cheng
• p5 Examples: Saving canvas, Saving part of a canvas, Buttons with interaction
• BezierVertex visualization
• Pride flag color codes 
• Music:

 

• Coding Train Tutorials:

• & many thanks to Professor Shiloh and Zion for their help