Random

JavaScript has a Math global object, which contains basic methods for manipulating numbers.

We can use the Math object to generate random numbers.

p5 has a random function, which returns a random value within a specific range.

random(5); // a random number between 0 and 5
random(-5, 5);// a random number between -5 and 5
random(5, 10);// a random number between 5 and 10

Randomness can be used to introduce some variation into our pattern.

We can randomize the size, shape, color and position, and choose randoms for the randomness.

function setup() { createCanvas(640, 360); background(220); rectMode(CENTER); // random fill, with less green, more blue for (var x = 50; x < width; x += 50) { var r = random(0, 255); var g = random(0, 100); var b = random(100, 255); fill(r, g, b); ellipse(x, height/2, 40); ellipse(x - 10, height/2 - 10, 10); ellipse(x + 10, height/2 - 10, 10); rect(x, height/2 + 10, 30, 10, 5); } }
function setup() { createCanvas(640, 360); background(220); rectMode(CENTER); // random size for (var x = 50; x < width; x += 50) { var size = random(50, 100); ellipse(x, height/2, size); ellipse(x - 10, height/2 - 10, size / 10); ellipse(x + 10, height/2 - 10, size / 10); rect(x, height/2 + 10, size, size / 10, 5); } }
function setup() { createCanvas(640, 360); background(220); rectMode(CENTER); // random y position for (var x = 50; x < width; x += 50) { var y = random(height/2 + 40, height/2 - 40); ellipse(x, y, 40); ellipse(x - 10, y - 10, 10); ellipse(x + 10, y - 10, 10); rect(x, y + 10, 30, 10, 5); } }
function setup() { createCanvas(640, 360); background(220); rectMode(CENTER); // combination for (var x = 50; x < width; x += 50) { var y = random(height/2 + 40, height/2 - 40); var s = random(50, 100); var r = random(0, 255); var g = random(0, 255); var b = random(0, 255); fill(r, g, b); ellipse(x, y, s); ellipse(x - s / 4, y - s / 4, s / 2); ellipse(x + s / 4, y - s / 4, s / 2); r += 50; g += 50; b += 50; fill(r, g, b); rect(x, y + 10, s / 2, s / 4, s / 8); } }