better timer and timed dot example

Author: Mike Barkmin

README.md

@@ -202,6 +202,27 @@ You can access the timer objects throught `stage.getTimer()` or
 | `boolean everyMillis(int)` | `stage.everyMillis(2000)` | Returns true **roughly** every 2000 Milliseconds |
 | `void reset()` | `dog.reset()` | Resets a timer back to 0 |
 
+If you want that a sprite should do something every 2000ms and every 1000ms,
+you need two timers. To add a timer you simply call
+`sprite.addTimer("timerForMe")`. The timer is than accessable with `sprite.getTimer("timerForMe")`.
+
+Unfortunatly the timer are not on point. Sometimes they are lacking behind.
+This happens when the frame rate drops.  This can lead to a unwanted rendering
+order. For example the pattern which was tried to achive in the example
+[TimedDot](#TimeDot) should look like this:
+
+Lila, Lila, Green, Lila, Lila, Green, Clear.
+
+Especially at the beginning of the sketch the frame rate increases slowly to
+the desired one. Therefore there are some missing frames in the beginning and
+the pattern is messed up. To achive a better result you should use a multiple
+of the frame rate for millis. (If not set the standard frame rate is 60). You
+can see the difference below.
+
+
+| Millis multipe of 100 | Millis multiple of 60 |
+| :-: | :-: |
+| ![timed dot normal](web/assets/timed_dot_100.gif) | ![timed dot 60](web/assets/timed_dot_60.gif) |
 
 ### ScratchSound (internally)
 
@@ -273,6 +294,15 @@ An example which makes use of timers.
 
 ![random dot](web/assets/random_dot.gif)
 
+
+### TimedDot
+
+Source Code: https://github.com/mikebarkmin/processing-library-scratch/tree/master/examples/RandomDot
+
+An example which makes use of timers.
+
+![timed dot](web/assets/timed_dot_60.gif)
+
 ## Missing
 
 * blocks which are not listed above are currently missing

examples/TimedDot/TimedDot.pde

@@ -0,0 +1,46 @@
+import eu.barkmin.processing.scratch.*;
+
+ScratchStage stage;
+DotSprite dot;
+
+void setup() {
+  size(400, 200);
+  frameRate(60);
+  ScratchStage.init(this);
+  stage = ScratchStage.getInstance();
+  dot = new DotSprite();
+}
+
+void draw() {
+  dot.draw();
+  if (stage.getTimer().everyMillis(2400)) {
+    stage.eraseAll();
+  }
+}
+
+class DotSprite extends ScratchSprite {  
+  DotSprite() {
+    super();
+    this.addTimer("timer2");
+    this.addTimer("timer1");
+    this.getPen().setSize(20);
+    this.setOnEdgeBounce(true);
+    this.setRotation(65);
+  }
+  
+  void draw() {
+    super.draw();
+    if(this.getTimer("timer2").everyMillis(600)) {
+      this.getPen().down();
+      this.getPen().setColor(200);
+      this.move(20);
+      this.getPen().up();
+    }
+    if(this.getTimer("timer1").everyMillis(1200)) {
+      this.getPen().down();
+      this.getPen().setColor(100);
+      this.move(20);
+      this.getPen().up();
+    }
+  }
+}

src/eu/barkmin/processing/scratch/ScratchPen.java

@@ -3,13 +3,14 @@
 import processing.core.PGraphics;
 
 import java.util.ArrayList;
+import java.util.Stack;
 
 public class ScratchPen {
 
     private ScratchColor color = new ScratchColor(120);
     private float opacity = 255;
     private float size = 1;
-    private ArrayList<ArrayList<Point>> pointsBuffer = new ArrayList<>();
+    private Stack<ArrayList<Point>> pointsBuffer = new Stack<>();
     private boolean down = false;
 
     public ScratchPen() {
@@ -23,7 +24,7 @@ public ScratchPen(ScratchPen p) {
         this.color = new ScratchColor(p.color);
         this.size = p.size;
         this.opacity = p.opacity;
-        this.pointsBuffer = new ArrayList<>();
+        this.pointsBuffer = new Stack<>();
         this.pointsBuffer.add(new ArrayList<>());
         this.down = p.down;
     }
@@ -134,7 +135,7 @@ public void draw() {
         int pointsBufferSize = this.pointsBuffer.size();
         if (pointsBufferSize <= 0) return;
 
-        ArrayList<Point> points = this.pointsBuffer.get(pointsBufferSize - 1);
+        ArrayList<Point> points = this.pointsBuffer.peek();
         int pointsSize = points.size();
 
         buffer.beginDraw();
@@ -144,11 +145,19 @@ public void draw() {
             buffer.stroke(point.color.getRed(), point.color.getGreen(), point.color.getBlue(), point.opacity);
             buffer.strokeWeight(point.size);
             buffer.line(previousPoint.x, previousPoint.y, point.x, point.y);
+            // remove rendered points
+            if (this.down == false) {
+                this.pointsBuffer.pop();
+            }
         } else if (pointsSize == 1) {
             Point point = points.get(pointsSize - 1);
             buffer.stroke(point.color.getRed(), point.color.getGreen(), point.color.getBlue(), point.opacity);
             buffer.strokeWeight(point.size);
             buffer.point(point.x, point.y);
+            // remove rendered points
+            if (this.down == false) {
+                this.pointsBuffer.pop();
+            }
         }
         buffer.endDraw();
     }

src/eu/barkmin/processing/scratch/ScratchSprite.java

@@ -356,11 +356,11 @@ public void move(float steps) {
         if(this.costumes.size() > 0) {
             currentCostume = this.costumes.get(this.currentCostume);
         }
-        float costumeWidht = currentCostume != null ? currentCostume.getImage().width : this.pen.getSize();
+        float costumeWidth = currentCostume != null ? currentCostume.getImage().width : this.pen.getSize();
         float costumeHeight = currentCostume != null ? currentCostume.getImage().height : this.pen.getSize();
 
         if (this.onEdgeBounce) {
-            float spriteWidth = this.show ? costumeWidht : this.pen.getSize();
+            float spriteWidth = this.show ? costumeWidth : this.pen.getSize();
             if (newX > parent.width - spriteWidth / 2 || newX < spriteWidth / 2) {
                 this.rotation = this.calculateAngleOfReflection(this.rotation, false);
             }

src/eu/barkmin/processing/scratch/ScratchStage.java

@@ -103,6 +103,7 @@ public int getCurrentBackdropIndex() {
      */
     public void eraseAll() {
         this.penBuffer = parent.createGraphics(parent.width, parent.height);
+        this.pre();
     }
 
 

src/eu/barkmin/processing/scratch/Timer.java

@@ -1,28 +1,33 @@
 package eu.barkmin.processing.scratch;
 
 public class Timer {
-    private int start;
-    private int lastTime;
+    private int nextFrame;
 
     public Timer () {
-       this.start = ScratchStage.parent.millis();
-       this.lastTime = this.start;
+        this.nextFrame = -1;
     }
 
     public int getMillis() {
-       return ScratchStage.parent.millis() - start;
+       return Math.round(ScratchStage.parent.frameCount / ScratchStage.parent.frameRate * 1000);
     }
 
     public boolean everyMillis(int millis) {
-        if (ScratchStage.parent.millis() - lastTime > millis) {
-            lastTime = ScratchStage.parent.millis();
+        int frameSkip = this.getFrameFromMillis(millis);
+        if (nextFrame < 0) {
+            nextFrame = ScratchStage.parent.frameCount + frameSkip;
+        }
+        if (ScratchStage.parent.frameCount >= nextFrame) {
+            nextFrame = ScratchStage.parent.frameCount + frameSkip;
             return true;
         }
         return false;
     }
 
+    private int getFrameFromMillis(int millis) {
+        return (int) Math.round(millis * ScratchStage.parent.frameRate / 1000.0);
+    }
+
     public void reset() {
-        this.start = ScratchStage.parent.millis();
-        this.lastTime = this.start;
+        this.nextFrame = -1;
     }
 }