First, know the processing automatically records your last mouse button in a special variable called mouseButton
as well as the last key you pressed as keyCode
.
These values are recorded as numbers. Example:
mouseButton
values:
Left click == 37
Right click == 39
keyCode
values
a-key == 65
b-key == 66
...
z-key == 90
Left-arrow key == LEFT
Right-arrow key == RIGHT
Each time you press a key, processing automatically calls a function named keyPressed
.
Each time you release a key, processing automatically calls a function named keyReleased
.
Example:
//This script will draw a circle on the screen if the a-key is being pressed //and it will draw a rectangle on the screen if the b-key is being pressed //it will not draw either shape if these keys are not being pressed var a_pressed = false; var b_pressed = false; var draw = function() { background(200) if (a_pressed) { ellipse(250,250,100,100); } if (b_pressed) { rect(150,150,200,200); } } var keyPressed = function() { if (keyCode == 65) { a_pressed = true; } if (keyCode == 66) { b_pressed = true; } } var keyReleased = function() { if (keyCode == 65) { a_pressed = false; } if (keyCode == 66) { b_pressed = false; } }
VFX lessons in JavaScript
VFX lessons in JavaScript
Create a game where the player pilots a helicopter with the mouse and collects coins while avoiding obstacles
VFX lessons in JavaScript
Create a basic code clicker game
basic drawing with dots
Create a simple program to draw with the mouse
In the first part of this course we will be making a simplified version of the game which allows the player to move and to collect coins
Learn to use ProcessingJS functions
processing has built-in functions that activate when you press on the mouse or keyboard