get working with more subtypes

src/features/shapes/image_import/ImageImport.js

@@ -1,24 +1,42 @@
 import { getMachine } from "@/features/machines/machineFactory"
 import Shape from "../Shape"
-import { subtypes } from "./subtypes"
+import { subtypes, getSubtype } from "./subtypes"
 import { centerOnOrigin } from "@/common/geometry"
 
+const hasSetting = (state, setting) => {
+  return getSubtype(state.imageSubtype).settings.includes(setting)
+}
+
 const options = {
   imageSubtype: {
     title: "Type",
     type: "dropdown",
     choices: Object.keys(subtypes),
   },
+  imagePolygon: {
+    title: "Polygon (sides)",
+    min: 3,
+    max: 8,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imagePolygon")
+    },
+  },
   imageFrequency: {
     title: "Frequency",
     min: 5,
     max: 256,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageFrequency")
+    },
   },
   imageLineCount: {
     title: "Line count",
     min: 10,
     max: 200,
     step: 2,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageLineCount")
+    },
   },
   imageAmplitude: {
     title: "Amplitude",
@@ -31,42 +49,62 @@ const options = {
     min: 0.5,
     max: 2.9,
     step: 0.1,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageSampling")
+    },
+  },
+  imageSpacing: {
+    title: "Spacing",
+    min: 1,
+    max: 5,
+    step: 0.5,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageSpacing")
+    },
   },
   imageModulation: {
     title: "Modulation",
     type: "togglebutton",
     choices: ["AM", "FM", "both"],
     isVisible: (layer, state) => {
-      return state.imageSubtype == "squiggle"
+      return hasSetting(state, "imageModulation")
     },
   },
-  imagePolygon: {
-    title: "Polygon (sides)",
-    min: 3,
-    max: 8,
+  imageDirection: {
+    title: "Direction",
+    type: "togglebutton",
+    choices: ["clockwise", "counterclockwise"],
     isVisible: (layer, state) => {
-      return state.imageSubtype == "polyspiral"
+      return hasSetting(state, "imageDirection")
     },
   },
-  imageSpacing: {
-    title: "Spacing",
+  imageStepSize: {
+    title: "Step size",
     min: 1,
-    max: 5,
-    step: 0.5,
+    max: 20,
+    step: 0.1,
     isVisible: (layer, state) => {
-      return state.imageSubtype == "polyspiral"
+      return hasSetting(state, "imageStepSize")
     },
   },
-  imageContrast: {
-    title: "Contrast",
-    min: -100.0,
-    max: 100.0,
+  imageAngle: {
+    title: "Angle",
+    min: 0,
+    max: 360,
+    isVisible: (layer, state) => {
+      return hasSetting(state, "imageAngle")
+    },
   },
   imageBrightness: {
     title: "Brightness",
     min: -100.0,
     max: 100.0,
   },
+  imageContrast: {
+    title: "Contrast",
+    min: -100.0,
+    max: 100.0,
+  },
   imageInverted: {
     title: "Inverted",
     type: "checkbox",
@@ -97,6 +135,9 @@ export default class imageImport extends Shape {
         imageInverted: false,
         imagePolygon: 4,
         imageSpacing: 1,
+        imageDirection: "clockwise",
+        imageStepSize: 5,
+        imageAngle: 0,
       },
     }
   }
@@ -161,6 +202,9 @@ export default class imageImport extends Shape {
       imageInverted,
       imagePolygon,
       imageSpacing,
+      imageDirection,
+      imageStepSize,
+      imageAngle,
     } = state.shape
     const canvas = document.getElementById(`${imageId}-canvas`)
 
@@ -185,22 +229,18 @@ export default class imageImport extends Shape {
       Inverted: imageInverted,
       Polygon: imagePolygon,
       Spacing: imageSpacing,
+      Direction: imageDirection,
+      Angle: imageAngle,
+      StepSize: imageStepSize,
       width: canvas.width,
       height: canvas.height,
     }
 
-    const lines = []
-    let reverse = false
-
-    subtypes[imageSubtype](config, image).forEach((line) => {
-      if (reverse) {
-        line = line.reverse()
-      }
-      lines.push(line)
-      //      reverse = !reverse
-    })
+    const subtype = subtypes[imageSubtype] || subtypes["Squiggle"]
+    const algorithm = subtype.algorithm
+    const vertices = algorithm(config, image)
 
-    return centerOnOrigin(lines.flat())
+    return centerOnOrigin(vertices)
   }
 
   getOptions() {

src/features/shapes/image_import/helpers.js

@@ -40,3 +40,18 @@ export const pixelProcessor = (config, imagePixels) => {
     return Math.max(maxBrightness - b, 0)
   }
 }
+
+export const joinLines = (lines) => {
+  let reverse = false
+  const newLines = []
+
+  lines.forEach((line) => {
+    if (reverse) {
+      line = line.reverse()
+    }
+    newLines.push(line)
+    reverse = !reverse
+  })
+
+  return newLines.flat()
+}

src/features/shapes/image_import/polyspiral.js

@@ -1,13 +1,6 @@
 import { pixelProcessor } from "./helpers"
 import Victor from "victor"
 
-//postMessage(['sliders', defaultControls.concat([
-//  {label: 'Polygon', value: 4, min: 3, max: 8},
-//  {label: 'Frequency', value: 150, min: 5, max: 256},
-//  {label: 'Amplitude', value: 1, min: 0.1, max: 5, step: 0.1},
-//  {label: 'Spacing', value: 1, min: 0.5, max: 5, step: 0.1},
-//])]);
-
 const polyspiral = (config, data) => {
   const getPixel = pixelProcessor(config, data)
   let r = 5

src/features/shapes/image_import/sawtooth.js

@@ -1,4 +1,4 @@
-import { pixelProcessor } from "./helpers"
+import { pixelProcessor, joinLines } from "./helpers"
 import Victor from "victor"
 
 const sawtooth = (config, data) => {
@@ -26,7 +26,7 @@ const sawtooth = (config, data) => {
     lines.push(line)
   }
 
-  return lines
+  return joinLines(lines)
 }
 
 export default sawtooth

src/features/shapes/image_import/spiral.js

@@ -0,0 +1,44 @@
+import { pixelProcessor } from "./helpers"
+import Victor from "victor"
+
+const spiral = (config, data) => {
+  const getPixel = pixelProcessor(config, data)
+  let r = 5
+  let a = 0
+  const cx = config.width / 2
+  const cy = config.height / 2
+  let points = []
+
+  points.push(new Victor(cx, config.height - cy))
+
+  let x = cx,
+    y = cy
+  let radius = 1
+  let theta = 0
+
+  while (x > 0 && y > 0 && x < config.width && y < config.height) {
+    const z = getPixel(x, y)
+    r = config.Amplitude * z * 0.02 * config.Spacing
+    a += z / config.Frequency
+
+    let tempradius = radius + Math.sin(a) * r
+
+    points.push(
+      new Victor(
+        cx + tempradius * Math.sin(theta),
+        config.height - (cy + tempradius * Math.cos(theta)),
+      ),
+    )
+
+    let incr = Math.asin(1 / radius)
+    radius += incr * config.Spacing
+    theta += incr
+
+    x = Math.floor(cx + radius * Math.sin(theta))
+    y = Math.floor(cy + radius * Math.cos(theta))
+  }
+
+  return points
+}
+
+export default spiral

src/features/shapes/image_import/springs.js

@@ -0,0 +1,38 @@
+import { pixelProcessor, joinLines } from "./helpers"
+import Victor from "victor"
+
+const springs = (config, data) => {
+  const getPixel = pixelProcessor(config, data)
+  const direction = config.Direction == "clockwise" ? 1 : -1
+  const pi = Math.PI
+  const freq = ((config.Frequency * config.LineCount) / 2000) * direction
+  const amplitude = config.Amplitude / config.LineCount
+  const incr_x = config.Sampling
+  const incr_y = Math.floor(config.height / config.LineCount)
+  const lines = []
+
+  for (let y = 0; y < config.height; y += incr_y) {
+    let line = []
+    let phase = 0
+
+    for (let x = 0; x <= config.width; x += incr_x) {
+      let a = amplitude * getPixel(x, y)
+
+      phase += freq
+      if (phase > pi) phase -= 2 * pi
+
+      line.push(
+        new Victor(
+          x + a * Math.cos(phase),
+          config.height - (y + a * Math.sin(phase)),
+        ),
+      )
+    }
+
+    lines.push(line)
+  }
+
+  return joinLines(lines)
+}
+
+export default springs

src/features/shapes/image_import/squiggle.js

@@ -1,4 +1,4 @@
-import { pixelProcessor } from "./helpers"
+import { pixelProcessor, joinLines } from "./helpers"
 import Victor from "victor"
 
 const squiggle = (config, data) => {
@@ -27,7 +27,7 @@ const squiggle = (config, data) => {
     lines.push(line)
   }
 
-  return lines
+  return joinLines(lines)
 }
 
 export default squiggle

src/features/shapes/image_import/subtypes.js

@@ -1,9 +1,61 @@
-import squiggle from "./squiggle"
 import sawtooth from "./sawtooth"
+import spiral from "./spiral"
+import springs from "./springs"
+import squiggle from "./squiggle"
 import polyspiral from "./polyspiral"
+import waves from "./waves"
 
 export const subtypes = {
-  squiggle,
-  sawtooth,
-  polyspiral,
+  Squiggle: {
+    algorithm: squiggle,
+    settings: [
+      "imageFrequency",
+      "imageLineCount",
+      "imageAmplitude",
+      "imageSampling",
+      "imageModulation",
+    ],
+  },
+  Spiral: {
+    algorithm: spiral,
+    settings: ["imageFrequency", "imageAmplitude", "imageSpacing"],
+  },
+  "Polygon Spiral": {
+    algorithm: polyspiral,
+    settings: [
+      "imageFrequency",
+      "imagePolygon",
+      "imageLineCount",
+      "imageAmplitude",
+      "imageSpacing",
+    ],
+  },
+  Sawtooth: {
+    algorithm: sawtooth,
+    settings: [
+      "imageFrequency",
+      "imageLineCount",
+      "imageAmplitude",
+      "imageSpacing",
+    ],
+  },
+  Springs: {
+    algorithm: springs,
+    settings: [
+      "imageFrequency",
+      "imageLineCount",
+      "imageAmplitude",
+      "imageSampling",
+      "imageDirection",
+    ],
+  },
+  Waves: {
+    algorithm: waves,
+    settings: ["imageAngle", "imageStepSize"],
+  },
+}
+
+// some protection against bad data
+export const getSubtype = (subtype) => {
+  return subtypes[subtype] || subtypes['Squiggle']
 }