nights.js

import {
  Command,
  FluentGUI,
  Integer,
  Key,
  Control,
} from "../libraries/gui/gui.js";

import { getLargeCanvas } from "../libraries/misc.js";

const sketch = (s) => {
  let gui, night, moonPosition, canvasSize;

  function star(gr, p) {
    let r = s.random(10, 100);
    let g = s.random(10, 100);
    let b = s.random(100, 255);
    let transpNight = s.color(s.red(night), s.green(night), s.blue(night), 0.9);
    let x = s.random(s.width),
      y = s.random(s.height);
    let [mx, my] = moonPosition;
    let dist = Math.sqrt((mx - x) * (mx - x) + (my - y) * (my - y));

    let starColour = s.color(r, g, b);
    if (dist < 200) {
      p = p * (dist / 150);
    }
    gr.beginShape();
    for (let i = 0; i < p * 7.0; i++) {
      let colour = s.lerpColor(starColour, transpNight, i / (p * 10.0));
      gr.stroke(colour);
      gr.circle(x, y, i / 10.0);
    }
    gr.endShape();
  }

  function moon(moonColour) {
    let transpNight = s.color(s.red(night), s.green(night), s.blue(night), 0);
    let moonlightBorder = s.lerpColor(moonColour, transpNight, 0.1);
    let transpMoonlightBorder = s.color(
      s.red(moonlightBorder),
      s.green(moonlightBorder),
      s.blue(moonlightBorder),
      0.001,
    );
    let [x, y] = moonPosition;
    for (let i = 0; i < 30; i++) {
      let colour = s.lerpColor(moonColour, transpMoonlightBorder, i / 30.0);
      s.fill(colour);
      s.circle(x, y, i * 3.2);
    }
  }

  function moonlight(g, moonColour, alpha, factor1, factor2) {
    let transpNight = s.color(s.red(night), s.green(night), s.blue(night), 0);
    let transpMoonlightBorder = s.color(
      s.red(moonColour),
      s.green(moonColour),
      s.blue(moonColour),
      alpha,
    );
    let [x, y] = moonPosition;
    g.beginShape();
    for (let i = 0; i < 20; i++) {
      g.fill(transpMoonlightBorder);
      g.circle(x, y, i * 24);
    }
    g.endShape();
  }

  function layer(k, dark) {
    s.noiseSeed(s.random(100));
    s.beginShape();
    s.noStroke();
    s.fill(dark);
    s.curveVertex(0, s.height);
    s.curveVertex(0, (3 * s.height) / 4);
    let pts = s.randomGaussian(5, 3);
    for (let i = 0; i <= pts; i++) {
      s.curveVertex(
        (i * s.width) / pts,
        (1 * s.height) / 3 +
          2 * s.noise((i + 1) * (3 + k)) * ((Math.sqrt(k) * s.height) / 6),
      );
    }
    s.curveVertex(s.width, s.height);
    s.endShape(s.CLOSE);
  }

  function generate() {
    s.clear();
    let { w, h } = canvasSize;
    let low = s.randomGaussian(5, 15);
    let high = s.randomGaussian(25, 10);
    night = s.color(low, low, 25);
    let graf = s.createGraphics(w, h);
    graf.background(night);
    moonPosition = [s.randomGaussian(800, 100), s.randomGaussian(200, 50)];
    let numStars = s.randomGaussian(60, 30);
    for (let i = 0; i < numStars; i++) {
      star(graf, s.randomGaussian(2, 1));
    }
    s.image(graf, 0, 0);
    for (let k = 1; k <= 4; k++) {
      let r = s.randomGaussian(12, 7);
      let g = s.randomGaussian(13, 6);
      let b = s.randomGaussian(11, 7);

      let dark = s.color(r + k, g + s.noise(k) * 15, b + s.noise(k) * 65);

      layer(k, dark);
    }

    let r = s.randomGaussian(200, 10);
    let g = s.randomGaussian(200, 10);
    let b = s.randomGaussian(160, 10);
    let a = s.randomGaussian(250, 20);

    let moonColour = s.color(r, g, b, a);
    moonlight(s, moonColour, 0.003, 29, 60);
    moon(moonColour);
  }

  s.setup = () => {
    let { w, h } = getLargeCanvas(s, 1600);
    canvasSize = {
      w: w,
      h: h,
    };
    s.colorMode(s.RGB, 255, 255, 255, 1);
    let canvas = s.createCanvas(w, h);
    s.frameRate(20);
    gui = createGUI();
    gui.toggle();
    generate();
  };

  function createGUI() {
    let info =
      "Started as an exploration of random star fields, then added the rolling hills and moon";
    let subinfo =
      "Sorry about the banding around the moonlight, haven't figured out a way around it (yet)";
    let S = new Key("s", () => {
      s.save("img.png");
    });
    let saveCmd = new Command(S, "save the canvas");
    let R = new Key("r", () => {
      generate();
    });
    let resetCanvas = new Command(R, "reset");

    let gui = new FluentGUI();

    gui
      .withTitle("Crazy, crazy nights, RB 2020/05")
      .withInfo(info)
      .withSubinfo(subinfo)
      .withCommands([saveCmd, resetCanvas]);

    gui.setup();

    let QM = new Key("?", () => gui.toggle());
    let hide = new Command(QM, "hide this");

    gui.addCmd(hide);
    gui.update();
    return gui;
  }

  s.keyReleased = () => {
    gui.dispatch(s.key);
  };
};

p5.disableFriendlyErrors = true;
let p5sketch = new p5(sketch);