add visualizing webpage

2 weeks ago · 125cf014a3
parent dd98d4061f
commit 125cf014a3
4 changed files with 129 additions and 34 deletions
--- a/map_gen.js
+++ b/map_gen.js
@ -0,0 +1,52 @@
+//import { Bezier } from "./bezierjs/src/bezier.js";
+
+function map (a, a_min, a_max, b_min, b_max) {
+    return b_min + ((b_max - b_min) / (a_max - a_min)) * (a - a_min);
+}
+
+function fmt (x) {
+    return x.toLocaleString("en-US", {
+        minimumFractionDigits: 2,
+        maximumFractionDigits: 2,
+        useGrouping: false
+    });
+}
+
+function duty_cycle_map (x) {
+    //const out = Math.log10(x + 1) * 50;
+    //const out = x;
+    x = x / 100;
+    //let y = 1 - Math.pow(1 - x, 5);
+    //let y = x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
+    //let y =  Math.sqrt(1 - Math.pow(x - 1, 2));
+    //let y = x < 0.5 ? 2 * x * x : 1 - Math.pow(-2 * x + 2, 2) / 2;
+    let y = Math.sin((x * Math.PI) / 2);
+    y = map(y, 0, 1, 47, 100);
+    return y
+}
+
+function freq_map (x) {
+    x = x / 100;
+    //let y = 1 - (1 - x) * (1 - x);
+    //let y = x === 1 ? 1 : 1 - Math.pow(2, -10 * x);
+    let y;
+    if (x < 0.05) {
+        x = map(x, 0, 0.05, 0, 1); 
+        y = -(Math.cos(Math.PI * x) - 1) / 2;
+        y = map(y, 0, 1, 15000, 19000);
+    } else if (x < 0.5) {
+        x = map(x, 0, 0.5, 0, 1); 
+        y = -(Math.cos(Math.PI * x) - 1) / 2;
+        y = map(y, 0, 1, 20000, 50000);
+    } else {
+        y = 100000;
+    }
+
+    return y;
+}
+
+function generate_command() {
+    return [...Array(100).keys()].map((x) => x + 1).map((x) => "D" + (x - 1) + " " + fmt(duty_cycle_map(x)) + " " + fmt(freq_map(x))).join("");
+}
+
+//console.log("M" + vals + "R");
--- a/map_gen.ts
+++ b/map_gen.ts
@ -1,34 +0,0 @@
-import { Bezier } from "./bezierjs/src/bezier.js";
-
-function map (a: number, a_min: number, a_max: number, b_min: number, b_max: number): number {
-    return b_min + ((b_max - b_min) / (a_max - a_min)) * (a - a_min);
-}
-
-function fmt (x: number) {
-    return x.toLocaleString("en-US", {
-        minimumFractionDigits: 2,
-        maximumFractionDigits: 2,
-        useGrouping: false
-    });
-}
-
-function duty_cycle_map (x: number) {
-    //const out = Math.log10(x + 1) * 50;
-    //const out = x;
-    x = x / 100;
-    //let y = 1 - Math.pow(1 - x, 5);
-    let y = x < 0.5 ? 4 * x * x * x : 1 - Math.pow(-2 * x + 2, 3) / 2;
-    y = map(y, 0, 1, 30, 100);
-    return fmt(y);
-}
-
-function freq_map (x: number) {
-    x = x / 100;
-    let y = 1 - (1 - x) * (1 - x);
-    y = map(y, 0, 1, 20000, 25000);
-    return fmt(y);
-}
-
-const vals = [...Array(100).keys()].map((x) => x + 1).map((x) => "D" + (x - 1) + " " + duty_cycle_map(x) + " " + freq_map(x)).join("");
-
-console.log("M" + vals + "R");
--- a/map_viz.html
+++ b/map_viz.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<head>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.5.0/chart.umd.js"></script>
+    <script src="map_gen.js"></script>
+    <script defer src="map_viz.js"></script>
+</head>
+<body>
+    <h1>map viz</h1>
+    <button type="button" onclick="copy_command()"><h1>copy</h1></button>
+    <canvas id="graph">
+    </canvas>
+    <h2>command here</h2>
+    <div id="command" style="font-family: monospace">
+        command will be here!
+    </div>
+</body>
--- a/map_viz.js
+++ b/map_viz.js
@ -0,0 +1,61 @@
+const graph_div = document.getElementById("graph");
+const command_div = document.getElementById("command");
+
+function reload_graph () {
+    console.log("yay");
+    const data = [...Array(100).keys()]
+        .map((x) => x + 1)
+        .map((x) => ({
+            lvl: x,
+            duty_cycle: duty_cycle_map(x),
+            freq: freq_map(x)
+        }));
+
+    const duty_cycles = data.map((row) => row.duty_cycle);
+    const freqs = data.map((row) => row.freq);
+
+    let config = {
+        type: "line",
+        data: {
+            labels: data.map((row) => row.lvl),
+            datasets: [
+                {
+                    label: "duty cycle",
+                    yAxisID: "y",
+                    data: duty_cycles
+                },
+                {
+                    label: "freq",
+                    yAxisID: "freq_scale",
+                    data: freqs
+                }
+            ],
+        },
+        options: {
+            scales: {
+                freq_scale: {
+                    type: "linear",
+                    position: "right",
+                    min: Math.min(...freqs),
+                    max: Math.max(...freqs)
+                }
+            }
+        }
+    };
+
+    console.log(config);
+    
+    const chart = new Chart(graph_div, config);
+    //graph_div.innerHTML = "reloaded";
+    command_div.innerHTML = "MC" + generate_command() + "ER";
+}
+
+function copy_command () {
+    const item = new ClipboardItem({
+        "text/plain": command_div.innerHTML  
+    });
+    navigator.clipboard.write([item]);
+}
+
+reload_graph();
+copy_command();