JSFiddle - React, Tailwind, and code Playground

random surfaces experiment

by greg gorlen

HTML

<canvas id="paper"></canvas>

CSS

body {
  background: #000;
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

JavaScript

"use strict";

const canvas = document.getElementById("paper");
canvas.width = parseFloat(window.getComputedStyle(document.body).width);
canvas.height = parseFloat(window.getComputedStyle(document.body).height);
const ctx = canvas.getContext("2d");

ctx.strokeStyle = "#fff";
ctx.fillStyle = "#fff";

const nodes = [];

for (let i = 0; i < 50; i++) {
  nodes.push({
    x: Math.random() * canvas.width | 0,
    y: Math.random() * canvas.height | 0
  });
}

for (let i = 0; i < nodes.length; i++) {
  nodes[i].neighbors = [];
  
  for (let j = 0; j < nodes.length; j++) {
    const key = nodes[j];
    
    nodes[i].neighbors.push({ 
      neighbor: key,
      dist: Math.sqrt(Math.pow(nodes[i].x - nodes[j].x, 2) + 
                      Math.pow(nodes[i].y - nodes[j].y, 2))
    });
  }
}

for (let i = 0; i < nodes.length; i++) {
  nodes[i].neighbors.sort(function (a, b) {
    return a.dist - b.dist;
  });
}

for (let i = 0; i < nodes.length; i++) {
  ctx.strokeStyle = "#000";
  ctx.beginPath();
  ctx.moveTo(nodes[i].x, nodes[i].y); 
  ctx.fillStyle = "hsl(" + ((Math.random() * 20 | 0) + 160) + ", 70%, " + ((Math.random() * 50 | 0) + 10) + "%)";

  for (let j = 0; j < 3; j++) {
    ctx.lineTo(nodes[i].neighbors[j].neighbor.x, 
               nodes[i].neighbors[j].neighbor.y); 
  }
  
  ctx.fill();
  ctx.stroke();
}