stop and go

examples/zickzack/index.html

@@ -9,52 +9,44 @@
         box-sizing: border-box;
         margin: 0;
       }
+      html,
       body {
+        width: 100%;
+        height: 100%;
+        overflow: hidden;
         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;
+        position: absolute;
+        top: 0.6rem;
+        right: 0.75rem;
+        z-index: 20;
+        font-size: 0.95rem;
         font-weight: 500;
-        margin-bottom: 0.75rem;
+        letter-spacing: 0.02em;
         opacity: 0.85;
+        pointer-events: none;
+        text-align: right;
       }
-      main {
-        border-radius: 8px;
-        overflow: hidden;
-        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
+      #sketch-host {
+        position: absolute;
+        inset: 0;
+        z-index: 0;
       }
-      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;
+      #sketch-host canvas {
+        display: block;
+        width: 100% !important;
+        height: 100% !important;
       }
     </style>
     <script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
-    <script src="../../lib/WallPlotter.js?v=bounds-px"></script>
+    <script src="../../lib/WallPlotter.js?v=2.0.2"></script>
     <script src="sketch.js"></script>
   </head>
   <body>
-    <h1>Wall Plotter — zigzag example</h1>
+    <h1>Wall Plotter — zigzag</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>

examples/zickzack/sketch.js

@@ -42,14 +42,15 @@ async function drawArt(testOnly) {
   wp.move(-area, -area);
   //wp.wait(1000 * 10);
 
-  let step = area / 2;
+  let step = area / 6;
 
   for (let y = -area; y <= area; y+=step){
     for (let x = -area; x <= area; x+=step){
-        wp.move(x+step, y);
-        wp.draw(x, y+step);
-      }
+      //if(random(1) < 0.8){
+        wp.draw(x, y);
+        wp.draw(x+(random(1)<0.9), y+random(step*1.5));
+      //}
+    }
   }
-
   await wp.runPath(testOnly);
 }