Animation basics
Animation basics

draw()

If you define a function called "draw" in your code, then that function will get called repeatedly, about 60 times per second. This is typically used for creating animations, in combination with incrementing variables that affect the shapes drawn. To re-paint the entire canvas for each frame, use the background() command. Otherwise, new shapes will be drawn on top of the previous canvas.

Note: The default frame rate can be changed with the

frameRate()⁠

function.

Example

Result

⁠

⁠

Incrementing shortcuts

Instead of typing x = x + 3; you can make it easier by just typing x += 3; .

Math Operator

Meaning of Operator

Example

addition or unary plus

width += 3;

subtraction or unary minus

eye -= 10;

multiplication

face *= 2;

division

cat /= 5;

remainder after division (modulo division)

remainder %= 6;

There are no rows in this table

⁠

Want to print your doc?
This is not the way.

Try clicking the ⋯ next to your doc name or using a keyboard shortcut (

CtrlP

) instead.

Animation basicsAnimation basics

draw()

Example

Result

Incrementing shortcuts

Animation basics
Animation basics