Archive talk:000/Nodes
Latest comment: 12 November 2022 by 206.253.78.9 in topic Start of something
Start of something
<html><head><script>
function $(id) { return document.getElementById(id); }
focus = 0;
next = 1;
nodes = [[0,1,0.5]];
connections = [];
function focusOn(i) { focus = i; }
function newNodeFrom(i){
connections.push([i, next]);
nodes[next++]=[nodes[i][0]+Math.random()*0.01, nodes[i][1]+Math.random()*0.01];
}
function newNodeTo(i) {
connections.push([next, i]);
nodes[next++]=[nodes[i][0]+Math.random()*0.01, nodes[i][1]+Math.random()*0.01];
}
function nearest(x,y) {
var which = 0;
var low = 1e36;
for (let i=0; i<nodes.length; i++) {
var dsq = (nodes[i][0] - x)*(nodes[i][0] - x) + (nodes[i][1] - y)*(nodes[i][1] - y);
if (dsq < low) { low = dsq; which = i; }
}
return which;
}
function update() {
nodes[focus][0] *= 0.9;
nodes[focus][1] *= 0.9;
// TODO: arrange other nodes
}
function init() {
var canvas = $("canvas");
canvas.width = document.body.offsetWidth;
canvas.height= document.body.offsetHeight;
}
function draw(timestamp) {
update();
var canvas = $("canvas");
var ctx= canvas.getContext("2d");
var cx = canvas.width *0.5;
var cy = canvas.height*0.5;
var scale = Math.sqrt(cx*cy);
ctx.clearRect(0,0,canvas.width,canvas.height);
ctx.beginPath();
for (let i=0; i<nodes.length; i++) {
var x = cx + nodes[i][0] * scale;
var y = cy - nodes[i][1] * scale;
var c = nodes[i][2] * scale;
ctx.arc(x,y,c,0,2*Math.PI);
}
ctx.stroke();
window.requestAnimationFrame(draw);
}
// TODO: use requestAnimationFrame(): see https://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
</script></head><body onload="draw();">
<canvas id="canvas" style="border:1px dashed"></canvas>
</body></html>