Merge pull request #75 from panglesd/master

Added timing information in recorded stroke

README.md

@@ -185,7 +185,7 @@ sketchpad.addEventListener('strokerecorded', ({ stroke }) =>
 );
 /*
 {
-  points: Array<Point>,
+  points: Array<{{x,y}, time}>,
   color,
   weight,
   smoothing,
@@ -227,7 +227,7 @@ atrament.beginStroke(firstPoint.x, firstPoint.y);
 
 let prevPoint = firstPoint;
 while (points.length > 0) {
-  const point = points.shift();
+  const point = points.shift().point;
 
   // the `draw` method accepts the current real coordinates
   // (i. e. actual cursor position), and the previous processed (filtered)

demo/demo.js

@@ -44,53 +44,65 @@ atrament.addEventListener('fillend', () => {
 atrament.addEventListener('strokestart', () => log('event: strokestart'));
 atrament.addEventListener('strokeend', () => log('event: strokeend'));
 
-atrament.recordStrokes = true;
 atrament.addEventListener('strokerecorded', ({ stroke }) => {
   log(`event: strokerecorded - ${stroke.points.length} points`);
 });
 
-// this object was obtained from 'strokerecorded'
-const testStroke = { "points": [{ "x": 419, "y": 161 }, { "x": 410, "y": 177 }, { "x": 390, "y": 240 }, { "x": 386, "y": 277 }, { "x": 386, "y": 318 }, { "x": 386, "y": 350 }, { "x": 386, "y": 365 }, { "x": 388, "y": 378 }, { "x": 392, "y": 384 }, { "x": 426, "y": 404 }, { "x": 456, "y": 411 }, { "x": 489, "y": 411 }, { "x": 539, "y": 411 }, { "x": 566, "y": 406 }, { "x": 586, "y": 390 }, { "x": 603, "y": 372 }, { "x": 614, "y": 355 }, { "x": 623, "y": 329 }, { "x": 628, "y": 310 }, { "x": 630, "y": 293 }, { "x": 630, "y": 276 }, { "x": 630, "y": 257 }, { "x": 630, "y": 250 }, { "x": 630, "y": 244 }, { "x": 630, "y": 240 }, { "x": 629, "y": 239 }, { "x": 628, "y": 238 }, { "x": 627, "y": 238 }, { "x": 627, "y": 238 }, { "x": 627, "y": 238 }], "weight": 2, "smoothing": 0.85, "color": "#000000", "adaptiveStroke": true, "mode": "draw" };
-
-const simButton = document.getElementById('simulate');
-
 // utility to add delay to drawing steps
 const sleep = async time => new Promise((r) => setTimeout(r, time));
 
-simButton.addEventListener('click', async e => {
-  e.preventDefault();
+let waitUntil = function (reference, time) {
+    let time_elapsed = performance.now()-reference;
+    let time_to_wait = time - time_elapsed;
+    return new Promise(resolve => setTimeout(resolve, time_to_wait));
+};
+
+function recordAStroke() {
+    atrament.recordStrokes = true;
+    document.querySelector("#recordButton").value = "Recording...";
+}
+
+var recordedStroke;
+atrament.addEventListener('strokerecorded', (stroke) => {
+    recordedStroke = stroke.stroke;
+    atrament.recordStrokes = false;
+    document.querySelector("#recordButton").value = "Record a stroke";
+    document.querySelector("#playButton").style.display = "inline";
+});
 
+async function playRecorded() {
+  // offset the drawing to avoid drawing at the exact same place
+  let offset_x = Math.floor(Math.random()*100)-50;
+  let offset_y = Math.floor(Math.random()*100)-50;
+
   // set drawing options
-  atrament.weight = testStroke.weight;
-  atrament.mode = testStroke.mode;
-  atrament.smoothing = testStroke.smoothing;
-  atrament.color = testStroke.color;
-  atrament.adaptiveStroke = testStroke.adaptiveStroke;
+  atrament.weight = recordedStroke.weight;
+  atrament.mode = recordedStroke.mode;
+  atrament.smoothing = recordedStroke.smoothing;
+  atrament.color = recordedStroke.color;
+  atrament.adaptiveStroke = recordedStroke.adaptiveStroke;
 
-  // don't want to modify original data
-  const points = testStroke.points.slice();
+  // add a time reference
+  let reference = performance.now();
 
-  const firstPoint = points.shift();
-  atrament.beginStroke(firstPoint.x, firstPoint.y);
+  // wait for the first point
+  await waitUntil(reference, recordedStroke.points[0].time);
 
-  let prevPoint = firstPoint;
-  while (points.length > 0) {
-    const point = points.shift();
+  let prev_point = recordedStroke.points[0].point;
+  atrament.beginStroke(prev_point.x, prev_point.y);
+
+  for (const point of recordedStroke.points.slice(1)) {
+    // waiting for time from reference
+    await waitUntil(reference, point.time);
 
     // the `draw` method accepts the current real coordinates
     // (i. e. actual cursor position), and the previous processed (filtered)
     // position. It returns an object with the current processed position.
-    const { x, y } = atrament.draw(point.x, point.y, prevPoint.x, prevPoint.y);
-
-    // the processed position is the one where the line is actually drawn to
-    // so we have to store it and pass it to `draw` in the next step
-    prevPoint = { x, y };
-
-    await sleep(50);
+    prev_point = atrament.draw(point.point.x + offset_x, point.point.y + offset_y, prev_point.x, prev_point.y);
   }
 
-  atrament.endStroke(prevPoint.x, prevPoint.y);
-});
+  atrament.endStroke(prev_point.x, prev_point.y);
+}
 
 // Simple example, see optional options for more configuration.
 const pickr = Pickr.create({

demo/index.html

@@ -71,8 +71,9 @@ <h1>atrament.js</h1>
       <button id="clear" onclick="event.preventDefault(); atrament.clear();">
         clear
       </button>
-      <button id="simulate">Simulate Drawing</button>
       <br />
+      <label>Record</label><br />
+      <input id="recordButton" type="button" value="Record a stroke" onclick="recordAStroke()"/><input id="playButton" type="button" value="Draw the recorded stroke" style="display:none" onclick="play()"/><br />
       <label>Thickness</label><br />
       <input
         type="range"