~jagtalon/long-exposure-art

2825bf144d974c1f81977dc2a680aab2a2dc7b0a — Jag Talon 1 year, 10 months ago 367fddc
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π)
		drawStarTrails = (radius, theta) ->
			console.log radius
			color = random.pick(["#fdfffc", "#819EC9", "#ACE4FF"])

			# Add a gradient to make the stars fade out a little.
			gradient = context.createLinearGradient(0, 0, width/2, height/2)
			gradient.addColorStop(0, color)
			gradient.addColorStop(1, "transparent")

			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

		# Generate radii
		# 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π)
      drawStarTrails = function(radius, theta) {
        var color, gradient;
        console.log(radius);
        color = random.pick(["#fdfffc", "#819EC9", "#ACE4FF"]);
        // Add a gradient to make the stars fade out a little.
        gradient = context.createLinearGradient(0, 0, width / 2, height / 2);
        gradient.addColorStop(0, color);
        gradient.addColorStop(1, "transparent");
        draw.circle(0, 0, radius, 0, theta);
        draw.stroke("#DEE2E6", Math.random() * 15, "round");
        draw.stroke(gradient, random.range(1, 10), "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) {
        // Generate radii
        // 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="
    },
    "adaptive-bezier-curve": {
      "version": "1.0.3",
      "resolved": "https://registry.npmjs.org/adaptive-bezier-curve/-/adaptive-bezier-curve-1.0.3.tgz",
      "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",
        "primitive-quad": "^2.0.0",
        "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",
      "integrity": "sha1-WP8uvTK1LQf1N47v5aDnnWsxitc="
    },
    "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="
    },
    "primitive-quad": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/primitive-quad/-/primitive-quad-2.0.0.tgz",
      "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",
        "adaptive-bezier-curve": "^1.0.3",
        "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": "",
  "license": "ISC",
  "dependencies": {
    "canvas-sketch": "^0.7.4"
    "canvas-sketch": "^0.7.4",
    "canvas-sketch-util": "^1.10.0"
  },
  "devDependencies": {
    "coffeescript": "^2.5.1"