banner-png.png

Animating Circles

Designing a new animating banner for a website that teaches creative programming

Primitive Shapes and Behaviour

Primitive Shapes and Behaviour

Programming is analogous to Lego building blocks. We learn the foundational concepts and apply them to different or larger problems. In Processing, one of the first things we learn is the drawing of basic shapes. For a website that teaches creative programming using Processing, I employed the use of simple primitive shapes in the banner, since they are the starting points for building more complex sketches. I selected the circle to be the primitive shape, because it allows for interesting possibilities and exploration - for example, collision against the edges of the canvas or even interactions when the circles collide against one another.

Programming is also about defining conditions which result in certain actions occurring. In code, this is typically achieved using if-else blocks and for loops. The simple shapes on screen should be imbued with some properties to visibly imply behaviour. They should interact with the canvas and/or with one another on the canvas. This will also result in non-repeating behaviour and generative patterns.

A Lifecycle

A Lifecycle

Two large circles will collide and produce an explosion at the point of the collision. This explosion, in turn, will trigger the production of a new set of smaller circles on the canvas.

In this manner, there is a lifecycle to the circles drawn on the canvas. They start young (light blue), grow bigger (dark blue) and eventually explode in collisions with other dark blue circles resulting in both large circles being lost.