~jagtalon/long-exposure-art

78a6fcae286bfbd36b90479119876df79ed76782 — Jag Talon 1 year, 10 months ago 9c98dbc
Timelapse effect is now working!
2 files changed, 59 insertions(+), 2 deletions(-)

M timelapse-art.coffee
M timelapse-art.js
M timelapse-art.coffee => timelapse-art.coffee +26 -1
@@ 4,11 4,36 @@ settings =
	dimensions: [3600, 5400]
	suffix: "12x18"

sketch = -> 
sketch = ->

	return ({context, width, height}) ->
		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()


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

		# Translate to the center of the canvas.
		context.translate width/2, height/2

		# Create stars
		stars = ([Math.random() * (width/2), Math.random() * (height/2)] for n in [1..400])
		
		# Set an angle that will be used everywhere.
		theta = Math.PI/3

		# Draw arcs
		drawStarTrails star[0], star[1], theta for star in stars


canvasSketch sketch, settings
\ No newline at end of file

M timelapse-art.js => timelapse-art.js +33 -1
@@ 11,9 11,41 @@

  sketch = function() {
    return function({context, width, height}) {
      var drawStarTrails, i, len, n, results, star, stars, theta;
      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();
      };
      // Set the night sky.
      context.fillStyle = "#212529";
      return context.fillRect(0, 0, width, height);
      context.fillRect(0, 0, width, height);
      // Translate to the center of the canvas.
      context.translate(width / 2, height / 2);
      // Create stars
      stars = (function() {
        var i, results;
        results = [];
        for (n = i = 1; i <= 400; n = ++i) {
          results.push([Math.random() * (width / 2), Math.random() * (height / 2)]);
        }
        return results;
      })();
      
      // Set an angle that will be used everywhere.
      theta = Math.PI / 3;
      results = [];
      for (i = 0, len = stars.length; i < len; i++) {
        star = stars[i];
        // Draw arcs
        results.push(drawStarTrails(star[0], star[1], theta));
      }
      return results;
    };
  };