Link and Screenshots
https://editor.p5js.org/tj1059/sketches/BdBagtnfK
Work Process
As for this week’s recitation, we were asked to develop a sketch of a creature by drawing and transformation functions such as translate(), rotate() and scale(). By briefly searching online, I chose the cartoon character, Pikachu, trying to draw it on p5.js and add the animations step by step.
- Draw the creature – Define functions: drawFeet(), drawBody(), drawEars(), drawTail()
To draw the Pikachu, I separated the creature by parts and accordingly defined different functions – drawFeet(), drawBody(), drawEars(), drawTail(). Inside each function I concluded the creature as different geometric shapes, using different shape functions (eg: ellipse(), curveVertex()) to sketch the outline. The beginShape() and endShape() function were quite useful when I tried to draw the tail. I could only draw lines since it’s an irregular figure, yet simply drawing lines didn’t allow me to fill it with yellow color – it was not closed. By applying the beginShape() and endShape() function, I was able to transform it into a closed figure just like an ellipse or a rectangle.
- Design animations – Apply functions: translate(), scale(), rotate(), map(), …
I first used translate() and scale() functions to combine all the separated parts as a whole. Since what I draw is the back of Pikachu with its big and symbolic tail, I was first planning to let the tail rotate when users move their mouse. In this sense, I applied the rotate() function and the map() function inside to realize such effect. As for the ears which I expected to keep rotating one of two within a certain range of angles (seemingly wiggling its ear), I changed to drawEars() function into two: leftEar() and rightEar(). I then applied the rotate() function to the left ear with an if-else condition to change the direction back and forth.
Reflections
- What is the effectiveness of utilizing translate() in your code?
By using the translate() function, I am able to change the location of the sketch much more conveniently, needless to modify every coordinate repeatedly (especially compared with the one for week1 recitation). The code therefore becomes more organized.
- What differences do you find between drawing with a common tool and programming the computer to draw for you?
Drawing with common tools fully depends on how I sketch the creature and allows simple modification (such as using an eraser), yet computer programming asks me to have a clear idea about what I want, and then to transform into programming languages. On the other hand, programming the computer to draw supports further animations which common drawing tools cannot realize.
- Are you able to identify processes in your own drawing that are changed radically because of using p5.js (JavaScript)?
The most obvious change would be: I used to start drawing with the idea changing all the time, and would use erasers very often to modify the creature. By using p5.js, I force myself to think clearly about what I’d like to draw and the overall process of drawing before the start.
- Do you think that the tools that you have used for those processes will change over time? How do you imagine them to be in the future?
I may change some of them with the deepening of learning p5.js. For example, I might further develop the animation of the left ear of Pikachu so that it can wiggle more naturally and may pause for a while every time it wiggles. Also, it might be cool to add some lightening effect to let it appear randomly. In all, further improvements largely depend on my deeper exploration into p5.js, and I hope that at the end of this semester, I would be able to mostly realize the effects I expect.
Leave a Reply