This is a collage of images of the p5.js logo. [p5js_logo_collage] 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.

nice! this would be an amazing “poster” for the anniversary! [image] birthday Celebrating Processing 20th Anniversary Community Hi everyone wave As you may already know, this year is 20th anniversary of Processing! We think it’s nice to do something as a community towards August when Processing was “born” hatching_chick baby_chick Do you have any ideas? One idea we came up with is each of us make a poster or a card and submit them on discourse (here) / OpenProcessing / social media to make a gallery. If you have any ideas, feel free to share them on this thread memo

Thanks, @micuat! Feel free to use it in any manner that would be of benefit to the community. Please let me know whether there is anything that I can do to facilitate that.

P5.js logo collage

Gallery

micuat July 18, 2021, 7:25pm 2

nice! this would be an amazing “poster” for the anniversary!

Topic		Replies	Views
P5.js personal website Gallery	0	245	August 16, 2022
How to create the below image using p5.js Coding Questions	1	224	February 20, 2024
Generative photo collage Coding Questions	2	1078	February 26, 2020
Convert any image to a puzzle Gallery	3	758	November 8, 2021
P5 JS random/shuffle pixels Coding Questions	6	2010	October 15, 2018

P5.js logo collage

Related topics