[WGL] Added unfinished homeworks

3 files changed, 740 insertions, 6 deletions

diff --git a/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/Homework.html
new file mode 100644
index 0000000..6b7f940
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/Homework.html
@@ -0,0 +1,240 @@
+<!DOCTYPE html>

+

+<head>

+	<meta charset="utf-8"/>

+	<title>Вълнàта</title>

+

+	<script src="webgl-fmi.js">

+		// Подсказки:

+		//	1. за анимация в реално време вълнението трябва

+		// 	   да слезе в шейдърите, а да не е на JavaScript

+		//	2. ефектът на Мах може да се намали, като се

+		//	   увеличи броя на върховете, но целта е да се

+		//	   махне без да се прави това

+	</script>

+	

+	<script id="vshader" type="x-shader/x-vertex">

+		uniform mat4 uProjectionMatrix;

+		uniform mat4 uViewMatrix;

+		uniform mat4 uModelMatrix;

+		

+		uniform bool uUseAmbient;

+		uniform vec3 uAmbientColor;

+

+		uniform bool uUseDiffuse;

+		uniform vec3 uDiffuseColor;

+

+		uniform vec3 uLightDir;

+		

+		attribute vec3 aXYZ;		// координати на връх

+		attribute vec3 aColor;		// цвят на връх

+		attribute vec3 aNormal;		// нормален вектор на връх

+

+		varying vec3 vNormal;

+		varying vec3 vColor;

+		varying vec3 vPos;

+		

+		void main ()

+		{

+			mat4 mvMatrix = uViewMatrix * uModelMatrix;

+			vec4 pos = mvMatrix * vec4(aXYZ,1);

+			gl_Position = uProjectionMatrix * pos;

+

+			// околна светлина

+			vColor = aColor;

+			if (uUseAmbient)

+				vColor *= uAmbientColor;

+			

+			// дифузно отражение

+			vec3 normal = vec3(normalize(mvMatrix*vec4(aNormal,0)));

+			vec3 light = normalize(-uLightDir);

+			if (uUseDiffuse)

+				vColor += aColor*uDiffuseColor*max(dot(normal,light),0.0);

+

+			vPos = pos.xyz/pos.w;

+			vNormal = normal;

+		}

+	</script>

+	

+	<script id="fshader" type="x-shader/x-fragment">

+		precision mediump float;

+

+		// преместено тук от другия шейдър

+		uniform highp vec3 uLightDir;

+		uniform bool uUseSpecular;

+		uniform vec3 uSpecularColor;

+		uniform float uShininess;

+

+		varying vec3 vNormal;

+		varying vec3 vColor;

+		varying vec3 vPos;

+

+		void main( )

+		{

+			vec3 specularColor = vec3(0);

+			

+			// огледално отражение

+			if (uUseSpecular)

+			{

+				vec3 light = normalize(-uLightDir);

+				vec3 reflectedLight = normalize(reflect(light,normalize(vNormal)));

+				vec3 viewDir = normalize(vPos);

+

+				float cosa = max(dot(reflectedLight,viewDir),0.0);

+				specularColor = uSpecularColor*pow(cosa,uShininess);

+			}

+

+			gl_FragColor = vec4(vColor+specularColor,1);

+		}

+	</script>

+

+	<script>

+		var k=40; 

+		

+		function start( )

+		{

+			var	canvas = document.getElementById("picasso");

+			canvas.addEventListener('webglcontextlost',function(event){event.preventDefault();},false);

+			canvas.addEventListener('webglcontextrestored',function(){init();},false);

+

+			init();

+			drawFrame();

+		}

+		

+

+		function surface(x,y)

+		{

+			var r=Math.sqrt(x*x+y*y);

+			return 3*Math.pow(Math.cos(r/4),6);

+		}

+		

+		function init()

+		{

+			gl = getContext("picasso");

+			glprog = getProgram("vshader","fshader");

+

+			aXYZ = gl.getAttribLocation(glprog,"aXYZ");

+			uProjectionMatrix = gl.getUniformLocation(glprog,"uProjectionMatrix");

+			uViewMatrix = gl.getUniformLocation(glprog,"uViewMatrix");

+			uModelMatrix = gl.getUniformLocation(glprog,"uModelMatrix");

+			

+			aColor = gl.getAttribLocation(glprog,"aColor");

+			uAmbientColor = gl.getUniformLocation(glprog,"uAmbientColor");

+			uUseAmbient   = gl.getUniformLocation(glprog,"uUseAmbient");

+

+			aNormal = gl.getAttribLocation(glprog,"aNormal");

+

+			uDiffuseColor = gl.getUniformLocation(glprog,"uDiffuseColor");

+			uUseDiffuse = gl.getUniformLocation(glprog,"uUseDiffuse");

+

+			uSpecularColor = gl.getUniformLocation(glprog,"uSpecularColor");

+			uUseSpecular = gl.getUniformLocation(glprog,"uUseSpecular");

+

+			uLightDir = gl.getUniformLocation(glprog,"uLightDir");

+			uShininess = gl.getUniformLocation(glprog,"uShininess");

+

+			gl.enable(gl.DEPTH_TEST);

+			gl.clearColor(1,1,1,1);

+

+			identity();

+			perspective(30,gl.canvas.width/gl.canvas.height,1,40000);

+

+		

+			var p=[];	// масив с височината във всеки връх

+			var n=[];	// масив с нормалния вектор във всеки връх

+			

+			// изчисляваме височината във възлите

+			for (var x=-k; x<=k; x++)

+			{

+				p[x]=[];

+				for (var y=-k; y<=k; y++)

+					p[x][y]=surface(x,y);

+			}

+			

+			// изчисляваме нормалните вектори във възлите

+			for (var x=-k; x<=k; x++)

+			{

+				n[x]=[];

+				for (var y=-k; y<=k; y++)

+				{

+					var eps = 0.001;

+					var p0 = [x,y,surface(x,y)];

+					var p1 = [x-eps,y,surface(x-eps,y)];

+					var p2 = [x,y-eps,surface(x,y-eps)];

+					n[x][y]=unitVector(vectorProduct(vectorPoints(p1,p0),vectorPoints(p2,p0)));

+				}

+			}

+

+			// генерираме триъгълниците: координати на върхове и нормали

+			// на върховете на всеки триъгълник слагаме нормалата от първия му връх

+			var data = [];

+			for (var x=-k; x<k; x++)

+				for (var y=-k; y<k; y++)

+				{

+					data.push(x,  y,  p[x  ][y  ],n[x][y][0],n[x][y][1],n[x][y][2]);

+					data.push(x+1,y,  p[x+1][y  ],n[x+1][y][0],n[x+1][y][1],n[x+1][y][2]);

+					data.push(x,  y+1,p[x  ][y+1],n[x][y+1][0],n[x][y+1][1],n[x][y+1][2]);

+

+					data.push(x  ,y+1,p[x  ][y+1],n[x][y+1][0],n[x][y+1][1],n[x][y+1][2]);

+					data.push(x+1,y  ,p[x+1][y  ],n[x+1][y][0],n[x+1][y][1],n[x+1][y][2]);

+					data.push(x+1,y+1,p[x+1][y+1],n[x+1][y+1][0],n[x+1][y+1][1],n[x+1][y+1][2]);

+				}

+

+			var buf = gl.createBuffer();

+			gl.bindBuffer(gl.ARRAY_BUFFER,buf);

+			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);

+

+			// включване на върховете

+			gl.enableVertexAttribArray(aXYZ);

+			gl.vertexAttribPointer(aXYZ,3,gl.FLOAT,false,6*FLOATS,0*FLOATS);

+

+			// включване на нормалните вектори

+			gl.enableVertexAttribArray(aNormal);

+			gl.vertexAttribPointer(aNormal,3,gl.FLOAT,false,6*FLOATS,3*FLOATS);

+

+			// настройка на цветове и светлини

+			gl.vertexAttrib3f(aColor,0.5,0.5,0.5);

+			gl.uniform3f(uAmbientColor,0.5,0.5,0.5);

+			gl.uniform3f(uDiffuseColor,1,1,1);

+			gl.uniform3f(uSpecularColor,1,1,1);

+			gl.uniform1f(uShininess,20);

+

+			gl.uniform3f(uLightDir,0,0,-1);

+			

+			gl.uniform1i(uUseAmbient,true);

+			gl.uniform1i(uUseDiffuse,true);

+			gl.uniform1i(uUseSpecular,true);

+		}

+		

+		var frame = 0;

+	

+		function drawFrame()

+		{

+			frame++;

+			gl.clear(gl.COLOR_BUFFER_BIT+gl.DEPTH_BUFFER_BIT); // изчистваме цвета и дълбочината

+

+			// движение на камерата около повърхнината с периодично

+			// приближаване към и отдалечаване от нея

+			var dist = 80+37*Math.sin(frame/100);

+			var d = 0.6+0.3*Math.sin(frame/200);

+			lookAt([dist*Math.cos(frame/300)*d,dist*Math.sin(frame/300)*d,(140-dist)*d], [0.1,-0.1,0], [0,0,1]);

+

+			useMatrix();

+			gl.drawArrays(gl.TRIANGLES,0,(2*k)*(2*k)*(2*3));

+	

+			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>

diff --git a/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/webgl-fmi.js b/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/webgl-fmi.js
new file mode 100644
index 0000000..e864ad4
--- /dev/null
+++ b/Year 2/Computer Graphics with WebGL/Homework 04 - The wave/webgl-fmi.js
@@ -0,0 +1,488 @@
+// Библиотека WebGL-FMI v0.07.11-Ex2

+//

+// Работа с контексти и шейдъри

+//		getContext(id)

+//		getShader(id,type)

+//		getProgram(idv,idf)

+//

+// Математически функции

+//		random(a,b)

+//		radians(degrees)

+//

+// Работа с вектори 

+//		unitVector(x)

+//		vectorProduct(x,y)

+//		scalarProduct(x,y)

+//		vectorPoints(x,y)

+//

+// Трансформации с матрици

+//		unitMatrix();

+//		translateMatrix(v)

+//		scaleMatrix(v)

+//		xRotateMatrix(a)

+//		yRotateMatrix(a)

+//		zRotateMatrix(a)

+//		rotateMatrix(a,v)

+//

+// Трансформации със съставни матрици

+//		identity()

+//		translate(v)

+//		scale(v)

+//		xRotate(a)

+//		yRotate(a)

+//		zRotate(a)

+//		useMatrix()

+//		pushMatrix()

+//		popMatrix()

+//		cloneMatrix()

+//

+// Проектиране с матрици

+//		viewMatrix (eye, focus, up)

+//		orthoMatrix(width, height, near, far)

+//		perspMatrix(angle, aspect, near, far)

+//		lookAt(eye, focus, up)

+//		perspective(angle, aspect, near, far)

+//

+

+

+var gl;				// глобален WebGL контекст

+var glprog;			// глобална GLSL програма

+var glmat;			// глобална матрица на модела

+var glmatnew;		// true, ако матрицата е променена, но не е подадена на шейдъра

+var glstack = [];	// стек от матрици на модела

+

+

+// брой байтове в един WebGL FLOAT (трябва да са 4 байта)

+var FLOATS = Float32Array.BYTES_PER_ELEMENT;

+

+

+// връща WebGL контекст, свързан с HTML елемент с даден id

+function getContext(id)

+{

+	var canvas = document.getElementById(id);

+	if (!canvas)

+	{

+		alert("Искаме canvas с id=\""+id+"\", а няма!");

+		return null;

+	}

+

+	var context = canvas.getContext("webgl");

+	if (!context)

+	{

+		context = canvas.getContext("experimental-webgl");

+	}

+	

+	if (!context)

+	{

+		alert("Искаме WebGL контекст, а няма!");

+	}

+	

+	return context;

+}

+

+

+// връща компилиран шейдър

+function getShader(id,type)

+{

+	var source = document.getElementById(id).text;

+	var shader = gl.createShader(type);

+

+	gl.shaderSource(shader,source);

+	gl.compileShader(shader);

+	if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS))

+	{

+		alert(gl.getShaderInfoLog(shader));

+		return null;

+	}

+	

+	return shader;

+}

+

+

+// връща готова програма

+function getProgram(idv,idf)

+{

+	var vShader = getShader(idv,gl.VERTEX_SHADER);

+	var fShader = getShader(idf,gl.FRAGMENT_SHADER);

+			

+	if (!vShader || !fShader) {return null;}

+	

+	var shaderProgram = gl.createProgram();

+	gl.attachShader(shaderProgram,vShader);

+	gl.attachShader(shaderProgram,fShader);

+	gl.linkProgram(shaderProgram);

+

+	if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS))

+	{

+		alert(gl.getProgramInfoLog(shaderProgram));

+		return null;

+	}

+

+	gl.useProgram(shaderProgram);

+	return shaderProgram;

+}

+

+

+// случайно дробно число в интервал

+function random(a,b)

+{

+	return a+(b-a)*Math.random();

+}

+

+

+// преобразува градуси в радиани

+function radians(degrees)

+{

+	return degrees*Math.PI/180;

+}

+

+

+// създава матрица за ортографска проекция

+function orthoMatrix(width, height, near, far)

+{

+	var matrix = [

+		2.0/width, 0, 0, 0,

+		0, 2.0/height, 0, 0,

+		0, 0, 2.0/(near-far), 0,

+		0, 0, (far+near)/(near-far), 1];

+	return new Float32Array(matrix);

+}

+

+

+// създава матрица за перспективна проекция

+// ъгълът на зрителното поле е в градуси

+function perspMatrix(angle, aspect, near, far)

+{

+	var fov = 1/Math.tan(radians(angle)/2);

+	var matrix = [

+		fov/aspect, 0, 0, 0,

+		0, fov, 0, 0,

+		0, 0, (far+near)/(near-far), -1,

+		0, 0, 2.0*near*far/(near-far), 0];

+	return new Float32Array(matrix);

+}

+

+

+// установява перспективна проекция

+function perspective(angle,aspect,near,far)

+{

+	var proj = perspMatrix(angle,aspect,near,far);

+	gl.uniformMatrix4fv(uProjectionMatrix,false,proj);

+}

+

+

+// единичен вектор

+function unitVector(x)

+{

+	var len = 1/Math.sqrt( x[0]*x[0]+x[1]*x[1]+x[2]*x[2] );

+	return [ len*x[0], len*x[1], len*x[2] ];

+}

+

+

+// векторно произведение на два вектора

+function vectorProduct(x,y)

+{

+	return [

+		x[1]*y[2]-x[2]*y[1],

+		x[2]*y[0]-x[0]*y[2],

+		x[0]*y[1]-x[1]*y[0] ];

+}

+

+

+// скаларно произведение на два вектора

+function scalarProduct(x,y)

+{

+	return x[0]*y[0] + x[1]*y[1] + x[2]*y[2];

+}

+

+

+// вектор между две точки

+function vectorPoints(x,y)

+{

+	return [ x[0]-y[0], x[1]-y[1], x[2]-y[2] ];

+}

+

+

+// генерира матрица за гледна точка, параметрите са масиви с по 3 елемента

+function viewMatrix (eye, focus, up)

+{

+	// единичен вектор Z' по посоката на гледане

+	var z = unitVector(vectorPoints(eye,focus));

+	

+	// единичен вектор X', перпендикулярен на Z' и на посоката нагоре

+	var x = unitVector(vectorProduct(up,z));

+	

+	// единичен вектор Y', перпендикулярен на X' и Z'

+	var y = unitVector(vectorProduct(z,x));

+	

+	// резултатът е тези три вектора + транслация

+	var matrix = [

+		x[0], y[0], z[0], 0,

+		x[1], y[1], z[1], 0,

+		x[2], y[2], z[2], 0,

+		-scalarProduct(x,eye),

+		-scalarProduct(y,eye),

+		-scalarProduct(z,eye), 1 ];

+	return new Float32Array(matrix);

+};

+

+

+// установява гледна точка

+function lookAt(eye,target,up)

+{

+	var view = viewMatrix(eye,target,up);

+	gl.uniformMatrix4fv(uViewMatrix,false,view);

+}

+

+

+// единична матрица

+function unitMatrix()

+{

+	var matrix = [

+		1, 0, 0, 0,

+		0, 1, 0, 0,

+		0, 0, 1, 0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+// матрица за транслация по вектор V

+function translateMatrix(v)

+{

+	var matrix = [

+		1, 0, 0, 0,

+		0, 1, 0, 0,

+		0, 0, 1, 0,

+		v[0], v[1], v[2], 1];

+	return new Float32Array(matrix);

+}

+

+

+// матрица за мащабиране с вектор V

+function scaleMatrix(v)

+{

+	var matrix = [

+		v[0], 0, 0, 0,

+		0, v[1], 0, 0,

+		0, 0, v[2], 0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+

+// матрица за въртене от X към Y около Z на ъгъл A

+function zRotateMatrix(a)

+{

+	a = radians(a);

+	var c = Math.cos(a);

+	var s = Math.sin(a);

+	var matrix = [

+		c, s, 0, 0,

+	   -s, c, 0, 0,

+		0, 0, 1, 0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+

+// матрица за въртене от Y към Z около X на ъгъл A

+function xRotateMatrix(a)

+{

+	a = radians(a);

+	var c = Math.cos(a);

+	var s = Math.sin(a);

+	var matrix = [

+		1, 0, 0, 0,

+		0, c, s, 0,

+		0,-s, c, 0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+

+// матрица за въртене от X към Z около Y на ъгъл A

+function yRotateMatrix(a)

+{

+	a = radians(a);

+	var c = Math.cos(a);

+	var s = Math.sin(a);

+	var matrix = [

+		c, 0, s, 0,

+		0, 1, 0, 0,

+	   -s, 0, c, 0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+

+// матрица за въртене около вектор V на ъгъл A

+function rotateMatrix(a, v)

+{

+	a = radians(a);

+	v = unitVector(v);

+	

+	var c = Math.cos(a);

+	var s = Math.sin(a);

+	

+	var xx = v[0]*v[0]*(1-c);

+	var xy = v[0]*v[1]*(1-c);

+	var xz = v[0]*v[2]*(1-c);

+	var yy = v[1]*v[1]*(1-c);

+	var yz = v[1]*v[2]*(1-c);

+	var zz = v[2]*v[2]*(1-c);

+	

+	var matrix = [

+		xx+c,      xy-v[2]*s, xz+v[1]*s, 0,

+		xy+v[2]*s, yy+c,      yz-v[0]*s, 0,

+		xz-v[1]*s, yz+v[0]*s, zz+c,      0,

+		0, 0, 0, 1];

+	return new Float32Array(matrix);

+}

+

+

+// зарежда единичната матрица в матрицата на модела

+function identity()

+{

+	glmatnew = true;

+	glmat = new Float32Array( [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1] );

+}

+

+

+// добавя транслация към матрицата на модела

+function translate(v)

+{

+	glmatnew = true;

+	glmat[12] += glmat[0]*v[0]+glmat[4]*v[1]+glmat[8]*v[2];

+	glmat[13] += glmat[1]*v[0]+glmat[5]*v[1]+glmat[9]*v[2];

+	glmat[14] += glmat[2]*v[0]+glmat[6]*v[1]+glmat[10]*v[2];

+}

+

+

+// добавя мащабиране към матрицата на модела

+function scale(v)

+{

+	glmatnew = true;

+	glmat[0] *= v[0];

+	glmat[1] *= v[0];

+	glmat[2] *= v[0];

+	

+	glmat[4] *= v[1];

+	glmat[5] *= v[1];

+	glmat[6] *= v[1];

+	

+	glmat[8] *= v[2];

+	glmat[9] *= v[2];

+	glmat[10] *= v[2];

+}

+

+

+// ако матрицата на модела е променена, изпраща я към шейдъра

+function useMatrix()

+{

+	if (glmatnew)

+	{

+		glmatnew = false;

+		gl.uniformMatrix4fv(uModelMatrix,false,glmat);

+	}

+}

+

+

+// добавя въртене около X към матрицата на модела

+function xRotate(a)

+{

+	glmatnew = true;

+	

+	a = radians(a);

+	var s = Math.sin(a);

+	var c = Math.cos(a);

+	

+	a = glmat[4]*s+glmat[8]*c;

+	glmat[4]=glmat[4]*c-glmat[8]*s;

+	glmat[8]=a;

+	

+	a = glmat[5]*s+glmat[9]*c;

+	glmat[5]=glmat[5]*c-glmat[9]*s;

+	glmat[9]=a;

+	

+	a = glmat[6]*s+glmat[10]*c;

+	glmat[6]=glmat[6]*c-glmat[10]*s;

+	glmat[10]=a;

+}

+

+

+// добавя въртене около Y към матрицата на модела

+function yRotate(a)

+{

+	glmatnew = true;

+

+	a = radians(a);

+	var s = Math.sin(a);

+	var c = Math.cos(a);

+	

+	a = glmat[0]*s+glmat[8]*c;

+	glmat[0]=glmat[0]*c-glmat[8]*s;

+	glmat[8]=a;

+	

+	a = glmat[1]*s+glmat[9]*c;

+	glmat[1]=glmat[1]*c-glmat[9]*s;

+	glmat[9]=a;

+	

+	a = glmat[2]*s+glmat[10]*c;

+	glmat[2]=glmat[2]*c-glmat[10]*s;

+	glmat[10]=a;

+}

+

+

+// добавя въртене около Z към матрицата на модела

+function zRotate(a)

+{

+	glmatnew = true;

+

+	a = radians(a);

+	var s = Math.sin(a);

+	var c = Math.cos(a);

+	

+	a = glmat[0]*s+glmat[4]*c;

+	glmat[0]=glmat[0]*c-glmat[4]*s;

+	glmat[4]=a;

+	

+	a = glmat[1]*s+glmat[5]*c;

+	glmat[1]=glmat[1]*c-glmat[5]*s;

+	glmat[5]=a;

+	

+	a = glmat[2]*s+glmat[6]*c;

+	glmat[2]=glmat[2]*c-glmat[6]*s;

+	glmat[6]=a;

+}

+

+

+// добавя текущата матрица на модела в стека за матрици

+function pushMatrix()

+{

+	var mat = new Float32Array(glmat.length);

+	mat.set(glmat);

+	glstack.push(mat);

+}

+

+

+// извлича матрица на модела от стека за матрици

+// при празен стек връща единичната матрица

+function popMatrix()

+{

+	glmatnew = true;

+	if (glstack.length)

+		glmat = glstack.pop();

+	else

+		identity();

+}

+

+

+// клонира матрица като копира всичките ѝ стойности

+function cloneMatrix(a)

+{

+	var b = new Float32Array(a.length);

+	b.set(a);

+	return b;

+}

+

+

diff --git a/Year 2/Computer Graphics with WebGL/Homework 06 - The knot/Homework.html b/Year 2/Computer Graphics with WebGL/Homework 06 - The knot/Homework.html
index bbf9808..348947b 100644
--- a/Year 2/Computer Graphics with WebGL/Homework 06 - The knot/Homework.html
+++ b/Year 2/Computer Graphics with WebGL/Homework 06 - The knot/Homework.html
@@ -115,6 +115,12 @@
 			for (var point = 0; point < TREFOIL_SIDES; point++) {

 				sectionCircle.push([Math.sin(2 * Math.PI * point / TREFOIL_SIDES), 0, Math.cos(2 * Math.PI * point / TREFOIL_SIDES)]);

 			}

+			function alternateInsertEnd(points) {

+				for (var i = 0, j = data.length - points.length * 3 + 3; i < points.length; i++, j += 6) {

+					data.splice(j, 0, ...points[i]);

+				}

+			}

+

 			function section(ver, vp) {

 				var out = sectionCircle.slice(0);

 

@@ -122,7 +128,6 @@
 				var xAng = Math.acos(dotProduct(unitVector([vp[0], 0, vp[2]]), [1,0,0]));

 				var zRot = zRotateMatrix(yAng / Math.PI * 180);

 				var yRot = yRotateMatrix(xAng / Math.PI * 180);

-				console.log(zRot);

 				out = out.map((point) => {

 					point = matVecMult(zRot, point);

 					point = matVecMult(yRot, point);

@@ -139,10 +144,11 @@
 			for (var t = 0; t < Math.PI * 2; t += stepSize) {

 				var ver = vertex(t);

 				// var hue = t;

-				var vec = vectorPoints(vertex(t + stepSize), ver);

-				section(ver, vec).forEach((point) => {

-					data.push(...point);

-				});

+				var vec = vectorPoints(ver, vertex(t + stepSize));

+				alternateInsertEnd(section(ver, vec));

+				// section(ver, vec).forEach((point) => {

+				// 	data.push(...point);

+				// });

 				// data.push(...ver);

 			}

 

@@ -169,7 +175,7 @@
 			// върхове

 			gl.enableVertexAttribArray(aXYZ);

 			gl.vertexAttribPointer(aXYZ, 3, gl.FLOAT, false, 3 * FLOATS,0);

-			gl.drawArrays(gl.TRIANGLES, 0, this.TREFOIL_POINTS * this.TREFOIL_SIDES);

+			gl.drawArrays(gl.TRIANGLE_STRIP, 0, this.TREFOIL_POINTS * this.TREFOIL_SIDES);

 

 			popMatrix();

 		}