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: 5,
	networkNodesColour: "#666666",
	
	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]
}

let a =true

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

	//Set lighting
	ambientLight(50,50,50);
	ambientMaterial(255);
	strokeWeight(3);
	pointLight(255, 255, 255, 220, -220, 220);
	directionalLight(255, 255, 255, -1, 1, -1);
	directionalLight(100, 100, 100, -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){
			noStroke()
			if(type==0) {
				fill(settings.networkAcolour)
			}else if (type == 1) {
				fill(settings.networkBcolour)
			}else {
				fill(settings.networkCcolour)
			}
			[x1,y1,z1] = midPoint(FACES[id1]);
			[x2,y2,z2] = midPoint(FACES[id2]);
			let v1 = createVector(x1 * size * offsetFactor,y1 * size * offsetFactor,z1 * size * offsetFactor);
			let v2 = createVector(x2 * size * offsetFactor,y2 * size * offsetFactor,z2 * size * offsetFactor);
			let direction = p5.Vector.sub(v2, v1);
			let midpoint = p5.Vector.lerp(v1, v2, 0.5);
			let axis = createVector(0, 1, 0).cross(direction).normalize()
			let angle = direction.angleBetween(createVector(0, 1, 0))
			
			push()
			translate(midpoint.x, midpoint.y, midpoint.z);
			rotate(abs(angle), axis)
			cylinder(settings.networkEdgesWeight, direction.mag(), 7, 1);
			pop()
			
			fill(settings.networkNodesColour)
			push()
			translate(size*x1 * offsetFactor,size*y1 * offsetFactor,size*z1 * offsetFactor);
			sphere(settings.networkNodesSize,7)
			pop()
			push()
			translate(size*x2 * offsetFactor,size*y2 * offsetFactor,size*z2 * offsetFactor);
			sphere(settings.networkNodesSize,7)
			pop()
		}
	}
}

function mouseDragged(){
	orbitControl();
}