# 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:

1. Draw a 2-dimensional grid of circles
2. 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

#! config(deparsers = default_2_deparsers())
# 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())
# 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())
# 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!