Design Technologist, creator of plotterfiles.com and drawingbots.net, open source tools creator. On twitter: @msurguy
mutable counter = 0
line = d3.line().defined(function(d) { return !isNaN(d[1]); }).curve(d3[curve]) // .curve(d3.curveCardinal.tension(0.4))
viewof curve = html`<select>
<option>curveCardinal</option>
<option>curveLinear</option>
<option>curveBasis</option>
<option>curveStep</option>
<option>curveNatural</option>
</select>`
{
var width
var height
const svgHTML = html `<svg height="300" width="500" style="border: 1px solid #ccc" />`
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;
}
d3 = require("d3@5")
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
