Magnetic Memories: Explore My Travels🧳

By Sara He 🐾

github code link🛤️             live project link🛣️

Project Description🧲

Explore a world of memories on our website, where users can journey through the refrigerator door to discover a collection of unique refrigerator magnets. Each magnet on the fridge door holds a unique story, serving as a memento from various journeys. Carefully observing each magnet, some come to life, narrating the tales of their travels. Through interactive features, users can delve into the animated narratives behind these magnets, virtually reliving the sights and sounds of past adventures. 

In a world 100 years from now, the ways people travel and their destinations evolve and iterate. Simultaneously, more advanced devices may store their memories complete and clear, ensuring they are never forgotten. Placing the refrigerator magnets into a space-time capsule, when future generations discover this website, they can gain insight into how people traveled and used refrigerator magnets or other objects to preserve their memories in this “primitive” manner.

Embark on a journey of exploration as you uncover the rich tapestry of memories adorning the refrigerator door, each magnet offering a glimpse into the traveler’s world.🗝️

Design and Composition🎨

For this project’s design, I aim to showcase a complete storyline. The main page depicts a room scene with a fridge at its center. I created a welcoming page and incorporated a door-opening effect to smoothly transition to the main page. To simulate users approaching the fridge, I implemented controls using six different keys for movement.

Then, users can go through two stories by interacting with the fridge magnets. In the first story, by pressing the left and right arrow keys, they can view a filmstrip, with the content transitioning from simple sketches to corresponding photographs of real scenes as they move. In the second story, users can place orders and, accompanied by corresponding sound effects, consume the items they ordered. Once they finish eating and drinking, they unlock the second narrative segment.🍽️

Finally, when users return to the main page, they will see the diary on the ground. By clicking it, they can uncover the real message that I aim to convey through this project.

(hand-drawings of lots of elements in this project)

The project mostly reflects my initial vision and has most of its functions working. However, I believe it could benefit from some tweaks in details to make it more functional and visually appealing. For instance, smoothing out the trajectory of the paper plane’s flight on the welcoming page would add realism. Also, adjusting the placement of furniture on the main page and linearly reducing the height of the beverage during consumption in story 2 would improve realism. One minor issue is occasional desynchronization between text and audio, affecting the narrative slightly.

Technical🔭

This project consists of four JavaScript sketches. To clarify the logic of the code, I created a mind map to understand the key effects in each sketch and their interconnections.

When drawing the paper airplane on the welcoming page, I employed a variable named ‘planeDevelopment’. I determined the position of the plane by dividing ‘window.scrollY’ by a specific ‘revealThreshold’. Then, I mapped its x and y coordinates accordingly.

One tricky aspect was dealing with nested classes and multiple scaling. At first, I was quite confused and the scaling wasn’t accurate. But after organizing the nested structure, renaming variables, and applying scaling step by step, recalculating coordinates as needed, I finally got it right.

When creating the imageWrappers, I created the horizontal position (x) for each ImageWrapper. If it’s the first image (when i is 0), it calculates the width of the first image relative to the window height, then sets x to be three times that width but negative, so it appears off-screen to the left. For subsequent images, x is set based on the position and width of the previous image plus a gap.

I’ve implemented fade-in effects multiple times in this project, whether it’s for text or images. One common pattern I noticed is that to achieve the fade-in effect, I need a variable to store the start time, then I track the elapsed time. After that, I map the elapsed time to other variables to control the fading effect.

In this project, the diary will only appear on the main page, which is page 2, after users have visited both page 3 and page 4. So, I need to keep track of which pages users have visited. To accomplish this, with the help of professor Leon, I attempted to add a variable called ‘seen’ to the URL. This variable changes each time the user visits a page (and we can see its changes in the URL).

Reflection and Future Development🔮

Reflecting on my project’s journey from its proposal to its current version, I’ve witnessed significant growth. Initially, my ideas were somewhat scattered, and I struggled to find clarity. However, over time, I methodically unraveled the complexities, gradually bringing each component to fruition. This process taught me the importance of patience, persistence, and organization. During the process of overcoming challenges, my understanding of coding has deepened. When meeting with LAs, I found myself able to articulate my ideas more clearly, discuss the approaches I had tried, and explore potential solutions. Additionally, compared to my midterm project, which focused more on creating images and movements, I feel that in my final project, I have made more attempts and applications of logical and functional code, which signifies progress.🙌

As for the future developent of this project, there’s still plenty of room for improvement. For example, making sure the sound matches the text better and keeping the magnets within the fridge door. Professor Marcela also offer me some good ideas, like making the liquid levels go down gradually on page 4 and simplifying the action keys to avoid confusing users.

For me personally, what I really want to improve is my storytelling skills. In this project, I’m still using a lot of basic techniques like displaying images, adding narrations, or simply clicking on objects. In fact, after seeing some amazing websites and playing some really engaging narrative games, I believe there are many more dynamic, fun, and engaging ways to explore.

Credits & References📝

Sound effects

• Page1-open door: pixabay-opendoor
• Page2-footsteps: pixabay-footsteps
• Page4-eating and drinking: pixabay-eating  drinking

Narrator: Me

Images

• Magnets, landscape drawings, food, beverages, and diary: Me
• Page3-photos: Me and my mom👩
• Page4-Hong Kong background: pinterest

Storytelling inspiration

• Game: What Remains of Edith Finch
• Website: Welcome to Pine Point

Special thanks to Professors Leon, LA Carrot and Danni for technical support.🤩🙌

Title of the Project

Magnetic Memories: Explore My Travels

Brief Description

Explore a world of memories on our website, where users can journey through the refrigerator door to discover a collection of unique refrigerator magnets. Each magnet on the fridge door holds a unique story, serving as a memento from various journeys. Carefully observing each magnet, some come to life, narrating the tales of their travels. Through interactive features, users can delve into the animated narratives behind these magnets, virtually reliving the sights and sounds of past adventures. 

In a world 100 years from now, the ways people travel and their destinations evolve and iterate. Simultaneously, more advanced devices may store their memories complete and clear, ensuring they are never forgotten. Placing the refrigerator magnets into a space-time capsule, when future generations discover this website, they can gain insight into how people traveled and used refrigerator magnets or other objects to preserve their memories in this “primitive” manner.

Embark on a journey of exploration as you uncover the rich tapestry of memories adorning the refrigerator door, each magnet offering a glimpse into the traveler’s world. ⏳

Sketches

Link to presentation

presentation slides

Project Title: Fireworks Show🎇

Link to the project: github

Brief Description

In this project, I aim to depict a fireworks show, with fireworks triggered by user’s mouse press and exploding in the night sky, evoking a sense of enchantment. Additionally, shooting stars streak across the horizon. People sitting by the water can not only gaze at the sky but also see reflections in the water below.🎆

Visual Docuentation

Coding

I create two classes for fireworks and shooting stars respectively. Given the gravity, I applied what we’ve learnt in class into use to adjust speedY over time, simulating the descent of fireworks following their explosion. I also make the size gradually become smaller and smaller to mimic the gradual disappearance of the fireworks against the backdrop of the night sky.

I also implemented a water surface on the canvas, allowing for the creation of the reflection effect. Using translate(), I mirrored the fireworks and shooting stars in the downward direction. 

Additionally, I wanted to make objects disappear upon reaching the water surface and reappear at their initial positions. However, attempting to achieve this within the class using methods I we used before doesn’t work well. I tried to position objects at (this.startX, this.startY) , but failed. As a workaround, I utilized the reset() method to reposition objects accordingly.

Reflection

• What is Object-Oriented Programming (OOP), a Class and an Instance of the Class?

In my opinion, object-oriented programming (OOP) is like organizing code based on real-world objects, relying on concepts of classes and objects. Personally, I think a class is like a set of rules and blueprints that define how instances/objects should behave, but each instance/object created from a class is unique and distinct from others. For example, in my project, I created shooting stars represented by individual objects like star 1 and star 2. While they may share common properties and movements, they remain distinct entities.

• Discuss the effectiveness of OOP. When is OOP useful? In what way can it be utilized?

I personally think that the most effective feature of OOP is its reusability. A single class can correspond to multiple objects, making the coding process more concise and efficient. Also, by employing OOP, we can break down complex systems into individual, manageable objects. Each class can clearly define the properties and functions of one or more objects, making modifications easier.

• Describe the objects you have created. What properties and methods were implemented? What kind of behaviors did you create by manipulating them?

In the my project, I created several objects using OOP principles. Firstly, the Firework class represented individual fireworks, with properties such as position, color, size, and velocity. Methods were implemented to update the position of the fireworks over time and display them on the canvas. By manipulating these properties and methods, I created behaviors such as the movement of fireworks, their explosion upon reaching a certain height, and the gradual fading of their size over time.

Additionally, I created a ShootingStars class to represent shooting stars, with similar properties and behaviors as fireworks but with different initial positions and trajectories. 

• Please share it if there is any challenging and confusing aspect(s) in the OOP concepts and techniques

I’m a bit unclear about the distinctions between an object and an instance in OOP. I tend to perceive them as the same entity, but I’m not sure about their precise differences.🧐

Title: Rafaël Rozendaal and His Work

Freedom of Movement at Stedelijk Museum, Amsterdam, 2018. Photo by Peter Nijhuis (Copyright © Rafaël Rozendaal, 2018)

Abstract Browsing at Steve Turner, Los Angeles, Photo by Don Lewis (Copyright © Rafaël Rozendaal, 2016)

Net Art

Net art is a form of digital art that uses the internet as its primary medium for creation and exhibition, encompassing features like connectivity, global reach, multimediality, immateriality, interactivity, and equality. Its nature is processed-based, interactive, and mostly ephemeral. Artists utilize code, digital technologies, and online platforms to create innovative and experimental works. Building upon traditional art, net art expands the possibilities of artistic creation, and brings about new explorations and developments in the combination of art and technology.

Introduction

• About the Artist

Background: Rozendaal comes from a drawing background and also hails from an artistic family, where he was exposed to art from a young age. It was later on that he got introduced to coding.

Method: One of the methods frequently employed by Rozendaal is to utilize code to generate dynamic images and interactive works.

• Visual, technical,material features

Visual: Rozendaal uses bright colors, typically with high saturation and high contrast to provide a pleasurable visual experience. Besides, he often employs, arranges and manipulates various geometric shapes and patterns in his work to make them visually appealing.

Technical: His works are usually highly interactive, allowing audiences to engage with the artwork through clicks, swipes, or other gestures. For example, in one of his works, users can control pink and blue gradients with mouse movements.

Material: Rozendaal’s works are mainly presented in digital formats. However, they are not solely limited to online media, but also encompass installation, weaving, three-dimensional printing and even haiku.

Discussion

• Situate the Research Topic within what you have learned about net art in the reading. Consider the technological, political, social, geographical context (whichever applies). What’s the significance of the work? What do you interpret to be its intention/message? What impact does/doesn’t it have?

Rafaël Rozendaal’s works create dynamic and interactive digital experiences. Through vibrant colors, geometric patterns and interactive elements, his artwork challenges traditional boundaries of art and seek freer ways of artistic expression. Technically speaking, Rosendahl’s works demonstrate the potential of code and digital technologies to reshape artistic expression. Politically and socially, I deem that he also include themes like accessibility, connectivity, and the democratization of art in his artworks. Overall, his work push the boundaries of creativity and interactivity in online artistic expression, and inspire more artists to explore the possibilities of digital art.

• Which features of the internet / web are significant for your Research Subject, and why?

Significance: One point that left an impression on me in the article is the mention of equality as a characteristic of net art. In the interview, Rozendaal also noted that the internet provides more freedom for artistic creation, as anyone can publish their work online.I think the internet allows him to reach a diverse audience, allowing individuals from different walks of life to engage with his creations. Also, his creation is no longer limited to the canvas, but has a larger and freer space.

• What are the connections with the concepts we are learning in CCLab?

Exploration of digital mediums: Rozendaal’s journey from traditional artistic mediums to digital platforms mirrors the exploration encouraged in CCLab. We are starting to experiment with various digital tools and technologies to express our creativity, similar to Rozendaal’s transition from drawing to coding and web-based art. We have also recently added the webpage component to our coding.

Interactivity and user engagement: He displays interactivity and user engagement in his web-based artworks. And our CCLab projects are supposed to create interactive experiences and be user-friendly. 

Innovation and Experimentation: The innovative approach to art-making, characterized by experimentation with new technologies and mediums, aligns with the spirit of experimentation encouraged in our class. 

Critique of Technology and Society: The artist’s critique of technology, particularly his skepticism towards blockchain and social media, prompts reflection on the societal impact of technological advancements. CCLab projects can explore similar themes, encouraging people to critically examine the role of technology in shaping our lives and communities. These themes could especially be explored in Project B as perhaps a ‘warning’ to future civilizations.

• What can we learn from it?

From Rafaël Rozendaal’s work, we can learn to incorporate interactive elements in our own work and focus on user engagement to create dynamic and engaging projects. Also, drawing inspiration from Rozendaal’s use of color, geometry, and materials can help us explore new creative possibilities and enrich our artistic expression. Additionally, in his interviews, he offers fresh perspectives and insights into the realm of net art, broadening our understanding of digital artistic expression. He expands our horizons by providing innovative viewpoints on the intersection of technology and art within the online art space.

Individual Conclusion

In conclusion, exploring net art through the lens of Rafaël Rozendaal’s work offers valuable insights into the intersection of technology and artistic expression. Rozendaal’s use of vibrant colors, interactive elements, and diverse presentation formats demonstrates how net art can convey messages and foster meaningful engagement. Personally, I think his ability to integrate code and visual aesthetics opens up a world of possibilities for my own ideation process. Learning about his methods and artistic journey inspires me to creatively explore how I can optimize the utilization of code to enhance my own webpage and narrate the story uniquely in project B. 🧐

Project Title: Dancing Kitten 🎵

Link to the project: github

Brief Description & Concept

I make a kitten that can interact with music. When the music plays, the kitten will shake its head and tail in time with the rhythm, and may even make some movements of its hands and feet when the rhythm is strong, as if it is also a dancer dancing to the melody of the music. 🎶

Visual Documentation

Coding

In my project, there are many places where I want to create oscillating effects, so I use the ‘sin()’ function a lot because its values oscillate between -1 and 1. I embed the relevant property into the position coordinates of the rectangle, thereby creating the effect of the feet moving back and forth.

To create the effect of the tail, I introduced four properties respectively representing the swing angle, length, width, and curvature of the tail.

Reflection

• What is the benefit of your class not relying on any code outside of its own definition?

By not relying on any external code, I can have full control over behavior and functionality of the class, which makes the code easier to understand and debug, while also avoid being influenced by other code, thereby reducing potential errors. Putting everything about an object in one single class also makes the information more intuitive. All information related to this object can be found in this class, which greatly facilitates programming.

• What make it challenging to write code that has to harmonize with the code other people have written?  

One problem that comes to my mind is that when different blocks of code are merged together, variable names often get duplicated and may affect the normal operation of the code. Even if the variable names are not repeated, a large number of variables can be confusing. In addition, there may be differences in coding styles and habits among different people, affecting the consistency of the code. 

• Describe the terms modularity and reusability using the example of your dancer class.

In the context of the dancer class, I think modularity refers to dividing the code into independent modules or components (class), each with its specific function. For example, we can put different dancer behaviors and reactions (such as head shaking, tail wagging, limb movement) into separate functions, allowing each one to be independently modified and extended without affecting other behaviors or overall functionality.

Speaking of reusability, we can create classes that can be applied across various instances of dancers. If we want to achieve similar effects, we can also reuse the existing method from the dancer class without having to rewrite or duplicate code, which promotes code efficiency and simplify the code.

Journey through the Woods: Unveiling Memories in the Forest

By Sara He✨

🌷link-p5.js        🌳link-Github

Project Description

Desciption: Embark on a captivating journey of self-discovery by interacting with the mystical elements of the forest alongside the little creature, Sylvan. Join her quest to restore her forgotten memories and powers by returning the forest’s treasures and rebuilding her home.🍀

Abstract: Sylvan woke up in the forest, not remembering anything. She saw plants that seemed familiar and decided to explore. She collected forest stuff like flowers and berries, and put them back where they belonged. As she did this, she started remembering bits and pieces. She found out she could make different footprints and turn green in the sun. Even her ears could change color, but she had forgotten about these abilities when she woke up. Later, she found a letter and discovering that she and her family were once part of the elfin community that lived in the forest, now endangered due to deforestation. She was the only one left. By returning everything to the forest, she remembered who she was and got her powers back. Now, she’s going to rebuild her home here.🏕️

Design & Composition🎨

I have always had a deep love for plants, forests, and nature, as well as a passion for scriptwriting, exploring intricate and complex narratives. Therefore, I crafted a story set in a forest, where the little creature, Sylvan, rediscovers memories and rebuilds her home within the ruins of a lost woodland. The concept of how the creature become “generative” and interact with the surroundings is intricately woven into the storyline.

In the previous Mini Project 4, I’ve already explore some patterns and shapes regarding the topic of forest and nature. And I directly used certain graphics as elements in my Project A, such as recurring small flowers. I also brainstormed ways to make the creature ‘generative’ and, considering my storyline and game settings, I chose to: (1) Have her grow larger when collecting items, symbolizing growth; (2) Leave footprints as she moves; (3) Change her body and ear colors in the sunlight.

A screenshot of my project:

Pieces of my draft:

Speaking of user interaction, users primarily control the creature’s movement using a mouse and certain keys. As I aim to develop this project into a charming and engaging game, I have incorporated various game design elements, creating interfaces to guide users on how to navigate and interact within the game.

There are still some unresolved issues with a small detail: in Scene 2, Stage 1, the creature’s movement speed should be constant, but it appears that her speed slows down gradually. I’m not sure where the problem lies.

Overall, I have gradually experimented and refined most of the basic effects I aimed to achieve. As for areas where further improvement is possible, I will address them in the ‘Reflection & Future Development’ section.

Technical🔭

Among all the challenges I encountered, I think the complex logic structure to be a major obstacle. My work has a complex structure with many nested stages, and sometimes it feels very chaotic. So, I drew a diagram to clarify the relationships between them. I am also pleased to see that, despite not being good at handling logical issues, I was able to step out of my comfort zone.

Understanding and handling issues related to arrays can be quite challenging. Due to the large number of elements within the array, trying to solve everything within a single function can lead to ineffective results. Additionally, one problem might affect others, so I divided different functionalities into separate functions. Moreover, when using splice() to extract elements from the array, the length of the array changes, and the order of elements is altered, which I initially overlooked. Later, I used ‘i’ to represent specific numbers, so my graphics wouldn’t be affected by changes in length.

Color changes also posed a headache, as the colors vary between different stages. So, I set variables representing stages to differentiate them. Initially, when using lerpColor(), I didn’t achieve the desired gradient effect of changing colors while moving. Later, I realized I could use map() to achieve this.

map() is also used for changing the size of the creature.

Behind the Scenes: I drafted some ideas for writing code and the desired effects I want to achieve (though some of the text is written in Chinese). 🤣

Reflection & Future Development🔮

In reflecting on this project, I am moved by the evolution of the entire creative process. At first, the conception of the story and characters seemed like a blank canvas, but over time, they gradually came to life as if they had their own existence. From the initial ideas to the actual programming process, I encountered numerous challenges and difficulties, but at the same time, I gained countless growth and learning experiences. Throughout the creation process, I learned how to tackle logical issues, design game elements for user interaction, and continuously adjust and refine details to enhance the project. Each modification and adjustment allowed me to gain a deeper understanding of my work, and through constant experimentation and practice, I witnessed my progress and achievements. This project was not only a technical exploration but also a release of creativity and imagination, making me more passionate about creating things. Through this process, I realized that the essence of creation lies not only in the final product but also in the experiences and rewards gained throughout the entire creative journey.💗

As for future development, one thing that I feel I can make significant improvements is the shape of the creature. In the initial design, the creature had wavy-shaped feet, and as she moved, her feet would undulate like waves. I also wanted to create tails for her. However, due to time and technical constraints, I was unable to achieve this effect. I believe that if I could create a draft-like effect, the creature would become even more ‘generative’ and adorable.

Another area that could be improved is the transition between stages. Currently, the scene transitions within Scene 2 still feel somewhat unnatural. If I could make the visuals more coherent between scenes, perhaps it would result in a better overall effect and user experience.

In addition, professor Moon provided me with some valuable advice that I might consider making some changes accordingly. Professor Moon suggested that I should avoid using keys 1, 2, 3 on the keyboard to enter different scenes because the pop-up prompts could potentially disrupt the user experience to some extent. Perhaps using mouse clicks or natural transitions for navigation would provide a smoother experience.

Professor also mentioned that I could add more transformation effects when the creature is in the sunlight, which would make the work more visually stunning and beautiful. 🙂

Credits & References📝

As for techinical support, I want to express my gratitude to professor Leon and learning assistants Danni and Carrot for providing me with a lot of help.

As for inspiration, I think the narrative aspect of my project was partly influenced by a puzzle game I played before called Monument Valley.

Project Title: Emerald Reminiscence💚

Link:https://editor.p5js.org/Sara-307/sketches/2QbVxass1 

Brief Description

In the creative process of this mini project, I aimed to connect these 9 images with the concept of Project A. Therefore, I employed the color scheme finalized for Project A. Rather than creating large-scale scenes, I focused on crafting smaller scenarios, hoping to integrate them into the drafts of Project A once motion is incorporated. The first three images primarily explore lines and geometric shapes. The fourth image exclusively uses the line() function to depict the spotlight effect on a stage. The fifth and sixth images feature specific plants, which will be incorporated into the scenes of Project A. The eighth image portrays ripples in a puddle during rainfall. The creature with a half-exposed face in the seventh and ninth images is the small creature I intend to create in Project A. Additionally, I experimented with using the rotate() function to simulate fireworks in the background.

Visual Documentation

Coding

Example 1:

Here I use a nested for-loop to create sqaures both as x and y increases. I also link the degree of rotation as well as the side size with the x and y coordination of the square, enabling each square to have a special rotating degree and a different size based on its position. 🙂

Example 2:

In this code snippet, I repetitively employed the rotate() function on several line segments and circles, forming a circular arrangement resembling a firework. And the deliberate variation in rotation angles create an intricately arranged pattern.

Reflection

• How is drawing by hand from observation different from programming the computer to draw for you? Can you think of some commonalities as well?

Diferences: Generally speaking, I still think hand-drawing is easier than coding because I can quickly sketch and capture complex patterns. For example, I can draw a curve line effortless but it takes time to make a curve by coding and sometimes it may even requires some calculations. For me, hand-drawing is like a direct and intuitive approach while programming requires a more abstract mindset to translate the creative idea in my mind into code. However, when faced with the need for continuous repetitive creation, the advantages of programming become evident. We can use loops in the code to avoid spending time on repeatedly executing the same task. Programming can rapidly execute repetitive instructions while also ensuring the precision of the patterns.

Commonalities: I think both of them serve as a medium to express artistic idea, and the idea would all be conveyed visually. 

• What properties have you manipulated in the repetition? Describe your observations and visual outcomes during the process.

In my creative process, I repetitively use foundational shapes and apply transformations such as rotation or iterative drawing(using for-loop). However, the angles of rotation may vary depending on the position of the image, and the shapes may gradually scale up or down during the iteration. To enhance visual appeal, I introduce interesting details, adding vibrancy to the composition.

• What makes a good generative pattern?

I think a good generative pattern requires different element to work together cohesively to contribute to the overall aesthetic and also display diverse variations. It also has to be aesthetically pleasing and visually appealing, requiring effective color matching.

Project Title

sketch 1: Universe 🪐

sketch 2: Mondrian 🟥🟨🟦

sketch 3: Generative Plants 🌱

Links to the projects

sketch 1  

sketch 2

sketch 3

Brief Description

Sketch 1: This project is a collection of simple motions with the theme of the night sky and the universe. You can observe one celestial body revolving around another, pause the motion of shooting stars and induce subtle movements in other celestial bodies through interaction. What’s more, the colors of the largest celestial body undergo subtle changes corresponding to its motion positions.

Sketch 2: The inspiration for the second sketch comes from the works of Mondrian, where it automatically generates rectangles of varying sizes in primary colors or white.

Sketch 3: The third project simulates the growth process of plants using simple graphics, with colors and growth directions also randomly changing.

Visual Documentation

Sketch 1

Sketch 2

Sketch 3

Coding

Sketch 1 🪐

Sketch 1 seems to be more of an integration of the foundation learned in the first two weeks with a touch of the content from the third week. In addition to creating the effects of reappearing and random movements, I employed sine/cosine functions to make the circle move along an elliptical trajectory, simulating the rotation of celestial bodies. Additionally, I attempted to use Perlin Noise to generate subtle variations in color with changes in coordinates, causing the largest planet to have slightly different colors while in motion.

Some code snippets:

(1) Sine/cosine and rotate

let x = a * cos(radians(angle1));
let y = b * sin(radians(angle1));
let circleX = width / 2 + bigcircleRadius * cos(radians(angle2));
let circleY = height / 2 + bigcircleRadius * sin(radians(angle2));
strokeWeight(3);
stroke(255,15)
noFill();
circle(width / 2, height / 2, 2 * bigcircleRadius);

circle(circleX, circleY, dia); 

translate(circleX, circleY);
fill(77, 77, 255);
circle(x, y, 30);
angle1 += 1;
angle2 += 0.5;

In this project, I created two non-linear motions, which are circular and elliptical rotation. I need to apply mathematical formulas for some basic calculations to represent different coordinates, while distinguishing between the two types of rotations. Overall, due to the numerous variables involved in this part, I need to be very careful to differentiate them and avoid confusion. 🤔

(2) Perlin noise: generative colors

let noiseValue = noise(x * 0.01, y * 0.01, frameCount * 0.01);
let hue = map(noiseValue, 0, 1, 110, 270);

strokeWeight(0);
fill(hue, 180, 255); // perlin noise generative colors
circle(circleX, circleY, dia);

I referred to the examples on the slide: extra Noise to try to achieve the effect. I also used map() function to map noiseValue to certain range of number. I adjusted the starting and ending values in the map function to increase the range of color variation so that the changes would look more obvious. 

Ps. One thing I want to improve but haven’t found the way: I hope that when the celestial body rotates behind the largest planet, it can be obscured (i.e., not appear on the screen). I tried to use an if statement to constrain it, but it didn’t work.

Sketch 2 🟥🟨🟦

This project was inspired by Mondrian’s grid paintings with primary colors. When I saw an example in the slides demonstrating random generation of size and color, I suddenly remembered the artworks I had seen before. I came out with an idea of creating randomly generated rectangles in white, red, yellow, and blue of various sizes. The motion in this piece is relatively straightforward, primarily utilizing the random() function to generate different sizes, colors, and stroke weights. Besides, this project is my first attempt at using for-loop. 🙂

Some code snippets:

(1) Randomly generate one color of four

let colorIndex = int(random(4));
if (colorIndex === 0) {
rectColor = color(255); // white
} else if (colorIndex === 1) {
rectColor = color(255, 0, 0); // red
} else if (colorIndex === 2) {
rectColor = color(255, 255, 0); // yellow
} else {
rectColor = color(0, 0, 255); // blue
}

I name a variable colorIndex and limit it within four options. Then I employed if statements to fill the rectangles with different colors.

(2) For-loop: Generating rectangles in a loop

for (let i = 0; i < rectangles.length; i++) {
fill(rectangles[i].fillColor);
strokeWeight(random(1, 3));
rect(
rectangles[i].x,
rectangles[i].y,
rectangles[i].width,
rectangles[i].height
);
}

I tried to create an array to store information about rectangles, including their position, size, and color. Using for-loop( let i = 0; i < rectangles.length; i++ ), I attempted to let the loop start from the first element of the array and iterate until the last element of the array.

Sketch 3 🌱

This project took the longest among the three, filled with trials and errors.😢 At first, I wanted to depict the growth of plants due to the theme of creating a generative creature for Project A. However, I had no idea how to start, so I searched for a piece in the p5.js examples to use as reference and learning(here’s the link). Gradually, I built my own sketch. The motion in this artwork are just simple linear movements, incorporating random colors and growth directions, while I think it would be useful for Project A.

Some code snippets:

(1) Create a gradient effect with colors changing along with the movement of the circle

if (cycle===0){
fill(250 - c * 5, 255, 230); // changing color of blue
}else if(cycle ===1){
fill(250-c*5,250-c*5,255); //changing color of purple
}else if (cycle===2){
fill(255,180-c*4,255); //changing color of pink
}else{
fill(160-c*3,255,210-c*2);//changing color of green
}
c = (c + 1) % 40; // period

I set a variable ‘c’ to control the color and used modulo calculation to constrain ‘c’ within a range. I placed ‘c’ within the fill color so that the color could change accordingly. I had been wanting to achieve a gradient effect before, and this time was a new attempt.

Ps. Errors I’ve made: I wanted to maintain color consistency within a loop but randomly select one color palette from blue/purple/pink/green for each iteration. Initially, I wrote code similar to my sketch 2: introducing an index for color and using if statements. However, the result was that the color of each generated circle was random, resulting in a inconsistent color scheme for the same plant. Later, I specified the colors to be used in each iteration by limiting the loop count(when cycle>=4, loop stops). However, I feel that the effect is not as good as random generation, and I haven’t found a solution yet.

About Project A

In Mini Project #3, I explored various sketches and motions, with one of my experiments centered around the combination of gradient color and linear motion (sketch 3). This particular motion involves cyclically growing leaves and flowers with a simultaneous gradient effect, which is one of the motions I would like to apply in Project A since I want to simulate the growing process of a plant.

The generative creature I want to focus on is a growing plant. I haven’t decided on the specific appearance of this plant yet, but it will have preferences for factors like light and humidity in its growth conditions. I want to create a game-like experience where users can create different growth environments for the plant through certain interactions, such as watering it. 

To present the effect, the visual output will showcase the plant’s growth over time, influenced by user interactions and environmental factors accordingly. This project aims to evoke a sense of wonder and exploration as users discover the unique characteristics and responses of their virtual plant companion.

Reflection

In summary, I’ve learned to make use of different motions to create some effects and figured out how to use for-loops on my own. Along the way, I faced a bunch of issues, but I didn’t give up—I found better ways to solve problems, even if they’re not perfect. Overall, it’s a process of trying things out, making mistakes, and finding solutions.

Link to presentation: slides

Title: Lillian Schwartz’s work at Bell Lab

Introduction

     Pixillation(1970)

Pixillation (1970)

• Technical and Visual Features

        Technical: Lillian Schwartz used a combination of traditional and experimental techniques to create the film. She drew  patterns on graph paper and used a programming language called EXPLOR to code pixel-like blocks and create various shapes. Also, she produced seventeen hundred frames of 16-mm film by pouring and spreading pigment on glass plates, lit from below and shot from above with a mounted camera ¹. Additionally, she worked with a chemist to capture the forming process of crystals and add it to her work. 

        Visual: Vibrate colors, abstractions of shapes and dynamic composition.

• The Artist’s Background and Intentions

        Background: Lillian Schwartz is an American artist considered a pioneer of computer-mediated art. She created several ground-breaking works of art, which have huge impact on digital art and technological innovation. As a female artist, she also paved the way for more recognition of women in this field.

        Intentions: “I wanted them to be together,” Schwartz said of her desire to meld the three distinct image types: black-and-white computer imagery, painted frames, and mineral growth.²

Discussion

• The Significance of the Work

        Made before computers were widely available, Pixillation showcased the early exploration of computer-generated imagery and leaped from traditional art and digital art. The artist used programming language to create images, which inspires future artists and scientists to explore more about the intersection of art and technology, and greatly promote the development of digital art.

• Connections with the Concept in CCLab

       The artwork was produced with the aid of a computer-animation language. And the images we created using JavaScript in CCLab closely resemble the form in which this artwork was created. In her works, the shapes of pixel blocks undergo constant transformations, lines extend to form new shapes, and crystals and microorganisms under the microscope grow irregularly. In CCLab we can also create symmetry and some random changes by using certain functions. When making project A, we an refer to the color and shape changes as well as the randomness and dynamic movements in this artwork.

• What we can learned from and get inspired

         Through her work we can learn to blend different techniques and approaches to art. We can get inspired to push technological boundaries by sometimes even taking a step back and getting creative through incorporating traditional and physical tools. The artist uses various elements that make her work stand out like: motion and animation, algorithmic shapes and digital image processing. What’s interesting about this project are the transitions between frames and the careful selection of a blend of the technical instruments listed above. Moreover, the artist further enhanced her work through the use of sound and a well thought through coloristic scheme. “The “colorlessness” of the EXPLOR images had stimulated an “obsession with color,” Schwartz said, leading her to invent a technique of inserting frames with black or pale backgrounds into stretches of vibrantly colored frames in order to maintain the viewer’s capacity to tolerate saturated color.”

Individual Conclusion

In summary, Schwartz’s creation of “Pixillation” involved a combination of traditional painting techniques, experimental animation methods, and the use of emerging computer technology, thus unlocking a new chapter in the evolution and maturation of digital art. From my perspective, the artwork display the beauty and dynamics of geometry through a digital way. And the transformation of the shapes aligns with the random and irregular variations often found in generative art, serving as inspiration for the creation of Project A. Personally, I’m impressed and inspired by the dazzling colors in this work and consider involve the changes of colors in my project. 😀

Appendix

Presentation slides

link: https://docs.google.com/presentation/d/1PvsX03856reQkamZ8se9f-w0aeFxyHZ_jJWR61fANlE/edit#slide=id.g268389f364e_0_10

References

1.Schwartz, The Computer Artist’s Handbook, 152–53.

2.Schwartz, discussion, September 15, 2013.

3.https://www.artforum.com/features/painting-by-numbers-the-art-of-lillian-schwartz-230796/ 

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.