Concept

My game is based around a birthday cake, with each scene representing a different age: 1, 5, 10, 15, and 18. The character moves through the different scenes and explores objects that represent memories from that age. When the character reaches an object, the player can interact with it and a short piece of text appears explaining the memory behind it. I wanted the game to feel personal and nostalgic, while also being fun and interactive, showing how different memories and experiences have been part of growing up.

Design

I went for a very minimalistic design approach, carefully choosing certain fonts and colours to maintain the nostalgic and playful feeling I wanted for my game.

original design
improved design

My original design was AI generated, but I wanted the final design to be something I drew myself so I decided to digitally redraw the cake, adding my own personal touch.

character sprite sheet

I also slightly changed the colours and simplified the colour palette to make the overall design look more aesthetically pleasing and consistent. I personally love how the improved version turned out because I feel like it reflects my personality and the style I was going for much better.

Highlighted Code

let memories = [];
let activeMemory = 0;

function createMemories() {
  memories = [
    new Memory(
      0, 0.56, 0.30,
      "My first teddy bear!"
    ),

    new Memory(
      0, 0.45, 0.78,
      "My name is Dana! This is where my story begins."
    ),

    new Memory(
      1, 0.44, 0.32,
      "I learned how to paint, and it quickly became my favourite hobby!"
    ),

    new Memory(
      1, 0.60, 0.55,
      "I loved playing with bubbles!"
    ),

    new Memory(
      2, 0.44, 0.31,
      "I learned how to ride a bicycle!"
    ),

    new Memory(
      2, 0.60, 0.78,
      "I got my first camera and started capturing memories through photography!"
    ),

    new Memory(
      3, 0.41, 0.55,
      "I started playing padel and got really good at it!"
    ),

    new Memory(
      3, 0.62, 0.78,
      "I got my first phone!"
    ),

    new Memory(
      4, 0.50, 0.50,
      "I'm finally 18! I can't wait to see what the future holds for me!"
    )
  ];
}

This was probably the part of my project that I struggled with the most. I found it difficult to figure out how to make the character interact with the different objects on the cake and have the correct memory appear. I had to learn how to use a class to create multiple memory objects, each with its own age, position, and text. I also learned how to use coordinates to determine where the character needs to be for a memory to appear, which was something I hadn’t done before. It took me a while to understand how everything worked together, but I eventually managed to get it working. Although it was challenging, I think this was the part where I learned the most because it pushed me to explore coding concepts I wasn’t familiar with.

Additionally, I learnt how to use  isNearby() function to check whether the character is close enough to interact with an object. To do this, I used the p5.js reference page to learn about the dist() function, which calculates the distance between two points. I then used this to check the distance between my character and the memory objects. If the character is close enough, the player can press E to reveal the memory. This was something I hadn’t learnt in class, so it took me some time to understand how to apply it to my game.

Resources and References

Music – https://youtu.be/TmgqHnb5oHo?si=0d8dY4g8QcIGs4uZ

p5.js referance – https://p5js.org/reference/

Changing scenes tutorial – https://youtu.be/IWyPwbt5ZrA?si=tPL8t6uc9DrFvP7t

OOP tutorial – https://youtu.be/T-HGdc8L-7w?si=ATAbeymCwJaYaWAG

AI (ChatGPT) – I used ChatGPT as a learning tool to help me understand new coding concepts and troubleshoot errors.

Concept

My birthday is coming up soon, and I’ve been spending a lot of time looking through old photos of myself and reminiscing about when I was younger. This inspired me to create a game about going down memory lane and reliving memories from different ages.

In the game, the character “hops” onto each birthday cake and explores the different objects on it. Each object represents a memory from that age. When the character reaches an object (for example a plane) a short piece of text appears explaining the memory connected to it.

Design

The game is structured around different birthday cakes that represent important ages in the character’s life. Each cake has the same overall visual style, but the number of candles, background colour, and objects change depending on the age. The character moves across the cake and interacts with different objects, with each object representing a specific memory from that stage of life. When the character reaches an object, a short piece of text appears describing the memory.

This is the color palette I chose. I used soft pastel colors to create a nostalgic, playful feeling and reflect the innocence and simplicity of childhood.

Sprite sheet created using the help of AI.

Uncertainties

I think I might face difficulties with how the character will move around the cakes and how the memories will appear when an object is reached. I am also unsure about how to connect the different ages smoothly so that the game feels like one continuous journey. Another challenge will be finding the right balance between gameplay and storytelling, as I want the game to be interactive without taking away from its nostalgic and personal feeling.

Actions to minimize risk

I will plan the game before developing it and test each part as I go. I will start with simple character movement and interactions before adding more complex features, so any problems can be fixed early. I will also keep the number of memories and animations limited so the project remains manageable.

 

 

Reading Reflection

What I found most interesting about this reading was how different computer vision is from human vision. Humans can understand what they are looking at naturally, while computers only see pixels and need specific techniques to find meaning in an image. I also liked the idea that the physical environment can affect how well computer vision works. Things like lighting, contrast, and the background can make it much easier for a computer to detect what it is looking for. This made me realize that designing an interactive experience is not only about the code, but also about designing the environment around it.

One thing I will take away from the reading is that computer vision can make interactions feel more natural by allowing people to use their bodies and movements instead of traditional controls. However, its ability to constantly track people also makes me think about the difference between interactive art and surveillance, especially when people may not realize they are being observed.

Concept

One click can send an order around the world. I was inspired by the idea of online shopping and how orders come from people all around the world. The map visually represents online shopping, while the different colored dots show the locations and gender of customers.

Highlighted code

//drawing the circles
for (i = 0; i < numRows; i++) {
  let circleX = map(lng[i], -180, 180, 0, width);

  let circleY = map(lat[i], -90, 90, height, 0);

  circle(circleX, circleY, 15);

  if (Gender[i] > 1) {
    noStroke()
    fill(24, 30, 226, 60);
  }
  if (Gender[i] < 2) {
    fill(251, 40, 223, 60);
  }
}

I am most proud of this section of code because I struggled a lot with aligning the dots to the map. It required a lot of trial and error to get the locations mapped correctly. There is still a slight misalignment, but compared to where I started, it is much better.

This is what it looked like initially.

 

How this was made

I applied what we learnt in class about uploading datasets. I made sure to upload it in the correct data file as a .csv and checked my data for any gaps. I then uploaded an image of a colorful map to use as the background. I chose the vibrant colors because I thought they would work well with the blue and pink circles. It was also important to map the data correctly and choose a suitable canvas size. I chose 600×400 because it best matched the shape of the map. The blue circles represent male customers, while the pink circles represent female customers. I intentionally made them slightly transparent so the viewer could see where the circles overlap. I then added another layer by including moving emojis that relate to online orders, such as shipping boxes and delivery bikes.

Reflection

Overall, I think I did a good job applying what we have learnt in class. However, in the future, I would love to explore ideas such as having text appear when hovering over certain areas of the map, or adding percentages to show the differences between continents. This could make the map more interactive and help the viewer understand the data more easily.

 

 

Reading Reflection

What I found most interesting about this reading was how Norman explains that when something is difficult to use, it is not always the user’s fault. I usually get annoyed when I cannot figure out how something works, but the reading made me realize that the design itself can be the problem. Things like signifiers and mapping are meant to make it clear what you can do and what will happen when you interact with something.

I can definitely see how this applies to interactive media because users should not have to spend a lot of time figuring out how something “works”. Buttons, icons, animations, and other interactive elements should give people clues about what they do. I also liked the idea that designers should expect people to make mistakes instead of assuming everyone will use something perfectly. It made me think more about how small design choices can completely change how easy or frustrating an experience is.

One thing I will take away from the reading is that good design should feel almost obvious to the person using it. If I have to stop and think about what a button does or how something works, there is probably something about the design that could be clearer. This is something I want to pay more attention to when creating my own interactive projects.

Concept

It’s really hot outside, and I can’t help but think about relaxing in a pool, resting on a floatie with a popsicle in my hand. That, and my love for ducks, inspired the rubber ducky floaties popping around, with the background color representing a swimming pool.

Highlighted code

// beak
fill(255, 115, 25);
triangle((this.x - 195), (this.y - 140), (this.x - 130), (this.y - 180), (this.x - 105), (this.y - 140));
triangle((this.x - 195), (this.y - 140), (this.x - 130), (this.y - 125), (this.x - 105), (this.y - 140));

While the shape of the duck looks simple, there are actually a lot of different shapes that make up the object. When it comes to creating a shape that moves, it becomes difficult to make sure all the shapes have the correct coordinates so that they look like they are “stuck” together instead of floating around, because then it would no longer look like a duck. That is why I am most proud of this part of the code. It required a lot of time to figure out what to add or subtract from the x and y variables in order to keep the whole object together as it moves.

 

How this was made

I used what we learnt in class and the p5.js reference to create this project. I first started off with creating shape of the rubber duck floatie and then proceeded to add the shadows to add some more depth to it.

I also made sure to picks specific colors to add another layer of realism, that background color was picked to simulate a pool and I used this color guide to pick it.

Reflection

I am happy with what I was able to achieve. However, in the future I would like to learn how to create an actual hole in the shape rather than filling it in with the background color, so I can create a more realistic floatie.

However, I faced a small step back when I realized that the floatie was too big and one floatie took up the whole canvas. Instead of going back and trying to scale down every coordinate manually, I used the reference to learn how to use the scale()function. It was a bit challenging to understand at first, but once I experimented with different values and learned how to stop the function from repeating with the use of the resestMatrix() function, I was able to scale the floatie down only once.

 

 

Reading Reflection

I found it very interesting when Crawford talked about how in a conversation you need to apply all three steps (listening, thinking, and speaking) in order to have a successful interaction. What stood out to me was the idea that if one of these is missing, doing well in the other two does not really make up for it. As Crawford explains it “is like a weak link in a chain. The chain breaks regardless of the strength of the rest of the links.” I liked this comparison because it makes the idea very simple and easy to understand.

I also really liked the way he describes the difference between interaction and reaction. He uses the idioms “apples and oranges, horses of different colors, tigers of different stripes,” which I thought was a very interesting and memorable way of showing that the two are completely different things.

Concept

I was inspired by the scratch pads that I loved drawing on as a child, the hidden gradient background is what influences the use of changing flashing colors. I also wanted to bring elements of childhood by using simple shapes such as stars and circles.

Reference

Highlighted code

//changing colors
background(paletteLerp([
  ['blue', 0.3],
  ['red', 0.6],
  ['yellow', 0.4]
], millis() / 1000 % 1));

I was determined to use the changing colors effect rather than a still color gradient, therefore I used the p5.js reference to learn how to use the paletteLerp() function to rapidly change colors. It was quite difficult to use at first however with lots of trial and error I eventually achieved the result I wanted.

 

How this was made

Starting off with the main element, the stars, I was able to use the for() loop tool successfully to join the circles in a certain way to create the stars pattern. I then moved on to learning how to use the paletteLerp() function to change the color of my background; I was also able to pick the duration of each color and the speed. For the finishing touch, I wanted to further challenge myself by adding smaller circles by combining the nested loop and click feature, this way I was able to add another layer of interactivity to my work. I referred to the p5.js reference to learn how to create the star shape and use the click response.

Reflection

Overall, I am proud of what I have achieved. I was able to play around with the nested loop to create shapes within shapes. In the future, I would like to also experiment with randomness, and how randomness can be used to create slight deviations which gives some sort of a shaking effect.

 

 

Reading Reflection

text

Concept

This is my first IM class and my first time working with JavaScript and therefore this assignment took longer than expected. My aim was to create a self portrait of myself wearing my favourite light blue colored abaya and included elements like my glasses to make the character more realistic. I also wanted to include an interactive elements, which is why I added my glasses that appear when the mouse is clicked.

Highlighted code

strokeWeight(2)
stroke('#d17a7a')
fill('#ffb3be')
arc(280,428,40,25,PI,PI-PI);
arc(320,428,40,25,PI,PI-PI);
arc(300,428,80,35,PI+PI,PI)
line(260,429,340,429);

I am most proud of the mouth. Though it looks simple, it took me a while to try and figure out the coordinates, and it took especially longer trying to figure out the correct arc angle. I am proud of the outcome and I think I did a great job without relying on AI and by using the resources provided.

 

How this was made

I used the skills we learnt in class and the p5.js reference to help me create my self portrait. The main shapes where ellipse, used for the eyes, glasses, and hijab, and the arc, used for the nose and lips. I also experimented with adding an interactive elements using the if() tool. I added my glasses, which appear when the mouse is clicked, and I implemented what we learnt in class about colors and transparency to bring the glasses to life.

Reflection

Although it looks like a human, I don’t think it looks like me. If I had to do this again I would have a reference photo of myself to refer to as I was working instead of freestyling it. In the future, I would also like to add more details, like drawing the eyebrows arc and more realistic pupils. I would also love to experiment with interactive elements, like changing backgrounds or moving elements.