md`# Inktober 02 - kinetic
walking myself into a corner`
{
const svg = svgElem(width,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;');
//svg.appendChild(border)
var points = []
function points_build() {
for (var x = 0; x < grid_size_x; x++) {
points[x] = []
for (var y = 0; y < grid_size_y; y++) {
points[x][y] = false;
}
}
}
function points_remaining() {
var remaining = [];
for (var x = 0; x < grid_size_x; x++) {
for (var y = 0; y < grid_size_y; y++) {
if (points[x][y] == false) {
remaining.push([x, y]);
}
}
}
return remaining
}
function point_find() {
var point_start = false;
var point_found = false;
while (point_found == false) {
const x = Math.floor(Math.random()*grid_size_x);
const y = Math.floor(Math.random()*grid_size_y);
if (points[x][y] == false){
points[x][y] = true;
point_found = true;
point_start = [x,y];
}
}
return point_start;
}
points_build()
console.log('points_remaining',points_remaining().length)
while (points_remaining().length>1) {
var draw = false;
var point = point_find();
var x = point[0];
var y = point[1];
console.log(x,y)
points[x][y] = true;
while (draw == false) {
var end = 1000;
var points_list = [[x*scale,y*scale]]
var points_possible = []
while (end >0) {
points_possible = []
if ((x>0) && (points[x-1][y]==false)){
points_possible.push([x-1,y]);
}
if ((x<grid_size_x-1) && (points[x+1][y]==false)){
points_possible.push([x+1,y]);
}
if ((y>0) && (points[x][y-1]==false)){
points_possible.push([x,y-1]);
}
if ((y<grid_size_y-1) && (points[x][y+1]==false)){
points_possible.push([x,y+1]);
}
if (points_possible.length == 0) {
end = 0;
} else {
var p = Math.floor(points_possible.length*Math.random());
var nx = points_possible[p][0];
var ny = points_possible[p][1];
x = nx;
y = ny;
points_list.push([nx*scale,ny*scale]);
points[x][y]=true;
points[nx][ny] = true;
end--;
}
}
draw = true;
//console.log("polyline(points_list).length",points_list.length)
if(points_list.length>2){
svg.appendChild(polyline(points_list))
}
}
}
return svg;
}
import {svgElem, polyline} from "@netpraxis/svg_lib"
viewof grid_size_x = html`<input type=range min="10" max="400" value="200">`
viewof grid_size_y = html`<input type=range min="10" max="400" value="200">`
width = grid_size_x * scale;
height = grid_size_y * scale;
scale = 3;
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.
