From 08452fd2cda89e513655edfe732f74bbcbcb9905 Mon Sep 17 00:00:00 2001 From: christoph Date: Mon, 8 Jun 2020 20:23:58 +0200 Subject: [PATCH 1/4] added blurring as a preprocessing step to makechanges smoother --- helpers.js | 12 ++++++++++-- 1 file changed, 10 insertions(+), 2 deletions(-) diff --git a/helpers.js b/helpers.js index d079544..c275b4d 100644 --- a/helpers.js +++ b/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; From 010d91de0c5b60654032f28db15cf8ec1733e42f Mon Sep 17 00:00:00 2001 From: christoph Date: Tue, 9 Jun 2020 23:52:26 +0200 Subject: [PATCH 2/4] port AM/FM switch to squiggLeftRight --- squiggleLeftRight.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/squiggleLeftRight.js b/squiggleLeftRight.js index 0f724a5..dc94399 100644 --- a/squiggleLeftRight.js +++ b/squiggleLeftRight.js @@ -4,8 +4,10 @@ postMessage(['sliders', defaultControls.concat([ {label: 'Frequency', value: 150, min: 5, max: 256}, {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:'checkbox'} + ])]); @@ -34,8 +36,8 @@ onmessage = function(e) { 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; + let r = amplitude * (config.Modulation=="AM" || config.Modulation=="both"?z:100) / lineCount; + a += (config.Modulation=="FM" || config.Modulation=="both"?z:100) / frequency; currentLine.push([x, y + Math.sin(a)*r]); } From f6db2e869e6251b304bc931140c65e7b1665f35d Mon Sep 17 00:00:00 2001 From: christoph Date: Wed, 10 Jun 2020 16:41:33 +0200 Subject: [PATCH 3/4] make more space for nice line joins --- main.htm | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/main.htm b/main.htm index 815231a..d9c7dfc 100644 --- a/main.htm +++ b/main.htm @@ -358,8 +358,8 @@

Plotterfun

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"); From 64dbf0bd1311cd72ec19d33f00ce0be6f1bec1c8 Mon Sep 17 00:00:00 2001 From: christoph Date: Wed, 10 Jun 2020 16:43:36 +0200 Subject: [PATCH 4/4] add a few new join styles (smooth straight, round, pointy) --- squiggleLeftRight.js | 41 +++++++++++++++++++++++++++++++++-------- 1 file changed, 33 insertions(+), 8 deletions(-) diff --git a/squiggleLeftRight.js b/squiggleLeftRight.js index dc94399..88bdad1 100644 --- a/squiggleLeftRight.js +++ b/squiggleLeftRight.js @@ -1,12 +1,12 @@ 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: 'Modulation', type:'select', options:['both', 'AM', 'FM']}, - {label: 'Join Ends', type:'checkbox'} + {label: 'Join Ends', type:'select', options:['No', 'Straight','Straight Smooth', 'Round', 'Pointy']} ])]); @@ -21,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 * (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([x, y + Math.sin(a)*r]); + 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