Moiré Fingerprints

/**

 * Moiré Fingerprints

 *

 * #genuary #genuary2023 #genuary23

 *

 * Press [SPACE] to re-generate

 *

 * Copyright (c) 2022-present meezwhite. All rights reserved.

 * Twitter: @meezwhite

 * Website: https://meezwhite.xyz

 */

​

const CS = 1024;

const MP = CS/2;

const STROKE_WEIGHT = 6;

//const COLORS = ['741f3b', 'ed0871', 'b167a2', '298cd5', '9db38f', 'ccde2e'];

​

let rectForm;

let circleForms = [];

let topRectForm;

let shouldLoop = true;

​

function setup() {

  createCanvas(CS, CS);

  strokeCap(SQUARE);

  rectForm = new RectForm(-100, -100, width+100, height+100, STROKE_WEIGHT, '090909');

  const circleFormsAmount = ceil(random(9, 13));

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

    const cD = MP*pow(0.618, ceil(random()*5));

    const cR = cD/2;

    const cX = random(cR, width-cR);

    const cY = random(cR, height-cR);

    const animateH = random() > 0.5;

    const cDir = random() > 0.5 ? 1 : -1;

    const cSpeed = random(1, 3);

    //const cCol = COLORS[floor(random()*COLORS.length)];

    circleForms.push(

      new CircleForm(cX, cY, cD, animateH, cDir, cSpeed, STROKE_WEIGHT/1.618, '090909')

    );

  }

  //const tCol = `${COLORS[floor(random()*COLORS.length)]}36`;

  topRectForm = new RectForm(-width, -height, width*3, height*3, 2, '090909');

  if (! shouldLoop) {

    noLoop();

  }

}

​

function draw() {

  background(230);

  rectForm.update();

  for (let i = 0; i < circleForms.length; i++) {

    circleForms[i].update();

  }

  translate(MP, MP);

  rotate(radians(frameCount%360));

  translate(-MP, -MP);

  topRectForm.update();

}

​

class RectForm {

  constructor(x, y, w, h, sW, col) {

    this.x = x;

    this.y = y;

    this.w = w;

    this.h = h;

    this.steps = round(this.w/2);

    this.dir = 1;

    this.speed = 1;

    this.sW = sW;

    this.h_sW = this.sW/2;

    this.col = col;

  }

  update() {

    this.x += this.speed*this.dir;

    if (this.x+this.w >= width+100 || this.x <= -100) {

      this.dir *= -1;

    }

    push();

    noFill();

    stroke(`#${this.col}`);

    strokeWeight(this.h_sW);

    for (let i = 0; i < this.w/this.sW; i++) {

      const tempX = this.x+i*this.sW;

      line(tempX, this.y, tempX, this.y+this.h);

    }

    pop();

  }

}

​

class CircleForm {

  constructor(x, y, d, animateH, dir, speed, sW, col) {

    this.x = x;

    this.y = y;

    this.d = d;

    this.r = d/2;

    this.animateH = animateH;

    this.dir = dir;

    this.speed = speed;

    this.sW = sW;

    this.h_sW = this.sW/2;

    this.col = col;

  }

  update() {

    if (this.animateH) {

      this.x += this.speed*this.dir;

      if (this.x+this.r >= width || this.x-this.r <= 0) {

        this.dir *= -1;

      }

    } else {

      this.y += this.speed*this.dir;

      if (this.y+this.r >= height || this.y-this.r <= 0) {

        this.dir *= -1;

      }

    }

    push();

    noFill();

    stroke(`#${this.col}`);

    strokeWeight(this.h_sW);

    for (let i = 0; i < this.d/this.sW/2; i++) {

      const tempD = i*this.sW*2;

      circle(this.x, this.y, tempD);

    }

    pop();

  }

}

​

function keyPressed() {

  switch (keyCode) {

    case 32: // SPACE

      circleForms = [];

      setup();

      break;

    case 83: // S

      save('genuary23.png');

      break;

    default: break;

  }

}

​