Project Link：

original portrait:

https://editor.p5js.org/yl10397/full/8hOZ3tcPP

edited one:

https://editor.p5js.org/xj2359/full/HOO0fRYlM

Brief Description and Concept:

This project is an interactive sketch created in p5.js, designed to visualize a meaningful memory or dream shared by my partner. It builds upon the idea that memories, much like digital interactions within this sketch, are fluid and constantly evolving. By incorporating motion, lighting effects, and interactive elements, the piece allows the audience to engage with the memory in a dynamic and immersive way.

The sketch is based on my partner’s self-portrait, but I have added additional elements such as a computer, dynamic lighting, changing weather, and randomly generated stars to enhance storytelling and interactivity. These elements contribute to the dreamlike and surreal quality of the scene. My partner’s experience revolves around relentless studying, often deep into the night, which ultimately resulted in an outstanding GPA. While this may seem like a conventional narrative, it underscores the undeniable truth that hard work pays off. Those tireless nights resemble stars scattered across the sky—silent yet brilliantly luminous. To reflect this, I intentionally incorporated stars into the scene, symbolizing those late-night struggles, their faint glow embodying the perseverance and dedication behind every achievement.

Coding:

Challenges & Iterations:

Throughout the development process, several challenges arose that required iteration and problem-solving:

1. Implementing Interactive Components:

Originally, the lighting effect was static, but adding mouse-based interactivity made it more engaging.

Weather changes were difficult to balance, but random distribution helped achieve a natural effect.

2. Balancing Aesthetics & Functionality:

Adding too many elements initially made the scene cluttered, so I refined the layout for clarity.

3. Debugging Motion Logic:

Ensuring smooth movement of weather elements and stars took multiple refinements.

Feedback from Partner:

I think the overall effect is fantastic, especially the lighting effects on the computer, which are truly impressive. That being said, a 4.0 GPA is definitely beyond my own level. I noticed that you introduced a new sequence, used randomly drawn circles to create the stars, and even applied a quadratic function to shape the trajectory—all of which resulted in a stunning outcome. I’m not entirely sure if I should mention this, but I think the professor hasn’t officially allowed the use of certain functions yet. Still, I believe your implementation is remarkable and highly imaginative. Well, I guess that’s about it—anyway, it’s way better than what I came up with… Yeah, I’m out of words.

Reflection:

Throughout the process of using the setup and draw functions, as well as variables and conditionals, I have gained a deeper understanding of program structure and logical control. The setup function allowed me to initialize the canvas and variables, while draw provided a looping mechanism to create dynamic effects. Variables enabled me to flexibly control different elements' states, and conditionals allowed me to trigger various visual effects based on specific conditions, such as the twinkling of stars or changes in lighting.

When interpreting my partner’s memory/dream, I noticed that they used imagery related to "hard work," "night," and "stars." To reflect this, I incorporated a night sky, dynamic lighting, and randomly generated stars to symbolize the late-night struggles. I attempted to use shifts in lighting and motion to convey the journey of perseverance and the sense of accomplishment that follows.

Regarding digital and real-world interactions, I believe both have their strengths. Digital interactions remove physical limitations, allowing for more creative and abstract expressions, whereas real-world interactions provide a stronger sense of presence and immersion. After experimenting with mouse and keyboard interactions, I envisioned a yet-to-exist interactive device—an emotional feedback panel that senses the user’s emotions and adjusts the visual effects accordingly. Using biometric sensors to detect heart rate, fatigue, and other physiological signals, the system could dynamically modify the brightness of stars, the frequency of shooting stars, or even cause the entire scene to shift in response to the user’s emotional state, making the recreation of memories and dreams in p5.js more immersive and lifelike.