Simple Animation

With two new concepts setup()/draw() and Variables, we can now finally do something useful: we can do very simple animations that get drawn to the screen frame by frame.

Drawing a circle over and over again

int xPosition;

void setup() {
    size(300, 400);
    xPosition = 0;
}

void draw() {
    xPosition = xPosition + 1;
    circle(xPosition, 200, 20);
}

As you can see, we just continue drawing on our canvas. We never tell the computer to clear anything, so it will just put the next circle on top of the last one we drew.

Drawing on a blank canvas

Let's modify our example slightly so that we don't see this trail any longer. In this example we set a fresh background on every drawn frame.

int xPosition;

void setup() {
    size(300, 400);
    xPosition = 0;
}

void draw() {
    background(255, 255, 255);
    xPosition = xPosition + 1;
    circle(xPosition, 200, 20);
}

Try it yourself

Assignment: Try your own animations!

Write short programs where you use everything you learned about setup()&draw(), Variables (Number variables in particular) and randomness and let it animate a few things.

Produce Three distinct tiny programs that play with animation. Start small, expand from there.

Some initial ideas

• Have a few shapes that change color and/or position
• Change individual vertexes or bezier curves based on some variable
• Have a few different variables that change at different rates
• you can put variables into transformations and still use them with push/pop (refer to our slides from 2023-11-02 for more on that)
• There's one example using random() on the next page.