Gif saver

.gitignore

@@ -1,7 +1,12 @@
 www/node_modules
 www/dist
 
+server/svgs
+
 target
 articles
 dist
 .env
+.Ds_Store
+
+svgs*

server/src/main.rs

@@ -5,8 +5,8 @@ use log::info;
 use serde_derive::{Deserialize, Serialize};
 use std::{
     env,
-    fs::{self, DirEntry},
-    io,
+    fs::{self, DirEntry, File},
+    io::{self, Write},
     net::SocketAddr,
     path::Path,
 };
@@ -17,6 +17,16 @@ struct Dada {
     message: String,
 }
 
+#[derive(Deserialize, Serialize)]
+struct Svg {
+    x: i32,
+    y: i32,
+    period: i32,
+    count: i32,
+    spectrum: i32,
+    svg: String,
+}
+
 #[tokio::main]
 async fn main() {
     env_logger::Builder::from_env(Env::default().default_filter_or("info")).init();
@@ -66,17 +76,36 @@ async fn main() {
     });
 
     let dada = warp::options()
-        .and(warp::path!("dada"))
+        .and(warp::path!("svg"))
         .map(|| warp::reply())
         .or(warp::post()
-            .and(warp::path!("dada"))
-            .and(warp::body::content_length_limit(1024 * 16))
+            .and(warp::path!("svg"))
+            .and(warp::body::content_length_limit(1024 * 256))
             .and(warp::body::json())
-            .map(|dada: Dada| {
-                let res = dada_poem_generator::dada(&dada.message);
-                warp::reply::html(res)
+            .map(|svg: Svg| {
+                let s = format!(
+                    "./svgs/{}_{}_{}_{}_{}.svg",
+                    svg.x, svg.y, svg.period, svg.count, svg.spectrum
+                );
+                let mut file = File::create(s.clone()).unwrap();
+                println!("{}", s);
+                write!(file, "{}", svg.svg).unwrap();
+                warp::reply::html(s)
             }))
         .with(with_content_allow);
+    //
+    // let dada = warp::options()
+    //     .and(warp::path!("dada"))
+    //     .map(|| warp::reply())
+    //     .or(warp::post()
+    //         .and(warp::path!("dada"))
+    //         .and(warp::body::content_length_limit(1024 * 16))
+    //         .and(warp::body::json())
+    //         .map(|dada: Dada| {
+    //             let res = dada_poem_generator::dada(&dada.message);
+    //             warp::reply::html(res)
+    //         }))
+    //     .with(with_content_allow);
 
     let end = home
         .or(dada.or(blog_home.or(blog_page)).with(with_control_origin))

www/App.jsx

@@ -77,15 +77,16 @@ export default function App( props ) {
           <Route path="/ColorStudy">
             <ColorStudy />
           </Route>
-          <Route path="/RadialCartesian">
-            <Circular />
-          </Route>
+
           <Route path="/Blog">
             <Blog backendUrl={backendUrl} />
           </Route>
           <Route path="/Dada">
             <Dada backendUrl={backendUrl} />
           </Route>
+          <Route path="/">
+            <Circular backendUrl={backendUrl} />
+          </Route>
           <Route path="/Oolisp">
             <Oolisp />
           </Route>

www/charts/circular.js

@@ -2,26 +2,33 @@ import * as d3 from "d3"
 
 import theme from "../theme"
 import { simpleHarmonicMotionCos, simpleHarmonicMotionSin } from "../utils/maths-tools.js"
+import { getSpectrumPosition } from "../utils/color-tools.js"
 
 class Circular {
 
   constructor(containerEl, props) {
     this.containerEl = containerEl
     this.props = props
-    const { width, height } = props
+    const { width, height, count } = props
+
+    const data = Array.from({ length: count }, (_, i) => i)
+
     // give us a canvas to draw on
     this.svg = d3.select(containerEl)
       .append('svg')
       .attr('width', width)
       .attr('height', height)
+    // background
+    // this.svg.append("rect")
+    //   .attr('width', "100%")
+    //   .attr('height', "100%")
+    //   .attr('fill', 'blue')
     // bring in a line
-    this.svg.selectAll('path.lines')
-      .data([0])
+    this.svg.selectAll('path')
+      .data(data)
       .enter()
         .append("path")
-        .attr("class", "lines")
         .attr("fill", "none")
-        .attr("stroke", theme.colors.black)
         .attr("stroke-width", "1")
     // draw with the line
     this.update()
@@ -30,13 +37,13 @@ class Circular {
   resize(width, height) {
     const { svg, props } = this
 
-    svg.attr('width', width)
-      .attr('height', height)
-
     props.width = width
-    props.height = height
+    props.height = width * 0.4 > 300 ? 600 : 300
     props.amplitude = width * 0.4 > 300 ? 300 : width * 0.4
 
+    svg.attr('width', props.width)
+      .attr('height', props.height)
+
     this.update()
   }
 
@@ -51,7 +58,19 @@ class Circular {
   }
 
   setCount(count) {
+    const { svg, props } = this
     this.props.count = count
+
+    const data = Array.from({ length: count }, (_, i) => i)
+
+    svg.selectAll('path')
+      .data(data)
+      .join(
+        enter => enter
+          .append("path")
+          .attr("fill", "none")
+          .attr("stroke-width", "1"),
+      )
     this.update()
   }
 
@@ -68,19 +87,24 @@ class Circular {
   setColor(color) {
     const { svg } = this
 
-    svg.selectAll('path.lines')
+    svg.selectAll('path')
       .attr("fill", color)
   }
 
-  getDrawer() {
+  setSpectrum(spectrum) {
+    this.props.spectrum = spectrum
+    this.update()
+  }
+
+  getDrawer(batch) {
     const { mode, count, amplitude, offset, frequency, multiplierX, multiplierY, width, height } = this.props
 
     const originX = (width/2)
     const originY = (height/2)
 
-    const arc = Array.from({ length: count }, (_, i) => [
-      simpleHarmonicMotionSin(originX, amplitude, multiplierX * frequency, i - offset),
-      simpleHarmonicMotionCos(originY, amplitude, multiplierY * frequency, i - offset)
+    const arc = Array.from({ length: 1 + 1 }, (_, i) => [
+      simpleHarmonicMotionSin(originX, amplitude, multiplierX * frequency, (i + batch) - offset),
+      simpleHarmonicMotionCos(originY, amplitude, multiplierY * frequency, (i + batch) - offset)
     ])
 
     return d3.line()(arc)
@@ -89,9 +113,14 @@ class Circular {
   update() {
     const { svg } = this
 
-    const drawer = this.getDrawer()
-    svg.selectAll('path.lines')
-        .attr("d", drawer)
+    svg.selectAll('path')
+        .attr("d", d => this.getDrawer(d))
+        .attr("stroke", d => getSpectrumPosition(this.props.spectrum + (d/(this.props.count * 0.4))))
+  }
+
+  getSvg() {
+    const { svg } = this
+    return svg
   }
 }