Concept

For my midterm project, I decided to create an interactive slime-making game called Slime Lab. I wanted to make something cute, colorful, and fun that people could interact using their own choices. The idea is that the user gets to create their own slime by choosing its color, face, and charm, and then play with it using different actions.

I also wanted the game to feel like an experience rather than just having a slime in the middle of the screen and poking it (like other slime games). So I included an instructions page, a customization section, and a play area where the user can poke, stretch, and shake their slime, and finally a page where you could either save the slime to your device or go back to create another. I used different PNG images and a sound effect to make the interactions feel more satisfying and realistic. I wanted everything to have a consistent relaxing and cute style including the buttons and the slime itself.

How My Project Works and What I’m Proud Of

The game starts with an instructions page that explains how to play. Once the user clicks the start button, they can customize their slime by selecting a color, face, and charm. I used arrays and “for” loops to organize the options rather than writing separate code for every single button. When the user clicks an option, the program saves their choice using variables like slimeColor, slimeFace, and slimeItem. These choices are then used to display the customized slime. I am proud of this part because there are multiple combinations the user can create, and I wanted the customization process to be simple and easy to understand.

let rows = [252, 357, 462];

for (let row = 0; row < 3; row++) {
  for (let i = 0; i < OPTIONS_X.length; i++) {
    if (
      dist(
        gameMouseX(),
        gameMouseY(),
        OPTIONS_X[i],
        rows[row]
      ) < 22
    ) {
      if (row === 0) slimeColor = i;
      if (row === 1) slimeFace = i;
      if (row === 2) slimeItem = i;

      return;
    }
  }
}

This part of my code uses nested for loops and the dist() function to check which color, face, or charm the user clicks on. I used this instead of writing separate code for every button, which made everything a lot more organized.

One of my favorite parts is the actual slime interactions. After creating their slime, the user can poke, stretch, or shake it. Instead of just changing the size of the slime like I originally planned in my sketch (process pic below), I decided to use different PNG images to show what the slime looks like during each action. I think this made the interactions look a lot better because I had more control over the appearance of the slime. I also added a sound effect for the poking to make the actions more satisfying and the shake button moving the slime in a quick motion.

(^When slime is stretched originally)

(Process pictures)

Another thing I’m proud of is making the game work in fullscreen mode. Originally, I designed everything around a fixed canvas size, so when I tried making the canvas fullscreen, the buttons and images were not positioned correctly. I eventually used scaling and offset calculations to keep the game’s proportions consistent across different screen sizes. I also had to adjust the mouse coordinates so that the buttons would still work after scaling, and then I used Professor Mang’s example sketch for clicking “F” to enter and exit full screen. This was probably one of the more confusing parts of the project, but I learned a lot from fixing it. I also included a way for users to restart the experience from within the game by including a button instead of having to press the p5.js Play button again.

function gameMouseX() {
  return (mouseX - gameOffsetX) / gameScale;
}

function gameMouseY() {
  return (mouseY - gameOffsetY) / gameScale;
}

Problems and Areas for Improvement

One of the biggest problems I ran into was organizing all the different PNG images for the slime. Since the user can choose different colors, faces, and charms, I had to make sure the correct images appeared depending on what they selected. It got a little confusing because I had so many images to keep track of, and sometimes the wrong image would show up or something wouldn’t work the way I wanted it to. I also struggled with making the interactions look realistic. At first, I thought simply changing the slime’s size would be enough, but after testing it, I realized it didn’t really look like slime being stretched or poked. This is why I decided to use different PNGs for the actions instead, and then I also ran into issues with the new version of p5.j and the load images would not work.

Another thing I struggled with was drawing the different slime images and making sure everything matched properly. Sometimes the faces wouldn’t line up with the slime, or the sizes would be completely off when I tried displaying them in the game. This was especially frustrating because the drawings looked fine on their own, but once I put them into p5.js, they didn’t always fit together the way I wanted. I had to keep going back and adjusting the sizes and positions of the images until everything looked mostly right. I didn’t expect this part to be so difficult because I thought drawing the slime would be one of the easier parts of the project!

If I had more time, I would definitely want to make the slime more interactive. Right now, the user has to click buttons to poke, stretch, or shake it, but I think it would be so much cooler if they could actually interact with the slime directly. For example, dragging the slime with the mouse to stretch it or clicking anywhere on it to poke it. I would also love to add more slime textures, colors, and charms, and maybe even different sound effects for each action. Originally, I had planned to draw the charms but there were too many issues with that, so i ended up just using emojis for the charms, but that’s definitely something I wish I could have changed.

References

p5.js Reference: https://p5js.org/reference/

I used p5.js functions throughout my project, especially mousePressed() for the buttons, dist() for detecting which customization option the user clicked, and loadImage() to display the different slime PNGs. I also worked with windowResized() and resizeCanvas() when trying to make the game fullscreen.

Slime Games and Videos –  A lot of my inspiration came from my childhood because I used to be obsessed with slime. I loved watching slime videos and experimenting with different colors and textures. I wanted to recreate that same experience digitally, especially the customization and satisfying interactions.

Professor Mangs Lecture Notes –

I referred to Professor Mang’s lecture notes to help me understand some of the coding concepts we covered in class and how I could apply them to my Slime Lab project. The notes were useful when working with functions, loops, and organizing different parts of my code as well as how to upload sound into my sketch.

https://github.com/mangtronix/IntroductionToInteractiveMedia/blob/master/lectureNotes.md#week-5

https://editor.p5js.org/mangtronix/sketches/t4G0erH1B

Coding Train videos –

For creating Mouse Interactions- https://youtu.be/TaN5At5RWH8?si=_xHhlhbPZx7t5YrJ

Arrays of Objects –https://youtu.be/fBqaA7zRO58?si=NP9jlVjqXL85jS7C

Fonts Used:

https://fonts.google.com/specimen/Fredoka

https://fonts.google.com/specimen/Nunito

Background Music: https://freesound.org/people/Seth_Makes_Sounds/sounds/701610/

Poke sound: https://freesound.org/people/kuchenanderung1/sounds/340794/

AI Statement

I used ChatGPT for this project when I got stuck on something and couldn’t figure out what was going wrong. Most of the time, I knew exactly what I wanted my game to do, but I didn’t always know how to actually code it. I would try things myself first, and if they weren’t working, I would ask ChatGPT to help me figure out what I was doing wrong. I also asked it to explain certain functions because sometimes I would get the code working but still not fully understand why it worked.

I also used it when I was struggling with the customization options, especially organizing everything using arrays and nested for loops. Another issue I kept running into was with my PNG images. For some reason, whenever I tried uploading multiple images at once, they would sometimes get corrupted or wouldn’t load properly, and I couldn’t figure out why. I used ChatGPT to help troubleshoot this and figure out how to organize and display the correct images. (I did not use Ai for any image generating)

My Midterm Process!

For my midterm project, I decided to make Build Your Own Slime. The idea is that the user can create their own slime by choosing the color, face, and charm. After they finish making it, they can play with it by poking, stretching, and shaking it before saving their slime.

For this stage, I started designing the interaction and working on the basic code. I made a  slime class and used different variables for the slime’s color, face, charm, and size. I also made different pages for the slime lab, playtime, and the final screen. This helped me figure out how I want the whole interaction to work.

The most uncertain part for me was figuring out how to make the slime feel more like an actual cute slime instead of just basic shapes. I also wasn’t completely sure how I would add the different images and sounds later. So for now, I made a simple sketch/prototype of the idea using basic shapes and emojis. This was mainly to see if the idea and interaction actually worked before spending time making all the final assets.

As I continue working on it I want to replace the basic shapes with PNGs that I draw myself, including different slime colors, faces, and charms. I also want to add background sounds and other small details to make the experience feel more complete and fun. For now, this version is basically a sketch of where I want the project to go and just a basic idea of it, and I’ll keep building on it throughout the next stages.

The part of this project that I am probably the most scared about is making it feel like an actual finished interactive artwork and not just a bunch of buttons with a slime on the screen. I know I want to use PNGs that I draw myself for the slime, faces, and charms, but I am not completely sure how all of those images will work together in the code yet. I also want to add sounds and background noise, which is something I have not really worked with much before. Another thing I am worried about is making the slime interactions like poking, stretching, and shaking actually feel fun instead of just changing the size of the slime. For now, I tried to reduce that risk by making a really simple version first. I focused on getting the main pages and interactions working before worrying about how everything looks.

// poke

if (
  mouseX > width * 0.25 - 75 &&
  mouseX < width * 0.25 + 75 &&
  mouseY > height * 0.80 - 30 &&
  mouseY < height * 0.80 + 30
) {
  slime.size = 170;
}

This code segment is for the poke interaction. To explain, right now when the user clicks the button, it makes the slime smaller as a simple test. In the final version, I want to replace this with a different PNG of the slime being poked, along with a sound effect, so the interaction feels more realistic and fun. This part was a little hard for me because I didn’t know how to set the size and position of the button using the percentages of the canvas. I had to figure out how the width * 0.25 and height * 0.80 worked so the button would be in the right place and the click would actually work.

 

Computer vision is different from human vision because humans can just look at something and know what it is, but a computer basically just sees a bunch of pixels. It does not automatically know that something is a person or a hand unless we give it a way to recognize it. Humans also understand things based on context which is something computers have a harder time doing.

Some ways we can help the computer see and track things are frame differencing, background subtraction, and brightness thresholding. Frame differencing can tell when something moves by comparing different frames, while background subtraction looks at what is different from the background. Brightness thresholding can also help if the thing we want to track is much lighter or darker than everything around it which i found really interesting and the reading does a good job of exmplaining this to me. I thought it was interesting that sometimes we can make the computer see better just by changing the environment like the lighting or the background instead of making the code more complicated.

I think the tracking part of computer vision makes interactive art really cool because the artwork can actually react to you. Your body or movement can change what happens but I also think it can get a little creepy because the same technology can be used for surveillance ( I have talked about this a lot in Understanding IM class).

There is a difference between walking up to an artwork and choosing to interact with it, and being somewhere where a camera is tracking you without you really knowing what it is doing. I think that makes computer vision interesting but also something artists have to be careful with.

1. What’s something (not mentioned in the reading) that drives you crazy and how could it be improved?

Something that drives me crazy is using sinks in public toilets because I can never tell if they are motion activated or if I’m supposed to press something down to turn the water on. Sometimes I put my hands under the sink waiting for the water to come out and nothing happens, so then I realize I have to press the top down. I think they could be improved by making it more obvious how the sink works, like having a small symbol or indicator showing whether you need to use the sensor or press the button.

It is such a simple thing, but I always get confused by it but i think its important to note that now after covid-19 almost everything is motion activated which i find super interesting. But even then there are issues with where to put your hands and if the sensor is broken i have to just keep wiggling my hands under it making it an awkward moment, then the person next to you says “That one doesn’t work”.

2. How can you apply some of the author’s principles of design to interactive media?

I can apply Norman’s principles of design to interactive media by making things easier for people to understand and use without having to guess what they are supposed to do. For example, if I make a button on a website, it should actually look like something that can be clicked instead of just looking like normal text. I can also use feedback, like changing the color of a button or showing something on the screen after it is clicked, so the user knows that their action worked.

I think this is similar to the public sink example because when I cannot tell if I need to use a sensor or press something, the design is not making the interaction clear enough. In interactive media, I want to make sure that users can understand what they can interact with, what will happen when they interact with it, and whether their action actually worked. This would make my projects feel less confusing and more natural to use.

Concept

For this project, I wanted to make something related to music because I liked the idea of using lyrics as part of the artwork. I decided to make a digital record player inspired by the song “Stupid Song” by Olivia Rodrigo. I wanted the lyrics to move around the record while it spins, almost like the lyrics are physically part of the vinyl. I used light blue colors to match the album and kept the design simple so the main focus would be on the lyrics. I also made the lyrics curve by placing each letter at a different position around the record.

My Artwork

Click on the screen!

Code I’m Proud Of

//separate function because curving every letter would make the draw() function hard to read
function drawCurvedText(words, radius, startAngle) {

  let spacing = 0.035;

  let totalWidth = words.length * spacing;

  let firstAngle = startAngle - totalWidth / 2;

  for (let i = 0; i < words.length; i++) {

// Calculates the position of each letter around the circle
    let letterAngle = firstAngle + i * spacing;

    let x = cos(letterAngle) * radius;
    let y = sin(letterAngle) * radius;

I am most proud of this part of my code because it was the part I struggled with the most. At first I didn’t understand how I could make the lyrics curve around the record without manually placing every letter. I was confused about what sin(), cos(), radius, and spacing were doing together. After experimenting with it, I understood that the for loop goes through each letter and the sin() and cos() calculate a different position for each one. I also made it a separate function so my draw() function would not become too messy. I am proud of this because the curved lyrics are the main part of my artwork and getting them to work made the project finally look how I imagined it.

Resources that helped me:

https://p5js.org/examples/Angles-And-Motion-Sine-Cosine/

https://youtu.be/O5wjXoFrau4?si=XUTff14jizVeiGJ6

https://p5js.org/reference/p5/text/

https://p5js.org/reference/p5/pop/

https://p5js.org/reference/p5/push/

Debugging & Reflection

The curved text was definitely the hardest part for me because I had no idea how to make the lyrics go around a circle at first. I was really confused about what sin() and cos() were even doing and why I needed both x and y. I also thought I would have to write code for every single letter, which would have been horrible. Eventually I understood that the for loop does that for me and gives each letter a slightly different position. I also had to keep changing the radius because at first the lyrics were too close to the record and were hard to read. I looked back at some of the p5.js examples we did in class and used the p5.js references when I got stuck. I had to keep going back and forth with the code and changing numbers until it looked right.

This project made me realize that I actually like experimenting with text and movement in p5.js. I still have a lot to learn and making things move around a specific shape. If I continued working on this I would want to make the record feel more interactive instead of just having it spin. I could make the lyrics change as the record moves or have the user interact with different parts of the record and in the future i definitely want to learn how to include sound in this!

Concept

For this project, I was honestly feeling a little lost at first because I did not know what I wanted to create. I was staring at my laptop wallpaper, which has jellyfish that slowly move around, and that gave me the idea to make my own version of it. I wanted to create a simple underwater scene with jellyfish floating upward. I made each jellyfish slightly different by giving it a random position, size, speed, and color. I also added a small interaction where clicking the screen creates another jellyfish.

(My wallpaper)

My Artwork – Jellyfish

Click the screen!

Code I’m Proud Of

I am most proud of the code I made for the jellyfish tentacles. At first, I was confused about how to place the lines so they would stay connected to the jellyfish when it moved. I used this.x and this.y with different numbers to place the three tentacles under the body. I like this part because it makes the jellyfish actually look like jellyfish instead of just being a circle.

// Draw the three tentacles underneath the body
  stroke(this.jellyColor);
  line(this.x - 8, this.y + 10, this.x - 8, this.y + 30);
  line(this.x, this.y + 10, this.x, this.y + 30);
  line(this.x + 8, this.y + 10, this.x + 8, this.y + 30);
}

Debugging

I struggled a lot with understanding how the class, objects, and array were connected because this was still pretty new to me. At first, I understood how to make one jellyfish, but I did not really understand how to make multiple jellyfish from the same class and have each one be different. I also got confused by this.x and this.y and what the numbers like +8, +10, and +30 were doing when I was making the tentacles. To help me, I went back to the car sketch code we did in class and looked at the way the class was structured. I also used the Ball Class Example 2 – using a class (p5editor) and Ball Class Example 3 – multiple instances using a class (p5editor) to understand how classes can be used to create objects and how multiple objects can exist at the same time. Looking at these examples helped me understand that each jellyfish can use the same class while still having its own position, size, speed, and color. I had to keep going back to the examples while coding because I am still getting used to this way of programming and it was quite frustrating.

Reflections

This project helped me understand objects and classes more because before this I was confused about how one class could create multiple things that are still different from each other. The bouncing ball example from class helped me understand how this.x and this.y belong to each individual object. I also struggled a little with understanding the array and how it connects to the objects, but once I understood that the array holds all the jellyfish it made more sense. I kept the artwork simple because I am still getting comfortable with coding, but I like that it still has movement, randomness, and interaction. If I continued working on it I would probably make the jellyfish look more realistic or add more interaction to their movement especially the tentacles.

After reading The Art Of Interactive Design , I think a strongly interactive system is something that actually feels like a exchange between the user and the computer. The part that stood out to me most was the idea of listening, thinking, and speaking. I usually think of something as interactive if I can click on it or move something around, but the reading made me realize that this does not necessarily mean it is strongly interactive.

For example, if I click somewhere and a shape immediately appears there, the system is listening to me, but it is not really doing much with what I gave it. A stronger system would take my action, process it in some way, and then give me a response that makes me want to interact with it again. I think the most important part is that the user’s actions actually change what happens next. It should feel less like I am controlling a button and more like the system is responding to me.

This made me think about my own p5 sketches because most of the interaction I have made so far is pretty simple like clicking to change size and color or adding new objects or using the mouse to control an object. I think I could make my sketches more interactive by making the computer remember what I do instead of just responding to one action at a time.

For example in my previous laser sketch, I could make the lasers change depending on where I move my mouse including the speed of it or how many times I interact with the sketch. I could also make the lasers slowly react to my previous movements instead of immediately following the mouse. Another idea would be having the colors or movement change after I interact with the sketch a certain number of times. This would make it feel like the sketch is actually responding and changing over time.

I also think I could experiment with sound or other types of input eventually. I like the idea that the sketch could react to something I do without me just clicking a button. I want my sketches to feel like the computer is actually responding to me and giving me a reason to keep interacting with it.

Concept

For this artwork, I was inspired by one of the art pieces from our reading. When I looked at the work, I noticed all the thin lines coming from different central points and spreading out in different directions. It reminded me of laser beams that I have seen at TeamLab. I liked how the lines overlap and create a kind of chaotic but interesting pattern. I wanted to recreate that feeling in p5.js, but instead of using black and white, I used bright colors to make it feel more like the laser lights I remember from TeamLab. I also used random() so the lines change and move each time the artwork runs.

My Artwork!

Code I Am Proud Of

// blue lasers
for (let i = 0; i < 40; i++) {
  stroke(0, 255, 255);
  line(250, 250, random(50, 230), random(100, 400));
}

The part of my code that I am most proud of is the for loop because it helped me create many lines without having to write every single line myself and it was essentially muplitple loops for each color. Its my first time creating a loop so I was very proud of myself. The loop repeats the “laser beam” 40 times. I also used random () so that each line goes to a different place. I think this is cool because I learned how a small amount of code can create a lot of different results.

How This Was Made

I started with a 500×500 canvas with a black background because I wanted the colored lines to look like lasers in a dark space. To create a laser beam artwork meant that I had to use for loops to create multiple laser lines without having to write the same line() code over and over again (I wish I knew this in my first p5 art piece!). This was one of the parts I struggled with because I was still getting used to understanding how loops repeat code and how changing the numbers inside the loop affects the artwork.

I used stroke() to give the lasers different colors and line() to create the actual laser beams. I also used random() for the ending points of the lines so that each laser would go in a slightly different direction. I found random() confusing at first because I had to understand that the numbers I put inside it control the range of possible positions. Even changing the numbers a little could make the lasers look different. I also used ellipse() to make the small white light in the center where all the lasers start. Getting the lines to start from the same point was another part where I had to pay attention to the coordinates. I had to think about the x and y positions and how changing them would change the direction and length of the lasers.

I used the p5.js examples and what we learned in class to understand how to use for loops. I also used the p5.js reference to look up line(), stroke(), random(), and ellipse() when I was unsure about how the coordinates worked. I mostly learned by changing the numbers and seeing what happened, which helped me understand the code better than reading about it.

Reflections & Future Work

I found the process of this art piece a little frustrating at first because I had to keep changing the code and testing it to understand what each number was actually doing. I realized that coding an artwork is a lot of experimenting and making small changes until something works the way I want, especially because at first I wasn’t feeling inspired by anything. It also made me more comfortable with using loops and coordinates, which I was not very confident with before.

For my future works I want to experiment more with movement and interaction instead of only making something that stays on the screen. I think adding mouse interaction would be a good next step for me because it would make the viewer part of the artwork and it would definitely be more fun to interact with.

Casey Reas’ talk about chance operations made me think about the relationship between control and power. One example that stood out to me was the massive structure he talks about called “Homage to New York” that was designed to destroy itself through a performance. The structure ended up catching on fire, which was not completely expected, but I found this interesting because the idea behind the work came from the Atomic Age and the huge amount of power that machines and technology can have. It made me think about how we react to things that we create but cannot completely control.

(Homage to New York by Jean Tinguely)

He also mentioned the mistrust of machines and systems of power which i found interesting. Machines are usually made to create order and follow specific rules, but they can also create chaos when something unexpected happens. There’s also a difference between the person creating the system and the machine following through with it. We can give machines instructions but we can’t always predict exactly what will happen. This makes me question how much control we should give machines (especially Ai nowadays), especially when they are connected to systems of power that can affect people.

I also liked the contrast between drawing by hand and making art through a computer. When I draw something myself, it feels more personal because I am controlling every line and decision. With a computer, I can create the rules but then allow chance to take over some of the decisions. For my updated p5.js self-portrait , for example, I learned how to create a set palette of colors and let the computer randomly choose a color whenever I click. I would still control the choices and the overall design, but I would not completely control the final result.

For me, the best balance is somewhere between complete control and complete randomness. I still want my work to feel intentional and personal, but I think adding chance can make it less predictable and more interesting. Reas’ talk changed how I think about randomness because I used to see unexpected results as mistakes. Now I see that they can become part of the artwork itself. It also leaves me wondering how much control an artist should give up and whether a machine can become part of the creative process without taking away the personal side of making art.

Concept

For this project, I created a self-portrait using p5.js that represented some of my main physical features. Since this was my first time creating a portrait completely through code, I decided to keep the design relatively simple and use basic shapes to build up the different parts of my face. I focused on features that make the portrait recognizable as me, such as my brown hair, glasses, eyelashes, eyebrows, and the pink color of my clothes and lips, i also added glasses to draw the part of me that I don’t usually show to others (I wear contacts). I also chose a bright cyan background because its one of my favorite colors. What I found interesting about this project was having to think about my face differently. Instead of drawing normally, I had to break each feature down into shapes and coordinates with colors.

How this was made

I made this self-portrait using p5.js and JavaScript. I started by creating a 500 × 500 canvas and then built the portrait step by step using basic shapes such as ellipses, rectangles, triangles, and lines. I mainly worked by changing the coordinates, sizes, stroke weights, and colors of each shape until they were positioned correctly and looked like the features I wanted to include. For learning how to work with colors in p5.js, I used The Coding Train’s YouTube videos as a reference. I also used Google to look up specific color values, especially for the brown tones in my hair and eyes and the colors that were closest to my skin tone.

While working on the code, I ran into an issue where changing the strokeWeight() for my eyelashes was also making all of the other lines in the portrait bold. I wasn’t sure why this was happening, so I used AI to troubleshoot the problem and understand how the stroke settings were affecting the rest of the code. This helped me realize that strokeWeight() continues to apply to the shapes and lines that come after it unless it is changed again. I then adjusted where I placed the stroke weight so that the thicker lines were only used for the eyelashes and glasses.

Code I’m proud of

//glasses
noFill()
stroke(0)
strokeWeight(4);
line(237, 233, 263, 233);
ellipse(300, 233, 75, 75);
ellipse(200, 233, 75, 75);
line(163, 233, 133, 225);
line(337, 233, 367, 225);

One part of my code that I am particularly proud of is the code I used to create my glasses. Although the code itself is quite simple, I found making the glasses symmetrical and positioning them correctly on my face surprisingly difficult. I had to think a lot more about the math and coordinates than I expected, which was challenging for me because math is not something I am very good at. Since everything is based on coordinates, I had to think about how far each part should be from the center of the canvas and from each other. I spent a lot of time changing the numbers and checking how the glasses looked until I finally got them to line up properly.

Reflection

I really enjoyed making this project, especially because it was my first time using p5.js and actually creating a drawing through code. At first, I found it a little confusing having to use coordinates and numbers for basically everything, especially because I am not very good at math. However, the more I changed the numbers and saw how they affected the portrait, the more I understood how everything worked. For my next project, I would like to make something more interactive instead of just having a static image. I think it would be really interesting to have something on the screen change when the user clicks or moves their mouse especially since I’ve mostly understood the basics now.