~jagtalon/long-exposure-art

42d4c624258fe20780dcd51197da7f0746219eca — Jag Talon 1 year, 10 months ago 3584272
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);