polyomavirus-bonds-animation/js/sketch.js

let camera

let size = 200
let offsetFactor = 1.07

let removedBondTypes = []
let displayedFaces = []
let settings = {
	displayPentagons: true,
	displayHexagons: true,
	displayNetwork: true,
	
	pentagonColour: "#800080",
	hexagonColour: "#FFFFFF",
	
	edgesWeight: 1,
	edgesColour: "#646464",
	
	networkEdgesWeight: 2,
	networkAcolour: "#fA0000",
	networkBcolour: "#0064F0",
	networkCcolour: "#FAAC10",
	networkNodesSize: 15,
	networkNodesColour: "#000000",
	
	backgroundColour: "#FFFFFF",
	
	displayType: 0,	// 0: display all faces, 1: randomly remove some faces, 2: display one pentamer and the surrounding tiles
	
	removalProbability: 0.5,
}

//GUI

let probaController = null;

let gui = new dat.GUI({name: 'Polyomavirus interaction network',width: 300});
let tilesGui = gui.addFolder('Tiles');
var networkGui = gui.addFolder('Network');

gui.addColor(settings,"backgroundColour").name("background")
gui.add(settings,"displayType",0,2,1).name("display").onFinishChange(() => {
	updateDisplayedFaces();
	if(settings.displayType == 1) {
		if(probaController == null) {
			probaController = gui.add(settings,"removalProbability",0,1,0.1).name("Fraction removed").onFinishChange(updateDisplayedFaces)
		}
	}else {
		gui.remove(probaController)
		probaController = null;
	}
})

tilesGui.add(settings, 'displayPentagons', 0, 1, 1).name("show pentagons");
tilesGui.add(settings, 'displayHexagons', 0, 1, 1).name("show hexagons");
tilesGui.add(settings, 'edgesWeight', 0, 10, 1).name("edges weight");
tilesGui.addColor(settings, 'pentagonColour').name("pentagons colour");
tilesGui.addColor(settings, 'hexagonColour').name("hexagons colour");

networkGui.add(settings,'displayNetwork',0,1,1).name("show network")
networkGui.add(settings, 'networkNodesSize', 0, 50, 1).name("nodes size");
networkGui.add(settings,'networkEdgesWeight',0,10,1).name("edges weight")
networkGui.addColor(settings, 'networkBcolour').name("B bonds colour");
networkGui.addColor(settings, 'networkAcolour').name("A bonds colour");
networkGui.addColor(settings, 'networkCcolour').name("C bonds colour");


function updateDisplayedFaces() {
	displayedFaces = []
	for(let i = 0; i < 72; i++) {
		if (settings.displayType == 1 && Math.random() > settings.removalProbability) {
			displayedFaces.push(i);
		}else if(settings.displayType == 0) {
			displayedFaces.push(i);
		} 
	}
	if(settings.displayType == 2) {
		displayedFaces = [65,14,15,28,43,46];
	}
}

function setup() {
	updateDisplayedFaces()
	createCanvas(windowWidth, windowHeight, WEBGL);
	camera = createCamera();	
	camera.setPosition(328.0194072520545,-282.51371090543233,9.448365808553215)
	camera.lookAt(0,0,0)
}
	
function midPoint(face) {
	let x = 0;
	let y = 0;
	let z = 0;
	for(let pid of face) {
		let [fx,fy,fz] = NODES[pid]
		x += fx;
		y += fy;
		z += fz;
	}
	x /= face.length
	y /= face.length
	z /= face.length
	return [x,y,z]
}

function draw() {
	smooth();
	orbitControl(3,3)
	background(settings.backgroundColour);

	//Set lighting
	ambientLight(20,20,20);
	ambientMaterial(255);
	strokeWeight(3);
	pointLight(255, 255, 255, 220, -220, 220);
	directionalLight(255, 255, 255, -1, 1, -1);
	

	//Draw the hexamers and pentamers
	for(let points of FACES) {
		if(displayedFaces.indexOf(FACES.indexOf(points)) != -1 && ((points.length == 5 && settings.displayPentagons) || (points.length == 6 && settings.displayHexagons) )){
			noFill();
			strokeWeight(settings.edgesWeight);
			stroke(settings.edgesColour)
			beginShape();
			if(points.length == 5) {
				fill(settings.pentagonColour)
			}else {
				fill(settings.hexagonColour)
			}
			for(id of points) {
				let [x,y,z] = NODES[id]
				vertex(x*size,y*size,z*size)	
			}
			endShape(CLOSE)
		}
	}


	//Draw the interaction network
	for(let [id1,id2,type] of BONDS) {
		if(removedBondTypes.indexOf(type) == -1 && displayedFaces.indexOf(id1) != -1 && displayedFaces.indexOf(id2) != -1 && settings.displayNetwork){
			strokeWeight(settings.networkEdgesWeight);
			if(type==0) {
				stroke(settings.networkAcolour)
			}else if (type == 1) {
				stroke(settings.networkBcolour)
			}else {
				stroke(settings.networkCcolour)
			}
			beginShape();
			[x1,y1,z1] = midPoint(FACES[id1]);
			[x2,y2,z2] = midPoint(FACES[id2]);

			vertex(size*x1 * offsetFactor,size*y1 * offsetFactor,size*z1 * offsetFactor);
			vertex(size*x2 * offsetFactor,size*y2 * offsetFactor,size*z2 * offsetFactor);
			endShape()
			stroke(settings.networkNodesColour)
			strokeWeight(settings.networkNodesSize)
			point(size*x1 * offsetFactor,size*y1 * offsetFactor,size*z1 * offsetFactor);
			point(size*x2 * offsetFactor,size*y2 * offsetFactor,size*z2 * offsetFactor);
		}
	}
}

function mouseDragged(){
	orbitControl();
}

// function getAdj(id) {
// 	let res = []
// 	let S = ""
// 	for(let n of FACES[id]) {
// 	  for(fid in FACES) {
// 		if(FACES[fid].indexOf(n) != -1 && res.indexOf(fid) == -1) {
// 		  res.push(fid)
// 		  if(fid > id) {
// 			  S += "//	[" + id + "," + fid + ",2],\n"
// 		  }
// 		}
// 	  }
// 	}
// 	console.log(S)
// 	return S
//   }

// function nodeIndex(x,y,z) {
// 	P = {x,y,z}
// 	return NODES.findIndex(({x,y,z}) => {
// 		let D = (x - P.x) * (x - P.x) + (y - P.y) * (y - P.y) + (z - P.z) * (z - P.z)
// 		return D < 1e-3
// 	})
// }
// EDGES_ = []
// for(let {x1,y1,z1,x2,y2,z2} of EDGES) {
// 	let i1 = nodeIndex(x1,y1,z1)
// 	let i2 = nodeIndex(x2,y2,z2)
// 	if(i1 == -1) {
// 		console.log({x1,y1,z1,x2,y2,z2})
// 	}
// 	EDGES_.push([i1,i2])
// 	// console.log("[",[nodeIndex(x1,y1,z1),nodeIndex(x2,y2,z2)].toString(),"],")
// }