Network animation for DumbTF.

network_animation_neuron_1.js

const done = false;
let moveX1 = 1;
let moveX2 = 1;
const recWidthPad=20+2;

function setup() {
  createCanvas(600, 400);
  noStroke();
}

function draw() {
  if (!done) {
    fill("orange");
    background(255);
    rect(moveX1, 20, 20, 5);
    rect(moveX1-recWidthPad, 20, 20, 5);
    rect(moveX1-recWidthPad*2, 20, 20, 5);
    rect(moveX1-recWidthPad*3, 20, 20, 5);
    rect(moveX1-recWidthPad*4, 20, 20, 5);
    
    fill("blue");
    rect(moveX1, 30, 20, 5);
    rect(moveX1-recWidthPad, 30, 20, 5);
    rect(moveX1-recWidthPad*2, 30, 20, 5);
    rect(moveX1-recWidthPad*3, 30, 20, 5);
    rect(moveX1-recWidthPad*4, 30, 20, 5);
    if(moveX1>=width)
      moveX1=1;
    moveX1 += 1;
    loop();
  } else
    background(111);
}

let nodes=[];
let paths=[];
let filtered=[];
let exponent = 4; // Determines the curve
let x = 0.0; // Current x-coordinate
let y = 0.0; // Current y-coordinate
let step = 0.01; // Size of each step along the path
let pct = 0.0;
function setup() {
createCanvas(600, 400);
noStroke();
noLoop();
const numNodes = 2;
for(let i=0;i<numNodes;i++)
nodes.push(new Node());
}

function search(myArray,idx){
for (var i=0; i < myArray.length; i++) {
if (myArray[i].idx === idx) {
return true;
}
}
return false;
}

function draw() {
filtered=[];
console.log("Length:"+paths.length);
nodes.forEach((node,idx) => {
node.draw();
console.log("Node "+(idx+1)+":");
node.distBetweenNode(nodes.slice(idx),idx);
// let i=0;
const arr = paths.filter(path => path.idx === idx);
filtered.push(arr);
});
console.log("ll:"+filtered.length);
filtered.forEach(nodePaths => {
fill(255);
nodePaths.forEach(path=>{

  circle(path.x,path.y,5);
})

})
}

class Node{
constructor(){
this.pos = createVector(random(300),random(200));
this.size = 40;
this.end=[];
this.pct=[];
}

draw(){
fill('rgb(0,144,240)');
noStroke();
circle(this.pos.x,this.pos.y,this.size);
}

distBetweenNode(nodes,idx){
let contains = search(paths,idx);
if(contains)
return;
let distance;
nodes.forEach(node => {
distance = dist(this.pos.x,this.pos.y,node.pos.x,node.pos.y);
//if(distance!=0 && distance>this.size){
stroke(255, 102, 0);
noFill();
bezier(this.pos.x,this.pos.y,this.pos.x+distance/2,this.pos.y+distance/2,this.pos.x+distance/2,this.pos.y+distance/2,node.pos.x,node.pos.y);
fill('rgb(0,144,240)');
let steps = 100;
for (let i = 0; i < steps; i++) {
let t = i / steps;
let x = bezierPoint(this.pos.x, this.pos.x+distance/2, this.pos.x+distance/2, node.pos.x, t);
let y = bezierPoint(this.pos.y,this.pos.y+distance/2, this.pos.y+distance/2, node.pos.y,t);
paths.push({
idx:idx,
x:x,
y:y
});
}
//}
});
}
}

/*

let beginX = 20.0; // Initial x-coordinate
let beginY = 10.0; // Initial y-coordinate
let endX = 570.0; // Final x-coordinate
let endY = 320.0; // Final y-coordinate
let distX; // X-axis distance to move
let distY; // Y-axis distance to move
let exponent = 4; // Determines the curve
let x = 0.0; // Current x-coordinate
let y = 0.0; // Current y-coordinate
let step = 0.01; // Size of each step along the path
let pct = 0.0; // Percentage traveled (0.0 to 1.0)

function setup() {
createCanvas(720, 400);
noStroke();
distX = endX - beginX;
distY = endY - beginY;
}

function draw() {
fill(0, 2);
rect(0, 0, width, height);
pct += step;
if (pct < 1.0) {
x = beginX + pct * distX;
y = beginY + pow(pct, exponent) * distY;
}else{
pct=0.0;
}
fill(255);
ellipse(x, y, 5, 5);
}

function mousePressed() {
pct = 0.0;
beginX = x;
beginY = y;
endX = mouseX;
endY = mouseY;
distX = endX - beginX;
distY = endY - beginY;
}

*/