Random Walk
The above sketch shows the random path of an ellipse that has any colour grabbed from a defined colour palette.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);
}