~jagtalon/long-exposure-art

42d4c624258fe20780dcd51197da7f0746219eca — Jag Talon 1 year, 10 months ago
```Move completely to TinyCanvas
```
```4 files changed, 24 insertions(+), 10 deletions(-)

M long-exposure-art.coffee
M long-exposure-art.js
M tiny-canvas.coffee
M tiny-canvas.js
```
`M long-exposure-art.coffee => long-exposure-art.coffee +5 -6`
```@@ 18,19 18,18 @@ sketch = ->
# 2. Create an arc with an angle theta.
# 3. Rotate the arc to a random angle (Math.random() * 2π)
drawStarTrails = (x, y, theta) ->
-			draw.circle(0, 0, Math.hypot(x, y), 0, theta)
-			draw.stroke("#DEE2E6", Math.random() * 15, "round")
-			draw.rotate(Math.random() * 2 * Math.PI)
+			draw.circle 0, 0, Math.hypot(x, y), 0, theta
+			draw.stroke "#DEE2E6", Math.random() * 15, "round"
+			draw.rotate Math.random() * 2 * Math.PI

# Drawing
# -------

# Set the night sky.
-		context.fillStyle = "#212529"
-		context.fillRect 0, 0, width, height
+		draw.rectFill 0, 0, width, height, "#212529"

# Translate to the center of the canvas.
-		context.translate width * .6, height * 0.8
+		draw.translate width * .6, height * 0.8

# Create stars
# We generate random x-y points multiple times and assign them

```
`M long-exposure-art.js => long-exposure-art.js +2 -3`
```@@ 31,10 31,9 @@
// -------

// Set the night sky.
-      context.fillStyle = "#212529";
-      context.fillRect(0, 0, width, height);
+      draw.rectFill(0, 0, width, height, "#212529");
// Translate to the center of the canvas.
-      context.translate(width * .6, height * 0.8);
+      draw.translate(width * .6, height * 0.8);
// Create stars
// We generate random x-y points multiple times and assign them
// to an array so that we can use them later.

```
`M tiny-canvas.coffee => tiny-canvas.coffee +8 -1`
```@@ 12,4 12,11 @@ module.exports = class TinyCanvas
@context.stroke()

rotate: (angle) ->
-		@context.rotate(angle)>
\ No newline at end of file
+		@context.rotate(angle)
+
+	rectFill: (x, y, width, height, color = "#000000") ->
+		@context.fillStyle = color
+		@context.fillRect 0, 0, width, height
+
+	translate: (x, y) ->
+		@context.translate x, y

```
`M tiny-canvas.js => tiny-canvas.js +9 -0`
```@@ 23,6 23,15 @@
return this.context.rotate(angle);
}

+    rectFill(x, y, width, height, color = "#000000") {
+      this.context.fillStyle = color;
+      return this.context.fillRect(0, 0, width, height);
+    }
+
+    translate(x, y) {
+      return this.context.translate(x, y);
+    }
+
};

}).call(this);

```