Slight tweaks, bump up ECMAPortal to v1.1

index.html

@@ -186,6 +186,6 @@
 			<img src="/images/enderman.gif" alt="Hello!">
 		</div>
 
-		<script src="/scripts/portal.js"></script>
+		<script src="/scripts/portal-min.js"></script>
 	</body>
 </html>

scripts/portal.js

@@ -9,6 +9,8 @@ class Portal {
 		uniform mat4 modelViewMatrix;
 		uniform mat4 projectionMatrix;
 		
+		uniform vec2 canvasResolution;
+
 		vec4 projection_from_position(vec4 position) {
 			vec4 projection = position * 0.5;
 			projection.xy = vec2(projection.x + projection.w, projection.y + projection.w);
@@ -22,6 +24,7 @@ class Portal {
 			gl_Position = projectionMatrix * modelViewMatrix * vec4(Position, 1.0);
 
 			texProj0 = projection_from_position(gl_Position);
+			texProj0 = vec4(texProj0.xy * canvasResolution / max(canvasResolution.x, canvasResolution.y), texProj0.zw);
 		}`
 
 		// Fragment shader.
@@ -101,7 +104,7 @@ class Portal {
 		];
 
 		// Version & notice.
-		this.version = '1.0';
+		this.version = '1.1';
 		this.notice();
 
 		this.canvas = canvas;
@@ -260,6 +263,7 @@ class Portal {
 			modelViewMatrix: this.gl.getUniformLocation(this.prog, "modelViewMatrix"),
 			projectionMatrix: this.gl.getUniformLocation(this.prog, "projectionMatrix"),
 			dt: this.gl.getUniformLocation(this.prog, "dt"),
+			resolution: this.gl.getUniformLocation(this.prog, "canvasResolution"),
 			sky: this.gl.getUniformLocation(this.prog, "sky"),
 			particles: this.gl.getUniformLocation(this.prog, "particles"),
 		}
@@ -316,11 +320,14 @@ class Portal {
 			0.0, 0.0, 0.0, 1.0
 		]);
 
-		let dt = (Date.now() - this.time) / (1000 * 1000);
+		let dt = (Date.now() - this.time) / 1000 / 1000;
 
 		this.gl.uniformMatrix4fv(this.uniforms.modelViewMatrix, false, identityMatrix);
 		this.gl.uniformMatrix4fv(this.uniforms.projectionMatrix, false, identityMatrix);
 
+		this.gl.uniform2f(this.uniforms.resolution, this.canvas.clientWidth, this.canvas.clientHeight);
+		console.log(this.canvas.clientWidth, this.canvas.clientHeight);
+
 		this.gl.uniform1f(this.uniforms.dt, dt);
 		this.gl.uniform1i(this.uniforms.sky, 0);
 		this.gl.uniform1i(this.uniforms.particles, 1);

styles/styles.css

@@ -181,6 +181,10 @@ div.bottom-right {
 	opacity: 30%;
 }
 
+div.bottom-right:hover {
+	opacity: 100%;
+}
+
 div.bottom-right img {
 	height: 30vmin;
 }