path: root / Year 2 / Computer Graphics with WebGL / Homework 11 - The graph / Homework.html

<!DOCTYPE html>

<!-- Ами това е началният код. Няма почти нищо в него, затова
го напълнете с каквото счетете за подходящо. -->

<head>
	<meta charset="utf-8"/>
	<title>Графиката</title>

	<script src="webgl-fmi.js"></script>
	<script src="shaders.js"></script>

	<style>
		canvas {
			display: block;
			position: fixed;
			left: 2em;
			top: 2em;
			margin: auto;
			width: calc(100% - 4em);
			height: calc(100% - 4em);
			box-shadow: 0px 0px 6em DarkBlue;
		}

		#text-info {
			pointer-events: none;
			position: fixed;
			right: 2em;
			top: 2em;
		}

		#text-info > p {
			font: 4em 'Arial', black;
			font-weight: bold;
			margin: 0.5rem;
		}

		#sliders {
			position: fixed;
			bottom: 2em;
			left: 2em;
			width: calc(100% - 4em);
			overflow: hidden;
		}

		#sl-left, #sl-right {
			padding: 0 2em;
			height: 5em;
			width: 100%;
			box-sizing: border-box;
		}
		#sl-left:hover, #sl-right:hover {
			cursor: ew-resize;
		}
		#sl-left {
			border-right: 0.5em solid blue;
			background-image: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,128,0.2) 80%, rgba(0,0,255,0.5) 100%);
			transform: translateX(-60%);
			float: left;
		}
		#sl-right {
			border-left: 0.5em solid blue;
			background-image: linear-gradient(270deg, rgba(0,0,0,0) 0%, rgba(0,0,128,0.2) 80%, rgba(0,0,255,0.5) 100%);
			transform: translateX(60%);
		}
	</style>

	<script>
		function dsin(d) {
			return Math.sin(2 * Math.PI * d);
		}
		function dcos(d) {
			return Math.cos(2 * Math.PI * d);
		}

		/*
		 * Points
		 */

		GraphFunction = function (funct) {
			this.color = [random(0, 1), random(0, 1), random(0, 1)];
			this.points = [];
			for (var i = graphStart; i < graphEnd; i++) {
				this.points.push(i, funct(i));
			}
			this.buf = undefined;
		}

		GraphFunction.prototype.updateBuf = function(minX, maxX, minY, maxY) {
			var data = this.points.slice();
			for (var i = startI; i <= endI; i += 2) {
				data[i] = (data[i] - minX) / ((maxX - minX) / 2) - 1; // x
				data[i+1] = (data[i+1] - minY) / ((maxY - minY) / 2) - 1; // y
			}
			var bufTemp = gl.createBuffer();
			gl.bindBuffer(gl.ARRAY_BUFFER, bufTemp);
			gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);
			this.buf = bufTemp;
		}

		GraphFunction.prototype.draw = function() {
			gl.vertexAttrib3fv(aRGB, this.color);
			gl.bindBuffer(gl.ARRAY_BUFFER, this.buf);
			gl.enableVertexAttribArray(aXY);
			gl.vertexAttribPointer(aXY, 2, gl.FLOAT, false, 2 * FLOATS, 0);
			gl.drawArrays(gl.LINE_STRIP, startI / 2, (endI - startI) / 2 + 1);
		}

		var graphStart = 5000;
		var graphEnd = 50000;
		var functions = [new GraphFunction((i) => 2000 * dsin(i / 50000) + random(-20, 20)),
		                 new GraphFunction((i) => 2300 * dsin(i / 20000) + random(-30, 0)),
		                 new GraphFunction((i) => 1800 * dsin(i / 80000 * dsin(i / 20000)) + random(-100, 100)),
		                 new GraphFunction((i) => 1000 * dsin(i / 20000 * dcos(i / 70000 * dsin(i / 103337)) - random(-0.03, 0.03)) + random(-10, 100)),
		                 new GraphFunction((i) => 300 * dsin(i / 200 + random(-0.01, 0.01)) + 190 * dsin(i / 100) + 800 * dcos(i / 700) + random(-45, 45))];

		var changed = true;
		var startI = 0;
		var endI = (graphEnd - graphStart) * 2 - 1;
		function calculateI(pers, pere) {
			if (pers)
				startI = Math.floor(pers * (graphEnd - graphStart)) * 2;
			if (pere)
				endI = Math.floor(pere * (graphEnd - graphStart)) * 2 - 1;
		}

		/*
		 * Dragging
		 */
		function registerDragging() {
			slleft = document.getElementById("sl-left");
			slright = document.getElementById("sl-right");

			var inside = false;
			var clicked = 0;
			slleft.onmouseenter = slright.onmouseenter = function () {
				inside = true;
			}
			slleft.onmouseleave = slright.onmouseleave = function () {
				inside = false;
				clicked = 0;
			}

			var initialPosition = 0;
			var current = 0;
			var leftCurrent = 0;
			var rightCurrent = 0;

			slleft.onmousedown = slright.onmousedown = function (e) {
				clicked = (this.id == "sl-left") ? 1 : 2;
				initialPosition = e.clientX;
				if (clicked === 1) current = leftCurrent;
				else current = rightCurrent;
			}
			slleft.onmouseup = slright.onmouseup = function () {
				clicked = 0;
			}

			function slleftPos() {
				return slleft.offsetWidth * 0.4 - leftCurrent;
			}
			function slrightPos() {
				return slright.offsetWidth * 0.6 - rightCurrent;
			}

			slleft.onmousemove = function (e) {
				if (!inside || clicked != 1) return;
				var newCurr = current + initialPosition - e.clientX;
				if ((newCurr > leftCurrent) && (slleftPos() < 10)) return;
				if ((newCurr < leftCurrent) && (slleftPos() >= slrightPos() - 10)) return;

				this.style.transform = "translateX(calc(-60% - " + (leftCurrent = newCurr) + "px))";
				changed = true;
				calculateI(slleftPos() / slleft.offsetWidth);
			}
			slright.onmousemove = function (e) {
				if (!inside || clicked != 2) return;
				var newCurr = current + initialPosition - e.clientX;
				if ((newCurr < rightCurrent) && (slrightPos() > slright.offsetWidth - 10)) return;
				if ((newCurr > rightCurrent) && (slleftPos() >= slrightPos() - 10)) return;

				this.style.transform = "translateX(calc(60% - " + (rightCurrent = newCurr) + "px))";
				changed = true;
				calculateI(undefined, slrightPos() / slright.offsetWidth);
			}
		}

		function start( )
		{
			registerDragging();

			gl = getContext("picasso");
			glprog = getProgram(vShader,fShader);
			getVariables();
			resizeglcanvas();

			gl.clearColor(1,1,1,1);
			gl.clear(gl.COLOR_BUFFER_BIT);

			drawFrame();
		}

		function resizeglcanvas() {
			gl.canvas.width = gl.canvas.offsetWidth;
			gl.canvas.height = gl.canvas.offsetHeight;
			gl.viewport(0,0,gl.canvas.width,gl.canvas.height);
			drawFrame();
		}
		window.onresize = resizeglcanvas;
	
		function drawFrame()
		{
			if (changed) {
				changed = false;
				var maxY = 0;
				var minY = 0;
				var maxX = graphStart;
				var minX = graphEnd;
				functions.forEach((gf) => {
					for (var i = startI; i <= endI; i += 2) {
						if (gf.points[i] > maxX) maxX = gf.points[i];
						if (gf.points[i] < minX) minX = gf.points[i];
						if (gf.points[i+1] > maxY) maxY = gf.points[i+1];
						if (gf.points[i+1] < minY) minY = gf.points[i+1];
					}
				});
				functions.forEach((gf) => {
					gf.updateBuf(minX, maxX, minY, maxY);
				});
			}
			functions.forEach((gf) => gf.draw());

			requestAnimationFrame(drawFrame);
		}
	</script>	
</head>

<body onload="start()">
	<canvas id="picasso"></canvas>
	<div id="text-info">
		<p>Графиката</p>
	</div>
	<div id="sliders">
		<div id="sl-left"></div>
		<div id="sl-right"></div>
	</div>
</body>