Mask Monogram 2

// https://www.happyhues.co/palettes/10

const palette = {

  background: "#004643",

  colors: ["#f9bc60", "#abd1c6", "#e16162", "#eebbc3"],

  stroke: ["#001e1d"]

}

const rects = [];

​

let gfxMask; // offscreen graphics to which the mask will be prepared

let gfxBackground; // offscreen graphics to which the colourful hexes background will be prepared

​

let myCanvas;

let lapse = 0;    // mouse timer

​

function setup() {

  createCanvas(1600, 834);

  frameRate(4);

  gfxBackground = createGraphics(width, height);

  gfxMask = createGraphics(width, height);

  generateRects(300, gfxBackground);

  //noLoop();

}

​

​

function draw() {

  generateRects(300, gfxBackground);

  drawBackgroundTo(gfxBackground);

  drawMaskOnto(gfxMask);

  image(gfxBackground, 0, 0);

  image(gfxMask,0,0);

  stroke(255);

  noFill();

  strokeWeight(0);

  textSize(512)

  text("OMAR", width * 0.01, 2.1 * height / 3) //... in the shape of some text

}

​

​

function drawBackgroundTo(g) {

  g.blendMode(BLEND);

  g.background(palette.background);

  g.blendMode(DIFFERENCE);

​

  g.noStroke();

  rects.forEach(r => {

    g.push();

    g.translate(r.position.x, r.position.y);

    g.rotate(radians(r.rotation));

    g.fill(r.color);

    g.drawingContext.shadowBlur = r.blur;

    g.rect(0, 0, r.w, r.h, r.borderRadius);

    g.pop();

  });

}

​

​

function drawMaskOnto(g) {

  g.blendMode(BLEND);

  g.background(30); //paint over everything but...

  g.erase(255); //... then erase ...

  g.fill(255);

  g.noStroke()

  g.textSize(512)

  g.text("OMAR", g.width * 0.1, 2.1 * g.height / 3) //... in the shape of some text

  g.noErase();

}

​

​

function generateRects(numOfRects, g) {

  rects.length = 0;

  for (let i = 0; i < numOfRects; i++) {

    const rect = {

      w: random(60, 260),

      h: random(60, 200),

      position: createVector(random(g.width), random(g.height)),

      color: random(palette.colors),

      rotation: random(360),

      borderRadius: random(10),

      blur: random(20),

    }

    rects.push(rect);

  }

}

​

function mousePressed(){

  // prevents mouse press from registering twice

  if (millis() - lapse > 500){

    save('pix.jpg');

    lapse = millis();

  } 

}