Basic representation of a neural network layer in web canvas

network_animation_neuron_2.js

let nodes=[];
function setup() {
  createCanvas(600, 400);
  const numNodes = 3;
  for(let i=0;i<numNodes;i++)
    nodes.push(new Node());
}

function draw() {
  nodes.forEach((node,idx) => {
    node.draw();
    console.log("Node "+(idx+1)+":");
    node.distBetweenNode(nodes.slice(idx));
  });
}

class Node{
  constructor(){
    this.pos = createVector(random(300),random(200));
    this.size = 40;
  }
  
  draw(){
    fill('rgb(0,144,240)');
    noStroke();
    circle(this.pos.x,this.pos.y,this.size);
  }
  
  distBetweenNode(nodes){
    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);
        curve(this.pos.x,this.pos.y,this.pos.x,this.pos.y,node.pos.x,node.pos.y,node.pos.x,node.pos.y);
      }
    });
  }
}

network_animation_neuron_bezier.js

let nodes=[];
function setup() {
  createCanvas(600, 400);
  noStroke();
  const numNodes = 3;
  for(let i=0;i<numNodes;i++)
    nodes.push(new Node());
}

function draw() {
  nodes.forEach((node,idx) => {
    node.draw();
    console.log("Node "+(idx+1)+":");
    node.distBetweenNode(nodes.slice(idx));
  });
}

class Node{
  constructor(){
    this.pos = createVector(random(300),random(200));
    this.size = 40;
  }
  
  draw(){
    fill('rgb(0,144,240)');
    noStroke();
    circle(this.pos.x,this.pos.y,this.size);
  }
  
  distBetweenNode(nodes){
    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);
        //curve(this.pos.x,this.pos.y,this.pos.x,this.pos.y,node.pos.x,node.pos.y,node.pos.x,node.pos.y);
        noFill();
        beginShape();
        vertex(this.pos.x, this.pos.y);
        bezierVertex(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);
        endShape();
      }
    });
  }
}