# P5.js logo collage

**URL:** <https://discourse.processing.org/t/p5-js-logo-collage/31258>\
**Category:** Gallery\
**Created:** [July 15, 2021, 12:19am UTC](https://discourse.processing.org/t/p5-js-logo-collage/31258 "2021-07-15T00:19:34Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 15, 2021, 12:19am UTC](https://discourse.processing.org/t/p5-js-logo-collage/31258/1 "2021-07-15T00:19:35Z")

</div>

This is a collage of images of the p5.js logo.

 ![p5js_logo_collage](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/2/29fb1e2fdaea2f96f09925179fe5a98fa39d087f.png)

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:

```auto
// 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](https://p5js.org/).

---

<div class="post-metadata">

**Author:** ![micuat](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/micuat/32/19407_2.png) [@micuat](https://discourse.processing.org/u/micuat)\
**Post date:** [July 18, 2021, 7:25pm UTC](https://discourse.processing.org/t/p5-js-logo-collage/31258/2 "2021-07-18T19:25:31Z")

</div>

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

> [@birthday Celebrating Processing 20th Anniversary](https://discourse.processing.org/t/celebrating-processing-20th-anniversary/30797):
>
> 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

---

<div class="post-metadata">

**Author:** ![javagar](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/javagar/32/11434_2.png) [@javagar](https://discourse.processing.org/u/javagar)\
**Post date:** [July 18, 2021, 7:44pm UTC](https://discourse.processing.org/t/p5-js-logo-collage/31258/3 "2021-07-18T19:44:25Z")

</div>

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.