// to enable the 'import' keyword here

import { Pane } from "https://cdn.jsdelivr.net/npm/tweakpane@4.0.5/dist/tweakpane.min.js";

​

const PARAMS = {

  value: 100,

};

​

const pane = new Pane();

pane.addBinding(PARAMS, "value", {

  min: 0,

  max: 255,

});

​

// We use `window.setup =` instead of `setup()` because

// the script is running as a JavaScript module (type="module")

// Modules have a different scope, so `setup()` would not be accessible

// globally by p5.js. Assigning it to `window.setup` ensures that

// p5.js can find and execute the function.

window.setup = function setup() {

  createCanvas(400, 400);

}

​

// Similarly, `window.draw =` ensures that p5.js can find this function

// in the global scope, as required for its rendering loop.

window.draw = function draw() {

  background(PARAMS.value);

}

​

// Note: In JavaScript modules (type="module"), you cannot assign values

// to undeclared variables because modules enforce strict mode by default.

// For example, writing `x = 10;` without declaring `x` (e.g., `let x;`)

// will throw an error.