~jagtalon/long-exposure-art

f27f2c176d17c986ab284c58581f53652c03bdac — Jag Talon 1 year, 10 months ago dd1a6ed
Add lots of comments.
3 files changed, 31 insertions(+), 3 deletions(-)

M .nvmrc
M long-exposure-art.coffee
M long-exposure-art.js
M .nvmrc => .nvmrc +1 -1
@@ 1,1 1,1 @@
v14.15.3
v14.15.4

M long-exposure-art.coffee => long-exposure-art.coffee +15 -1
@@ 7,6 7,14 @@ settings =
sketch = ->

	return ({context, width, height}) ->
	
		# Functions
		# ---------

		# drawStarTrails
		# 1. We compute the hypotenuse between (0,0) and (x,y).
		# 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"


@@ 19,6 27,9 @@ sketch = ->
			context.stroke()


		# Drawing
		# -------

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


@@ 27,12 38,15 @@ sketch = ->
		context.translate width/2, height/2

		# 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])
		
		# Set an angle that will be used everywhere.
		# This can be any arbitrary angle.
		theta = Math.PI/3

		# Draw arcs
		# 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 +15 -1
@@ 12,6 12,14 @@
  sketch = function() {
    return function({context, width, height}) {
      var drawStarTrails, i, len, n, results, star, stars, theta;
      
      // Functions
      // ---------

      // drawStarTrails
      // 1. We compute the hypotenuse between (0,0) and (x,y).
      // 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";


@@ 22,12 30,17 @@
        context.arc(0, 0, Math.hypot(x, y), 0, theta);
        return context.stroke();
      };
      // Drawing
      // -------

      // 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
      // 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 = [];


@@ 38,11 51,12 @@
      })();
      
      // Set an angle that will be used everywhere.
      // This can be any arbitrary angle.
      theta = Math.PI / 3;
      results = [];
      for (i = 0, len = stars.length; i < len; i++) {
        star = stars[i];
        // Draw arcs
        // Draw arcs for each star we generated previously.
        results.push(drawStarTrails(star[0], star[1], theta));
      }
      return results;