Create a simple directed acyclic graph by double-clicking! (made with p5.js)

p5_dag.js

function setup() {
  createCanvas(400, 400);
  angleMode(DEGREES);
  
  line(2,2,2,400);
  line(2,2,400,2);
  
}

function arrow(x,y,angle){
  
  beginShape(LINES);
  vertex(x,y);
  vertex(x+13*cos(180+angle+25),y+13*sin(180+angle+25));
  vertex(x,y);
  vertex(x+13*cos(180+angle-25),y+13*sin(180+angle-25));
  endShape();
  
}

class Node {
	constructor(x,y){
		this.x = x;
		this.y = y;
	}
	
	angleToNode(node){
		let m = (this.y-node.y)/(this.x-node.x);
    if(node.x > this.x) return atan(m);
    else return 180+atan(m);
	}
  
  connect(dest){
    let node1=this;
    let node2=dest;
    if(!(node1 instanceof Node && node2 instanceof Node))
    	return false;
  
  	let angle = node1.angleToNode(node2)
  	line(node1.x + (radius*cos(angle)) ,node1.y + (radius*sin(angle)),node2.x + (radius*cos(angle+180)) ,node2.y + (radius*sin(angle+180)));
 		arrow(node2.x + (radius*cos(angle+180)) ,node2.y + (radius*sin(angle+180)),angle);
  
  	return true; 
  }
  
}

let new_node;
let radius = 30;
let nodes = []
i=-1;
let redraw = false;

function draw() {
 
  background(255);
  
	if(typeof new_node == 'object'){
		i++;
		ellipse(nodes[i].x,nodes[i].y,radius*2);
		new_node=0;
	}
  
  for(c=0; c<=i; c++){
    ellipse(nodes[c].x,nodes[c].y,radius*2);
    if(c>=1)
    nodes[c-1].connect(nodes[c]);
  }
	
}

function doubleClicked() {
  new_node = new Node(mouseX,mouseY);
	nodes.push(new_node);
  redraw=true;
}