canvas-sketch + dat.gui

sketch.js

const canvasSketch = require("canvas-sketch");
const { GUI } = require("dat.gui");

const data = {
  background: "#de6060",
  number: 0.35
};

const settings = {
  dimensions: [2048, 2048],
  data
};

const sketch = () => {
  return ({ context, width, height, data }) => {
    const { background, number } = data;
    context.clearRect(0, 0, width, height);
    context.fillStyle = background;
    console.log("hi");
    context.fillRect(0, 0, width * number, height);
  };
};

(async () => {
  const manager = await canvasSketch(sketch, settings);

  // Can disable this entirely
  const useGUI = true;
  if (useGUI) {
    const gui = new GUI();

    // Setup parameters
    addColor(gui, data, "background").name();
    add(gui, data, "number", 0, 1, 0.01);
  }

  // Helper functions
  function addColor(gui, ...args) {
    return gui.addColor(...args).onChange(render);
  }

  function add(gui, ...args) {
    return gui.add(...args).onChange(render);
  }

  function render() {
    manager.render();
  }
})();