The Blinking Peacock
Link to Project : (Make sure to hit the space bar and mouse clicks!)
https://editor.p5js.org/christynatalisa/sketches/XSRs44-UK
Where to start?
Thinking of real natural processes that I find visually appealing, I thought of how certain animals are able to generate beautiful patterns, such as how caterpillars are able to form organized spirals, and how the tail of a peacock can expand instantly revealing its impressive pattern. I was considering how the movement, appearance, and decision-making interactivity involved in this process could be recreated using Object-Oriented Programming.
Technical Advice
This project must have generative and interactive elements. Focus on using Object-Oriented Programming. Interactions may use mouse (position, clicking, dragging) and/or keyboard inputs. Interactions can be simple, but should be meaningful within the story you are creating. To achieve this, exploration and experimentation is key.
PROJECT DESCRIPTION
GENERATIVE VISUALS: BLINKING PEACOCK
2021
Generative Visuals + Interactivity
The natural processes around us have the unique properties of natural generative visual elements that are visually appealing to the eye. That is why it is rewarding to be aware of the beauty elements that we often are not fully aware of within our surroundings. One example would be the beautiful patterns from physical aspects of animals in the wild, such as the peacock.
ELEVATOR PITCH
The Blinking Peacock allows the user to be immersed in the experience of natural beauty combined with a part of a surrealistic narrative as a replacement for one of the main objects of the main pattern found in a peacock which is the eyes. Through user interactivity, the user would be able to witness the expansion of the main beauty object, the tail.
The Blinking Peacock is a dynamic blend of user interaction and generative arts, where viewers can influence the stages of the project by utilizing mouse and keyboard interactions. The project contains different stages that emphasizes on the expansion of the tail, providing increasing artistic value once it has fully expanded, and alteration of the realistic elements by adding the blinking aspect of the eyes.
Learning Outcomes
Upon completion of this project, these are the main key takeaways of learning:
- produce the fundamentals of programming;
- demonstrate Object-Oriented Programming and integrate the concept into artistic / practical applications;
- apply comprehensively various methods in p5.js and visualize generative and interactive animations;
- practice approaches to project management — scoping, project plans, project reviews, and;
- develop and structure a larger-scale project.
1) Process: Design and Composition
The design for this project is mainly focused on the tail of the peacock, which contains quite the amount of objects to complete the desired visual aesthetics of the peacock. Initially, I tried to manually set up the locations of the main tail structure.
This is when I figured out the blinking part of the eye, from the original state I tried to make the blinking effect by storing the fill color of the white part of the eye in a variable, and modify the value of it when a key is pressed. However, that didn’t give an eye-lid effect. Therefore, I made some changes and used the sine function as suggested by my professor to emphasize the opening and closing motion of an eyelid.
2) Process: Technical
.
Originally I couldn’t think of any methods for the tail expansion, given that the complication of the motion needed to incorporate the usage of math functions such as rotations and angle. But after receiving guidance from the professor and learning assistant I was able to understand how to connect the varia
bles in constructor(); and edit the values of those variables to alter the speed and amount of angle to be rotated for each of the opening feathers and rectangles.
This block of code is for the animation of eyelid, utilizing mapping and sine function to re-create the blinking movement of all the eyes on the tail.
The implementation of the expansion of the tail utilizes different variables to store the value of the angles, the speed of the expansion of each tail feather is also important because we want it to be different.
What could have been implemented better:
I think what could have been implemented better is to make use of the cookie-cutter concept for each of the eyes instead of copying the code over and over again making the entire project consist of very long code.
3) Reflection and Future Development
Summarize your conclusions and critical reflections on your work. Consider how your project evolved from project proposal to its current version. In regards to the concept you set out to explore, which parts of the project work well and which ones are you less satisfied with.
Reflect on feedback received from peer students, instructor and guest critics and constructive adjustments to the project based on the feedback. Also demonstrate what you would like to implement further and how you would continue to explore in future work any of the ideas your project engaged.
From Interaction Day I was able to gather quite the amount of constructive feedback from my peers who tried out my project. I made some changes to the blinking animation so that it imitates the opening and closing of a real eye-lid rather than just changing the whole eye color to black.
The constructive feedback that is notable from the guest critics and peers are:
– Movements of the peacock’s pupil and all of the eye pupil
– Random blinking movements/speed
– Diversify the color schemes to make it more lively