Add files via upload

js/sketch.js

@@ -0,0 +1,200 @@
+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;
+
+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) {
+		probaController = gui.add(settings,"removalProbability",0,1,0.1).name("Fraction removed").onFinishChange(updateDisplayedFaces)
+	}else {
+		gui.remove(probaController)
+	}
+})
+
+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(),"],")
+// }