## ~jagtalon/long-exposure-art

358427235cb8694f4ba2c8fe22c49d39a04f9059 — Jag Talon 1 year, 10 months ago
```Create TinyCanvas library

I'd like to make the code more readable and succinct, so I created a class called TinyCanvas to handle the dirty work for me.
```
```4 files changed, 66 insertions(+), 31 deletions(-)

M long-exposure-art.coffee
M long-exposure-art.js
A tiny-canvas.coffee
A tiny-canvas.js
```
`M long-exposure-art.coffee => long-exposure-art.coffee +10 -15`
```@@ 1,4 1,5 @@
canvasSketch = require "canvas-sketch"
+TinyCanvas = require "./tiny-canvas.js"

settings =
dimensions: [3600, 5400]

@@ 7,8 8,9 @@ settings =
sketch = ->

return ({context, width, height}) ->
-
-		# Functions
+		draw = new TinyCanvas(context)
+
+		# Helper Functions
# ---------

# drawStarTrails

@@ 16,16 18,9 @@ sketch = ->
# 2. Create an arc with an angle theta.
# 3. Rotate the arc to a random angle (Math.random() * 2π)
drawStarTrails = (x, y, theta) ->
-			context.strokeStyle = "#dee2e6"
-			context.lineCap = "round"
-			context.lineWidth = Math.random() * 15
-
-			# Rotate while drawing some partial circles
-			context.rotate(Math.random() * 2 * Math.PI)
-			context.beginPath()
-			context.arc 0, 0, Math.hypot(x, y), 0, theta
-			context.stroke()
-
+			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
# -------

@@ 35,16 30,16 @@ sketch = ->
context.fillRect 0, 0, width, height

# Translate to the center of the canvas.
-		context.translate width/2, height/2
+		context.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.
-		stars = ([Math.random() * (width/2), Math.random() * (height/2)] for n in [1..400])
+		stars = ([Math.random() * width, Math.random() * height] for n in [1..1000])

# Set an angle that will be used everywhere.
# This can be any arbitrary angle.
-		theta = Math.PI/3
+		theta = Math.PI/4

# Draw arcs for each star we generated previously.
drawStarTrails star[0], star[1], theta for star in stars

```
`M long-exposure-art.js => long-exposure-art.js +13 -16`
```@@ 1,9 1,11 @@
// Generated by CoffeeScript 2.5.1
(function() {
-  var canvasSketch, settings, sketch;
+  var TinyCanvas, canvasSketch, settings, sketch;

canvasSketch = require("canvas-sketch");

+  TinyCanvas = require("./tiny-canvas.js");
+
settings = {
dimensions: [3600, 5400],
suffix: "12x18"

@@ 11,9 13,9 @@

sketch = function() {
return function({context, width, height}) {
-      var drawStarTrails, i, len, n, results, star, stars, theta;
-
-      // Functions
+      var draw, drawStarTrails, i, len, n, results, star, stars, theta;
+      draw = new TinyCanvas(context);
+      // Helper Functions
// ---------

// drawStarTrails

@@ 21,14 23,9 @@
// 2. Create an arc with an angle theta.
// 3. Rotate the arc to a random angle (Math.random() * 2π)
drawStarTrails = function(x, y, theta) {
-        context.strokeStyle = "#dee2e6";
-        context.lineCap = "round";
-        context.lineWidth = Math.random() * 15;
-        // Rotate while drawing some partial circles
-        context.rotate(Math.random() * 2 * Math.PI);
-        context.beginPath();
-        context.arc(0, 0, Math.hypot(x, y), 0, theta);
-        return context.stroke();
+        draw.circle(0, 0, Math.hypot(x, y), 0, theta);
+        draw.stroke("#DEE2E6", Math.random() * 15, "round");
+        return draw.rotate(Math.random() * 2 * Math.PI);
};
// Drawing
// -------

@@ 37,22 34,22 @@
context.fillStyle = "#212529";
context.fillRect(0, 0, width, height);
// Translate to the center of the canvas.
-      context.translate(width / 2, height / 2);
+      context.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.
stars = (function() {
var i, results;
results = [];
-        for (n = i = 1; i <= 400; n = ++i) {
-          results.push([Math.random() * (width / 2), Math.random() * (height / 2)]);
+        for (n = i = 1; i <= 1000; n = ++i) {
+          results.push([Math.random() * width, Math.random() * height]);
}
return results;
})();

// Set an angle that will be used everywhere.
// This can be any arbitrary angle.
-      theta = Math.PI / 3;
+      theta = Math.PI / 4;
results = [];
for (i = 0, len = stars.length; i < len; i++) {
star = stars[i];

```
`A tiny-canvas.coffee => tiny-canvas.coffee +15 -0`
```@@ 0,0 1,15 @@
+module.exports = class TinyCanvas
+	constructor: (@context) ->
+
+	circle: (x, y, radius, startAngle = 0, endAngle = Math.PI * 2) ->
+		@context.beginPath()
+		@context.arc x, y, radius, startAngle, endAngle
+
+	stroke: (color = "#000000", lineWidth = 10, lineCap = "butt") ->
+		@context.strokeStyle = color
+		@context.lineWidth = lineWidth
+		@context.lineCap = lineCap
+		@context.stroke()
+
+	rotate: (angle) ->
+		@context.rotate(angle)<
\ No newline at end of file

```
`A tiny-canvas.js => tiny-canvas.js +28 -0`
```@@ 0,0 1,28 @@
+// Generated by CoffeeScript 2.5.1
+(function() {
+  var TinyCanvas;
+
+  module.exports = TinyCanvas = class TinyCanvas {
+    constructor(context) {
+      this.context = context;
+    }
+
+    circle(x, y, radius, startAngle = 0, endAngle = Math.PI * 2) {
+      this.context.beginPath();
+      return this.context.arc(x, y, radius, startAngle, endAngle);
+    }
+
+    stroke(color = "#000000", lineWidth = 10, lineCap = "butt") {
+      this.context.strokeStyle = color;
+      this.context.lineWidth = lineWidth;
+      this.context.lineCap = lineCap;
+      return this.context.stroke();
+    }
+
+    rotate(angle) {
+      return this.context.rotate(angle);
+    }
+
+  };
+
+}).call(this);

```