It was really hard doing this becuase of translate as it took alot of calculation to figure out where the origin is.
sketch
function setup() {
createCanvas(600, 600, WEBGL);
background(220);
text("p5.js vers 0.9.0 test.", 10, 15);
}
function draw() {
//for the color
colorMode(RGB);
let from = color(random(0,255),random(0,255),random(0,255));
let to = color(random(0,255), random(0,255), random(0,255));
colorMode(RGB);
let interA = lerpColor(from, to, 0.33);
let interB = lerpColor(from, to, 0.66);
//for the pattern
for (var col = 0; col < 2; col += 1){
translate(-200,0);
for (var row = 0; row < 2; row += 1){
//translate(0,-150);
fill(from);
design();
}
}
for (var col = 0; col < 4; col += 1){
translate(200,0);
for (var row = 0; row < 4; row += 1){
//translate(0,150);
fill(interA);
design();
}
}
for (var col = 0; col < 2; col += 1){
translate(-200,0);
for (var row = 0; row < 2; row += 1){
//translate(0,-150);
design();
}
}
for (var col = 0; col < 2; col += 1){
translate(0,-200);
for (var row = 0; row < 2; row += 1){
//translate(0,-150);
fill(interB);
design();
}
}
for (var col = 0; col < 4; col += 1){
translate(0,200);
for (var row = 0; row < 4; row += 1){
//translate(0,-150);
fill(to);
design();
}
}
noLoop();
}
function design(){
fill
ellipsoid(30, 40, 30);
torus(60,20);
}