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 10Randomness 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);
}
}