Mini Project 2: Interactive Memories and Dreams

Project Title: Cicci bird’s Dream （Collaborated with Cicci Shao)

Link: Mini Project 2

Brief Description

In this project, there’s a little bird standing amidst rolling mountains and soft moonlight. Through interaction with the mouse and keyboard, you might hear the bird’s enchanting song, witness scenes that transform like a dream, and perhaps explore even more…

Demo/Visual Documentation

Screen recording

Screenshots

 

My partner’s original self-portrait

Coding

As for my code, in the background section, I employed if statements to simulate different scenes based on mouse position or keyboard clicks. Multiple variables were utilized to determine the coordinates of stars within the scene. For the bird section, I primarily used basic shapes to create changing facial expressions, concurrently setting variables to draw musical notes. Additionally, I used mouseX and mouseY to enable the icon to follow the mouse movement.

In terms of the whole process of coding, here’s the link to a sketch which is the first version: https://editor.p5js.org/Sara-307/sketches/dLxVwgZ5b (not the formal code!) My dissatisfaction with this version mainly lies in the background part. I felt it didn’t meet my aesthetic standards, and the movements of many clouds and raindrops seemed quite rigid to me, so I opened a new sketch and coded a new one.

The formal version is generally better, but I feel that I still have some shortcomings in my grasp of size changes. I attempted to use if statements to set the conditions for the changes, employed the constrain function to limit the range, and used console.log to monitor values. However, in the practical process, I often encountered the issue of the image getting stuck when reaching its maximum or minimum values, which left me puzzled. (I still don’t know why my code started working again in the end…)

Code of this part:

if (keyIsPressed == true) {
dia1 = dia1 + 1;
} else {
dia1 = dia1 - 1;
}
if (keyIsPressed == true) {
dia2 = dia2 + 1;
} else {
dia2 = dia2 - 1;
}
dia1 = constrain(dia1, 2, 6);
dia2 = constrain(dia2, 2, 5);

Another crucial part of the code for me is related to the transformation of the bird (self-portrait). In Project 1, I initially wanted to use the ‘arc’ function to draw the shape, but I couldn’t quite grasp how to use it, so I used another one to replace it. However, by studying others’ code and attempting to make changes to the ‘arc’ image on my own, I understood each parameter and how to use it. It may not be a particularly challenging aspect, but I’ve made progress in this small detail compared to Project 1. 😀

Code of this part:

arc(125, 140, 30, 30, 0, PI - PI / 12, CHORD); //beak1
arc(120, 140, 40, 40, PI + PI / 12, TWO_PI, CHORD); //beak2
noFill();
stroke(0);
strokeWeight(3);
arc(93, 115, 30, 30, PI + PI / 4, TWO_PI - PI / 4); //wink1
arc(147, 115, 30, 30, PI + PI / 4, TWO_PI - PI / 4); //wink2

Reflection

• Feedback from my partner
• “I love Sara’s work! The background color is coherent and the bird’s facial expression is vivid. This work greatly gathered all the elements I like: corgi, bird and music. I really appreciate this work🥰🥰” —Cicci Shao

• What have you learned throughout the process of using the setup and draw functions, as well as variables and conditionals?
• I learned that we can initialize things in the setup function and it only plays once, while draw function serves as a loop. In terms of variables, I used a lot of them throughout the process and found it really convenient. There were plenty of times when I needed to change the position of something, I could do this by change the value of the variables and it saves a lot of time and avoid some potential errors. As for conditions, I even learned how to nest a statement inside another statement. However, sometimes it’s difficult to clarify the logic relationship and it’s easy to miss the curly bracket.

• Reflect on the language your partner used to describe the memory/dream and your interpretation of it using code.
• This mini project is based on my partner Cicci Shao’s self-portrait(the bird), her memories and dreams. Cicci told me that she likes singing and once she dreamed about holding a concert, bathing the moonlight. Inspired by her sharing, I create an interactive part where, upon clicking the mouse(if statement, mouseIsPress), the bird would sing songs(using variables). And since there was no color on the background originally, I choose blue-purple hue(vertex) to create tranquil nighttime scenes with shooting and sparkling stars(if statement,speed,size) and the scenes change as the mouse moves. When I was about to finish the whole thing, I added another scene of dessert which an only be trigger by pressing the key(keyIsPressed) because I think changing scene would add more mysterious atmosphere and I like the strong contrast between different colors. Cicci also mentioned that she has a pet dog which is the best gift she had received in her memories. Thus, I design an adorable puppy icon following the movement of the mouse(mouseX,mouseY). Basically, above are fragments of dream and memories, as well as my interpretation and design.

• What are your thoughts on digital interactions and real-world interactions? After using mouse and keyboard interaction, describe an interactive device — one that doesn’t exist yet — that could let you to recreate better the memory/dream in p5.js
• Real-world interactions are more common in life and they are straightforward and mostly physical, allowing different senses. Digital interactions, on the other hand, rely on devices. Though they are conveyed by digital and physical means respectively, we can find a path, or a medium to connect them with each other and create some “serial communication”. As for interactive device, I would like to have a device with a touch-sensitive surface. As I just mentioned, real-world interactions involves different senses, while digital interactions mostly deal with what we can see and hear, which prevents us from interacting with our other senses. However, with the aid of a touch-sensitive screen or surface, I can recall my memories and dreams by touching it. And maybe in the future, we can also develop devices associated with smelt and taste etc.