Ignore .DS_Store files

[rbdr/sorting-hat-renderer] / lib / components / wave_renderer.js

diff --git a/lib/components/wave_renderer.js b/lib/components/wave_renderer.js
index c9cadc0217da8b5d754737e6033b3de02591b56c..022f9ffed174a725ed06c0169b437062e6d9a6a3 100644 (file)
--- a/lib/components/wave_renderer.js
+++ b/lib/components/wave_renderer.js
@@ -1,6 +1,8 @@
 import Vue from 'vue';
 import DataService from '../services/data';
 
 import Vue from 'vue';
 import DataService from '../services/data';
 

+/* global window */
+

 const internals = {
 
   // Constants
 const internals = {
 
   // Constants


@@ -26,7 +28,13 @@ const internals = {
   }
 };
 
   }
 };
 

-export default Vue.component('posts', {
+/**
+ * The wave renderer, draws some waves in a canvas to represent a set of
+ * cateogirzed averages
+ *
+ * @class WaveRenderer
+ */
+export default Vue.component('waveRenderer', {

   template: '<transition name="fade">' +
     '<canvas v-show="state === 1" class="wave-renderer"></canvas>' +
     '</transition>',
   template: '<transition name="fade">' +
     '<canvas v-show="state === 1" class="wave-renderer"></canvas>' +
     '</transition>',


@@ -43,21 +51,21 @@ export default Vue.component('posts', {
 
       const keys = Object.keys(this.runningAverages);
 
 
       const keys = Object.keys(this.runningAverages);
 

-      const averages = keys.reduce((averages, averageCategory) => {
+      const averages = keys.reduce((averagesObject, averageCategory) => {

 
         const runningAverage = this.runningAverages[averageCategory];
 
         const runningAverage = this.runningAverages[averageCategory];

-        averages[averageCategory] = runningAverage.average;
-        return averages;
+        averagesObject[averageCategory] = runningAverage.average;
+        return averagesObject;

       }, {});
 
       const max = Math.max(...Object.values(averages));
       const min = Math.min(...Object.values(averages));
 
       }, {});
 
       const max = Math.max(...Object.values(averages));
       const min = Math.min(...Object.values(averages));
 

-      const scaledAverages = Object.keys(averages).reduce((scaledAverages, averageCategory) => {
+      const scaledAverages = Object.keys(averages).reduce((scaledAveragesObject, averageCategory) => {

 
         const value = averages[averageCategory];
 
         const value = averages[averageCategory];

-        scaledAverages[averageCategory] = internals.scale(value, min, max);
-        return scaledAverages;
+        scaledAveragesObject[averageCategory] = internals.scale(value, min, max);
+        return scaledAveragesObject;

       }, {});
 
       return scaledAverages;
       }, {});
 
       return scaledAverages;


@@ -65,6 +73,9 @@ export default Vue.component('posts', {
   },
 
   methods: {
   },
 
   methods: {

+
+    // Reset the size of the canvas on resize
+

     onResize() {
 
       this.$el.width = window.innerWidth;
     onResize() {
 
       this.$el.width = window.innerWidth;


@@ -114,28 +125,27 @@ export default Vue.component('posts', {
 
         // Iterate over the segments
 
 
         // Iterate over the segments
 

-        for (let currentSegment = 0; currentSegment < segments; ++currentSegment) {
-          const segmentStart = currentSegment * period;
-          const segmentEnd = currentSegment + period;
+        for (let i = 0; i < segments; ++i) {
+          const segmentStart = i * period;

 
 

-          const category = keys[currentSegment];
-          const magnitude = values[currentSegment];
+          const category = keys[i];
+          const magnitude = values[i];

           const segmentHeight = Math.round(Math.random() * internals.kRandomJitter + magnitude * (canvas.height / 2) / 100);
 
           // Calculate the gradient using the correct color according to
           // scale
 
           const color = internals.kColors[category] || 'black';
           const segmentHeight = Math.round(Math.random() * internals.kRandomJitter + magnitude * (canvas.height / 2) / 100);
 
           // Calculate the gradient using the correct color according to
           // scale
 
           const color = internals.kColors[category] || 'black';

-          let currentGradientPosition = currentSegment * gradientBandWidth + internals.kGradientFade;
+          let currentGradientPosition = i * gradientBandWidth + internals.kGradientFade;

           fillGradient.addColorStop(currentGradientPosition, color);
           fillGradient.addColorStop(currentGradientPosition, color);

-          currentGradientPosition = (currentSegment + 1) * gradientBandWidth - internals.kGradientFade;
+          currentGradientPosition = (i + 1) * gradientBandWidth - internals.kGradientFade;

           fillGradient.addColorStop(currentGradientPosition, color);
 
           // This draws the sine wave
 
           fillGradient.addColorStop(currentGradientPosition, color);
 
           // This draws the sine wave
 

-          for (let angle = 0; angle < 180; ++angle) {
-            const currentPixel = segmentStart + angle * period / 180;
-            const currentAngle = angle + 180 * (currentSegment % 2);
+          for (let j = 0; j < 180; ++j) {
+            const currentPixel = segmentStart + j * period / 180;
+            const currentAngle = j + 180 * (i % 2);

             const currentRadians = currentAngle * Math.PI / 180;
             const currentHeight = segmentHeight * Math.sin(internals.kFrequency * currentRadians);
 
             const currentRadians = currentAngle * Math.PI / 180;
             const currentHeight = segmentHeight * Math.sin(internals.kFrequency * currentRadians);