Archive talk:000/Nodes

Start of something

Latest comment: 12 November 20221 comment1 person in discussion
<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>
206.253.78.9 20:45, 12 November 2022 (EST)Reply[reply]