Link Search Menu Expand Document

Day 3

Topic Variables

Learning Objectives

With this topic you

  • understand how to work with data, and
  • understand what the scope of a variable is, and
  • how to animate certain properties, such as color and position.


Exercise Animation

1.1. Animation of The Position

Start with The Color Spectrum - Step 3.

Now, we want to animate the movement of the circle. Meaning, the circle should move on its own and not follow the mouse anymore!

The result should look somewhat like the following:


The steps to animate the position of the circle are similar to the steps we made for animating the color.

  1. We need two new variables for both coordinate in x and y, e.g. positionX, positionY.
  2. With each draw() call increase the value positionX, positionY.
    • For that add two new variables stepX, stepY
  3. Setup up conditions to check for the boundaries of the sketch canvas.
    • You get the canvas size with the system variable width and height
    • If it is moving out of the canvas, let’s switch direction.

1.2. Advanced Improvements

  1. Randomize the step value, so that every time we start the program, we get a different animation.
    • Do this in setup().
    • Assign a random value within a suitable range to stepX, stepY each.
  2. For a more precise boundary check, check the “collisions” with the sketch window limits not with the center of the circle, as it is now, but incorporate the radius of the circle into the check. Then the circle will bounce off its sides and not slightly move out of the window anymore.

1.3. Freestyle

What else could you animate in this basic example?


Submit your sketches under Exercise - Animation in the OpenProcessing class.

Topic Loops

Learning Objectives

With this topic you

  • understand how to repeat code,
  • know how to implement a while and a for-loop,
  • know how to implement a 2D for-loop, and
  • understand how to create grid-based pattern.