draw.js

@@ -9,46 +9,34 @@ class Drawing {
     this.stopButton.onclick = () => this.stop();
     this.stopButton.innerHTML = "Stop";
     this.canvas = document.createElement('canvas');
+    this.canvas.width = 200;
+    this.canvas.height = 200;
     buttonsDiv.appendChild(this.startButton);
     buttonsDiv.appendChild(this.stopButton);
     div.appendChild(buttonsDiv);
     div.appendChild(this.canvas);
     document.body.appendChild(div);
     this.ctx = this.canvas.getContext('2d');
+    this.offset = {x: 0, y: 0};
     this.sequence = [];
     this.t = 0;
     this.rt = 0;
     this.dt = 0;
     this.points = {};
     this.stopped = true;
-    this.frame = [[-50, -50], [150, 150]];
-    this.scale = 1.0;
-    this.canvas.width = (this.frame[1][0] - this.frame[0][0]) * this.scale;
-    this.canvas.height = (this.frame[1][1] - this.frame[0][1]) * this.scale;
-    this.speed = 1.0;
   }
 
   pixel([x, y]) {
     return [
-      (x - this.frame[0][0]) * this.scale, 
-      this.canvas.height - (y - this.frame[0][1]) * this.scale
+      this.offset.x + x, 
+      this.canvas.height - this.offset.y - y
     ];
   }
-  
-  setSpeed(speed) {
-    this.speed = speed;
-  }
 
-  setFrame([x1, y1], [x2, y2]) {
-    this.frame = [[x1, y1], [x2, y2]];
-    this.canvas.width = (this.frame[1][0] - this.frame[0][0]) * this.scale;
-    this.canvas.height = (this.frame[1][1] - this.frame[0][1]) * this.scale;
-  }
-
-  setScale(zoom) {
-    this.scale = zoom;
-    this.canvas.width = (this.frame[1][0] - this.frame[0][0]) * this.scale;
-    this.canvas.height = (this.frame[1][1] - this.frame[0][1]) * this.scale;
+  setOffset([x, y]) {
+    this.sequence.push(() => {
+      this.offset = {x, y};
+    });
   }
 
   setStroke(style, width) {
@@ -84,10 +72,8 @@ class Drawing {
     });
   }
   
-  oscillatingValue(x1, x2, period, initialPhase = 0) {
-    const center = (x1 + x2) / 2;
-    const amplitude = (x2 - x1) / 2;
-    return center + amplitude * Math.sin(2*Math.PI*this.t/period + initialPhase);
+  oscillatingValue(x1, x2, period) {
+    return x1 + (x2 - x1) * Math.sin(2*Math.PI*this.t/period);
   }
 
   oscillatingPoint([x1, y1], [x2, y2], period) {
@@ -96,55 +82,19 @@ class Drawing {
     return [x, y];
   }
 
-  object(p, opts, fn) {
-    let history = [];
-    const maxAge = opts?.trace?.age ?? 0;
-    const dashLength = 5;
-    let distance = 0;
+  square(p) {
     this.sequence.push(() => {
       const [x, y] = this.getPoint(p);
-      let ds = 0;
-      if (history.length) {
-        const dx = x - history[history.length - 1].p[0];
-        const dy = y - history[history.length - 1].p[1];
-        ds = Math.sqrt(dx**2 + dy**2);
-      }
-      distance += ds;
-      history.push({t: this.t, p: [x, y], distance});
-      const oldest = history.findIndex(({t}) => this.t - t <= maxAge);
-      if (oldest >= 0) {
-        history = history.slice(oldest);
-      }
-      this.ctx.strokeStyle = 'black';
-      this.ctx.lineWidth = 1;
-      this.ctx.beginPath();
-      this.ctx.moveTo(...this.pixel(history[0].p));
-      for (let i = 1; i < history.length; i++) {
-        if (Math.floor(history[i].distance / dashLength) % 2) {
-          this.ctx.moveTo(...this.pixel(history[i].p));
-        } else {
-          this.ctx.lineTo(...this.pixel(history[i].p));
-        }
-      }
-      this.ctx.stroke();
-      fn(x, y);
+      this.ctx.fillRect(...this.pixel([x - 5, y - 5]), 10, 10);
     })
   }
 
-  square(p, opts) {
-    const size = opts?.size ?? 10;
-    this.object(p, opts, (x, y) => {
-      this.ctx.fillRect(...this.pixel([x - size / 2, y + size / 2]), size * this.scale, size * this.scale);
-    });
-  }
-
-  circle(p, opts) {
-    const radius = opts?.radius ?? 5;
-    this.object(p, opts, (x, y) => {
+  circle(p) {
+    this.sequence.push(() => {
       this.ctx.beginPath();
-      this.ctx.ellipse(...this.pixel([x, y]), radius * this.scale, radius * this.scale, 0, 0, 2*Math.PI);
+      this.ctx.ellipse(...this.pixel(this.getPoint(p)), 5, 5, 0, 0, 2*Math.PI);
       this.ctx.fill();
-    });
+    })
   }
 
   definePoint(name, fn) {
@@ -182,7 +132,7 @@ class Drawing {
           this.dt = 0;
           this.elideInterval = false;
         } else {
-          this.dt = (rt - this.rt + elapsed) * this.speed;
+          this.dt = rt - this.rt + elapsed;
         }
         this.t += this.dt;
         this.rt = rt;

test.html

@@ -10,17 +10,19 @@
 <body>
   <script>
     const d = new Drawing();
+    console.log('drawing', d);
+    d.setOffset([50, 50]);
     d.setStroke('black', 4);
     d.polyline([0, 100], [0, 0], [100, 0]);
-    d.definePoint('p1', () => d.oscillatingPoint([25, 50], [100, 100], 5000));
+    d.definePoint('p1', () => d.oscillatingPoint([75, 125], [125, 125], 5000));
     d.setStroke('red', 2);
     d.line([0, 0], 'p1');
+    d.setFill('blue');
     d.definePoint('p2', () => {
       const [x, y] = d.getPoint('p1');
-      return [x, y - d.oscillatingValue(10, 40, 5000 / 3, Math.PI / 2)];
+      return [x, y - 25];
     });
-    d.setFill('blue');
-    d.square('p2', {trace: {age: 5000}});
+    d.square('p2');
     d.setFill('cyan');
     d.circle('p1');
     d.start();