Random Walk

Moving the ellipse

The ellipse moves in six possible directions. These directions are defined in an array.

let optionsX = [-1, 0, 1];
let optionsY = [-1, 0, 1];

To move the ellipse, the direction is first generated by using the random() function to get a value out of the optionsX and optionsY arrays. The ellipse, which starts at the centre of the canvas, moves based on these random values and the step size. Perlin noise is also applied.

let x, y;
let diam = 12;
let step = diam/2;
let t = 0;

function setup() {
  [...]
  x = width/2;
  y = height/2;
}

function draw() {
  let randX = floor(random(0, optionsX.length));
  let randY = floor(random(0, optionsY.length));
  let moveX = optionsX[randX] * step * noise(t);
  let moveY = optionsY[randY] * step * noise(t);
  x += moveX;
  y += moveY;
  t += 0.03;
}

The x and y positions of the ellipse are checked if they are under 0 or higher than the canvas width and height so that the ellipse moves within the boundaries of the canvas.

function draw() {
  [...]
  if (x < 0) x = width;
  if (x > width) x = 0;
  if (y < 0) y = height;
  if (y > height) y = 0;
}

Drawing the Ellipse

The random colour is generated the same way as the direction of the ellipse is created. It is taken from the colours array which consists of six colours.

function setup() {
  [...]
  colours = [
    color(107, 61, 79),
    color(148, 76, 102),
    color(180, 111, 131),
    color(244, 118, 154),
    color(253, 138, 178),
    color(247, 166, 188)
  ];
}

function draw() {
  [...]
  let randC = floor(random(0, colours.length));
  let colour = colours[randC];
  noStroke();
  fill(colour);
  ellipse(x, y, diam);
}