md`# Inktober 01 - grid`
viewof slider_amplitude_x = html`<input type=range min="0" max="100">`
viewof slider_amplitude_y = html`<input type=range min="0" max="100">`
{
const svgElem = document.createElementNS(xmlns, "svg");
svgElem.setAttributeNS(null,'width',width);
svgElem.setAttributeNS(null,'height',height);
const border = document.createElementNS(xmlns, "rect");
border.setAttributeNS(null, 'width', width);
border.setAttributeNS(null, 'height', height);
border.setAttributeNS(null, 'fill', 'none');
border.setAttributeNS(null, 'style', 'stroke:rgb(0,0,0);stroke-width:1;');
svgElem.appendChild(border)
const d = 10
const margin = 50
for (var y=margin; y<height-margin; y+=d){
var points=[]
for (var x=margin; x<width-margin; x+=d){
points.push([x+(slider_amplitude_x*Math.cos((x+y)/width*Math.PI*2)),y+(slider_amplitude_y*Math.sin((x+y)/width*Math.PI*2))]);
}
var path = polyline(points);
svgElem.appendChild(path)
}
for (var x=margin; x<width-margin; x+=d){
var points=[]
for (var y=margin; y<height-margin; y+=d){
points.push([x+(slider_amplitude_x*Math.cos((x+y)/width*Math.PI*2)),y+(slider_amplitude_y*Math.sin((x+y)/width*Math.PI*2))]);
}
var path = polyline(points);
svgElem.appendChild(path)
}
return svgElem;
}
function polyline(path) {
const node = document.createElementNS(xmlns, "polyline");
var path_points = ''
for (var i=0; i<path.length; i++){
const x = path[i][0]
const y = path[i][1]
path_points += x+','+y+' ';
}
path_points = path_points.slice(0,-1);
node.setAttributeNS(null, 'points', path_points);
node.setAttributeNS(null, 'fill', 'none');
node.setAttributeNS(null, 'style', 'stroke:rgb(0,0,0);stroke-width:1;');
return node;
}
width = 842;
height = 842;
xmlns = "http://www.w3.org/2000/svg";
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.
