3e:null 3f:["$","title",null,{"children":"Bitmap to Archimedian spiral SVG | Maksim Surguy | Observable"}] 45:Te86,{ var width var height const svgHTML = html `` const svg = d3.select(svgHTML) svgSettings.strokeColor = plotSettings.strokeColor svgSettings.strokeWidth = plotSettings.strokeWidth svgSettings.backgroundColor = plotSettings.backgroundColor // main vars let img = new Image(); img.crossOrigin = "anonymous"; img.src = imageURL img.onload = function(){ canvas.width = img.width canvas.height = img.height width = img.width; height = img.height // svg.setAttributeNS(null,'width',img.width + (plotSettings.padding * 2)); // svg.setAttributeNS(null,'height',img.height + (plotSettings.padding * 2)); // svg.setAttributeNS(null,'style','background:' + svgSettings.backgroundColor); svg .attr('width',img.width + (plotSettings.padding * 2)) .attr('height',img.height + (plotSettings.padding * 2)) .attr('style', 'background:' + svgSettings.backgroundColor) // border //svg.appendChild(rect(width + (plotSettings.padding * 2),height+(plotSettings.padding * 2))) let ctx = canvas.getContext('2d') let img_cx = img.width/2 let img_cy = img.height/2 let svg_cx = img_cx + plotSettings.padding let svg_cy = img_cy + plotSettings.padding let getPixel = function(x,y) { if ((x<0) || (x>img.width-1) || (y<0) || (y>img.height-1)){ var px = { data:[false,false,false,false] } } else { var px = ctx.getImageData(x, y, 1, 1); } return(px.data); } ctx.drawImage(img, 0, 0); let inner_radius = 1 let outer_radius = img.width < img.height ? img.width : img.height // outer_radius = 400 let p = 0 // point number let theta = 0 // will be current radian rotation let px, py // will be most recent spiral point let current_radius = inner_radius // current radius let polarity = 1 let polylines = [[]]; let constrain, delta, deviated_radius while ( current_radius < outer_radius ) { polarity = -polarity let ax = Math.floor(Math.sin(theta) * current_radius + img_cx) let ay = Math.floor(-Math.cos(theta) * current_radius + img_cy) let colour = getPixel(ax,ay)[0] if (colour !== false) { delta = plotSettings.invert ? colour : (255 - colour) deviated_radius = current_radius + (polarity * Math.PI * plotSettings.radialAmplitude * (delta/255)) px = Math.sin(theta) * deviated_radius + svg_cx py = -Math.cos(theta) * deviated_radius + svg_cy } else { delta = false } constrain = false if (plotSettings.constrainToCircle){ if (current_radius > width/2) { constrain = true } } if ((colour !== false) && (!constrain)) { polylines[p].push([px,py]) } else { p ++ polylines[p] = [] }; let circumference = 2 * Math.PI * current_radius let steps = circumference / plotSettings.radialIncrease current_radius = current_radius + (2 * Math.PI / steps) * plotSettings.detail theta -= (2 * Math.PI / steps) } svg.append('g') .append('path') .datum(polylines[0]) .attr("fill", "none") .attr("stroke-width", svgSettings.strokeWidth) .attr("stroke", svgSettings.strokeColor) .attr('d', d => line(d)) // for (let i = 0; i < polylines.length; i ++) { // if (polylines[i].length > 1) { // svg.appendChild(polyline(polylines[i])) // } // } } // let svgdownload = wrap_svg_downloadable(svgHTML) return svgHTML; }46:[] 43:{"id":"9a17cfc9996093f1","slug":null,"title":"Bitmap to Archimedian spiral SVG","thumbnail":"9deb0dd234d820b186bac5cd198400ca387b8e7ec2b425136bc67fbbb8753b1d","access_level":"public","create_time":"$D2020-02-13T18:23:57.213Z","update_time":"$D2020-02-13T23:17:50.483Z","view_time":null,"first_public_time":"$D2022-12-01T06:48:18.338Z","has_unpublished_edits":null,"fork":{"id":"8c3b0ef466b21600","slug":"bitmap-to-archimedian-spiral-svg","title":"Bitmap to Archimedian spiral SVG","owner":{"id":"125073b94280434c","login":"netpraxis","name":"Neil Jenkins"}},"stars":0,"starred":false,"owner":{"type":"team","id":"b70866d97388e132","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":"starter_2024","bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false},"version":602,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"bio":"Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy","following":false}],"members":[{"type":"individual","id":"10a57afa0a06ca21","login":"msurguy","name":"Maksim Surguy","avatar_url":"https://avatars-next.observableusercontent.com/7e9cac47fcc83c2b69d765c4e799d813f2e158dca84a9f1c759db77ffa9f20d7","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Bitmap to Archimedian spiral SVG","cells":[{"id":0,"value":"md`# Bitmap to Archimedian spiral SVG`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md `An Archimedian spiral waveform using the colour data of the equivalent point in a bitmap image to set the amplitude of a waveform along the line. Output as an SVG image for computer plotters.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"canvas = {\n var canvas = document.createElement(\"canvas\")\n canvas.setAttributeNS(null,'style','width:20%;')\n return canvas\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"viewof imageURL = {\n let img = select({\n title: \"Select image\",\n options: [\n { label: \"Laurie Anderson\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/laurie-anderson.jpg\"},\n { label: \"John Lennon\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/john-lennon.jpg\"},\n { label: \"Samuel Beckett\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/samuel-beckett.jpg\" },\n { label: \"Marilyn Monroe\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/marilyn-monroe.jpg\" },\n { label: \"Salvador Dali\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/salvador-dali-square.png\" },\n { label: \"Siouxsie Sioux\", value: \"https://raw.githubusercontent.com/netpraxis/resources/master/siouxsie-sioux.jpg\" }\n ],\n value: \"\"\n });\n return img;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"mutable counter = 0","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":486,"value":"line = d3.line().defined(function(d) { return !isNaN(d[1]); }).curve(d3[curve]) // .curve(d3.curveCardinal.tension(0.4))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":576,"value":"viewof curve = html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"$45","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":302,"value":"plotSettings = {\n let plotSettings = {};\n \n // svg output settings\n plotSettings.backgroundColor = \"#fff\"\n plotSettings.strokeColor = \"#0FF0F0\"\n plotSettings.strokeWidth = 1\n plotSettings.padding = 20\n \n // amplitude factor for the waveform, default 1 \n plotSettings.radialAmplitude = 1\n \n // distance along the circumference of the spiral to next point, default 2\n plotSettings.radialIncrease = 2\n \n // growth factor of spiral - use less than 1 for more detail eg 0.5+, default 1\n plotSettings.detail = 1.4\n\n // invert for light ink on dark\n plotSettings.invert = false;\n \n // stop spiral when it reaches the edge of the frame\n plotSettings.constrainToCircle = true;\n \n return plotSettings\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2,"value":"import {svgSettings, svgElem, polyline, rect} from \"@netpraxis/svg_lib\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"import { wrap_svg_downloadable } from '@kelleyvanevert/little-things'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"import {select, slider} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"d3 = require(\"d3@5\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"