Cicci’s documentation blog

link to the project: https://ciccishao.github.io/cclab/project-b-final/

link to github: https://github.com/CicciShao/cclab

1) Process: Design and Composition

• Inspiration: I was scrolling down through the pages of the previous student’s work and accidentally I saw my friend Yelena’s work last year, the name of which is “beyond the mirror”. I played with her project and found it really interesting.(I also got some really satisfying photos which I later used them as my personal portrait.)

This project gives me inspiration as I like taking photos and I will always take my polaroid with me when hanging out with friends. I felt like I could tell people ing the future how people in 2024 record their daily life and this project is can also be used for recording our own status. 

So my design is about a digital polaoid where users can take a photo first, then type something to describe what they were thinking or their feelings at that time. Date and time will automatically appear on the photo. At last, by clicing “export”, they can download the photo.

For the thing in the box, I just put in my polaroid and some decorations we can put on when taking photos. But I will never do that next time as when I wanted to take photos with my professors and give them the photo as a gift, it suddenly occurred to me that my polaroid was still in the box.😬😬

• composition:This is the first version of my website and at that time I’m not familiar enough with javascript, so I felt like this result is what I spent a lot of time to achieve. 

After some revisons, I’m more familiar with javascript, so this is my second ver. I used”display: flex;

Actually for the stickers that cannot be put horizontally, I wanted to apply the code used in the first version, so they can be neatly put beside the canvas, but the time is so tight so I can only put them using “absolute”. This is a small pity for my work, as the project cannot be displayed well if the size of the screen changed. But it also works if adjusted the size of my project properly hahaha.😛😛😛

2) Process: Technical

There’s too much to say in this part.😰

• core technical problem: How to control the canvas using the buttoms on html?

solution: “onclick”+mode

Moon helped me wrote different functions in p5 canvas and used loop to determine the relationships between the different functions.

Then, I added “onclick=”function()””in html to connect the html and p5 canvas.

• The structure of the folder and code:

At first, the structure of my folder was very messy and Moon helped me to clear it up.

And then I cleaned my code myself and then managed to combine the two style file into one.

Before:

=

After:

• Diplay the time&export:

I went to the studio and found Lizze from Leon’s class, so I asked her to teach me how to add date and time as she used it in her own project.

Lizze also taught me how to export the photo and we found that the basic concept of our project was quite similar.😋😋

• Adding fonts:I managed to do it myself after Carrot mentioned it once!

3) Reflection and Future Development

I learned quite a lot in this class as I had no coding experience before and it’s my first time to learn a coding language. Althouth it was hard at the beginning, I gradually began to find p5.js really interesting. I began to be more and more creative from the assignment “object dancer”. That is the first project I began to feel more confident as Moon helped me a lot in that project. Then was the “particle world”. I love that one very much and I put “particle world” on the first page of my final project.

In my final project, I would say that I progress a lot. At first, I felt like javascript was hard to understand and looked to abstract But after two meetings with Ricci, I managed to figure out how to compose a website. Then I tried and failed for several times and sometimes I changed something and the web just diappeared. SO THRILLING👀👀👀This progress took much time.

From always being stuck to being able to write code myself, I feel very satisfied with my final project and I really appreciate the help from Moon. Actually I was always struggling and thinking about give up at the beginning of the semester. Without these help, I would have given up.

It is so fortunately that cclab is my my introduction to programming course and now I have had a basic understanding of coding, so the circumstances of feeling at a loss will never happen again in ICP next semester(I hope so!!!!!!!!!!!!😫😫)

4) Credits & References

Yelena’s project: https://yyyyyelena.github.io/CCLab_Yelena/frida/diy/index.html

I really appreciate the help from Moon, Ricci, Carrot, Lizze.😭😭😭

link: http://127.0.0.1:5500/project-b-template/index.html

Brief description: the draft for the website of project B

Coding:

I used the “div””div class””p””h1″”link href””link rel””sript src” in the coding. “link href ” is used to link different web page. I also learned to how to insert different font code into my work and it’s pretty cool.

One important skill I learned is how to add image into my code, which is important for my projectB. Use img src to connect the image and the width canbe directly changed in the bracket while the title and the start button can only be changed in CSS.

I also tried to use”opt””command””i” to check which part goes wrong, which is very efficient for correcting mistakes.

Reflection:

This is only a rough draft(especially the second webpage is very rough) and is only showing the stucture. I will review what I learned on class and in offcie hour with Ricci to make further improvement of my website. 

What I will do next is to figure out how to insert the camera into my website and how to add “capture” button to take photos. I will also try to add more link to ensure that the user can go the thepage they want easily without renewing the page.

For more details, I will work more on the background to make my prokect appealing and try more fonts to create a engaging style. Anyway I’m looking forward to how my project B will be after these improvements.

❤️

Project Description: The name of the project is DéjàView. 

In this project, the first page will be the intro of this website like why I create this website and what the users can do on this website. Then on the second page, the user can use pixel camera to take a selfie and then decorate the selfie as they like using the different decorations provided. I plan to create some either cute or funny stickers for decoration. After the selfie, they can enter the next page by clicking the button and can start to design their own memory card. The user can write a few words according to the prompt and can also add their own photos. They can also choose the background and put the text they entered whatever they want to make the memory card engaging. In general, this website is for people to design a card that can record themselves as they want.

In this project, my aim is to enable peole to record their previous state, like what they really want to do know, how they feel now, etc. In this way, they are creating their own time capsule for their futureself, which are the future audience of this website. It will be intereting to see what they were thinking, which enables the users themselves to reflect on themselves and feel the flow of time.

Presentation slides: https://docs.google.com/presentation/d/1Kg6eEPgzg-TQ4V3QQ-qo1IHMRxbuqxXM893sXFkmrgI/edit#slide=id.ge1d838b627_4_0

link: https://editor.p5js.org/Cicci_Shao/sketches/BVJ8odo3a

Brief Description:  This assignment asks us to create an imaginary space that is filled with numerous particles ,aiming to visualize and simulate a real-world shape, pattern, movement, or natural phenomenon in your own creative way.

I created a flame fairy, the appearance of which is a flame and can turn into colorful stars when clicking.

Video: <iframe src=”https://drive.google.com/file/d/1mEJDBrRSl2SNa5TRpWjgeBX46jGURXaQ/preview” width=”640″ height=”480″ allow=”autoplay”></iframe>

This video is my creating process:<iframe src=”https://drive.google.com/file/d/1BzEIcftMX-ao_8pW3XxXsVoCz7HzwD7h/preview” width=”640″ height=”480″ allow=”autoplay”></iframe>

Coding: I improved my project twice. I met Ricci and she helped me solve the problem of changing color while clicking and then I met Moon, who helped me add the “if” to let more stars appear while clicking.

Difficulties: I wanted to let more stars appear when clicking, so I tried to create a parameter which limites the length of the array and it will become larger when clicking. I spent quite a lot time.I tried to put the loop in update,draing and class, but they are not working.

Then Moon cleared the update() and created a new function within the class,so I realized that the problem is I put too many things with in the update(), which maked the code messed up. When the lines controlling the color and the one that is coontrolling the number were separated into different functions, they can be conducted respectively.

Reflection: This is a Object-Oriented Programming(OOP), which enables us to break down a complicated code into small parts and created a class to contribute to a particular stuff. Obviously, I met with trouble in how to break down the code. Separate codes controlling different parts within a class can make code more organized, modular, and easier to maintain.

I also use for loop and “push” to add new stuff into arrays and “splice” to control the total number of objects appearing on the canvas. Anyway it’s a interesting process to see so many obejcts appear continuously on the screen.

1.My project: https://editor.p5js.org/Cicci_Shao/sketches/suiARlQ6b

2.My developing process: <iframe src=”https://drive.google.com/file/d/1TgBbIvOFONrnihbww5z7f3r4fDYtk3I6/preview” width=”640″ height=”480″ allow=”autoplay”></iframe>

3.video display: <iframe src=”https://drive.google.com/file/d/1q-H9MIAmh0HKreihGFGAOuUII7mI4gcK/preview” width=”640″ height=”480″ allow=”autoplay”></iframe>

Brief Description and Concept

This is a project where I used Vscode to code and create an object dancer.

And my concept is and adorable singing cloud.

Coding

for loop: to form the body of the character

sinValue: to control the movement of the character, its facial expression and its shape.

The process:

phase1: I tried to use the emoji as the main character but emoji can only be embedded as text, so the x,y axis of it is kind of hard to control. I have no idea how to develop it and meet with Danni

phase2: Danni helped me a lot. We tried our the framecount and the sinvalue together, but the sinValue is still not working and we don’t know why. We also tried the for loop and Danni suddenly said the circles generated looked like a body, which is the most crucial part of my concept. I then adjust the size of the white circles. It took a whole afternoon and the appearence of my character is almost done.

phase3: I seeked help from Moon then. He pointed out that the “this.sinValue” should be written in the update part instead of the set up part. Moon also corrected my mistake that there should be two parameters in the bracket of translation, and it is also possible to have one translation within another translation, as long as push and pop are added. These are the most crucial help to the animation of the character.

Reflection/Lessons Learned

I learned from this work that positively seeking for help is crucial, as in the previous works, I feel helpless and won’t think that help seeking can really address the issue of inspiration. But this time, it really works. When I thought that it may still take an hour to complete the character, Danni’s words offers a good inspiration and I can’t believe that I just figured out my dancer. And also, the problem that Danni and I have struggled the whole afternoon is solve by Moon within 15 minutes. That’s an interesting and joyful process.

Part 1  (“for a public readers”):Project description

Cicci

The Cell of  Dream

(how the cells of how dreams work and the features they have)

Cicci’s cell of dream is discovered in 2005 as she was born. Shocking features are discovered too: this cell has its own mood and it will show different reactions to your interactions with it.

This cell is living in Cicci’s mind and is the basic component of its host’s dream. By transfering you attention into the star, you are able to enter the dream and interact with the cell of dream through moving and pressing.When you see a creature consists of seveal ellipses, that’s the cell of dream. It is breathing through the rotating circle and can express its mood through the bouncing circle. If you press on the background, it will feel pain and will shiver. But it will feel excited if you touch its heart and will be activate when you first youch its heart. And also, it can feel joyful when you interact with the palette. When you try to capture its mind, it becomes nervous and tries to escape.

(Now you enter Cicci’s mind and meet with her cell of dream)

(When you are trying to capture its mind, it will become nervous and trying to escape)

(When you try to touch its heart, it will become flashy and excited.)

Part 2 (“for yourself (and your instructor)”):

1) Process: Design and Composition

Describe the design process of your project. Explain your decisions that lead to the visual appearance of your work, as well as the user interaction. Make sure you include iterations, things you tried but didn’t work, and conclusions you drew. Discuss what you have found of value to build upon in your project, and in what ways your project is different or better.

Supplement this description with a set of 3-4 screenshots that show the main design (visual and interaction) of the project. 

1）brainstorming

At the beginning I have trouble generating my concept, and Moon helped me a lot in the office hour. I oringinally came up with the idea of limbo and dream. I also looked for reference.

(My original inspiration)

2)first draft 

However, when I began my first drafting, I found out that my oringally concept is too big. And maybe I shouldn’t hesitate too much before I start. Before the office hour, I always feel like I cannot come up with an “ideal” concept, so I didn’t start. But when I feel like I have an “ideal” concept, it turned out that it is almost impossible to accomplish.

3)interatcive day

So I began to look for inspiration from my previous work on class and decided to use this one as the basic structure of my work.

So my first version is this.

The feedback I received most is that the two parts are too separated and I personally can feel that too. So I began to figure out how can I make the two parts on the canvas interact with each other more.

But I felt that to realize interaction is hard as I used many “for” and “if”, which made it hard to insert mare things into my code, and also, the name of the variables were messed up and I couldn’t figure out which variable is controlling which part.

So I decided to add some more elements iinstead of changing the ones I already have. I added some bouncing balls and create more interactions with the main character.

In my last meeting with Moon, he suggested me to make the main character more interesting and make thebackground look more designed. So my last version is like this:

The color is more eye-catchy and can express the concept better.

2) Process: Technical

rotate: Rotate is used several times in the project, including the main character, the star and the palette. And also, rotate is used along with push and pop, which are vital for determining the route of the rotation

for loop: This method is used to develop the shape of the spinning shape and the palette. In the spinning shape.

sin,cosValue: This method is widely used in the project, including the bouncing effect, the way the palette is moving. “amp”,”frep” is used algong with sin and cos value.

frameCount: This method is used in controling the color of the palette.

improvements:  I think the main shape of the main character can be improved. Maybe it has different stages when we are interacting with it. Now the main character is a little bit predictive. It’s movement can be more random to express the theme well.

3) Reflection and Future Development

Reflection: I spent much time in this work and I’m kind of satisfied with my project. I think I utilized many skills taught in class and expressed my concept well. But if I have a chance to do it again, I will keep the name of variales clear and in control, which will enable me to make improvements as I want easier. I will also make my main character more intersting and misterious. Also, I think I can make the background more interesting. But most importantly, I think I will take action first and shouldn’t wait until I feel like I have a “perfect idea”.

4) Credits & References

rotate: https://editor.p5js.org/MOQN/sketches/15oyDf77P

the star:https://editor.p5js.org/MOQN/sketches/mYPqFTGEL

the spinning shape:https://editor.p5js.org/MOQN/sketches/LYdZUlEzm

the palette:https://editor.p5js.org/MOQN/sketches/cjG7cXNvI

The first script is quite simple: I just change the transparency of the background to make the appearance of the circles looks like raindrops.The second script I asked for help from my professor Moon. There is problem with my first version as the ball does move but it just moves in the corner of the canvas, so Moon taught me to add odds to the movements, and then the ball started to move across the canvas. The third script I utilize the noise function from the extra slides and I alao changed the parameter of the noise value to make the circle tile on the canvas.

For my midterm project, I decided to combine the three scripts and I will elaborate on my ideas. I will use the first script as my background and I will refer to the movement in the second script as the movement for my main character. As for the third one, I want it to be a part of my project, for example, when the frameCount or other conditions are satisfied, the background in the third script will appear.

For further development, I have come up with some elements to put in my midterm project.The first one is that there is a certain condition where the colors on the canvas will change from black and white to different colors, and I’m still working on how to combine this condition to my concept. The second one is different weather. As I want to use the rainy one as my background, it inspires me to improve my code to create different weathers in the dreamland(like the heaviness of the rain or sunny weather). The third one is the ending. As I currently want to add an ending part to my project and maybe different choice of the main character will trigger different endings. But this may be kind of hard, so I will just try to accomplish this one.

Slides: https://docs.google.com/presentation/d/1YwiZy0ZJT76Q9fYcNCDxSPXKWskfUQDrl-xW1IBf9Ys/edit#slide=id.g2bc68568bb6_0_62

script1- a rainy day:https://editor.p5js.org/Cicci_Shao/sketches/tMC7jlLEI

script2-contamination:https://editor.p5js.org/Cicci_Shao/sketches/DrUr49W0s

script3-neon light-https://editor.p5js.org/Cicci_Shao/sketches/oVFmxplK7

Description: This project is to develop a sketch with a generative animation that explores various types of motion by utilizing variables and math functions in p5.js.

Recording:

Coding:

The first script is quite simple: I just change the transparency of the background to make the appearance of the circles looks like raindrops.

The second script I asked for help from my professor Moon. There is problem with my first version as the ball does move but it just moves in the corner of the canvas, so Moon taught me to add odds to the movements, and then the ball started to move across the canvas,

The third script I utilize the noise function from the extra slides and I alao changed the parameter of the noise value to make the circle tile on the canvas.

Reflection:

In this project, I created three script for my project A and through these scripts, I found a couple of inspirations for my midterm project. I also discovered that a single movement looks a little dull and I want to try more diferent  movements and timing in my midterm project.

https://editor.p5js.org/Cicci_Shao/sketches/QmPX6JdIv

Description: This project is to create 9 possible landscapes as still images made out of repeating visual elements and I created 9 dreamlike landscape.

Recording:

Coding:

I learned from my professor Moon’s code on class:https://editor.p5js.org/MOQN/sketches/wPdAOZbkR and I created this project referred this code. I changed and added many parameters like extra shapes, background, sinValue, amp,freq,frameCount,etc.

Reflection:

I found the code blendMode(ADD) will make the picture dreamlike especially when the background is black and in general, I practice the loop function and randias/angle in this project, which will be helpful in creating different background for my midterm project.

Discussion part

• What’s the significance of the work? What impact does/doesn’t it have?
• What are the connections with the concepts we are learning in CCLab?
• What can we learn from it?
• What does the work inspire you to do next?

• significance:
• In each game, one agent – the Emissary – has a more sophisticated purpose.

• 1.In The Squat of Gods, this is a small girl who knows the volcano her tribe are living on is set to blow and tries to get everyone to leave.

• 2.In Forks at Perfection, the AI is a curious combination of a dog and a long, thin, golden collar-and-lead called Sheba. The lead is the driving agent – the dog just a vehicle, abandoned by the lead when its usefulness expires. Together they’re searching for a perfect version of life and a way to understand humanity in a world of intelligent plants and the reanimated corpse of a 21st century celebrity.

• 3.Finally, in Sunsets the Self, the Emissary is a sentient yellow puddle trying to achieve life by animating a Wormleaf anemone – racing against the semi-human Oomen, who want to burn each Wormleaf as it rises. Each unsettling story reaches an end and resets, with a new version restarting seconds later.

• (figure)Cheng was mostly focused on how science and programming related to art, which is something that is evident in his work today. Cheng was outstanding in expressing the livelihood of nature in an animated way, which is really interesting and sometimes looks cute.

connections:

We watched the video about void circle last class and our last project is about animation too. We are starting using JavaScript to create something lively and that’s what we can see in Cheng’s work.

Inspirations:

I really love Cheng’s style because it’s weird yet cute I can tell. For example, he only uses one shape to create the leaves but the leaves look vivid. And the owl, it’s simply made but looks real and a little bit adorable.

Probably I will figure out how to use simple shapes to create more stylish creatures next time.

Another thing that I want to try is the movement. Cheng’ s work features ‘everything in the background of nature matters’,so every movement in his work is not just movement but looks like the creature really comes to life.

So in my next project, I will consider the movement in my work in a different way– they are not just there to move, but are there to make creatures vivid and give them real life.

Slides:

123763(This is the slides and I forgot to edit its name)