Download fourier data

content/content.md

@@ -137,7 +137,12 @@ All this applies to any drawing, really! Now it’s your chance to play around w
     <p id="draw-zone-instruction" class="instruction">Draw here!</p>
     <button id="draw-zone-undo-button" class="button embedded-button">Undo</button>
 </div>
-<canvas id="circle-zone" class="sketch" width=500 height=500></canvas>
+<div class="sketch">
+	<canvas id="circle-zone" class="sketch-child" width=500 height=500></canvas>
+	<a id="download-elem" style="all: revert;">
+		<button id="circle-zone-download-button" class="button embedded-button">Download</button>
+	</a>
+</div>
 </div>
 <input id="circle-zone-slider" type="range" min="0" max="1" value="1" step="any">
 

js/controller/epicycles-controller.js

@@ -39,7 +39,8 @@ export default class EpicyclesController extends CanvasController {
         // Get the fourier data, also filter out the really small terms.
         this.fourierData = getFourierData(resample2dData(path, this.numPoints)).filter(f => f.amplitude > minAmplitude);
         this.fourierData.sort((a, b) => b.amplitude - a.amplitude);
-        console.log(this.fourierData.length + '/' + numPoints)
+        console.log(this.fourierData.length + '/' + numPoints);
+        this.jsonData();
     }
 
     setFourierAmt(amt) {
@@ -60,6 +61,7 @@ export default class EpicyclesController extends CanvasController {
         if (this.pathDirty) {
             this.recalculatePath();
             this.pathDirty = false;
+            this.jsonData();
         }
 
         if (!this.animate) {
@@ -161,5 +163,15 @@ export default class EpicyclesController extends CanvasController {
         }
         this.context.globalAlpha = 1;
     }
+	jsonData() {
+		const numFouriers = Math.round(slurp(2, this.fourierData.length, this.fourierAmt));
+		let frequency = [], phase = [], amplitude = [];
+		for (let i = 0; i < numFouriers; i++) {
+			frequency.push(this.fourierData[i].freq);
+			phase.push(this.fourierData[i].phase);
+			amplitude.push(this.fourierData[i].amplitude);
+		}
+		this.data = {"amplitude": amplitude, "phase":phase, "frequency":frequency};
+	}
 
 }

js/main.js

@@ -251,6 +251,17 @@ function init() {
 		if (circleZoneSlider) {
 			circleZoneSlider.onValueChange.push(val => epicycles.setFourierAmt(val));
 		}
+		if (hasElement('circle-zone-download-button')) {
+			const downloadButton = document.getElementById('circle-zone-download-button');
+			downloadButton.addEventListener('click', () => {
+				epicycles.jsonData();
+				var jsonData = "data:text/json;charset=utf-8,"+JSON.stringify(epicycles.data);
+				var downloadElem = document.getElementById('download-elem');
+				downloadElem.setAttribute("href", jsonData);
+				downloadElem.setAttribute("download", "fourier-data.json");
+				// console.log(jsonData);
+			});
+		}
 		controllers.push(epicycles);
 	}