Idea & Sketching.
As a newcomer to coding, this small project has been an important exercise in practicing what I have learned in class so far. I primarily focused on experimenting with basic shapes, still trying to find useful tools to add (at least) some interactivity to a static portrait.
First, I made a quick sketch in Figma of what I roughly aimed to create (see below). As a Film & New Media major, I couldn’t help but show my passion for filmmaking by incorporating a “Kodak” T-shirt (which I actually own and wear) paired with a green jacket made up of two symmetrical triangles.
My cartoon character shows no mercy to my real self: protruding ears, furrowed eyebrows, and a discontented smirk. Nevertheless, I’m still fine with that…
Highlights.
Having finished the layering of the character in p5.js, I felt that something was missing, and I had to soon realize that it was the absence of movement. Since it was my first time coding, I did a quick research to find different options for animating in JavaScript. The most suitable and easiest to comprehend for my case turned out to be the lerp() function.
I implemented the lerp() function to animate my character’s mouth by following a tutorial on p5.js.
if (mouseX > 150 && mouseX < 450 && mouseY > 150 && mouseY < 600) { // to check if the mouse reaches the body
finalX = 300;
finalY = 400;
} else {
finalX = 280;
finalY = 410;
}
initialX = lerp(initialX, finalX, 0.5);
initialY = lerp(initialY, finalY, 0.2);
I’m particularly proud of how I figured out the pace of the animation, specifically the “amt” parameter, which I set at 0.5 and 0.2. After experimenting with the function for a while, I decided to use different values for the “x” and “y” positions, so that the mouth movement would look more natural and eye-catching.
Reflection.
To summarize, I truly enjoyed working on this tiny project. I’m quite satisfied with my whatever cartoonish self and excited to dive deeper into the lerp() function as the course progresses to create more sophisticated animations and interactive projects. So far so good – JavaScript seems to be fun.
Embedded Sketch.
P.S. Place the mouse around the body so the mouth moves.