Immersive Linear Algebra

Immersive Math immersivemath: Immersive Linear Algebra MathJax.Hub.Config( { tex2jax: {inlineMath: [['$','$'], ['\$','\$']]}, }); MathJax.Hub.Register.StartupHook("End",function () { gHasLoaded = 0; samResizeAllCanvases(true); }); var gScaleFactor = 1; function backingScale() { if('devicePixelRatio' in window && window.devicePixelRatio > 1) return window.devicePixelRatio; else return 1; } function writeWidthOk() { var e = document.getElementById("id_width"); var w = samGetWindowWidth(); var s = backingScale(); if( s * w =800. Current browser width: " + w*s; e.style.color = "#ff0000"; } else e.innerHTML = ""; } function fCH99_InitShadows3DCanvas() { var canvas; var illustration; canvas = document.getElementById("shadows3D_canvas"); gSamFigures.push(canvas); canvas.mSamObj = new SamObj(canvas); canvas.mSamObj.mFigureNumber = ""; canvas.mSamObj.mIntroSpinAllowed = 0; // Forbid intro spinning var far_away = 1.1; illustration = new SamIllustration3DObj(canvas, -0.377, -0.3, +0.377, +0.175, false, -1.75, -1.40, 1.75, 1.5, 0.55); var camera = new SamCameraObj(canvas,new Vec3(3.0*far_away, 5.0*far_away+0.8, 7.0*far_away), new Vec3(0.0, 1.0, 0.0), new Vec3(0.0, 0.3+0.8, 0.0), 1.0); illustration.fSetupCameras([camera]); camera.fSetCameraMovementType(CAMERA_ONLY_XY_ROTATION); canvas.mSamObj.mSamIllustration3DObj = illustration; illustration.mLabelPos = 0.; illustration.mSquareSize = 0.0; illustration.fSetupSimple2DEventListeners(); // no interaction on this one // constant var zero = illustration.fAdd1DPoint(0.0, false); // plane equation var S = illustration.fLazyAdd3DPoint(-1.3, 0.0, -1.0, false); var N = illustration.fLazyAdd3DPoint(-1.3, 1.0, -1.0, false); // light source var lx = illustration.fAdd1DPoint(0.0,true); var ly = illustration.fAdd1DPoint(2.0,true); var lz = illustration.fAdd1DPoint(0.0,true); var L = illustration.fAdd3DPoint(lx, ly, lz); // create plane points var p1_idx = illustration.fLazyAdd3DPoint(-2.0, 0.0, -2.0, false); var p2_idx = illustration.fLazyAdd3DPoint(+2.0, 0.0, -2.0, false); var p3_idx = illustration.fLazyAdd3DPoint(+2.0, 0.0, +2.0, false); var p4_idx = illustration.fLazyAdd3DPoint(-2.0, 0.0, +2.0, false); // create and draw triangle (not using fLazyAdd3DPoint, since I need the ty-coords for intersection computations) var t1x = illustration.fAdd1DPoint(-0.5,true); var t1y = illustration.fAdd1DPoint(+0.6,true); var t1z = illustration.fAdd1DPoint(+0.0,true); var T1 = illustration.fAdd3DPoint(t1x, t1y, t1z); var t2x = illustration.fAdd1DPoint(+0.5,true); var t2y = illustration.fAdd1DPoint(+0.7+0.3,true); var t2z = illustration.fAdd1DPoint(-0.5,true); var T2 = illustration.fAdd3DPoint(t2x, t2y, t2z); var t3x = illustration.fAdd1DPoint(+0.25,true); var t3y = illustration.fAdd1DPoint(+0.55,true); var t3z = illustration.fAdd1DPoint(+0.5,true); var T3 = illustration.fAdd3DPoint(t3x, t3y, t3z); // compute triangle center, TC var T1T2 = illustration.fAdd3DVectors(T1, T2, false); var T1T2T3 = illustration.fAdd3DVectors(T1T2, T3, false); var one_third = illustration.fAdd1DPoint(0.3333333, false); var TC = illustration.fScalar3DMult(T1T2T3, one_third, false); // since we use plane equation y=0, the solution is very simple: t = -ly / ( t1y-Ly ) var minus_ly = illustration.fAddFunctionOfTwo1DPoints(zero, ly, SAM_FUNC_SUB, false); var t1y_ly = illustration.fAddFunctionOfTwo1DPoints(t1y, ly, SAM_FUNC_SUB, false); var t2y_ly = illustration.fAddFunctionOfTwo1DPoints(t2y, ly, SAM_FUNC_SUB, false); var t3y_ly = illustration.fAddFunctionOfTwo1DPoints(t3y, ly, SAM_FUNC_SUB, false); var solution_t1 = illustration.fAddFunctionOfTwo1DPoints(minus_ly, t1y_ly, SAM_FUNC_DIV, false); var solution_t2 = illustration.fAddFunctionOfTwo1DPoints(minus_ly, t2y_ly, SAM_FUNC_DIV, false); var solution_t3 = illustration.fAddFunctionOfTwo1DPoints(minus_ly, t3y_ly, SAM_FUNC_DIV, false); // prepare for computing the points of intersections... var t1x_lx = illustration.fAddFunctionOfTwo1DPoints(t1x, lx, SAM_FUNC_SUB, false); var t2x_lx = illustration.fAddFunctionOfTwo1DPoints(t2x, lx, SAM_FUNC_SUB, false); var t3x_lx = illustration.fAddFunctionOfTwo1DPoints(t3x, lx, SAM_FUNC_SUB, false); var t1z_lz = illustration.fAddFunctionOfTwo1DPoints(t1z, lz, SAM_FUNC_SUB, false); var t2z_lz = illustration.fAddFunctionOfTwo1DPoints(t2z, lz, SAM_FUNC_SUB, false); var t3z_lz = illustration.fAddFunctionOfTwo1DPoints(t3z, lz, SAM_FUNC_SUB, false); var t1d1x = illustration.fAddFunctionOfTwo1DPoints(solution_t1, t1x_lx, SAM_FUNC_MUL, false); var t1d1y = illustration.fAddFunctionOfTwo1DPoints(solution_t1, t1y_ly, SAM_FUNC_MUL, false); var t1d1z = illustration.fAddFunctionOfTwo1DPoints(solution_t1, t1z_lz, SAM_FUNC_MUL, false); var t2d2x = illustration.fAddFunctionOfTwo1DPoints(solution_t2, t2x_lx, SAM_FUNC_MUL, false); var t2d2y = illustration.fAddFunctionOfTwo1DPoints(solution_t2, t2y_ly, SAM_FUNC_MUL, false); var t2d2z = illustration.fAddFunctionOfTwo1DPoints(solution_t2, t2z_lz, SAM_FUNC_MUL, false); var t3d3x = illustration.fAddFunctionOfTwo1DPoints(solution_t3, t3x_lx, SAM_FUNC_MUL, false); var t3d3y = illustration.fAddFunctionOfTwo1DPoints(solution_t3, t3y_ly, SAM_FUNC_MUL, false); var t3d3z = illustration.fAddFunctionOfTwo1DPoints(solution_t3, t3z_lz, SAM_FUNC_MUL, false); // compute the intersection points var r1x = illustration.fAddFunctionOfTwo1DPoints(t1d1x, lx, SAM_FUNC_ADD, false); var r1y = illustration.fAddFunctionOfTwo1DPoints(t1d1y, ly, SAM_FUNC_ADD, false); var r1z = illustration.fAddFunctionOfTwo1DPoints(t1d1z, lz, SAM_FUNC_ADD, false); var r2x = illustration.fAddFunctionOfTwo1DPoints(t2d2x, lx, SAM_FUNC_ADD, false); var r2y = illustration.fAddFunctionOfTwo1DPoints(t2d2y, ly, SAM_FUNC_ADD, false); var r2z = illustration.fAddFunctionOfTwo1DPoints(t2d2z, lz, SAM_FUNC_ADD, false); var r3x = illustration.fAddFunctionOfTwo1DPoints(t3d3x, lx, SAM_FUNC_ADD, false); var r3y = illustration.fAddFunctionOfTwo1DPoints(t3d3y, ly, SAM_FUNC_ADD, false); var r3z = illustration.fAddFunctionOfTwo1DPoints(t3d3z, lz, SAM_FUNC_ADD, false); var R1 = illustration.fAdd3DPoint(r1x, r1y, r1z); var R2 = illustration.fAdd3DPoint(r2x, r2y, r2z); var R3 = illustration.fAdd3DPoint(r3x, r3y, r3z); //================================ DRAW STUFF ========================== illustration.fAdd3DPolygonDepthCueLines([p1_idx,p2_idx,p3_idx,p4_idx], 1.0, 2.5, PLANE_BORDER_COLOR, PLANE_COLOR_ALPHA, true); // draw the intersection points... var R1_c = illustration.fAdd3DCirclePixelRadius(R1, 4, 0.0, BLACK_COLOR, BLACK_COLOR, true); var R2_c = illustration.fAdd3DCirclePixelRadius(R2, 4, 0.0, BLACK_COLOR, BLACK_COLOR, true); var R3_c = illustration.fAdd3DCirclePixelRadius(R3, 4, 0.0, BLACK_COLOR, BLACK_COLOR, true); // create animated dashed lines from the triangle vertices down to the intersection points... var zero_dashed_line1 = illustration.fAdd3DLine(T1, T1, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var zero_dashed_line2 = illustration.fAdd3DLine(T2, T2, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var zero_dashed_line3 = illustration.fAdd3DLine(T3, T3, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var dashed_line1 = illustration.fAdd3DLine(T1, R1, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var dashed_line2 = illustration.fAdd3DLine(T2, R2, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var dashed_line3 = illustration.fAdd3DLine(T3, R3, GRAY_COLOR, 1, false, true, 6.0 ,3.0); var dashed_anim1 = illustration.fAddAnimated3DLine(zero_dashed_line1, dashed_line1, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); var dashed_anim2 = illustration.fAddAnimated3DLine(zero_dashed_line2, dashed_line2, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); var dashed_anim3 = illustration.fAddAnimated3DLine(zero_dashed_line3, dashed_line3, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); // draw shadow triangle var shadow = illustration.fAdd3DPolygon([R1, R2, R3], 0, BLACK_COLOR, "rgba(100,100,100,0.5)", true); // draw triangle illustration.fAdd3DPolygon([T1, T2, T3], 1, BLACK_COLOR, "rgb(255,200,100)", true); // create ray directions with animation (so create zero vectors as well) var zero_line = illustration.fAdd3DLine(L, L, HIGHLIGHT_VECTOR_COLOR, 2, true, false, 6.0 ,3.0); var R1l = illustration.fAdd3DLine(L, T1, HIGHLIGHT_VECTOR_COLOR, 2, true, false, 6.0 ,3.0); var R2l = illustration.fAdd3DLine(L, T2, HIGHLIGHT_VECTOR_COLOR, 2, true, false, 6.0 ,3.0); var R3l = illustration.fAdd3DLine(L, T3, HIGHLIGHT_VECTOR_COLOR, 2, true, false, 6.0 ,3.0); var anim_R1 = illustration.fAddAnimated3DLine(zero_line, R1l, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); var anim_R2 = illustration.fAddAnimated3DLine(zero_line, R2l, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); var anim_R3 = illustration.fAddAnimated3DLine(zero_line, R3l, 1000, 1, SAM_INTERPOLATION_SMOOTHSTEP, true); illustration.fAdd3DCirclePixelRadius(L, 6, 1.0, BLACK_COLOR, "rgb(255,255,100)", true); var zero_offset = illustration.fLazyAdd2DPoint(0,0,false); var dx_offset = illustration.fLazyAdd2DPoint(10,0,false); var txt_offset, obj; illustration.fAdd3DCirclePixelRadius(T1,3,0,BLACK_COLOR, GRAY_COLOR, true); illustration.fAdd3DCirclePixelRadius(T2,3,0,BLACK_COLOR, GRAY_COLOR, true); illustration.fAdd3DCirclePixelRadius(T3,3,0,BLACK_COLOR, GRAY_COLOR, true); // Make sure this rotates around x-axis from the beginning. canvas.mSamObj.mIsRotating = 1; } function onLoad() { computeScaledSizes(); writeWidthOk(); gScaleFactor = backingScale(); fCH99_InitShadows3DCanvas(); window.onscroll = samOnScrollAllCanvases; } function onResize() { writeWidthOk(); samResizeAllCanvases(true); } (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-67249736-1', 'auto'); ga('send', 'pageview'); Home About Contact immersivemath This will be replaced with browser width stuff! immersive linear algebra by J. StrÃ¶m, K. ÃstrÃ¶m, and T. Akenine-MÃ¶ller v1.1. ISBN: 978-91-637-9354-7 $u$ The world's first linear algebra book with fully interactive figures. Learn More Check us out on Twitter and Facebook Table of Contents Preface A few words about this book. Chapter 1: Introduction How to navigate, notation, and a recap of some math that we think you already know. Chapter 2: Vectors The concept of a vector is introduced, and we learn how to add and subtract vectors, and more. Chapter 3: The Dot Product A powerful tool that takes two vectors and produces a scalar. Chapter 4: The Vector Product In three-dimensional spaces you can produce a vector from two other vectors using this tool. Chapter 5: Gaussian Elimination A way to solve systems of linear equations. Chapter 6: The Matrix Enter the matrix. Chapter 7: Determinants A fundamental property of square matrices. Chapter 8: Rank Discover the behaviour of matrices. Chapter 9: Linear Mappings Learn to harness the power of linearity... Chapter 10: Eigenvalues and Eigenvectors This chapter has a value in itself. © immersivemath 2015-2020

Immersive Linear Algebra

Comments

Recommended Tutorials

Other Tutorials by GameDev.net

Immersive Linear Algebra

Comments

Recommended Tutorials

Other Tutorials by GameDev.net

Reticulating splines