Creative coding with circles

Created: 2021-04-03. Modified: 2021-04-04.

Introduction#

In this article, we will do some basic creative coding together! We will create the following visualisation:

The first step to create such visualisation is to describe the visualisation using primitive operations. In this case, the visualisation is simply a 2-dimensional array of circles with randomised size and color. This gives us a 2-step plan for the implementation:

Draw a 2-dimensional grid of circles
Randomise the color and size of the circles

Step 1 - Draw a 2-dimensional grid of circles#

We begin by loading the p5.js library, setting up the coordinates where the circles will locate, then drawing the circles on the screen.

Recall from the “Getting Started” example that

setup is a function p5 monitors and calls once when your application launches,
createCanvas is a function to create a canvas on the screen, and
circle is a function to draw a circle on the screen.

#! config(deparsers = default_2_deparsers())
#! load_library("p5")

# Setup
WIDTH <- 400
HEIGHT <- 400
DIAMETER <- 10
GRID_SIZE <- 40

x_grid <- seq(0, WIDTH, step = DIAMETER)
y_grid <- seq(0, HEIGHT, step = DIAMETER)

setup <- function() {
    createCanvas(WIDTH, HEIGHT)
    for (x in x_grid) {
        for (y in y_grid) {
            circle(x, y, DIAMETER)
        }
    }
    NULL
}

Note that in the above we returned NULL at the end of setup because JavaScript does not allow returning assignments and control-flow statements (e.g. for-loop and if-statement). If you missed that, sketch would return NULL by default, and in this case the application would run fine; however, you will get a warning from sketch. In general, it is good practice to be explicit about what to return as there are situations where returning NULL may not be the intention.

Step 2 - Randomise the color and size of the circles#

Next, we randomise the color and size of the circles by

using fill to change the fill color of the circles,
using stroke to change the border color of the circles,
modifying the diameter to change the size of the circles.

#! config(deparsers = default_2_deparsers())
#! load_library("p5")

# Setup
WIDTH <- 400
HEIGHT <- 400
DIAMETER <- 10
GRID_SIZE <- 40

x_grid <- seq(0, WIDTH, step = DIAMETER)
y_grid <- seq(0, HEIGHT, step = DIAMETER)

setup <- function() {
    createCanvas(WIDTH, HEIGHT)
    for (x in x_grid) {
        for (y in y_grid) {
            # Uniform distribution for RGB color
            rgb_color = runif(3, 0, 255)
            fill(rgb_color)    # fill color
            stroke(rgb_color)  # border color
            
            # Square of normal distribution for the diameter
            d <- DIAMETER * rnorm(1, 0, 0.4)^2
            circle(x, y, d)
        }
    }
    NULL
}

Extra!#

Let’s add an extra feature that when we click on the canvas, it will regenerate another drawing! To do that, we wrap the drawing code into a function draw_grid, then add it into the mouseClicked function.

#! config(deparsers = default_2_deparsers())
#! load_library("p5")

# Setup
WIDTH <- 400
HEIGHT <- 400
DIAMETER <- 10
GRID_SIZE <- 40

x_grid <- seq(0, WIDTH, step = DIAMETER)
y_grid <- seq(0, HEIGHT, step = DIAMETER)

draw_grid <- function() {
    for (x in x_grid) {
        for (y in y_grid) {
            # Uniform distribution for RGB color
            rgb_color = runif(3, 0, 255)
            fill(rgb_color)    # fill color
            stroke(rgb_color)  # border color
            
            # Square of normal distribution for the diameter
            d <- DIAMETER * rnorm(1, 0, 0.4)^2
            circle(x, y, d)
        }
    }
    NULL
}

setup <- function() {
    createCanvas(WIDTH, HEIGHT)
    draw_grid()
}

mouseClicked <- function() {
    clear()  # remember to clear the previous drawing
    draw_grid()
}

Click to update!

Exercises#

Try creating the following visualisation (which updates upon click):

Credits / Reference#

I learned the above visualisations from Matt DesLauriers. Visit the repository for other useful resources!