path: root / Year 2 / Computer Graphics with WebGL / Homework 09 - The virus / Homework.html



<head>
	<meta charset="utf-8"/>
	<title>Пластмасови столове</title>

	<script src="webgl-fmi.js"></script>
	<script src="shaders.js"></script>
	
	<script>
		function binom(a, b) {
			function fact(x) {
				var mult = 1;
				while (x > 0) mult *= x--;
				return mult;
			}
			return fact(a) / (fact(a-b) * fact(b));
		}

		var BEZIER_POINTS = 40;
		var CONTROL_POINTS = 5;

		// базисни функции
		var B = [];
		// производни на базисни функции
		var N = [];

		// създаване на базисни и производни на базисни функции
		for (var n = CONTROL_POINTS - 1, i = 0; i < CONTROL_POINTS; i++) {
			var binomCalc = binom(n, i);
			B.unshift(Function("t", `return ${binomCalc} * Math.pow(t, ${i}) * Math.pow(1-t, ${n}-${i})`));
			N.push(Function("t", `return ${binomCalc} * (Math.pow(t, ${i}) * (${n}-${i}) * Math.pow(1-t, ${n}-${i}-1)
			                                             + ${i} * Math.pow(t, ${i}-1) * Math.pow(1-t, ${n}-${i}))`));
		}

		/*
		B[4] = function (t) { return (1-t)*(1-t)*(1-t)*(1-t); }
		B[3] = function (t) { return 4*t*(1-t)*(1-t)*(1-t); }
		B[2] = function (t) { return 6*t*t*(1-t)*(1-t); }
		B[1] = function (t) { return 4*t*t*t*(1-t); }
		B[0] = function (t) { return t*t*t*t; }

		N[0] = function (t) { return 4*(t-1)*(1-t)*(1-t); }
		N[1] = function (t) { return (t-1)*(t-1)*(1-4*t); }
		N[2] = function (t) { return (t-1)*(4*t-2)*t; }
		N[3] = function (t) { return (3-4*t)*t*t; }
		N[4] = function (t) { return 4*t*t*t; }
		*/
		
		// повърхност на Безие - конструктор
		function BezierSurface()
		{
			this.data = [];
			for (var i=0; i<2*BEZIER_POINTS*(BEZIER_POINTS-1); i++)
				this.data.push(0,0,0,0,0,0);
			this.data = new Float32Array(this.data);
			this.buf = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER,this.buf);
			gl.bufferData(gl.ARRAY_BUFFER,this.data, gl.DYNAMIC_DRAW);
			this.n = BEZIER_POINTS;
			this.color = [1,0,0];
		}

		// повърхност на Безие - задаване на 5x5 контролни точки
		BezierSurface.prototype.set = function(p)
		{
			var n = this.n;
			
			// изчислява координатите на точка от повърхността
			function vertexAt(u,v)
			{
				u = u/(n-1);
				v = v/(n-1);
				
				var q = [0,0,0];
				for (var i=0; i < CONTROL_POINTS; i++) // контролни точки по направление u
				for (var j=0; j < CONTROL_POINTS; j++) // контролни точки по направление v
				for (var k=0; k < 3; k++) // координати x,y,z
					q[k] += B[i](u)*B[j](v)*p[i][j][k];
				return q;
			}
			// изчислява нормалния вектор към точка от повърхността
			function normalAt(u,v)
			{
				u = u/(n-1);
				v = v/(n-1);
				
				var nu = [0,0,0];
				var nv = [0,0,0];
				for (var i=0; i < CONTROL_POINTS; i++) // контролни точки по направление u
				for (var j=0; j < CONTROL_POINTS; j++) // контролни точки по направление v
				for (var k=0; k < 3; k++) // координати x,y,z
				{
					nu[k] += N[i](u)*B[j](v)*p[i][j][k];
					nv[k] += B[i](u)*N[j](v)*p[i][j][k];
				}
				return unitVector(vectorProduct(nu,nv));
			}
			
			// обхождане на кривата
			var m=0;
			for (var i=0; i<n-1; i++) // номер на лента
			for (var j=0; j<n; j++) // номер на лента
			{
				var q;
				q = vertexAt(i,j);
				for (var k=0; k<3; k++) this.data[m++] = q[k];
				q = normalAt(i,j);
				for (var k=0; k<3; k++) this.data[m++] = q[k];
				
				q = vertexAt(i+1,j);
				for (var k=0; k<3; k++) this.data[m++] = q[k];
				q = normalAt(i+1,j);
				for (var k=0; k<3; k++) this.data[m++] = q[k];
			}
			gl.bindBuffer(gl.ARRAY_BUFFER,this.buf);
			gl.bufferSubData(gl.ARRAY_BUFFER,0,this.data);
		}
		
		// повърхност на Безие - рисуване
		BezierSurface.prototype.draw = function()
		{
			pushMatrix();
				gl.vertexAttrib3fv(aColor,this.color);
				useMatrix();
				gl.bindBuffer(gl.ARRAY_BUFFER,this.buf);
				gl.enableVertexAttribArray(aNormal);
				gl.enableVertexAttribArray(aXYZ);

				// рисуване на повърхнината
				gl.vertexAttribPointer(aXYZ,3,gl.FLOAT,false,6*FLOATS,0*FLOATS);
				gl.vertexAttribPointer(aNormal,3,gl.FLOAT,false,6*FLOATS,3*FLOATS);
				for (var i=0; i<this.n-1; i++)
					gl.drawArrays(gl.TRIANGLE_STRIP,2*this.n*i,2*this.n);
			popMatrix();
		}


		
		function start( )
		{
			var	canvas = document.getElementById("picasso");
			canvas.addEventListener('webglcontextlost',function(event){event.preventDefault();},false);
			canvas.addEventListener('webglcontextrestored',function(){init();},false);

			init();
			drawFrame();
		}

		var SPIKE_HEIGHT = 1;

		function init()
		{
			gl = getContext("picasso");
			glprog = getProgram(vShader,fShader);
			getVariables();

			gl.enable(gl.DEPTH_TEST);
			gl.clearColor(0.5,0.5,0.5,1);

			identity();
			perspective(30,gl.canvas.width/gl.canvas.height,1,40000);
			gl.uniform1i(uUseNormalMatrix,false);

			gl.uniform3f(uAmbientColor,0.3,0.3,0.3);
			gl.uniform3f(uDiffuseColor,1,1,1);
			gl.uniform3f(uLightDir,0,0,-1);
		
			// стол
			// chair = new BezierSurface();
			// chair.set([
			// 	[[-1, 1, 0], [0,1,0], [1, 1, 0]],
			// 	[[-1, 0, 0], [0,0,0], [1, 0, 0]],
			// 	[[-1, -1, 0], [0,-1,0], [1, -1, 1]],
			// ]);

			points = [];

			function mp(a, b) {
				return [(a[0]+b[0])/2,
				        (a[1]+b[1])/2,
				        (a[2]+b[2])/2];
			}
			function fp(a, b) { // One fourth point
				return mp(a, mp(a, b));
			}

			var c1 = (Math.sqrt(5)-1)/4;
			var c2 = (Math.sqrt(5)+1)/4;
			var s1 = Math.sqrt(10 + 2*Math.sqrt(5))/4;
			var s2 = Math.sqrt(10 - 2*Math.sqrt(5))/4;
			var p = [
				// Център на петоъгълник
				[0,0,0],
				// Върхове на петоъгълник
				[0,1,0],
				[-s1, c1, 0], [s1, c1, 0],
				[-s2, -c2, 0], [s2, -c2, 0],
				// Среди на страни на петоъгълник
				[-s1/2, (c1+1)/2, 0], [s1/2, (c1+1)/2, 0],
				[(-s1-s2)/2, (c1-c2)/2, 0], [(s1+s2)/2, (c1-c2)/2, 0],
				[0, -c2, 0]
			];
			var peakPoint = [p[6][0] * 1, p[6][1] * 1, SPIKE_HEIGHT];

			p.forEach((c) => points.push(new Cuboid(c, [0.1, 0.1, 0.1])));
			spherePart = new BezierSurface();
			spherePart.set([
				[peakPoint     ,  fp(p[6],p[1]) ,  mp(p[6],p[1]) ,  p[1]          ,  p[1]],
				[fp(p[6],p[2]) ,  fp(p[6],p[0]) ,  mp(p[6],p[0]) ,  fp(p[1],p[0]) ,  fp(p[1],p[0])],
				[mp(p[6],p[2]) ,  mp(p[6],p[0]) ,  mp(p[6],p[0]) ,  mp(p[1],p[0]) ,  mp(p[1],p[0])],
				[p[2]          ,  fp(p[2],p[0]) ,  mp(p[2],p[0]) ,  fp(p[0],p[2]) ,  p[0]],
				[p[2]          ,  fp(p[2],p[0]) ,  mp(p[2],p[0]) ,  fp(p[0],p[2]) ,  p[0]],
			]);

			const PHI = (1 + Math.sqrt(5)) / 2; // golden ratio
			const rMult = 1.5 / 2 * Math.sin(2 * Math.PI / 5);
			dodecahedronCenters = [
				[0,rMult,PHI*rMult], [30,0,0],
				[0,-rMult,PHI*rMult], [-30,0,36],
				// [0,rMult,-PHI*rMult], [144,0,36],
				// [0,-rMult,-PHI*rMult], [-144,0,0],
				// [rMult,PHI * rMult,0], [72,36,18],
				// [1,-PHI,0], [0,0,0],
				[-rMult,PHI * rMult,0], [58,0,-18],
				// [-1,-PHI,0], [-58,-116,18],
				[PHI*rMult,0,rMult], [0,60,-18],
				[-PHI*rMult,0,rMult], [0,-60,18],
				// [-PHI*rMult,0,-rMult], [0,-116,-18],
				// [PHI*rMult,0,-rMult], [0,116,18],
			];
			/*
			bs = new BezierSurface();
			bs.set([
				[p[0], p[1]],
				[p[3], p[7]],
			]);
			sphereParts.push(bs);
			bs = new BezierSurface();
			bs.set([
				[p[0], p[2]],
				[p[4], p[8]],
			]);
			sphereParts.push(bs);
			bs = new BezierSurface();
			bs.set([
				[p[0], p[3]],
				[p[5], p[9]],
			]);
			sphereParts.push(bs);
			bs = new BezierSurface();
			bs.set([
				[p[0], p[4]],
				[p[5], p[10]],
			]);
			sphereParts.push(bs);
			*/

			// points.push(new Cuboid([1,1,0], [0.1,0.1,0.1]));
			// points.push(new Cuboid([-1,1,0], [0.1,0.1,0.1]));
			// points.push(new Cuboid([-1,-1,0], [0.1,0.1,0.1]));
			// points.push(new Cuboid([1,-1,0], [0.1,0.1,0.1]));

			/*
			var spikes = [];
			var types = [[1, 1, 1], [0, PHI, 1/PHI], [1/PHI, 0, PHI], [PHI, 1/PHI, 0]];
			types.forEach((coordType) => {
				for (var i = 0; i < 8; i++) {
					var pos1 = [coordType[0] * (1-2*(i>>2)),
								 coordType[1] * (1-2*(i>>1 & 1)),
								 coordType[2] * (1-2*(i&1))];
					if (!spikes.some(pos2 => pos1[0] == pos2[0] && pos1[1] == pos2[1] && pos1[2] == pos2[2]))
						spikes.push(pos1);
				}
			});
			console.log(spikes.length);

			[
				0, 1, 8, 9, 16
			].forEach((i) => points.push(new Cuboid(spikes[i], [0.1, 0.1, 0.1])));
			*/
		}

		var time = now();
		function now() { return (new Date()).getTime()/1000; }

		function drawFrame()
		{
			time = now();
			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT);
			
			lookAt([8*Math.cos(time/2), 8*Math.sin(time/2), 3], [0, 0, 0], [0,0,1]);
			points.forEach((p) => p.draw());
			useMatrix();
			for (var i = 0; i < dodecahedronCenters.length; i += 2) {
				pushMatrix();
				translate(dodecahedronCenters[i]);
				xRotate(dodecahedronCenters[i+1][0]);
				yRotate(dodecahedronCenters[i+1][1]);
				zRotate(dodecahedronCenters[i+1][2]);
				for (var j = 0; j < 5; j++) {
					zRotate(72);
					spherePart.draw();
				}
				popMatrix();
			}
			
			requestAnimationFrame(drawFrame);
		}
	</script>	
</head>

<body onload="start()">
	<h2>Пластмасови столове</h2>

	<noscript>
		Искаме JavaScript, но няма!
	</noscript>
	
	<canvas id="picasso" width="600" height="400" style="border: solid;">
		Искаме canvas, но няма!
	</canvas>
</body>