X-Git-Url: https://git.r.bdr.sh/rbdr/sorting-hat-renderer/blobdiff_plain/4b3d812031dd07c251623d7155159115e99d2671..c6425032e13c139bedd0546119f6ed1c93365822:/lib/components/wave_renderer.js?ds=inline diff --git a/lib/components/wave_renderer.js b/lib/components/wave_renderer.js index c9cadc0..022f9ff 100644 --- 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'; +/* global window */ + 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: '' + '' + '', @@ -43,21 +51,21 @@ export default Vue.component('posts', { const keys = Object.keys(this.runningAverages); - const averages = keys.reduce((averages, averageCategory) => { + const averages = keys.reduce((averagesObject, 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 scaledAverages = Object.keys(averages).reduce((scaledAverages, averageCategory) => { + const scaledAverages = Object.keys(averages).reduce((scaledAveragesObject, 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; @@ -65,6 +73,9 @@ export default Vue.component('posts', { }, methods: { + + // Reset the size of the canvas on resize + onResize() { this.$el.width = window.innerWidth; @@ -114,28 +125,27 @@ export default Vue.component('posts', { // 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'; - let currentGradientPosition = currentSegment * gradientBandWidth + internals.kGradientFade; + let currentGradientPosition = i * gradientBandWidth + internals.kGradientFade; 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 - 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);