Processing Canvas Grid Utility

This is a utility to help you better understand the Processing coordinate system. Click on any point on the canvas above and you will see the corresponding x and y values. The canvas above is 400 wide x 400 high in pixels. I use this utility to explain the coordinate system in my class.

When you use the size(x,y) statement you basically are setting up your drawing canvas ‘x’ pixels wide and ‘y’ pixels high. So size(400,400) will give you a canvas of 400 by 400.

Placing objects such as circles on the canvas require you to reference the x and y coordinates.

The x-axis starts at zero from the left and increases to the right.

The y-axis in the Processing world starts at zero from the top and increases as it goes down.

The top left (x,y) coordinates are (0,0) and the bottom right coordinates are (400,400) on the canvas.

Sixties Art

The inspiration for this post was a watercolour prototype I saw at an artist friends place. It reminded me of the retro movie intros from the 1960’s. Click on the canvas to refresh the screen. This program places rectangles and ellipses with randomized colours while increasing transparency.

Reference to artist Maqs

RGB Colours

Click on the colour bars below to see a colour mix in the circle.  The bars are RGB or Red, Green and Blue values from 0 to 255.

Some of the design decisions were to keep the interface simple and interactive. The intent was to keep the visual intuitive, requiring only mouse or pen clicks.

Universe, life and the big bang

In the grand scheme of time we are candles in the wind. The universe, space and time are infinite. This is a visualization of the creation, destruction and recreation cycle.

The idea with this simulation is to enhance the story with a simple visual narrative. It is meant to convey our smallness and insignificance in relation to the Cosmos or as the late great Carl Sagan once said “Look again at that dot. That’s here. That’s home. That’s us. On it everyone you love, everyone you know, everyone you ever heard of, every human being who ever was, lived out their lives”


Who am I?

It takes a few mouse clicks in the space below to find out!


Random Stained Glass Pattern

Generating Random Stained Glass Patterns:


Mouse Play

Click and press your mouse and move it around in the grid below, click it, drag it and play with it. It’s fun!


Visualizing the Fibonacci sequence

Fibonacci is a number sequence where the last number is derived by adding the two previous numbers. This sequence occurs frequently in nature, like sea shell growth, pine cones, and even how flowers grow. In this experimental visualization, each big circle is a combination of the little circles. This kind of resembles information blurts and life cycles in social networks. It could also be patterns of movement from home base to local excursions (humans, animals and bugs). There are many applications from store shopping patterns, to crop infestation, to crime analysis to animal behaviour and even transportation logistics.

This is an exploration of patterns that occur in nature, perhaps to better understand natural systems. Thanks to Leonardo Bonacci aka ‪#‎Fibonacci‬. Aka Leonardo of Pisa, Leonardo Pisano Bigollo

Digitizing Jackson Pollock (1912-1956)

Pollock said that he could control the flow of paint and there is no beginning or ending. Pollock was an abstract painter with an organic and a somewhat spiritual process. He liked to be alone and have a lot of space when he worked. He would have his large canvas on the ground and walk around it as he poured painted from a can, with his hands and dripped paint with his brush.

He would drop a blob of paint and run it over his canvas and would take a dripping paint brush and whip it across the canvas in a random direction. This resulted in curvy and thinning comma like shapes as shown in the video. The program I developed to create the video is relatively simple and has no AI or machine learning, rather it mimics Pollock’s typical patterns with randomness