## ~jagtalon/long-exposure-art

f27f2c176d17c986ab284c58581f53652c03bdac — Jag Talon 1 year, 10 months ago
```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;

```