p5_canvassketch_circles.js

gistfile1.txt

const canvasSketch = require("canvas-sketch");

// Grab P5.js from npm
const p5 = require("p5");

// Attach p5.js it to global scope
new p5();

const settings = {
  p5: true,
  dimensions: "A4",
  pixelsPerInch: 600,
  attributes: {
    antialias: true,
  },
};

// Optionally preload before you load the sketch
window.preload = () => {
  // Preload sounds/images/etc...
};

canvasSketch(() => {
  // Inside this is a bit like p5.js 'setup' function
  // ...

  // a random number between 300 and 700
  const k = random(300, 700);

  // another random number between 1.9 and 2.1
  const j = random(1.9, 2.1);

  const r = random(25, 55000);
  const c1 = random(15, 1000);
  const c2 = random(1, 250);
  const g = random(1, 500);

  const o1 = random(0.01, 1.1);
  const o2 = random(0.01, 1.1);

  const strokeWidth = random(0.5, 2);

  // Attach events to window to receive them
  window.mouseClicked = () => {
    console.log("Mouse clicked");
  };

  // Return a renderer to 'draw' the p5.js content
  return ({ width, height }) => {
    // Draw with p5.js things
    clear();

    // draw a big ol black rectangle
    background(0);
    // fill white
    // fill(255);
    // fill black
    // fill(0);
    noFill();

    for (let i = 0; i < c1; i++) {
      const t = i / c1;
      const x = width * t + k + g * noise(t * o1 * j);

      const y = height * o1 + k + g * noise(t * o2 * j);
      const radius = r * noise(t * j) + random(0, c2);
      ellipse(x, y, radius);
      // Set stroke color
      // Set stroke weight
      strokeWeight(strokeWidth);
      stroke(255);
    }
  };
}, settings);