This is a collage of images of the p5.js logo.
It is a fractal, rendered recursively by p5.js code.
The recursive case consists of a Collage object composed of a rectangle and four smaller Collage objects, each of which is half the width and half the height of the containing Collage object.
The orientations of a Collage and its four contained Collage objects are determined by the randomGaussian function. Orientations of contained Collage objects are influenced, somewhat, by the orientation of the containing Collage. Therefore, contained Collage objects are likely to differ noticeably in orientation from each other and from the containing Collage object.
The red, green, and blue color components of a Collage object are determined by the random function, therefore the objects are also likely to differ in color. The alpha component of a Collage object has a decimal value of 47.
The base case consists simply of a rectangle containing a p5.js logo.
Due to the application of randomness, individual renderings of Collage objects at a recursive level will differ markedly from each other. In some cases, the fractal nature of the Collage will be obvious, while in others, it will be more subtle.
Here’s the p5.js code:
// p5.js logo collage
let logo;
function preload() {
logo = loadImage("p5js.svg");
} // end preload
function setup() {
createCanvas(1200, 680);
noLoop();
background(255);
rectMode(CENTER);
strokeWeight(2);
stroke(0, 0, 127);
imageMode(CENTER);
} // end setup
function draw() {
translate(width / 2, height / 2);
(new Collage(1100, 520, 4)).render();
} // end draw
function Collage(w, h, level) {
this.w = w;
this.h = h;
this.level = level;
this.render = function() {
push();
rotate(randomGaussian(0, 1) * (QUARTER_PI / 8 + QUARTER_PI / 32));
let r = random(128, 256);
let b = random(128, 256);
let g = random(128, 256);
fill(r, b, g, 47);
rect(0, 0, this.w, this.h);
if (this.level > 1) { // recursive case; create 4 Collage instances
let coeffs = [[-1, -1], [-1, 1], [1, -1], [1, 1]];
for (let i = 0; i <= 3; i++) {
push();
translate(coeffs[i][0] * this.w / 4, coeffs[i][1] * this.h / 4);
(new Collage(this.w / 2, this.h / 2, this.level - 1)).render();
pop();
} // end for
} else { // base case; display logo
image(logo, 0, 0, 125, 57);
}; // end else
pop();
} // end render
} // end Collage
// p5js.svg logo file from home page at https://p5js.org/
// fill="#ed225d"
// decimal: fill(237, 34, 93)
To run the code successfully, the p5.js logo is needed, saved with the name p5js.svg. It is available here: p5.js.