Last active
February 26, 2026 09:38
-
Star
(265)
You must be signed in to star a gist -
Fork
(29)
You must be signed in to fork a gist
-
-
Save xem/99930986c5333125a13b0ea50600391f to your computer and use it in GitHub Desktop.
Revisions
-
xem revised this gist
Aug 3, 2021 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -14,7 +14,7 @@ angleDeg = angleRad * 180 / Math.PI; ### Unit circle  ## 2D -
xem revised this gist
Jun 5, 2019 . 1 changed file with 51 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -211,8 +211,57 @@ ftp://rtfm.mit.edu/pub/usenet-by-group/news.answers/graphics/algorithms-faq ### Easing functions (from https://gist.github.com/gre/1650294) ``` /* * Easing Functions - inspired from http://gizma.com/easing/ * only considering the t value for the range [0, 1] => [0, 1] */ EasingFunctions = { // no easing, no acceleration linear: function (t) { return t }, // accelerating from zero velocity easeInQuad: function (t) { return t*t }, // decelerating to zero velocity easeOutQuad: function (t) { return t*(2-t) }, // acceleration until halfway, then deceleration easeInOutQuad: function (t) { return t<.5 ? 2*t*t : -1+(4-2*t)*t }, // accelerating from zero velocity easeInCubic: function (t) { return t*t*t }, // decelerating to zero velocity easeOutCubic: function (t) { return (--t)*t*t+1 }, // acceleration until halfway, then deceleration easeInOutCubic: function (t) { return t<.5 ? 4*t*t*t : (t-1)*(2*t-2)*(2*t-2)+1 }, // accelerating from zero velocity easeInQuart: function (t) { return t*t*t*t }, // decelerating to zero velocity easeOutQuart: function (t) { return 1-(--t)*t*t*t }, // acceleration until halfway, then deceleration easeInOutQuart: function (t) { return t<.5 ? 8*t*t*t*t : 1-8*(--t)*t*t*t }, // accelerating from zero velocity easeInQuint: function (t) { return t*t*t*t*t }, // decelerating to zero velocity easeOutQuint: function (t) { return 1+(--t)*t*t*t*t }, // acceleration until halfway, then deceleration easeInOutQuint: function (t) { return t<.5 ? 16*t*t*t*t*t : 1+16*(--t)*t*t*t*t } } ``` ### 2D Vector helpers (from https://twitter.com/MaximeEuziere/status/1047545802669875200 ) ``` V=(x,y)=>({x,y}) // Vec2D constructor l=v=>d(v,v)**.5 // length(v) a=(v,w)=>V(v.x+w.x,v.y+w.y) // add(v, w) s=(v,w)=>a(v,m(w,-1)) // sub(v, w) m=(v,n)=>V(v.x*n,v.y*n) // scale(v, n) t=(v,w)=>l(s(v,w)) // distance(v, w) d=(v,w)=>v.x*w.x+v.y*w.y // dot_product(v, w) c=(v,w)=>v.x*w.y-v.y*w.x // cross_product(v, w) r=(v,o,t)=>a(o,V(c(f=s(v,o),g=V(Math.sin(t),Math.cos(t))),d(f,g))) // rotate(v, origin, theta_angle) n=v=>m(v,1/(l(v)||1)) // normalize(v) ``` -
xem revised this gist
Jun 5, 2019 . 1 changed file with 9 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -207,4 +207,12 @@ 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 ### Easing functions https://gist.github.com/gre/1650294 ### 2D Vector helpers https://twitter.com/MaximeEuziere/status/1047545802669875200 -
xem revised this gist
Mar 22, 2017 . 1 changed file with 26 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 -
xem revised this gist
Feb 24, 2017 . 1 changed file with 16 additions and 3 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -62,10 +62,23 @@ vec2 ( ```` ### Normalize a vector ### a.k.a Project any point of the plane on the trigonometric circle (center: origin, radius: 1) 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) -
xem revised this gist
Feb 24, 2017 . 1 changed file with 5 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -164,4 +164,8 @@ http://bit.ly/bm1ftU ### Great videos about linear algebra and matrices: 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 -
xem revised this gist
Feb 24, 2017 . 1 changed file with 3 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -12,6 +12,9 @@ angleRad = angleDeg * Math.PI / 180; angleDeg = angleRad * 180 / Math.PI; ### Unit circle  ## 2D -
xem revised this gist
Aug 13, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -23,7 +23,7 @@ angleDeg = angleRad * 180 / Math.PI; ### Line passing through 2 points - line equation: y = ax + b - a = (yB - yA) / (xB - xA) = tan θ - θ = angle between line and x axis - b = yA - a * xA (because yA = a * xA + b) -
xem revised this gist
Aug 13, 2016 . 1 changed file with 13 additions and 9 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 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 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 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 (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 - 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 (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/ ### Minimal 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) @@ -157,4 +157,8 @@ vec3 ( ### Sphere trigonometry http://bit.ly/bm1ftU ### Great videos about linear algebra and matrices: https://www.youtube.com/playlist?list=PLZHQObOWTQDPD3MizzM2xVFitgF8hE_ab -
xem revised this gist
Jul 18, 2016 . 1 changed file with 61 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,6 +1,5 @@ ### Conventions - 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) ### 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 -
xem revised this gist
Jul 16, 2016 . 1 changed file with 5 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 -
xem revised this gist
Jul 14, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -40,7 +40,7 @@ angleDeg = angleRad * 180 / Math.PI; angle = Math.atan2(Ax, Ay) ### Angle in radians between two points and the origin angle = Math.atan2(By - Ay, Bx - Ax); -
xem revised this gist
Jul 14, 2016 . 1 changed file with 19 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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) -
xem revised this gist
Jul 14, 2016 . 1 changed file with 2 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 ### 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 = 5\*x+1 & y' = 2\*x+8: - xP = 7/3; - yP = 12.666; -
xem revised this gist
Jul 14, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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?editors=1010 ### Projection of a plane on a sphere (on a 2D canvas) -
xem revised this gist
Jul 14, 2016 . 1 changed file with 1 addition and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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; - Ex with y=5x+1 & y'=2x+8: - xP = 7/3; - yP = 12.666; -
xem revised this gist
Jul 14, 2016 . 1 changed file with 6 additions and 2 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 * 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 -
xem revised this gist
Jul 14, 2016 . 1 changed file with 8 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 ### 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) -
xem revised this gist
Jul 14, 2016 . 1 changed file with 16 additions and 0 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 -
xem revised this gist
Jul 14, 2016 . 1 changed file with 2 additions and 1 deletion.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -15,7 +15,8 @@ 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 ### Line passing through 2 points -
xem revised this gist
Jul 14, 2016 . 1 changed file with 4 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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) ### Project a point on the trigonometric circle - Anew_x = Math.cos(atan2(Ax, Ay)) - Anew_y = Math.sin(atan2(Ax, Ay)) ### Intersections between a line and the grid (2D raycasting) -
xem revised this gist
Jul 14, 2016 . 1 changed file with 4 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 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 (because yA = a * xA + b) ### Angle in radians between the x axis at the origin and a point on the plane angle = Math.atan2(Ax, Ay) ### Angle in radians between two points -
xem revised this gist
Jul 14, 2016 . 1 changed file with 19 additions and 20 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,49 +1,48 @@ ### 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 angleRad = angleDeg * Math.PI / 180; ### Radians to degrees 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) ### Angle in radians between the x axis at the origin and a point on the plane angle = atan2(Ax, Ay) ### Angle in radians between two points 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) ### Project a point on the trigonometric circle Anew_x = Math.cos(atan2(Ax, Ay)) Anew_y = Math.sin(atan2(Ax, Ay)) ### 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 -
xem revised this gist
Jul 14, 2016 . 1 changed file with 14 additions and 4 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 angleRad = angleDeg * Math.PI / 180; #### Radians to degrees angleDeg = angleRad * 180 / Math.PI; #### Angle between two points todo #### 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) - http://www.cse.yorku.ca/~amana/research/grid.pdf - http://en.wikipedia.org/wiki/Bresenham%27s_line_algorithm -
xem revised this gist
Jul 14, 2016 . 1 changed file with 12 additions and 14 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -1,42 +1,40 @@ #### 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 -
xem revised this gist
Jul 14, 2016 . 1 changed file with 7 additions and 7 deletions.There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 θ - θ = angle between line and x axis - b = yA - a * xA (bcause yA = a * xA + b) Angle between two points ==== Rotate a point ==== -
xem renamed this gist
Jul 14, 2016 . 1 changed file with 0 additions and 0 deletions.There are no files selected for viewing
File renamed without changes. -
xem created this gist
Jul 14, 2016 .There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode charactersOriginal file line number Diff line number Diff line change @@ -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 ===