Finally!!
This is the live link to my final project: Project (lyalizhuizhui.github.io); and this is the link to my GitHub repository codes: ccLab_Lya/Project_B at main · LyaLizhuizhui/ccLab_Lya (github.com).
- Process: Design & Composition
In this project, I wanted to recreate the process of Pangu, a Chinese myth figure, creating a world, which includes the initial chaos, the division of heaven and earth, and the transformation between humans and nature. I wanted a simple but firm intro to lead users to go deeper into my project, so I chose basic JavaScript animation to express the chaos, the first part of the story. I think the division of heaven and earth is the beginning of all the changes in the original story and could also be the starting point of users’ exploration, so I made this the index page with some HTML + CSS cooperation practices. It would be a more immersive experience if I made users part of the human-nature transformation, so I chose camera and pixel iteration as the main interaction. Among these, I am satisfied with the way I designed my index page because I made it part of users’ exploration as well as my narrative and not just buttons and labels. What didn’t work out well is that I tried to make the camera appearance more dynamic and diverse but it didn’t meet my expectations. Besides, the website layout and the animation in the beginning are also a little bit too simple but I don’t have time to improve them. Lastly, the project would be more complete if I added some audio to cooperate with the visual appearance.
2. Process: Technical
The project can be structurally divided into 3 parts: an intro page, an index page, and two camera visual effects pages. The intro page is designed to be automatically jumped to the index page after the animation is finished. I tried some very complex methods to achieve this but none of them worked, so I searched online for references and found that one simple line of code would do.
I did a lot of thinking in making the index page because I want the entrances to the 2 visual effect pages combined well with a p5.js canvas without obvious “buttons”. I don’t think it is possible to directly insert clickable links into p5.js canvas, but that’s the outcome I want to achieve. So the solution is that I make sure the canvas stays in the “absolute” position and put pictures bound with links in the exact same size and place where I need them to be in the p5.js canvas using HTML code. Then I make the pictures invisible with “opacity: 0”. A bit of cheating 😐
I also used OOP + interaction in creating the cursor on my index page. I made the cursor sparkles that would give different reactions depending on the position they’re in: being normal if it’s in random areas, and speeding up if it’s discoverable (clickable).
Another part I worked on a lot in my project is camera and pixel manipulation. I used the method taught in previous courses to get data for every pixel captured by the camera to apply changes to the pixels’ data, and therefore present artistic outcomes.
In both sketches, I put a slider to let users control the transparency of the landscape patterns, but I could’ve added more elements that allow users to modify and explore.
3. Reflection and Future Development
I think the most important improvement in the development process is the choice of not using typical buttons. I got this inspiration from my classmate’s suggestion in the user testing session which he thought would be good if I used the index page as part of my story, and I decided to take a step further. The important thing to note here is that this also forced me to think about how to give essential hints to users about how to interact with my project while not putting direct instructions that might break the whole experience. This is how I came up with the sparkling cursor idea.
One feedback I thought really insightful is about the slider. The classmate was saying that in spite of sliders, I could’ve used some other interactive elements in the canvas or with mouse and keyboard to fit more in my storytelling; if I insist on sliders, I should make it shorter so users could easily slide it, but not the same width as my canvas. This advice reminds me to consider more about the users’ experience side when developing a website or a project because I was simply considering that it would look better if it’s the same width as the canvas.
Professor Leon’s feedback gave me inspiration about how to implement further on this project. What he said is that despite separating different parts of the transformation, I could merge them into one sketch and try to let users explore different outcomes with different actions. I think this would definitely be an interesting direction to work on as there are so many possible conditions and interactions and it would be a long but interesting journey to go on. He also suggested that I don’t have to reveal the users’ images and it would work the same for my storytelling. True.
(To be honest, the biggest issue I had with this project was that I didn’t have enough time. Bad time management or I could’ve really gone in-depth for this project because I like the idea very much 🙁 )
4. Credit and References
The website I Iearnt about automatically jumping into another link: HTML实现页面自动跳转的五种方法_HTML/Xhtml_网页制作_脚本之家 (jb51.net)
p5.js example and reference about adding slider: examples | p5.js (p5js.jp)
The original text of the myth: 盤古 – 維基百科，自由嘅百科全書 (wikipedia.org)
The visual inspiration for the myth: https://youtu.be/2becIaNvxOE?si=NZ3vx2SNvkMkYq6P
Last but not least, as this is likely the last blog post for this semester’s Creative Coding Lab, I want to congratulate my achievements throughout the semester, give tributes to all the people I received instruction and help (especially Professor Moon), and express my enjoyment from the wonderful experience. Thanks for everything!