Randomized Overlapping Translucent Quadrilaterals

Gallery
1

This sketch is composed of randomized overlapping translucent quadrilaterals.

quads_04
quads_04512×512 31.2 KB

The sketch in draw in black, white, and gray in order to favor form over color. It is based on a regular grid of coordinate pairs. The actual vertices of the quadrilaterals are computed by adding a random factor to the coordinates in the grid. This causes the quadrilaterals to overlap. The fill is translucent, enabling the overlaps to be visible. Before any of them are drawn, the specifications for all of the quadrilaterals are computed, and the they are pushed onto an Array, which is subsequently shuffled, This is so that the pattern of overlapping is randomized, rather than its being biased by the positions of the quadrilaterals on the canvas.

p5.js code:

// Randomized Overlapping Translucent Quadrilaterals
new p5((p) => { // anonymous p5 instance
  let b; // background color
  let f; // fill color
  let s = 32; // Quad size basis (prior to vertex randomization)
  let quads = []; // Array of Quads

  p.setup = () => {
    p.createCanvas(256, 256);
    b = p.color(0);
    f = p.color(255, 255, 255, 192); // include some transparency
    p.noStroke();
    p.noLoop();
  };

  p.draw = () => {
    p.background(b);
    for (let x = 0; x < p.width; x += s) {
      for (let y = 0; y < p.height; y += s) {
        quads.push(
          new Quad(
            x + p.random(-s / 2, s / 2),
            y + p.random(-s / 2, s / 2),
            x + s + p.random(-s / 2, s / 2),
            y + p.random(-s / 2, s / 2),
            x + s + p.random(-s / 2, s / 2),
            y + s + p.random(-s / 2, s / 2),
            x + p.random(-s / 2, s / 2),
            y + s + p.random(-s / 2, s / 2),
            f
          )
        );
      }
    }
    // randomize draw order
    p.shuffle(quads, true);
    for (let i = 0; i < quads.length; i++) {
      quads[i].show();
    }
  };

  class Quad { // a quadrilateral with fill
    constructor(x1, y1, x2, y2, x3, y3, x4, y4, f) {
      this.x1 = x1;
      this.y1 = y1;
      this.x2 = x2;
      this.y2 = y2;
      this.x3 = x3;
      this.y3 = y3;
      this.x4 = x4;
      this.y4 = y4;
      this.f = f;
    }

    show() {
      p.fill(this.f);
      p.quad(
        this.x1,
        this.y1,
        this.x2,
        this.y2,
        this.x3,
        this.y3,
        this.x4,
        this.y4
      );
    };
  }; // end class Quad
});
2 Likes