implemented resetMatrix and applyMatrix

bohnacker · Jul 19, 2019 · bbf188e · bbf188e
1 parent 73a44d1
commit bbf188e
Show file tree

Hide file tree

Showing 5 changed files with 107 additions and 4 deletions.
diff --git a/README.md b/README.md
@@ -4,4 +4,4 @@ This function provides a solution to the missing screenX and screenY functions i
 
 **This is work in progress.** 
 
-I'm aware of some missing stuff like tracking resetMatrix() and applyMatrix() in 2d-mode. 
+As far as I could find out there should be anything implemented to make it work perfectly in any mode (2D, WEBGL, angleMode DEGREES or RADIANS, normal or instance mode). If you'll find a case that isn't working correctly, please file an issue.
diff --git a/addScreenPositionFunction.js b/addScreenPositionFunction.js
@@ -12,7 +12,7 @@ function addScreenPositionFunction(p5Instance) {
 	const R_WEBGL = 1;
 	let context = getObjectName(p._renderer.drawingContext).search("2D") >= 0 ? R_2D : R_WEBGL;
 
-	// this will be stack to push and pop matrices
+	// the stack to keep track of matrices when using push and pop
 	if (context == R_2D) {
 		p._renderer.matrixStack = [new p5.Matrix()];
 	}
@@ -28,6 +28,14 @@ function addScreenPositionFunction(p5Instance) {
 	}
 
 
+	if (p.resetMatrix instanceof Function) {
+		let resetMatrixNative = p.resetMatrix;
+		p.resetMatrix = function(...args) {
+			if (context == R_2D) p._renderer.matrixStack = [new p5.Matrix()];
+			resetMatrixNative.apply(p, args);
+		};
+	}
+
 	if (p.translate instanceof Function) {
 		let translateNative = p.translate;
 		p.translate = function(...args) {
@@ -92,7 +100,6 @@ function addScreenPositionFunction(p5Instance) {
 		};
 	}
 
-
 	// Help needed: don't know what transformation matrix to use 
 	// Solved: Matrix multiplication had to be in reversed order. 
 	// Still, this looks like it could be simplified.
@@ -130,6 +137,27 @@ function addScreenPositionFunction(p5Instance) {
 	}
 
 
+	if (p.applyMatrix instanceof Function) {
+		let applyMatrixNative = p.applyMatrix;
+		p.applyMatrix = function(...args) {
+			if (context == R_2D) {
+				let stack = p._renderer.matrixStack;
+				let m = last(stack);
+				let sm = new p5.Matrix();
+				sm.mat4[0] = args[0];
+				sm.mat4[1] = args[1];
+				sm.mat4[4] = args[2];
+				sm.mat4[5] = args[3];
+				sm.mat4[12] = args[4];
+				sm.mat4[13] = args[5];
+				sm.mult(m);
+				stack[stack.length - 1] = sm;
+			}
+			applyMatrixNative.apply(p, args);
+		};
+	}
+
+
 	if (p.push instanceof Function) {
 		let pushNative = p.push;
 		p.push = function(...args) {
@@ -148,6 +176,8 @@ function addScreenPositionFunction(p5Instance) {
 		};
 	}
 
+
+
 	p.screenPosition = function(x, y, z) {
 		if (x instanceof p5.Vector) {
 			let v = x;

diff --git a/test-01-basic.html b/test-01-basic.html
@@ -41,7 +41,6 @@
         if (mode == "2D") rotate(frameCount);
         else rotateY(frameCount);
 
-        // doesn't work yet:
         shearX(sin(frameCount) * 25);
         shearY(cos(frameCount*0.73) * 25);
 

diff --git a/test-02-instance-mode.html b/test-02-instance-mode.html
@@ -36,6 +36,9 @@
           if (mode == "2D") p.rotate(p.radians(p.frameCount));
           else p.rotateY(p.radians(p.frameCount));
 
+          p.shearX(p.sin(p.frameCount / 100));
+          p.shearY(p.cos(p.frameCount / 73));
+
           p.scale(1.2, 1.5, 0.8);
 
           p.line(-100, -100, 100, 100);

diff --git a/test-03-reset-apply.html b/test-03-reset-apply.html
@@ -0,0 +1,71 @@
+<!DOCTYPE html>
+<html lang="">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>p5.js example</title>
+    <style> body {padding: 0; margin: 0;} </style>
+
+    <script src="addScreenPositionFunction.js"></script>
+    <script src="lib/p5.js"></script>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+      p5.disableFriendlyErrors = true;
+
+
+      // set mode to "2D" or "3D" to quickly test if WEBGL is also working
+      var mode = "2D";
+
+      function setup() {
+        if (mode == "2D") createCanvas(windowWidth, windowHeight);
+        else createCanvas(windowWidth, windowHeight, WEBGL);
+
+        addScreenPositionFunction();
+
+        rectMode(CENTER);
+        stroke(255);
+      }
+
+      function draw() {
+        // resetTransformationTracker();
+
+        background(0);
+
+        push();
+
+        // just for testing: this should be reset
+        scale(1.4);
+
+        resetMatrix();
+
+        if (mode == "2D") translate(width / 2, height / 2);
+
+        let f = frameCount / 100;
+        applyMatrix(noise(f) * 2, noise(f+100)-0.5, noise(f+200)-0.5, noise(f+300) * 2, noise(f+400) * 200 - 100, noise(f+500) * 200 - 100);
+
+        line(-100, -100, 100, 100);
+
+        var p1 = screenPosition(-100, -100, 0);
+        var p2 = screenPosition(100, 100, 0);
+
+        if (mode != "2D") rotateY(90);
+
+        fill(128);
+        rect(0, 0, 100, 100);
+
+        pop();
+
+        fill(255, 0, 0);
+        circle(p1.x, p1.y, 10);
+        circle(p2.x, p2.y, 10);
+      }
+
+      function mousePressed() {
+        noLoop();
+      }
+
+    </script>
+  </body>
+</html>
Original file line number	Diff line number	Diff line change
Expand Up		@@ -4,4 +4,4 @@ This function provides a solution to the missing screenX and screenY functions i

		This is work in progress.

		I'm aware of some missing stuff like tracking resetMatrix() and applyMatrix() in 2d-mode.
		As far as I could find out there should be anything implemented to make it work perfectly in any mode (2D, WEBGL, angleMode DEGREES or RADIANS, normal or instance mode). If you'll find a case that isn't working correctly, please file an issue.