Connect a sketch to the engine.

1. Load p5.js

<script src="https://cdn.jsdelivr.net/npm/p5@2.2.2/lib/p5.js"></script>
<script type="module" src="sketch.js"></script>

2. Install the adapter

import { PlotterEngine } from "https://seb-prjcts-be.github.io/vanilla.penplotter/vanilla.penplotter.js";
import { installP5Penplotter } from "https://seb-prjcts-be.github.io/p5.penplotter/p5.penplotter.js";

installP5Penplotter(p5, PlotterEngine);

The core URL becomes live after vanilla.penplotter is published to GitHub Pages.

3. Global mode

let plot;

function setup() {
  createCanvas(800, 800);
  plot = createPlotterEngine();
  plot.line(40, 40, 760, 760);
  drawPlotPlan(plot.plan());
}

4. Instance mode

new p5(function sketch(p) {
  p.setup = function setup() {
    p.createCanvas(800, 800);
    const plot = p.createPlotterEngine();
    plot.circle(400, 400, 180);
    p.drawPlotPlan(plot.plan());
  };
});

5. p5.waves

Load p5.waves after p5.js. Sample it inside a regular loop and pass plain point objects to the plotter.

const points = [];
for (let x = 40; x <= 760; x += 4) {
  points.push({
    x,
    y: 400 + Waves.wave(x, {
      wave: "triangle sine",
      t: 0,
      amplitude: 80
    })
  });
}
plot.polyline(points);

6. Straight to the pen

Hand the core's driver to the adapter. Every plot.… call then draws on the canvas and is remembered for the plotter; plot.go() sends it — no SVG in between. Use Chrome or Edge, call go() from a key or mouse handler, and park the carriage in the home corner first.

import * as Ebb from "../vanilla.penplotter/src/driver/ebb.js";
installP5Penplotter(p5, PlotterEngine, { driver: Ebb });

let plot;

function setup() {
  createCanvas(400, 250);
  plot = createPlot({ x: 80, y: 150, width: 80 }); // mm on the bed
  noLoop();
}

function draw() {
  background(255);   // screen only
  plot.clear();
  plot.rect(10, 10, 380, 230);
}

function keyPressed() {
  if (key === "p") plot.go();
  if (key === "s") plot.stop();
}

Tested on one machine so far: an iDraw HSE / A2 with EBB firmware 3.0.2.

7. Continue in vanilla.penplotter

The returned object is the complete core engine. Use its layers, tools, hatch fills, optimizer, planner, statistics and exports without adapter-specific alternatives.