kylebradshaw · July 8, 2020 02:12 · Mar 4, 2019 · Jul 14, 2018 · Jul 14, 2018 · Jul 14, 2018
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -2,7 +2,8 @@
 
 ### To Do
 - [ ] Add links to JSFiddle
-- [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
+- [x] [Visualize with bl.ocks.org](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2).
+- [x] [Vistualize with GistRun](https://gist.run/?id=c58a109172d543ee095e57f0eb3606f2&sha=20a424503f420914e14d299d123ebcc4a0d3229c).
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.
 

diff --git a/trig-aha.gif b/trig-aha.gif
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
 ### To Do
-- [x] Add links to JSFiddle
+- [ ] Add links to JSFiddle
 - [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
 ### To Do
-- [ ] Add links to JSFiddle
+- [x] Add links to JSFiddle
 - [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
 ### To Do
-- [x] Add links to JSFiddle
+- [ ] Add links to JSFiddle
 - [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
 ### To Do
-- [ ] Add links to JSFiddle
+- [x] Add links to JSFiddle
 - [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -2,6 +2,7 @@
 
 ### To Do
 - [ ] Add links to JSFiddle
+- [x] [Visualize](https://bl.ocks.org/gkhays/c58a109172d543ee095e57f0eb3606f2) with bl.ocks.org.
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.
 
@@ -11,7 +12,7 @@ The end result is an oscillating sine wave. Nothing ground-breaking but it looks
 
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
-The JavaScript funtion to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis. See the simple plot below. In this case, the `draw()` function makes the repeat calls via `window.requestAnimationFrame(draw)`.
+The JavaScript function to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis. See the simple plot below. In this case, the `draw()` function makes the repeat calls via `window.requestAnimationFrame(draw)`.
 
 ```js
 function draw() {

diff --git a/trig-aha.gif b/trig-aha.gif
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -34,7 +34,7 @@ function draw() {
 
 ## Superimposed Sine Waves
 
-After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I get it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph). :smile:
+After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I kept it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph). :smile:
 
 ![Superimposed](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/33de4ef3245615c3fdb39e9878198fda88c0625f/Superimposed.png)
 

diff --git a/trig-aha.gif b/trig-aha.gif
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -100,4 +100,10 @@ I found this animated gif in Reddit.
 
 See [This should be the first thing shown in any Trigonometry class](https://www.reddit.com/r/pics/comments/bnzgx/this_should_be_the_first_thing_shown_in_any/).
 
+From the Fourier series definition in Wikipedia.
+
+![](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/447376711c11e102a20fb0edd3fe191eea7aea94/Fourier_series_square_wave_circles_animation.gif)
+
+[Approximation of a square wave](https://en.wikipedia.org/wiki/Fourier_series#Definition).
+
 * [What You Can Do With Gists on Github?](http://www.labnol.org/internet/github-gist-tutorial/28499/)
diff --git a/trig-aha.gif b/trig-aha.gif
diff --git a/Fourier_series_square_wave_circles_animation.gif b/Fourier_series_square_wave_circles_animation.gif
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -30,7 +30,7 @@ function draw() {
 }
 ```
 
-Note: The astute observer may note the animation above isn't actually JavaScript but is instead an animated gif. I did this since it is currently not possible to run JavaScript from a gist although it is possible using `bl.ocks.org`.
+**Note**: The astute observer may observe the animation above isn't actually JavaScript but is instead an animated gif. I did this since it is currently not possible to run JavaScript from a gist although it is possible using `bl.ocks.org`.
 
 ## Superimposed Sine Waves
 

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -30,6 +30,8 @@ function draw() {
 }
 ```
 
+Note: The astute observer may note the animation above isn't actually JavaScript but is instead an animated gif. I did this since it is currently not possible to run JavaScript from a gist although it is possible using `bl.ocks.org`.
+
 ## Superimposed Sine Waves
 
 After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I get it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph). :smile:
@@ -97,3 +99,5 @@ I found this animated gif in Reddit.
 ![Trigonometry](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/f73f0fa9236a85e8f1471aad358a4ce01dd84552/trig-aha.gif)
 
 See [This should be the first thing shown in any Trigonometry class](https://www.reddit.com/r/pics/comments/bnzgx/this_should_be_the_first_thing_shown_in_any/).
+
+* [What You Can Do With Gists on Github?](http://www.labnol.org/internet/github-gist-tutorial/28499/)
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -7,7 +7,7 @@ I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_tr
 
 ## Simple Animation
 
-I'm fairly happy with the animation.
+The end result is an oscillating sine wave. Nothing ground-breaking but it looks pretty cool to me.
 
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -91,3 +91,9 @@ Interesting tidbit: If we uncomment `ctx.moveTo(x, y)` just before the loop we g
 * [Basic animations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations)
 * [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)
 * [WindowTimers.setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)
+
+I found this animated gif in Reddit.
+
+![Trigonometry](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/f73f0fa9236a85e8f1471aad358a4ce01dd84552/trig-aha.gif)
+
+See [This should be the first thing shown in any Trigonometry class](https://www.reddit.com/r/pics/comments/bnzgx/this_should_be_the_first_thing_shown_in_any/).
diff --git a/trig-aha.gif b/trig-aha.gif
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -51,6 +51,13 @@ My initial attempt to draw a sine wave on an `HTML5` canvas.
 
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 
+```html
+<body onload="init()">
+    <h3>Oscillating Sine Wave</h3>
+    <canvas id="canvas" width="500" height="100"></canvas>
+</body>
+```
+
 ```js
 function plotSine(ctx) {
     var width = ctx.canvas.width;

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -7,43 +7,32 @@ I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_tr
 
 ## Simple Animation
 
+I'm fairly happy with the animation.
+
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
-The JavaScript funtion to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis.
+The JavaScript funtion to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis. See the simple plot below. In this case, the `draw()` function makes the repeat calls via `window.requestAnimationFrame(draw)`.
 
 ```js
-function plotSine(ctx, xOffset, yOffset) {
-    var width = ctx.canvas.width;
-    var height = ctx.canvas.height;
-    var scale = 20;
+function draw() {
+    var canvas = document.getElementById("canvas");
+    var context = canvas.getContext("2d");
 
-    ctx.beginPath();
-    ctx.lineWidth = 2;
-    ctx.strokeStyle = "rgb(66,44,255)";
+    context.clearRect(0, 0, 500, 500);
+    showAxes(context);
+    context.save();            
 
-    var x = 4;
-    var y = 0;
-    var amplitude = 40;
-    var frequency = 20;
-    ctx.moveTo(x, 50);
-
-    while (x < width) {
-        y = height/2 + amplitude * Math.sin((x+xOffset)/frequency);
-        ctx.lineTo(x, y);
-        x++;
-    }
-    ctx.stroke();
-    ctx.save();
+    plotSine(context, step, 50);
+    context.restore();
 
-    drawPoint(ctx, y);
-    ctx.stroke();
-    ctx.restore();
+    step += 4;
+    window.requestAnimationFrame(draw);
 }
 ```
 
 ## Superimposed Sine Waves
 
-After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I get it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph) :smile:
+After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I get it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph). :smile:
 
 ![Superimposed](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/33de4ef3245615c3fdb39e9878198fda88c0625f/Superimposed.png)
 
@@ -58,6 +47,8 @@ for (var i = -4; i < canvas.height; i += step) {
 
 ## Simple Plot
 
+My initial attempt to draw a sine wave on an `HTML5` canvas.
+
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 
 ```js
@@ -84,7 +75,7 @@ function plotSine(ctx) {
 }
 ```
 
-If we uncomment `ctx.moveTo(x, y)` just before the loop we get a vertical line.
+Interesting tidbit: If we uncomment `ctx.moveTo(x, y)` just before the loop we get a vertical line.
 
 ![](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/b95ad7cb1a8beb644dd52ef414fa46eff6731381/Sine-Left-Bar.png)
 

diff --git a/SineWave.mp4 b/SineWave.mp4
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -43,8 +43,19 @@ function plotSine(ctx, xOffset, yOffset) {
 
 ## Superimposed Sine Waves
 
+After I learned to plot a sine wave, I visualized how to draw multiple sine waves in order to achieve the oscillation effect in the animation. It looked pretty cool, so I get it around. It reminds me of [Spirograph](https://en.wikipedia.org/wiki/Spirograph) :smile:
+
 ![Superimposed](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/33de4ef3245615c3fdb39e9878198fda88c0625f/Superimposed.png)
 
+The `step` advances the starting point along the y-axis.
+
+```js
+var step = 4;
+for (var i = -4; i < canvas.height; i += step) {
+    plotSine(context, i, 54 + i);
+}
+```
+
 ## Simple Plot
 
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
@@ -68,7 +79,6 @@ function plotSine(ctx) {
         y = height/2 + amplitude * Math.sin(x/frequency);
         ctx.lineTo(x, y);
         x = x + 1;
-        console.log("x="+x+" y="+y);
     }
     ctx.stroke();
 }

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -3,12 +3,14 @@
 ### To Do
 - [ ] Add links to JSFiddle
 
-I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method.
+I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method. I've documented the steps in reverse order.
 
 ## Simple Animation
 
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
+The JavaScript funtion to plot the sine wave uses the `Math.sin()` function, which is called repeatedly given a different starting point on the y-axis.
+
 ```js
 function plotSine(ctx, xOffset, yOffset) {
     var width = ctx.canvas.width;

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -41,6 +41,7 @@ function plotSine(ctx, xOffset, yOffset) {
 
 ## Superimposed Sine Waves
 
+![Superimposed](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/33de4ef3245615c3fdb39e9878198fda88c0625f/Superimposed.png)
 
 ## Simple Plot
 

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -39,6 +39,9 @@ function plotSine(ctx, xOffset, yOffset) {
 }
 ```
 
+## Superimposed Sine Waves
+
+
 ## Simple Plot
 
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)

diff --git a/Superimposed.png b/Superimposed.png
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,10 +1,12 @@
 # Draw a Sine Wave in JavaScript
 
-**To Do**
+### To Do
 - [ ] Add links to JSFiddle
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method.
 
+## Simple Animation
+
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
 ```js
@@ -37,6 +39,8 @@ function plotSine(ctx, xOffset, yOffset) {
 }
 ```
 
+## Simple Plot
+
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 
 ```js

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,6 +1,6 @@
 # Draw a Sine Wave in JavaScript
 
-*To Do*
+**To Do**
 - [ ] Add links to JSFiddle
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method.

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
 *To Do*
-[] Add links to JSFiddle
+- [ ] Add links to JSFiddle
 
 I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method.
 

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,7 +1,42 @@
 # Draw a Sine Wave in JavaScript
 
+*To Do*
+[] Add links to JSFiddle
+
+I am revisiting the [Fourier transform](https://en.wikipedia.org/wiki/Fourier_transform) so I thought it might be nice to come up with some visualizations. My first stop was to plot a sine wave in JavaScript, then to animate it. I am using the `window.requestAnimationFrame()` method.
+
 ![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
+```js
+function plotSine(ctx, xOffset, yOffset) {
+    var width = ctx.canvas.width;
+    var height = ctx.canvas.height;
+    var scale = 20;
+
+    ctx.beginPath();
+    ctx.lineWidth = 2;
+    ctx.strokeStyle = "rgb(66,44,255)";
+
+    var x = 4;
+    var y = 0;
+    var amplitude = 40;
+    var frequency = 20;
+    ctx.moveTo(x, 50);
+
+    while (x < width) {
+        y = height/2 + amplitude * Math.sin((x+xOffset)/frequency);
+        ctx.lineTo(x, y);
+        x++;
+    }
+    ctx.stroke();
+    ctx.save();
+
+    drawPoint(ctx, y);
+    ctx.stroke();
+    ctx.restore();
+}
+```
+
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 
 ```js
@@ -32,3 +67,9 @@ function plotSine(ctx) {
 If we uncomment `ctx.moveTo(x, y)` just before the loop we get a vertical line.
 
 ![](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/b95ad7cb1a8beb644dd52ef414fa46eff6731381/Sine-Left-Bar.png)
+
+## References
+
+* [Basic animations](https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animations)
+* [window.requestAnimationFrame()](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestAnimationFrame)
+* [WindowTimers.setInterval()](https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers/setInterval)
diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,6 +1,6 @@
 # Draw a Sine Wave in JavaScript
 
-![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/sinewave.gif)
+![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/d22f89c7a42c33ee3ec553195c7d090ccd11877a/sinewave.gif)
 
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 

diff --git a/draw-sinewave.md b/draw-sinewave.md
@@ -1,5 +1,7 @@
 # Draw a Sine Wave in JavaScript
 
+![Animated Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/sinewave.gif)
+
 ![Sine Wave](https://gist.github.com/gkhays/e264009c0832c73d5345847e673a64ab/raw/e4619775994d7f8d7584b9cd9fd561e6f3841821/Sine.png)
 
 ```js

diff --git a/sinewave.gif b/sinewave.gif