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.😭😭😭