My look-alike animal I chose to portray myself is an owl. It didn’t have to be an animal, but I chose it simply because I like cute animals. It was tough trying to pick between an owl and a raccoon, but I stuck with an owl because when I during my military service, my teammates called me “angry bird” because of my sharp-looking eyebrows. The fact that I was bold probably made it worse. I combined both “angry bird” and owl to create “angry owl”.
Simplistic, but straight to the point. I added 2 animations during my work on this project. Please feel free to find both of them.
I love working at night because it’s quiet and it’s the time of day when I feel most focused. So if you try to get the owl’s attention by clicking, it will lift its eyebrow as a warning. It’s a do-not-disturb signal.
//eyebrow only moves at night
if (!morning && eyebrow) {
move += direction * 1.2; //speed of animation
if (move <= -20) { //moved distance is max 20, if greater, change direction to go down
direction = 1;
}
if (move >= 0) { //when it reaches its original position
move = 0;
eyebrow = false; //stop animation
direction = -1; //reset direction
}
}
That is the animation code for the eyebrows. One of the hardest parts of this code was changing the direction of the movement. If the position changes by 20 pixels, then it changes the sign of the direction so that it goes in the opposite direction. It was also difficult to trigger the animation. I have two animations that are played in different conditions: night and day. So coordinating the timing was probably the most difficult part of coding. I will explain the coordinating part after showing the code for morning animation.
(Explanation of Code, Skip this if this is a bit boring)
move+= direction is for the speed of the animation. But the sign of the direction indicates whether it goes up or down. If the animation moves for 20 pixels upwards, it satisfies the first condition, and the sign is changed. It was set to -1 before. So now, the eyebrow moves downward back to its original position. Since the sign has flopped, move slowly turns positive as it goes through the move+=direction line. At some point, it will reach 0, where the variable named eyebrow, which is set to true when the user clicks on the owl, turns false, and the direction changes to positive.
As you could guess, if you click on the moon, it changes the time of day. Also, if you click on the owl during the day, it will show the ZZZ animation.
function mousePressed() {
//if position of sun/moon is pressed
if (dist(mouseX, mouseY, X, Y) <= D) {
//change day/night
morning = !morning;
//stop eyebrow
eyebrow = false; move = 0; direction = -1;
return;
}
// start Z animation in morning
if (morning) {
zActive = true;
zStart = millis();
return; // don't trigger eyebrows
}
//night means eyebrows haha
if (!eyebrow){
eyebrow = true;
}
}
I used two flags to trigger the animation: zActive and eyebrow. I set these values to true when the screen was clicked based on the time of day. I also had to carefully coordinate so that the flags were triggered where I wanted them to be.
(Explanation of Code)
When the mouse is pressed, it first checks if the user clicks on the area where the sun and moon are placed. If it is, then moring = !morning changes from day to night, vice versa. When the time of day changed, I made sure once again to reset variables just in case the animation plays. Now, if that was not the case, and the user clicks, it checks if it is morning or night. If it is morning, the zActive variable is set to true, and this sets off the ZZZ animation. If it is not morning, then it sets the eyebrow flag to true, which triggers the eyebrow animation. Figuring out this logic was probably the most difficult part of the code.
Finally, this is my ZZZ animation.
/ZZZ animation
if (morning && zActive) { //only when morning and user clicked
const elapsed = millis() - zStart; //measure time
//number of Zs
let visible = 0;
if (elapsed >= 0){
visible = 1;
}
if (elapsed >= 300){ //basically every 300ms, add one
visible = 2;
}
if (elapsed >= 600){
visible = 3;
}
ZZZ(width/2 + 70, height/2 - 120, visible);
// after all Zs have appeared and held, hide all at once
if (elapsed >= 3 * 300 + 600) { //600 is extra time just in case
zActive = false; // disappears together
}
}
I used millis(), which is used to measure the timing of animation. I wanted the Zs to play out one by one, so I had to time them by 300ms. The logic here is quite straightforward.
function ZZZ(x, y, count) {
noStroke();
fill(0);
textAlign(LEFT, BASELINE); //aligns text to left and at baseline of font
if (count >= 1) {
textSize(20);
text('z', x, y);
}
if (count >= 2) {
textSize(24);
text('z', x + 12, y - 12);
}
if (count >= 3) {
textSize(28);
text('z', x + 28, y - 26);
}
}
This is the helper function to create the ZZZ effect. visible and count shows how many Zs are present, and it is incremented with time elapsed, measured with the millis function. Any further explanation of the code can be provided in class.
For improvements, I was thinking about adding another condition. For now, when the owl is disturbed, it just repeats the animation. However, adding another animation when the owl is disturbed more than 10 times might be interesting. Owl spreading its wings and flying away sounds good.
P.S. I was scrolling through the posts and found a post that is quite similar to mine (haha), although the contents were totally different. It was nice to see a fellow owl.