P5.js Abstract Shapes

triangular_spheres.js

// Created by Marco Quinten (@SplittyDev).
// License: Public Domain. Do whatever you want with the code.

const W = 5000;
const H = 5500;

function isInCircle(x, y, cx, cy, r) {
  return (Math.pow(cx - x, 2) + Math.pow(cy - y, 2)) < Math.pow(r, 2);
}

function setup() {
  createCanvas(W, H);
  document.querySelector('canvas').style = 'background:conic-gradient(#111 90deg, #000 0.25turn 0.5turn, #111 1rad 1.5rad, #000 300grad);background-size:2% 2%;width:90%;height:90%;margin:auto auto;';
  noLoop();
}

function draw() {
  clear();
  colorMode(HSL);
  const BASE_COLOR = ~~(Math.random() * 360);
  fillWithMode(BASE_COLOR, ADD, W / 2);
}

function fillWithMode(BASE_COLOR, BLEND_MODE, COUNT) {
  
  if (BLEND_MODE !== undefined) {
    blendMode(BLEND_MODE);
  }
  
  const cx = W / 2;
  const cy = H / 2;
  const r = Math.min(W, H) * 0.9 / 2;
  const d = r * 2;
  const padding = 50;
  const cxp = cx - padding / 2;
  const cyp = cy - padding / 2;
  const rp = r - padding;
  const density = COUNT;
  
  if (BASE_COLOR === true) {
    drawHalo(cx, cy, d);
  }
  
  for (let i = 0; i < density; i++) {
    let x = Math.random() * W;
    let y = Math.random() * H;
    while (!isInCircle(x, y, cx - padding / 2, cy - padding / 2, r - padding)) {
      x = Math.random() * W;
      y = Math.random() * H;
    }
    const distX = Math.abs(cx - x) / (d / 2);
    const distY = Math.abs(cy - y) / (d / 2);
    const distF = Math.sqrt(Math.pow(distX, 2) + Math.pow(distY, 2));
    noStroke();
    fill(BASE_COLOR + ((Math.random() - 0.5) * 200) * (1 - distF), 40 + distF * 50, 20 + distF * 10);
    const size = 30 + (75 * distF);
    triangle(x, y, x + size, y, x + size / 2, y + (Math.random() < 0.5 ? size : -size));
  }
}

function drawHalo(cx, cy, d) {
  strokeWeight(30);
  stroke(255);
  noFill();
  circle(cx, cy, d - 50);
}