Beams

README.md

Beams

view on jsgist

index.css

:root {
  color-scheme: light dark;
}
canvas { background-color: #333; }

index.html

<canvas></canvas>

index.js

const canvas = document.querySelector('canvas');
const ctx = canvas.getContext('2d');
const r = (a, b) => {
  return a + Math.random() * (b - a);
}
const rng = (min, max, rng) => {
  const dist = max - min;
  const halfInvRange = (1 - rng) / 2;
  return r(min + dist * halfInvRange, max - dist * halfInvRange);
}

const colors = ['red', 'blue'];
const directions = [-60 * Math.PI / 180, 60 * Math.PI / 180];
const thick = 10;
const length = 60;

function drawBeam(depth) {
  ctx.save();
  const cx = r(-0.4, 0.4); 
  ctx.translate(cx * length, 0);
  ctx.fillStyle = colors[depth % colors.length];
  ctx.fillRect(-length / 2, -thick / 2, length, thick);
  --depth;
  if (depth > 1) {
    for (const l of [-0.5, 0.5]) {
      ctx.save();
        ctx.translate(-length * l, 0);
        ctx.rotate(directions[depth % 2]);
        drawBeam(depth - 1);
      ctx.restore();
    }
  }
  ctx.restore();
}

ctx.translate(rng(0, ctx.canvas.width, 0.8), rng(0, ctx.canvas.height, 0.8));
ctx.rotate(30 * Math.PI / 180);
drawBeam(2);

jsGist.json

{"name":"Beams","settings":{},"filenames":["index.html","index.css","index.js"]}