vanous · August 22, 2018 17:36 · Mar 22, 2017 · Feb 24, 2017 · Feb 24, 2017 · Feb 24, 2017
diff --git a/readme.md b/readme.md
@@ -170,7 +170,33 @@ vec3 (
 ) // Rotation in YZ plane
 ````
 
+### Rotation along X:
+````
+y' = y*cos(a) - z*sin(a)
+z' = y*sin(a) + z*cos(a)
+x' = x
+````
+
+### Rotation along Y:
+````
+z' = z*cos(a) - x*sin(a)
+x' = z*sin(a) + x*cos(a)
+y' = y
+````
 
+### Rotation along Z:
+````
+x' = x*cos(a) - y*sin(a)
+y' = x*sin(a) + y*cos(a)
+z' = z
+````
+
+### 3D Perspective Projection (draw a 3D point on a 2D canvas)
+````
+x' = x * fov / (z + viewer_distance) + half_screen_width
+y' = -y * fov / (z + viewer_distance) + half_screen_height
+(no z) 
+````
 ### Sphere trigonometry
 
 http://bit.ly/bm1ftU

diff --git a/readme.md b/readme.md
@@ -62,10 +62,23 @@ vec2 (
 ````
 
 
-### Project any point of the plane on the trigonometric circle (center: origin, radius: 1)
+### Normalize a vector
+### a.k.a Project any point of the plane on the trigonometric circle (center: origin, radius: 1)
 
-- Anew_x = Math.cos(atan2(Ax, Ay))
-- Anew_y = Math.sin(atan2(Ax, Ay))
+ES5:
+
+````
+Anew_x = Math.cos(atan2(Ax, Ay));
+Anew_y = Math.sin(atan2(Ax, Ay));
+````
+
+ES6:
+
+````
+tmp = Math.hypot(Ax, Ay);
+Ax = Ax / tmp;
+Ay = Ay / tmp;
+````
 
 ### Intersections between a line and the grid (a.k.a 2D raycasting)
 

diff --git a/readme.md b/readme.md
@@ -164,4 +164,8 @@ http://bit.ly/bm1ftU
 
 ### Great videos about linear algebra and matrices:
 
-https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab
+https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab
+
+### comp.graphics.algorithms's FAQ
+
+ftp://rtfm.mit.edu/pub/usenet-by-group/news.answers/graphics/algorithms-faq
diff --git a/readme.md b/readme.md
@@ -12,6 +12,9 @@ angleRad = angleDeg * Math.PI / 180;
 
 angleDeg = angleRad * 180 / Math.PI;
 
+### Unit circle
+
+![unit circle](http://www-math.mit.edu/~djk/calculus_beginners/chapter07/images/trigo_functions.gif)
 
 ## 2D
 

diff --git a/readme.md b/readme.md
@@ -23,7 +23,7 @@ angleDeg = angleRad * 180 / Math.PI;
 ### Line passing through 2 points
 
 - line equation: y = ax + b
-- a = (yB - yA) / (yB - yA) = tan θ
+- a = (yB - yA) / (xB - xA) = tan θ
 - θ = angle between line and x axis
 - b = yA - a * xA (because yA = a * xA + b)
 

diff --git a/readme.md b/readme.md
@@ -34,7 +34,7 @@ angleDeg = angleRad * 180 / Math.PI;
 - intersection point P:
     - xP = (a - a')/(b' - b);
     - yP = a * xP + b;
-- Ex with y = 5\*x+1 & y' = 2\*x+8:
+- Ex with y = 5 \* x + 1 and y' = 2 \* x + 8:
     - xP = 7/3;
     - yP = 12.666;
 
@@ -46,7 +46,7 @@ angle = Math.atan2(Ax, Ay)
 
 angle = Math.atan2(By - Ay, Bx - Ax);
 
-### Rotate a point (angle in radians)
+### Rotate a point of the plane around the origin (angle in radians)
 
 - Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
 - Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
@@ -59,24 +59,24 @@ vec2 (
 ````
 
 
-### Project a point on the trigonometric circle
+### Project any point of the plane on the trigonometric circle (center: origin, radius: 1)
 
 - Anew_x = Math.cos(atan2(Ax, Ay))
 - Anew_y = Math.sin(atan2(Ax, Ay))
 
-### Intersections between a line and the grid (2D raycasting)
+### Intersections between a line and the grid (a.k.a 2D raycasting)
 
 - http://www.cse.yorku.ca/~amana/research/grid.pdf
 - http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
 - Demo by xem: http://codepen.io/xem/pen/RRxPNG?editors=1010
 
-### Projection of a plane on a sphere (on a 2D canvas)
+### Projection of a plane on a sphere
 
 - new_y = Math.sin(-y * Math.PI/2);
 - new_x = Math.sin(x * Math.PI) * Math.cos(y * Math.PI / 2);
 - if Math.abs(x) < .5, the projected point is hidden "behind" the sphere.
 - Prototype by subzey: http://codepen.io/subzey/pen/rVoXQx
-- Demo by xem: http://xem.github.io/articles/demos/js13k15/globe2.html
+- Demo by xem (on a 2D canvas): http://xem.github.io/articles/demos/js13k15/globe2.html
 
 ### 2D jumps / gravity (ex: for side-view platform games)
 
@@ -96,9 +96,9 @@ Also applicable to all kind of accelerations in x or y directions.
 Use time instead of frames to make the animation.
 Demo: https://jsfiddle.net/subzey/p1ftrar0/
 
-### Distance between a point and a line
+### Minimal distance between a point and a line
 
-- line: a *x + b * y + c = 0
+- line: a * x + b * y + c = 0
 - point: xA, yA
 - distance: d = Math.abs(a * xA + b * yA + c) / Math.sqrt(a * a + b * b)
 
@@ -157,4 +157,8 @@ vec3 (
 
 ### Sphere trigonometry
 
-http://bit.ly/bm1ftU
+http://bit.ly/bm1ftU
+
+### Great videos about linear algebra and matrices:
+
+https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab
diff --git a/readme.md b/readme.md
@@ -1,6 +1,5 @@
 ### Conventions
 
-- o = [xo = 0, yo = 0] is the origin
 - A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
 - lengths are in any unit (ex: pixels)
 - code snippets are in JavaScript
@@ -13,6 +12,9 @@ angleRad = angleDeg * Math.PI / 180;
 
 angleDeg = angleRad * 180 / Math.PI;
 
+
+## 2D
+
 ### Distance between two points (Pythagore)
 
 - dist = function(A,B){ return Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA)) } // ES5
@@ -98,4 +100,61 @@ Demo: https://jsfiddle.net/subzey/p1ftrar0/
 
 - line: a *x + b * y + c = 0
 - point: xA, yA
-- distance: d = Math.abs(a * xA + b * yA + c) / Math.sqrt(a * a + b * b)
+- distance: d = Math.abs(a * xA + b * yA + c) / Math.sqrt(a * a + b * b)
+
+### Lerp (Blend / shortest path between two angles)
+
+````
+lerpDeg = function(start,end,amt){
+	ver dif=end-start;
+	dif = dif%360;
+	if(dif>180.0)	{
+		dif-=360.0;
+	}
+	else if (dif<-180.0)	{
+		dif+=360.0;
+	}
+	return start+dif*amt;
+}
+````
+## 3D
+
+### 3D rotations
+
+
+In order to create a 3d rotation, just take the idenity matrix:
+
+````
+vec3 (
+    1, 0, 0,
+    0, 1, 0,
+    0, 0, 1
+)
+````
+
+And fill in the sines and cosines:
+
+````
+vec3 (
+    +cos(a), -sin(a), 0,
+    +sin(a), +cos(a), 0,
+     0     ,  0     , 1
+) // Rotation in XY plane
+
+vec3 (
+    +cos(a), 0, -sin(a),
+     0     , 1, 0      ,
+    +sin(a), 0, +cos(a)
+) // Rotation in XZ plane
+
+vec3 (
+    1,  0     ,  0     ,
+    0, +cos(a), -sin(a),
+    0, +sin(a), +cos(a)
+) // Rotation in YZ plane
+````
+
+
+### Sphere trigonometry
+
+http://bit.ly/bm1ftU
diff --git a/readme.md b/readme.md
@@ -89,6 +89,11 @@ vec2 (
 
 Also applicable to all kind of accelerations in x or y directions.
 
+### Framerate-independant 2D jumps
+
+Use time instead of frames to make the animation.
+Demo: https://jsfiddle.net/subzey/p1ftrar0/
+
 ### Distance between a point and a line
 
 - line: a *x + b * y + c = 0

diff --git a/readme.md b/readme.md
@@ -40,7 +40,7 @@ angleDeg = angleRad * 180 / Math.PI;
 
 angle = Math.atan2(Ax, Ay)
 
-### Angle in radians between two points
+### Angle in radians between two points and the origin
 
 angle = Math.atan2(By - Ay, Bx - Ax);
 

diff --git a/readme.md b/readme.md
@@ -75,3 +75,22 @@ vec2 (
 - if Math.abs(x) < .5, the projected point is hidden "behind" the sphere.
 - Prototype by subzey: http://codepen.io/subzey/pen/rVoXQx
 - Demo by xem: http://xem.github.io/articles/demos/js13k15/globe2.html
+
+### 2D jumps / gravity (ex: for side-view platform games)
+
+- let x, y the position of the object (ex: 0, 0)
+- let vx, vy the horizontal and vertical speed of the object (ex: 0, 0)
+- let g, the gravity (which is a downwards acceleration, ex: -10)
+- during the frame at the start of the jump: set vy to a high value, ex: 50
+- during all the frames of the jump:
+    - Add g to vy (ex: 40, 30, 20, 10, 0, -10, ...)
+    - Add vy to y (ex: 40, 70, 90, 100, 100, 90, ...)
+    - place the object at [x,y]
+
+Also applicable to all kind of accelerations in x or y directions.
+
+### Distance between a point and a line
+
+- line: a *x + b * y + c = 0
+- point: xA, yA
+- distance: d = Math.abs(a * xA + b * yA + c) / Math.sqrt(a * a + b * b)
diff --git a/readme.md b/readme.md
@@ -16,7 +16,7 @@ angleDeg = angleRad * 180 / Math.PI;
 ### Distance between two points (Pythagore)
 
 - dist = function(A,B){ return Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA)) } // ES5
-- dist = (A, B) => Math.hypot(xB -x A, yB - yA) // ES6
+- dist = (A, B) => Math.hypot(xB - xA, yB - yA) // ES6
 
 ### Line passing through 2 points
 
@@ -32,7 +32,7 @@ angleDeg = angleRad * 180 / Math.PI;
 - intersection point P:
     - xP = (a - a')/(b' - b);
     - yP = a * xP + b;
-- Ex with y=5x+1 & y'=2x+8:
+- Ex with y = 5\*x+1 & y' = 2\*x+8:
     - xP = 7/3;
     - yP = 12.666;
 

diff --git a/readme.md b/readme.md
@@ -66,7 +66,7 @@ vec2 (
 
 - http://www.cse.yorku.ca/~amana/research/grid.pdf
 - http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
-- Demo by xem: http://codepen.io/xem/pen/RRxPNG
+- Demo by xem: http://codepen.io/xem/pen/RRxPNG?editors=1010
 
 ### Projection of a plane on a sphere (on a 2D canvas)
 

diff --git a/readme.md b/readme.md
@@ -31,7 +31,7 @@ angleDeg = angleRad * 180 / Math.PI;
 - line 2: y' = a' * x + b'
 - intersection point P:
     - xP = (a - a')/(b' - b);
-    - - yP = a * xP + b;
+    - yP = a * xP + b;
 - Ex with y=5x+1 & y'=2x+8:
     - xP = 7/3;
     - yP = 12.666;

diff --git a/readme.md b/readme.md
@@ -29,8 +29,12 @@ angleDeg = angleRad * 180 / Math.PI;
 
 - line 1: y = a * x + b
 - line 2: y' = a' * x + b'
-- intersection point P: xP = (a - a')/(b' - b); yP = a * x' + b;
-- Ex with y=5x+1 & y'=2x+8: xP = 7/3; yP = 12.666;
+- intersection point P:
+    - xP = (a - a')/(b' - b);
+    - - yP = a * xP + b;
+- Ex with y=5x+1 & y'=2x+8:
+    - xP = 7/3;
+    - yP = 12.666;
 
 ### Angle in radians between the x axis at the origin and a point on the plane
 

diff --git a/readme.md b/readme.md
@@ -16,7 +16,7 @@ angleDeg = angleRad * 180 / Math.PI;
 ### Distance between two points (Pythagore)
 
 - dist = function(A,B){ return Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA)) } // ES5
-- dist = (A, B) => Math.hypot(xB -xA, yB -yA) // ES6
+- dist = (A, B) => Math.hypot(xB -x A, yB - yA) // ES6
 
 ### Line passing through 2 points
 
@@ -25,6 +25,13 @@ angleDeg = angleRad * 180 / Math.PI;
 - θ = angle between line and x axis
 - b = yA - a * xA (because yA = a * xA + b)
 
+### Intersection of 2 secant lines
+
+- line 1: y = a * x + b
+- line 2: y' = a' * x + b'
+- intersection point P: xP = (a - a')/(b' - b); yP = a * x' + b;
+- Ex with y=5x+1 & y'=2x+8: xP = 7/3; yP = 12.666;
+
 ### Angle in radians between the x axis at the origin and a point on the plane
 
 angle = Math.atan2(Ax, Ay)

diff --git a/readme.md b/readme.md
@@ -37,6 +37,14 @@ angle = Math.atan2(By - Ay, Bx - Ax);
 
 - Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
 - Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
+- It's the same as applying the following rotation matrix:
+````
+vec2 (
+    +cos(a), -sin(a)
+    +sin(a), +cos(a)
+)
+````
+
 
 ### Project a point on the trigonometric circle
 
@@ -47,4 +55,12 @@ angle = Math.atan2(By - Ay, Bx - Ax);
 
 - http://www.cse.yorku.ca/~amana/research/grid.pdf
 - http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
+- Demo by xem: http://codepen.io/xem/pen/RRxPNG
+
+### Projection of a plane on a sphere (on a 2D canvas)
 
+- new_y = Math.sin(-y * Math.PI/2);
+- new_x = Math.sin(x * Math.PI) * Math.cos(y * Math.PI / 2);
+- if Math.abs(x) < .5, the projected point is hidden "behind" the sphere.
+- Prototype by subzey: http://codepen.io/subzey/pen/rVoXQx
+- Demo by xem: http://xem.github.io/articles/demos/js13k15/globe2.html
diff --git a/readme.md b/readme.md
@@ -15,7 +15,8 @@ angleDeg = angleRad * 180 / Math.PI;
 
 ### Distance between two points (Pythagore)
 
-dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
+- dist = function(A,B){ return Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA)) } // ES5
+- dist = (A, B) => Math.hypot(xB -xA, yB -yA) // ES6
 
 ### Line passing through 2 points
 

diff --git a/readme.md b/readme.md
@@ -34,13 +34,13 @@ angle = Math.atan2(By - Ay, Bx - Ax);
 
 ### Rotate a point (angle in radians)
 
-Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
-Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
+- Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
+- Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
 
 ### Project a point on the trigonometric circle
 
-Anew_x = Math.cos(atan2(Ax, Ay))
-Anew_y = Math.sin(atan2(Ax, Ay))
+- Anew_x = Math.cos(atan2(Ax, Ay))
+- Anew_y = Math.sin(atan2(Ax, Ay))
 
 ### Intersections between a line and the grid (2D raycasting)
 

diff --git a/readme.md b/readme.md
@@ -2,8 +2,8 @@
 
 - o = [xo = 0, yo = 0] is the origin
 - A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
-- lengths are in pixels
-- code is in JavaScript
+- lengths are in any unit (ex: pixels)
+- code snippets are in JavaScript
 
 ### Degrees to radians
 
@@ -22,11 +22,11 @@ dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
 - line equation: y = ax + b
 - a = (yB - yA) / (yB - yA) = tan θ
 - θ = angle between line and x axis
-- b = yA - a * xA (bcause yA = a * xA + b)
+- b = yA - a * xA (because yA = a * xA + b)
 
 ### Angle in radians between the x axis at the origin and a point on the plane
 
-angle = atan2(Ax, Ay)
+angle = Math.atan2(Ax, Ay)
 
 ### Angle in radians between two points
 

diff --git a/readme.md b/readme.md
@@ -1,49 +1,48 @@
-#### Conventions
-
+### Conventions
 
 - o = [xo = 0, yo = 0] is the origin
 - A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
 - lengths are in pixels
 - code is in JavaScript
 
+### Degrees to radians
 
-#### Distance between two points (Pythagore)
+angleRad = angleDeg * Math.PI / 180;
 
-dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
+### Radians to degrees
 
-#### Line passing through 2 points
+angleDeg = angleRad * 180 / Math.PI;
+
+### Distance between two points (Pythagore)
+
+dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
 
+### Line passing through 2 points
 
 - line equation: y = ax + b
 - a = (yB - yA) / (yB - yA) = tan θ
 - θ = angle between line and x axis
 - b = yA - a * xA (bcause yA = a * xA + b)
 
-#### Degrees to radians
+### Angle in radians between the x axis at the origin and a point on the plane
 
-angleRad = angleDeg * Math.PI / 180;
-
-#### Radians to degrees
-
-angleDeg = angleRad * 180 / Math.PI;
+angle = atan2(Ax, Ay)
 
-#### Angle between two points
+### Angle in radians between two points
 
-todo
+angle = Math.atan2(By - Ay, Bx - Ax);
 
-
-#### Rotate a point (angle in radians)
+### Rotate a point (angle in radians)
 
 Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
 Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
 
+### Project a point on the trigonometric circle
 
-#### Project a point on the trigonometric circle
-
-todo
-
+Anew_x = Math.cos(atan2(Ax, Ay))
+Anew_y = Math.sin(atan2(Ax, Ay))
 
-#### Intersections between a line and the grid (2D raycasting)
+### Intersections between a line and the grid (2D raycasting)
 
 - http://www.cse.yorku.ca/~amana/research/grid.pdf
 - http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm

diff --git a/readme.md b/readme.md
@@ -19,22 +19,32 @@ dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
 - θ = angle between line and x axis
 - b = yA - a * xA (bcause yA = a * xA + b)
 
+#### Degrees to radians
 
-#### Angle between two points
+angleRad = angleDeg * Math.PI / 180;
+
+#### Radians to degrees
 
+angleDeg = angleRad * 180 / Math.PI;
 
+#### Angle between two points
 
+todo
 
-#### Rotate a point
 
+#### Rotate a point (angle in radians)
 
+Anew_x = Ax * Math.cos(angle) - Ay * Math.sin(angle)
+Anew_y = Ax * Math.sin(angle) + Ay * Math.cos(angle)
 
 
 #### Project a point on the trigonometric circle
 
+todo
 
 
+#### Intersections between a line and the grid (2D raycasting)
 
-#### Intersections between a line and the grid
-
+- http://www.cse.yorku.ca/~amana/research/grid.pdf
+- http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm
 
diff --git a/readme.md b/readme.md
@@ -1,42 +1,40 @@
-Conventions
-====
+#### Conventions
+
 
 - o = [xo = 0, yo = 0] is the origin
 - A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
 - lengths are in pixels
 - code is in JavaScript
 
 
-Distance between two points (Pythagore)
-====
+#### Distance between two points (Pythagore)
 
 dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
 
-Line passing through 2 points
-====
+#### Line passing through 2 points
+
 
 - line equation: y = ax + b
 - a = (yB - yA) / (yB - yA) = tan θ
 - θ = angle between line and x axis
 - b = yA - a * xA (bcause yA = a * xA + b)
 
 
-Angle between two points
-====
+#### Angle between two points
+
+
+
 
+#### Rotate a point
 
 
-Rotate a point
-====
 
 
+#### Project a point on the trigonometric circle
 
-Project a point on the trigonometric circle
-===
 
 
 
-Intersections between a line and the grid
-===
+#### Intersections between a line and the grid
 
 
diff --git a/readme.md b/readme.md
@@ -1,5 +1,5 @@
 Conventions
-===
+====
 
 - o = [xo = 0, yo = 0] is the origin
 - A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
@@ -8,26 +8,26 @@ Conventions
 
 
 Distance between two points (Pythagore)
-===
+====
 
 dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
 
 Line passing through 2 points
-===
+====
 
 - line equation: y = ax + b
-- a = (yB - yA)/*(yB - yA) = tan θ
+- a = (yB - yA) / (yB - yA) = tan θ
 - θ = angle between line and x axis
-- b = yA - a * xA (bcause yA = a xA + b)
+- b = yA - a * xA (bcause yA = a * xA + b)
 
 
 Angle between two points
-===
+====
 
 
 
 Rotate a point
-===
+====
 
 
 

diff --git a/readme.mb → readme.md b/readme.mb → readme.md
diff --git a/readme.mb b/readme.mb
@@ -0,0 +1,42 @@
+Conventions
+===
+
+- o = [xo = 0, yo = 0] is the origin
+- A = [xA, yA] is a point on the 2D plane. Same for B, C, ...
+- lengths are in pixels
+- code is in JavaScript
+
+
+Distance between two points (Pythagore)
+===
+
+dist = (A,B) => Math.sqrt((xB - xA)\*(xB - xA) + (yB - yA)\*(yB - yA))
+
+Line passing through 2 points
+===
+
+- line equation: y = ax + b
+- a = (yB - yA)/*(yB - yA) = tan θ
+- θ = angle between line and x axis
+- b = yA - a * xA (bcause yA = a xA + b)
+
+
+Angle between two points
+===
+
+
+
+Rotate a point
+===
+
+
+
+Project a point on the trigonometric circle
+===
+
+
+
+Intersections between a line and the grid
+===
+
+
No results found