Improvements and additions to make smoother plots

helpers.js

@@ -1,16 +1,19 @@
+
 defaultControls = [
   {label: 'Inverted', type:'checkbox'},
   {label: 'Brightness', value: 0, min: -100, max: 100},
   {label: 'Contrast', value: 0, min: -100, max: 100},
   {label: 'Min brightness', value: 0, min: 0, max: 255},
   {label: 'Max brightness', value: 255, min: 0, max: 255},
+  {label: 'Blur radius', value: 0, min: 0, max: 50}
 ]
 
-
 // Apply brightness / contrast and flatten to monochrome
 // taken from squigglecam
 
 function pixelProcessor(config, imagePixels){
+
+  importScripts('external/stackblur.min.js')
 
   const width = parseInt(config.width);
   const contrast = parseInt(config.Contrast);
@@ -19,7 +22,12 @@ function pixelProcessor(config, imagePixels){
   const maxBrightness = parseInt(config['Max brightness']);
   const black = config.Inverted;
   let contrastFactor = (259 * (contrast + 255)) / (255 * (259 - contrast));
-
+  const blurRadius = parseInt(config['Blur radius']);
+  console.log(blurRadius);
+  if(blurRadius!=0){
+    console.log("blurring");
+    StackBlur.imageDataRGB(imagePixels, 0,0,config.width,config.height, blurRadius);
+  }
   return function(x, y) {
 
     let b;

main.htm

@@ -358,8 +358,8 @@ <h2>Plotterfun</h2>
 function resetSVG(){
   // erase existing contents
   let c; while (c = svg.firstChild) svg.removeChild(c)
-  svg.setAttribute("width",config.width)
-  svg.setAttribute("height",config.height)
+  svg.setAttribute("width",config.width+80)
+  svg.setAttribute("height",config.height+20)
   svg.setAttribute("viewbox", `0 0 ${config.width} ${config.height}`)
   svg.style.background=config.Inverted?"black":"white";
   window.mainpath=document.createElementNS(svgNS, "path");

squiggleLeftRight.js

@@ -1,11 +1,13 @@
 importScripts('helpers.js')
 
 postMessage(['sliders', defaultControls.concat([
-  {label: 'Frequency', value: 150, min: 5, max: 256},
+  {label: 'Frequency', value: 150, min: 5, max: 512},
   {label: 'Line Count', value: 50, min: 10, max: 200},
   {label: 'Amplitude', value: 1, min: 0.1, max: 5, step: 0.1},
-  {label: 'Sampling', value: 1, min: 0.5, max: 2.9, step: 0.1},
-  {label: 'Join Ends', type:'checkbox'},
+  {label: 'Sampling', value: 1, min: 0.5, max: 2.9, step: 0.1},,
+  {label: 'Modulation', type:'select', options:['both', 'AM', 'FM']},
+  {label: 'Join Ends', type:'select', options:['No', 'Straight','Straight Smooth', 'Round', 'Pointy']}
+
 ])]);
 
 
@@ -19,26 +21,51 @@ onmessage = function(e) {
   const spacing = parseFloat(config.Sampling);
   const amplitude = parseFloat(config.Amplitude);
   const frequency = parseInt(config.Frequency);
-  const joined = config['Join Ends']
+  const joined = !(config['Join Ends']=='No');
+  const smooth = config['Join Ends']=='Straight Smooth'|| config['Join Ends']=='Round'|| config['Join Ends']=='Pointy';
+  const round = config['Join Ends']=='Round';
+  const pointy = config['Join Ends']=='Pointy';
 
   let squiggleData = [];
   if (joined) squiggleData[0]=[]
   let toggle = false;
   let horizontalLineSpacing = Math.floor(height / lineCount);
-
+  let ra=horizontalLineSpacing/2;
+
   for (let y = 0; y < height; y+= horizontalLineSpacing) {
     let a = 0;
     toggle=!toggle;
     currentLine = [];
-    currentLine.push([toggle?0:width, y]);
+    currentLine.push([ra+(toggle?0:width), y]);
 
-    for (let x = toggle? spacing: width-spacing; (toggle && x <= width) || (!toggle && x >= 0); x += toggle?spacing:-spacing ) {
+    for (let x = toggle? spacing: width-spacing; (toggle && x <= width) || (!toggle && x > 0); x += toggle?spacing:-spacing ) {
       let z = getPixel(x, y)
-      let r = amplitude * z / lineCount;
-      a += z / frequency;
-      currentLine.push([x, y + Math.sin(a)*r]);
+      let r = amplitude * (config.Modulation=="AM" || config.Modulation=="both"?z:100) / lineCount;
+      if(smooth)
+        r*=Math.min(x/50/spacing,1)*Math.min((width-x)/50/spacing,1)
+      a += (config.Modulation=="FM" || config.Modulation=="both"?z:100) / frequency;
+      currentLine.push([ra+x, y + Math.sin(a)*r]);
+    }
+    if(pointy){
+      if(toggle)
+        currentLine.push([width+ra*2,y+ra]);
+      else
+        currentLine.push([0,y+ra]);
+    }
+    if(round){
+      if(toggle){
+         for (let x = width;x <= width+ra; x += spacing ) 
+            currentLine.push([x+ra,y+ra-Math.sqrt(ra*ra-(x-width)*(x-width))]);
+         for (let x = width+ra;x >= width; x -= spacing ) 
+             currentLine.push([x+ra,y+ra+Math.sqrt(ra*ra-(x-width)*(x-width))]);
+       }
+       else{
+          for (let x = ra;x >= 0; x -= spacing ) 
+             currentLine.push([x,y+ra-Math.sqrt(ra*ra-(ra-x)*(ra-x))]);
+          for (let x = 0;x <= ra; x += spacing ) 
+             currentLine.push([x,y+ra+Math.sqrt(ra*ra-(ra-x)*(ra-x))]);
+       }
     }
-
     if (joined)
       squiggleData[0]=squiggleData[0].concat(currentLine);
     else