Title: Chasing the mouse
Link: https://editor.p5js.org/LafouCC/sketches/YYouQgtrI
Description: The idea of this project is actually from one of the Processing codes I did before. As the tile indicates, the project depicts a little monster that is chasing the mouse non-stop. The user can change the color of the monster by clicking on the palette.
To further explore the possible interaction with the mouse, I made use of the velocity and position of the mouse. The moving speed of the monster is related to the velocity of the mouse and the eyes of the monster are following where the mouse goes.
Video:
Code Snippets:
(1) how to retain the color after using the palette:
Using a variable to store the color is a good choice. Also, when declaring the variable, you can not use
let col;
Because it will be allocated as “undefined” before the mouse input is received. So, we should instead write like this:
let col = "#000000"; //here is black but it could be any color
(2) how to constrain the monster within a certain area:
In order to block the monster from the palette area so it won’t block the view when the user is selecting colors, I utilize the “if” statement as below:
if (x1 < width / 20 + 30 && y1 < (height / 20) * 7+45) {
x1 = width / 20 + 30;
}
(the monster won’t move above the palette)
Reflections:
- Variables are used to store information to be referenced and manipulated in your sketch. Describe how you used variables and their purpose in your sketch.
I used “col” as a variable to store the color of the monster, and I used x1, x2, x3, y1, y2, y3 as variables to store the position of the monster, the left and the right eye of the monster respectively.
- Conditions allow us to control what the program does and perform different actions based on “if” logic statements. They enable the user to interact with the program. Describe the interactive methods you applied in your program, utilizing conditionals.
I used conditionals in aspects like: creating the palette, constraining the monster from the palette area, and constraining the monster’s eyes in a certain area.
- What are the differences between key and keyCode?
key means ASCII (numbers from 0-9, the upper and lower case English letters from A to Z, and some special characters).
keyCode means special keys (BACKSPACE, DELETE, ENTER, RETURN, TAB, ALT, UP_ARROW…).
Possible improvement:
Adding a trail of the monster that is gradually disappearing.