## ~jagtalon/long-exposure-art

2825bf144d974c1f81977dc2a680aab2a2dc7b0a — Jag Talon 1 year, 10 months ago
```Add a gradient to make the star trails fade out a little.
```
```4 files changed, 197 insertions(+), 12 deletions(-)

M long-exposure-art.coffee
M long-exposure-art.js
M package-lock.json
M package.json
```
`M long-exposure-art.coffee => long-exposure-art.coffee +14 -5`
```@@ 1,4 1,5 @@
canvasSketch = require "canvas-sketch"
+random = require "canvas-sketch-util/random"
TinyCanvas = require "./tiny-canvas.js"

settings =

@@ 17,27 18,35 @@ sketch = ->
# 1. For each radius, create an arc with an angle theta.
# 2. Rotate the arc to a random angle (Math.random() * 2π)
+			color = random.pick(["#fdfffc", "#819EC9", "#ACE4FF"])
+
+
draw.circle 0, 0, radius, 0, theta
-			draw.stroke "#DEE2E6", Math.random() * 15, "round"
+			draw.stroke gradient, random.range(1, 10), "round"
draw.rotate Math.random() * 2 * Math.PI

# Drawing
# -------

# Set the night sky.
-		draw.rect 0, 0, width, height, "fill", "#212529"
+		draw.rect 0, 0, width, height, "fill", "#011627"

# Set the coordinates of the rotation.
-		draw.translate width * .6, height * 0.8
+		draw.translate width * 0.1, height * 0.2

# Set an angle that will be used everywhere.
# This can be any arbitrary angle, but it
# must be the same for all star trails.
-		theta = Math.PI/4
+		theta = Math.PI * .1

# We generate random radii then create star trails for each one.
-		(drawStarTrails Math.random() * height, theta) for n in [1..1000]
+		drawStarTrails(Math.random() * height, theta) for n in [1..15000]

canvasSketch sketch, settings=
\ No newline at end of file

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

canvasSketch = require("canvas-sketch");

+  random = require("canvas-sketch-util/random");
+
TinyCanvas = require("./tiny-canvas.js");

settings = {

@@ 22,24 24,31 @@
// 1. For each radius, create an arc with an angle theta.
// 2. Rotate the arc to a random angle (Math.random() * 2π)
+        color = random.pick(["#fdfffc", "#819EC9", "#ACE4FF"]);
-        draw.stroke("#DEE2E6", Math.random() * 15, "round");
return draw.rotate(Math.random() * 2 * Math.PI);
};
// Drawing
// -------

// Set the night sky.
-      draw.rect(0, 0, width, height, "fill", "#212529");
+      draw.rect(0, 0, width, height, "fill", "#011627");
// Set the coordinates of the rotation.
-      draw.translate(width * .6, height * 0.8);
+      draw.translate(width * 0.1, height * 0.2);

// Set an angle that will be used everywhere.
// This can be any arbitrary angle, but it
// must be the same for all star trails.
-      theta = Math.PI / 4;
+      theta = Math.PI * .1;
results = [];
-      for (n = i = 1; i <= 1000; n = ++i) {
+      for (n = i = 1; i <= 15000; n = ++i) {
// We generate random radii then create star trails for each one.
results.push(drawStarTrails(Math.random() * height, theta));

```
`M package-lock.json => package-lock.json +166 -0`
```@@ 4,6 4,42 @@
"lockfileVersion": 1,
"requires": true,
"dependencies": {
+    "abs-svg-path": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/abs-svg-path/-/abs-svg-path-0.1.1.tgz",
+      "integrity": "sha1-32Acjo0roQ1KdtYl4japo5wnI78="
+    },
+      "version": "1.0.3",
+      "integrity": "sha1-R3V3q+h9coDUbKQWSfbCJkb+gic="
+    },
+    "almost-equal": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/almost-equal/-/almost-equal-1.1.0.tgz",
+      "integrity": "sha1-+FHGMROHV5lCdqou++jfowZszN0="
+    },
+    "an-array": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/an-array/-/an-array-1.0.0.tgz",
+      "integrity": "sha1-wSWlu4JXd4419LT2qpx9D6nkJmU="
+    },
+    "array-almost-equal": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/array-almost-equal/-/array-almost-equal-1.0.0.tgz",
+      "integrity": "sha1-Q8VP9DUELpy/pCEqxJraX8c1n8U=",
+      "requires": {
+        "almost-equal": "0.0.0",
+        "an-array": "^1.0.0"
+      },
+      "dependencies": {
+        "almost-equal": {
+          "version": "0.0.0",
+          "resolved": "https://registry.npmjs.org/almost-equal/-/almost-equal-0.0.0.tgz",
+          "integrity": "sha1-56Wms0V7Z8g+4ARPmo0HY3NV8C0="
+        }
+      }
+    },
"call-bind": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/call-bind/-/call-bind-1.0.2.tgz",

@@ 30,12 66,53 @@
"right-now": "^1.0.0"
}
},
+    "canvas-sketch-util": {
+      "version": "1.10.0",
+      "resolved": "https://registry.npmjs.org/canvas-sketch-util/-/canvas-sketch-util-1.10.0.tgz",
+      "integrity": "sha512-IiJWEQDBinl6KZVLYcdp79ZJXXKsS1HuDUoWtwWh0NJMVUA6jaM0pxcBRYiaujBXjQFPT91pl8L9iFFmma3+zA==",
+      "requires": {
+        "abs-svg-path": "^0.1.1",
+        "almost-equal": "^1.1.0",
+        "array-almost-equal": "^1.0.0",
+        "clone": "^2.1.2",
+        "color-luminance": "^2.1.0",
+        "convert-length": "^1.0.1",
+        "d3-path": "^1.0.8",
+        "defined": "^1.0.0",
+        "float-hsl2rgb": "^1.0.2",
+        "float-rgb2hsl": "^1.0.1",
+        "lineclip": "^1.1.5",
+        "normalize-svg-path": "^1.0.1",
+        "parse-color": "^1.0.0",
+        "parse-svg-path": "^0.1.2",
+        "regl": "^1.3.7",
+        "seed-random": "^2.2.0",
+        "simplex-noise": "^2.4.0",
+        "svg-path-contours": "^2.0.0"
+      }
+    },
+    "clone": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+      "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18="
+    },
"coffeescript": {
"version": "2.5.1",
"resolved": "https://registry.npmjs.org/coffeescript/-/coffeescript-2.5.1.tgz",
"integrity": "sha512-J2jRPX0eeFh5VKyVnoLrfVFgLZtnnmp96WQSLAS8OrLm2wtQLcnikYKe1gViJKDH7vucjuhHvBKKBP3rKcD1tQ==",
"dev": true
},
+    "color-convert": {
+      "version": "0.5.3",
+      "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-0.5.3.tgz",
+      "integrity": "sha1-vbbGnOZg+t/+CwAHzER+G59ygr0="
+    },
+    "color-luminance": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/color-luminance/-/color-luminance-2.1.0.tgz",
+    },
"convert-length": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/convert-length/-/convert-length-1.0.1.tgz",

@@ 44,6 121,11 @@
"defined": "^1.0.0"
}
},
+    "d3-path": {
+      "version": "1.0.9",
+      "resolved": "https://registry.npmjs.org/d3-path/-/d3-path-1.0.9.tgz",
+      "integrity": "sha512-VLaYcn81dtHVTjEHd8B+pbe9yHWpXKZUC87PzoFmsFrJqgFwDe/qxfp5MlfsfM1V5E/iVt0MmEbWQ7FVIXh/bg=="
+    },
"dateformat": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/dateformat/-/dateformat-3.0.3.tgz",

@@ 75,6 157,16 @@
"resolved": "https://registry.npmjs.org/defined/-/defined-1.0.0.tgz",
"integrity": "sha1-yY2bzvdWdBiOEQlpFRGZ45sfppM="
},
+    "float-hsl2rgb": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/float-hsl2rgb/-/float-hsl2rgb-1.0.2.tgz",
+      "integrity": "sha1-7PNQnECsZWfJaiBGIrDExL9DyKE="
+    },
+    "float-rgb2hsl": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/float-rgb2hsl/-/float-rgb2hsl-1.0.1.tgz",
+      "integrity": "sha1-jv6qD8cm5TNjp5vz9jYIIFXBDA4="
+    },
"function-bind": {
"version": "1.1.1",
"resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",

@@ 158,6 250,19 @@
"resolved": "https://registry.npmjs.org/is-window/-/is-window-1.0.2.tgz",
"integrity": "sha1-LIlspT25feRdPDMTOmXYyfVjSA0="
},
+    "lineclip": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/lineclip/-/lineclip-1.1.5.tgz",
+      "integrity": "sha1-K/JgZ9lDVP6r+R5CdoI221YW/RM="
+    },
+    "normalize-svg-path": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-1.1.0.tgz",
+      "integrity": "sha512-r9KHKG2UUeB5LoTouwDzBy2VxXlHsiM6fyLQvnJa0S5hrhzqElH/CH7TUGhT1fVvIYBIKf3OpY4YJ4CK+iaqHg==",
+      "requires": {
+        "svg-arc-to-cubic-bezier": "^3.0.0"
+      }
+    },
"object-assign": {
"version": "4.1.1",
"resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",

@@ 185,6 290,24 @@
"repeat-string": "^1.5.4"
}
},
+    "parse-color": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/parse-color/-/parse-color-1.0.0.tgz",
+      "integrity": "sha1-e3SLlag/A/FqlPU15S1/PZRlhhk=",
+      "requires": {
+        "color-convert": "~0.5.0"
+      }
+    },
+    "parse-svg-path": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/parse-svg-path/-/parse-svg-path-0.1.2.tgz",
+      "integrity": "sha1-en7A0esG+lMlx9PgCbhZoJtdSes="
+    },
+      "version": "2.0.0",
+      "integrity": "sha1-wgmT5PlgAjiSa7UA5SkFMEPvius="
+    },
"regexp.prototype.flags": {
"version": "1.3.1",
"resolved": "https://registry.npmjs.org/regexp.prototype.flags/-/regexp.prototype.flags-1.3.1.tgz",

@@ 194,6 317,11 @@
"define-properties": "^1.1.3"
}
},
+    "regl": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/regl/-/regl-1.7.0.tgz",
+      "integrity": "sha512-bEAtp/qrtKucxXSJkD4ebopFZYP0q1+3Vb2WECWv/T8yQEgKxDxJ7ztO285tAMaYZVR6mM1GgI6CCn8FROtL1w=="
+    },
"repeat-string": {
"version": "1.6.1",
"resolved": "https://registry.npmjs.org/repeat-string/-/repeat-string-1.6.1.tgz",

@@ 203,6 331,44 @@
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/right-now/-/right-now-1.0.0.tgz",
"integrity": "sha1-bolgne69fc2vja7Mmuo5z1haCRg="
+    },
+    "seed-random": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/seed-random/-/seed-random-2.2.0.tgz",
+      "integrity": "sha1-KpsZ4lCoFwmSMaW5mk2vgLf77VQ="
+    },
+    "simplex-noise": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/simplex-noise/-/simplex-noise-2.4.0.tgz",
+      "integrity": "sha512-OjyDWm/QZjVbMrPxDVi9b2as+SeNn9EBXlrWVRlFW+TSyWMSXouDryXkQN0vf5YP+QZKobrmkvx1eQYPLtuqfw=="
+    },
+    "svg-arc-to-cubic-bezier": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/svg-arc-to-cubic-bezier/-/svg-arc-to-cubic-bezier-3.2.0.tgz",
+      "integrity": "sha512-djbJ/vZKZO+gPoSDThGNpKDO+o+bAeA4XQKovvkNCqnIS2t+S4qnLAGQhyyrulhCFRl1WWzAp0wUDV8PpTVU3g=="
+    },
+    "svg-path-contours": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/svg-path-contours/-/svg-path-contours-2.0.0.tgz",
+      "integrity": "sha1-x2oSlCnbBette2Hk0cWNEUqJOKI=",
+      "requires": {
+        "abs-svg-path": "^0.1.1",
+        "normalize-svg-path": "^0.1.0",
+        "vec2-copy": "^1.0.0"
+      },
+      "dependencies": {
+        "normalize-svg-path": {
+          "version": "0.1.0",
+          "resolved": "https://registry.npmjs.org/normalize-svg-path/-/normalize-svg-path-0.1.0.tgz",
+          "integrity": "sha1-RWNg5g7Odfvve11+FgSA5//Rb+U="
+        }
+      }
+    },
+    "vec2-copy": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/vec2-copy/-/vec2-copy-1.0.0.tgz",
+      "integrity": "sha1-xu7B2NrVRiUZTl9x+EM7YtLyCno="
}
}
}

```
`M package.json => package.json +2 -1`
```@@ 10,7 10,8 @@
"author": "",