p5-global.js

const canvasSketch = require("canvas-sketch");
const triangulate = require("delaunay-triangulate");
const p5 = require("p5");

new p5();

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

const sketch = ({ width, height }) => {
  const points = new Array(1000).fill(0).map(() => {
    return [Math.random() * width, Math.random() * height];
  });

  points.push([0, 0]);
  points.push([width, 0]);
  points.push([width, height]);
  points.push([0, height]);

  const cells = triangulate(points);

  return ({ context, width, height }) => {
    context.fillStyle = "white";
    context.fillRect(0, 0, width, height);

    for (let i = 0; i < cells.length; i++) {
      const cell = cells[i];
      const index0 = cell[0];
      const index1 = cell[1];
      const index2 = cell[2];

      const point0 = points[index0];
      const point1 = points[index1];
      const point2 = points[index2];

      noFill();
      stroke("black");
      strokeWeight(10);
      strokeJoin(ROUND);
      triangle(
        point0[0],
        point0[1],
        point1[0],
        point1[1],
        point2[0],
        point2[1]
      );
    }
  };
};

canvasSketch(sketch, settings);

p5-instance.js

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

const p5 = require("p5");

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

const sketch = ({ p5, width, height }) => {
  const points = new Array(1000).fill(0).map(() => {
    return [Math.random() * width, Math.random() * height];
  });

  points.push([0, 0]);
  points.push([width, 0]);
  points.push([width, height]);
  points.push([0, height]);

  const cells = triangulate(points);

  return ({ context, width, height }) => {
    context.fillStyle = "white";
    context.fillRect(0, 0, width, height);

    for (let i = 0; i < cells.length; i++) {
      const cell = cells[i];
      const index0 = cell[0];
      const index1 = cell[1];
      const index2 = cell[2];

      const point0 = points[index0];
      const point1 = points[index1];
      const point2 = points[index2];

      p5.noFill();
      p5.stroke("black");
      p5.strokeWeight(10);
      p5.strokeJoin(p5.ROUND);
      p5.triangle(
        point0[0],
        point0[1],
        point1[0],
        point1[1],
        point2[0],
        point2[1]
      );
    }
  };
};

canvasSketch(sketch, settings);

p5-no-canvas-sketch.js

const p5 = require("p5");
new p5();

// Create a new canvas to the browser size
window.setup = setup;
function setup() {
  createCanvas(windowWidth, windowHeight);
  console.log("hello");

  // Disable animation loop since its a static artwork
  noLoop();
}

// On window resize, update the canvas size
window.windowResized = windowResized;
function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}

// Render loop that draws shapes with p5
window.draw = draw;
function draw() {
  // Set the default blend mode
  blendMode(BLEND);

  // Black background
  background(0);

  // Set foreground as white
  fill(255);

  // Set x-or / difference blend mode
  blendMode(DIFFERENCE);

  // Disable stroke
  noStroke();

  // Center of screen
  const x = width / 2;
  const y = height / 2;

  // Fraction of screen dim
  const dim = Math.min(width, height);
  const size = dim * 0.5;

  // Make a rectangle centred on the screen
  rectMode(CENTER);
  rect(x, y, size, size);

  // Create a circle slightly offset down and right
  push();
  translate(size / 4, size / 4);
  ellipse(x, y, size, size);
  pop();

  // Create a triangle slightly offset up and left
  push();
  translate(-size / 4, -size / 4);
  triangle(
    x,
    y - size / 2,
    x + size / 2,
    y + size / 2,
    x - size / 2,
    y + size / 2
  );
  pop();
}

pure-canvas-2d.js

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

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

const sketch = ({ width, height }) => {
  const points = new Array(1000).fill(0).map(() => {
    return [Math.random() * width, Math.random() * height];
  });

  points.push([0, 0]);
  points.push([width, 0]);
  points.push([width, height]);
  points.push([0, height]);

  const cells = triangulate(points);

  return ({ context, width, height }) => {
    context.fillStyle = "white";
    context.fillRect(0, 0, width, height);

    for (let i = 0; i < cells.length; i++) {
      const cell = cells[i];
      const index0 = cell[0];
      const index1 = cell[1];
      const index2 = cell[2];

      const point0 = points[index0];
      const point1 = points[index1];
      const point2 = points[index2];

      context.beginPath();
      context.lineTo(point0[0], point0[1]);
      context.lineTo(point1[0], point1[1]);
      context.lineTo(point2[0], point2[1]);
      context.closePath();
      context.lineWidth = 10;
      context.stroke();
    }
  };
};

canvasSketch(sketch, settings);