Add WallPlotter p5 library with zigzag example.

Standalone package for Marlin polargraph control over Web Serial, including API docs and a runnable zigzag sketch. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-08-14 18:36:23 +02:00
commit e293b2f434
6 changed files with 1488 additions and 0 deletions
@@ -0,0 +1,60 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Wall Plotter — zigzag</title>
+    <style>
+      * {
+        box-sizing: border-box;
+        margin: 0;
+      }
+      body {
+        background: #1c1c20;
+        color: #ddd;
+        font-family: system-ui, sans-serif;
+        min-height: 100vh;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        padding: 1rem;
+      }
+      h1 {
+        font-size: 1.1rem;
+        font-weight: 500;
+        margin-bottom: 0.75rem;
+        opacity: 0.85;
+      }
+      main {
+        border-radius: 8px;
+        overflow: hidden;
+        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+      }
+      p.note {
+        max-width: 800px;
+        margin-top: 1rem;
+        font-size: 0.85rem;
+        line-height: 1.5;
+        opacity: 0.7;
+      }
+      code {
+        background: #2a2a30;
+        padding: 0.1em 0.35em;
+        border-radius: 4px;
+      }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
+    <script src="../../lib/WallPlotter.js"></script>
+    <script src="sketch.js"></script>
+  </head>
+  <body>
+    <h1>Wall Plotter — zigzag example</h1>
+    <main id="sketch-host"></main>
+    <p class="note">
+      Serve from the <code>p5-wallplotter</code> folder:
+      <code>python -m http.server 8080</code>
+      then open <code>http://localhost:8080/examples/zickzack/</code>.
+      Chrome or Edge. Press <code>C</code> to connect, <code>H</code> to set home.
+    </p>
+  </body>
+</html>
@@ -0,0 +1,52 @@
+let wp;
+
+let area = 400;
+
+function setup() {
+  const canvas = createCanvas(windowWidth, windowHeight);
+  canvas.parent('sketch-host');
+
+  wp = new WallPlotter();
+  wp.setSpeed(10000, 10000);
+  wp.setTimingMultiplier(1); // tune if machine is slower than speed estimate, the higher the slower
+  wp.enableKeyInputs();
+  wp.enablePlotButtons();
+}
+
+function draw() {
+  background(28, 28, 32);
+  wp.showInfos();
+}
+
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
+
+async function plot() {
+  await drawArt(false);
+}
+
+async function test() {
+  await drawArt(true);
+}
+
+async function drawArt(testOnly) {
+  wp.startPath();
+
+
+  wp.move(-area, -area);
+  wp.wait(1000 * 10);
+
+  let step = area / 20;
+
+  for (let y = -area; y < area; y+=step){
+    for (let x = -area; x < area; x+=step){
+      if(random(1) < 0.8){
+        wp.move(x, y);
+        wp.draw(x, y+step);
+      }
+    }
+  }
+
+  await wp.runPath(testOnly);
+}