🌑

const numLines = 50;
const lineHeight = 300;
const lineWidth = 6;
const lineSpacing = 50;
const noiseScale = 0.01;

function setup() {
  createCanvas(windowWidth, windowHeight);
  frameRate(15);
}

function draw() {
  drawBackground();
  drawLines();
}

function drawBackground() {
  let fromColor = color(0, 0, 0);
  let toColor = color(255, 255, 255);
  let gradientHeight = height * 0.0;

  for (let y = 0; y < gradientHeight; y++) {
    let inter = map(y, 0, gradientHeight, 0, 1);
    let bgColor = lerpColor(fromColor, toColor, inter);
    stroke(bgColor);
    line(0, y, width, y);
  }
}

function drawLines() {
  for (let i = 0; i < numLines; i++) {
    let y = i * (lineHeight + lineSpacing);
    let offset = map(noise(i * noiseScale, frameCount * 0.005), 0, 1, -width * 0.25, width * 0.25);
    
    let startX = -lineWidth / 2 + offset;
    let endX = width + lineWidth / 2 + offset;
    
    let curveY = y;
    let prevCurveY = y;
    
    strokeWeight(lineWidth);
    noStroke();
    
    for (let x = startX; x <= endX; x += lineWidth) {
      let noiseVal = noise(x * noiseScale, y * noiseScale, frameCount * 0.005);
      let curveOffset = map(noiseVal, 0, 1, -lineHeight * 0.5, lineHeight * 2.5);
      
      curveY = y + curveOffset;
      
      if (curveY !== prevCurveY) {
        fill(random(200, 255), random(200, 255), random(200, 255));
        beginShape();
        vertex(x, curveY);
        vertex(x + lineWidth, curveY);
        vertex(x + lineWidth, prevCurveY);
        vertex(x, prevCurveY);
        endShape(CLOSE);
        
        prevCurveY = curveY;
      }
    }
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// Clicking in the box toggles fullscreen on and off.
function mousePressed() {
  if (mouseX > 0 && mouseX < windowWidth && mouseY > 0 && mouseY < windowHeight) {
    let fs = fullscreen();
    fullscreen(!fs);
  }
}