My third assignment started with experimentation rather than ideation. As I initially struggled to grasp the concept of OOP and how to implement it into my own work, I went through the examples provided and began to change different variables just to see how they affected the output.
After some time, I decided that I wanted to continue my theme of recreating natural experiences. I initially wanted to pursue this by expanding on the concept of my last assignment (sitting under trees) to “sitting under clouds”. The idea for this was to have clouds move smoothly with a Sine function and incorporate some interactivity using “if (mouseIsPressed == true)” such as lighting or rainfall. However, after implementing Sine movement to my object, I noticed that it felt more “alive” than something as passive as clouds. As I had already conceptually situated my idea in the sky, I decided to branch off from my original concept and create a scene which depicts the body of a dragon.
While I decided to only create the body as a result of my inexperience, I personally like the unique perspective of only viewing a small part of something that is intended to be big. I believe that films often use this technique of showing a small part of a large creature in order to produce a sense of scale without having to animate its whole body.
In terms of interactivity, I still incorporated “if (mouseIsPressed == true)” in order to simulate the (off-screen) effect of the dragon breathing fire. I did this by generating a random color palette within the range of a faded red – a greenish grey on the background when the user clicks on the mouse.
I a simple yet effective piece of code from this assignment which I am proud of would be the “shading” which I managed to produce on the dragon’s body by increasing the number of rectangles in the for loop and selecting two analogous colors for the fill and stroke. I have included the two examples together below.
// spacing and for loop
let spacing = width / 163;
for (let i = 0; i < width; i += spacing) {
manyRectangles.push( new SineRect(i, 10 + i * 2) );
}
/////////////////
// dragon's body color
fill(140, 70, 70);
stroke(80, 50, 50);
Some points of improvement going forward (beyond learning how to make a full dragon) could be to create a more realistic sky as the flat/cartoonish style of the clouds contradicts the smooth aesthetic of the dragon. I feel that I could have also made the sketch more interactive by allowing the user to interact with the dragons body in some way (e.g it moves when the mouse is pressed or it follows the mouse).