├── LICENSE
├── README.md
├── lessons
├── 01-multiplication
│ ├── index.html
│ └── script.js
├── 02-translation
│ ├── index.html
│ └── script.js
├── 03-scale
│ ├── index.html
│ └── script.js
├── 04-rotate
│ ├── index.html
│ └── script.js
├── 05-rotate-all
│ ├── index.html
│ └── script.js
└── 06-composition
│ ├── index.html
│ └── script.js
└── shared
├── shared.js
└── style.css
/LICENSE:
--------------------------------------------------------------------------------
1 | Mozilla Public License, version 2.0
2 |
3 | 1. Definitions
4 |
5 | 1.1. "Contributor"
6 |
7 | means each individual or legal entity that creates, contributes to the
8 | creation of, or owns Covered Software.
9 |
10 | 1.2. "Contributor Version"
11 |
12 | means the combination of the Contributions of others (if any) used by a
13 | Contributor and that particular Contributor's Contribution.
14 |
15 | 1.3. "Contribution"
16 |
17 | means Covered Software of a particular Contributor.
18 |
19 | 1.4. "Covered Software"
20 |
21 | means Source Code Form to which the initial Contributor has attached the
22 | notice in Exhibit A, the Executable Form of such Source Code Form, and
23 | Modifications of such Source Code Form, in each case including portions
24 | thereof.
25 |
26 | 1.5. "Incompatible With Secondary Licenses"
27 | means
28 |
29 | a. that the initial Contributor has attached the notice described in
30 | Exhibit B to the Covered Software; or
31 |
32 | b. that the Covered Software was made available under the terms of
33 | version 1.1 or earlier of the License, but not also under the terms of
34 | a Secondary License.
35 |
36 | 1.6. "Executable Form"
37 |
38 | means any form of the work other than Source Code Form.
39 |
40 | 1.7. "Larger Work"
41 |
42 | means a work that combines Covered Software with other material, in a
43 | separate file or files, that is not Covered Software.
44 |
45 | 1.8. "License"
46 |
47 | means this document.
48 |
49 | 1.9. "Licensable"
50 |
51 | means having the right to grant, to the maximum extent possible, whether
52 | at the time of the initial grant or subsequently, any and all of the
53 | rights conveyed by this License.
54 |
55 | 1.10. "Modifications"
56 |
57 | means any of the following:
58 |
59 | a. any file in Source Code Form that results from an addition to,
60 | deletion from, or modification of the contents of Covered Software; or
61 |
62 | b. any new file in Source Code Form that contains any Covered Software.
63 |
64 | 1.11. "Patent Claims" of a Contributor
65 |
66 | means any patent claim(s), including without limitation, method,
67 | process, and apparatus claims, in any patent Licensable by such
68 | Contributor that would be infringed, but for the grant of the License,
69 | by the making, using, selling, offering for sale, having made, import,
70 | or transfer of either its Contributions or its Contributor Version.
71 |
72 | 1.12. "Secondary License"
73 |
74 | means either the GNU General Public License, Version 2.0, the GNU Lesser
75 | General Public License, Version 2.1, the GNU Affero General Public
76 | License, Version 3.0, or any later versions of those licenses.
77 |
78 | 1.13. "Source Code Form"
79 |
80 | means the form of the work preferred for making modifications.
81 |
82 | 1.14. "You" (or "Your")
83 |
84 | means an individual or a legal entity exercising rights under this
85 | License. For legal entities, "You" includes any entity that controls, is
86 | controlled by, or is under common control with You. For purposes of this
87 | definition, "control" means (a) the power, direct or indirect, to cause
88 | the direction or management of such entity, whether by contract or
89 | otherwise, or (b) ownership of more than fifty percent (50%) of the
90 | outstanding shares or beneficial ownership of such entity.
91 |
92 |
93 | 2. License Grants and Conditions
94 |
95 | 2.1. Grants
96 |
97 | Each Contributor hereby grants You a world-wide, royalty-free,
98 | non-exclusive license:
99 |
100 | a. under intellectual property rights (other than patent or trademark)
101 | Licensable by such Contributor to use, reproduce, make available,
102 | modify, display, perform, distribute, and otherwise exploit its
103 | Contributions, either on an unmodified basis, with Modifications, or
104 | as part of a Larger Work; and
105 |
106 | b. under Patent Claims of such Contributor to make, use, sell, offer for
107 | sale, have made, import, and otherwise transfer either its
108 | Contributions or its Contributor Version.
109 |
110 | 2.2. Effective Date
111 |
112 | The licenses granted in Section 2.1 with respect to any Contribution
113 | become effective for each Contribution on the date the Contributor first
114 | distributes such Contribution.
115 |
116 | 2.3. Limitations on Grant Scope
117 |
118 | The licenses granted in this Section 2 are the only rights granted under
119 | this License. No additional rights or licenses will be implied from the
120 | distribution or licensing of Covered Software under this License.
121 | Notwithstanding Section 2.1(b) above, no patent license is granted by a
122 | Contributor:
123 |
124 | a. for any code that a Contributor has removed from Covered Software; or
125 |
126 | b. for infringements caused by: (i) Your and any other third party's
127 | modifications of Covered Software, or (ii) the combination of its
128 | Contributions with other software (except as part of its Contributor
129 | Version); or
130 |
131 | c. under Patent Claims infringed by Covered Software in the absence of
132 | its Contributions.
133 |
134 | This License does not grant any rights in the trademarks, service marks,
135 | or logos of any Contributor (except as may be necessary to comply with
136 | the notice requirements in Section 3.4).
137 |
138 | 2.4. Subsequent Licenses
139 |
140 | No Contributor makes additional grants as a result of Your choice to
141 | distribute the Covered Software under a subsequent version of this
142 | License (see Section 10.2) or under the terms of a Secondary License (if
143 | permitted under the terms of Section 3.3).
144 |
145 | 2.5. Representation
146 |
147 | Each Contributor represents that the Contributor believes its
148 | Contributions are its original creation(s) or it has sufficient rights to
149 | grant the rights to its Contributions conveyed by this License.
150 |
151 | 2.6. Fair Use
152 |
153 | This License is not intended to limit any rights You have under
154 | applicable copyright doctrines of fair use, fair dealing, or other
155 | equivalents.
156 |
157 | 2.7. Conditions
158 |
159 | Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted in
160 | Section 2.1.
161 |
162 |
163 | 3. Responsibilities
164 |
165 | 3.1. Distribution of Source Form
166 |
167 | All distribution of Covered Software in Source Code Form, including any
168 | Modifications that You create or to which You contribute, must be under
169 | the terms of this License. You must inform recipients that the Source
170 | Code Form of the Covered Software is governed by the terms of this
171 | License, and how they can obtain a copy of this License. You may not
172 | attempt to alter or restrict the recipients' rights in the Source Code
173 | Form.
174 |
175 | 3.2. Distribution of Executable Form
176 |
177 | If You distribute Covered Software in Executable Form then:
178 |
179 | a. such Covered Software must also be made available in Source Code Form,
180 | as described in Section 3.1, and You must inform recipients of the
181 | Executable Form how they can obtain a copy of such Source Code Form by
182 | reasonable means in a timely manner, at a charge no more than the cost
183 | of distribution to the recipient; and
184 |
185 | b. You may distribute such Executable Form under the terms of this
186 | License, or sublicense it under different terms, provided that the
187 | license for the Executable Form does not attempt to limit or alter the
188 | recipients' rights in the Source Code Form under this License.
189 |
190 | 3.3. Distribution of a Larger Work
191 |
192 | You may create and distribute a Larger Work under terms of Your choice,
193 | provided that You also comply with the requirements of this License for
194 | the Covered Software. If the Larger Work is a combination of Covered
195 | Software with a work governed by one or more Secondary Licenses, and the
196 | Covered Software is not Incompatible With Secondary Licenses, this
197 | License permits You to additionally distribute such Covered Software
198 | under the terms of such Secondary License(s), so that the recipient of
199 | the Larger Work may, at their option, further distribute the Covered
200 | Software under the terms of either this License or such Secondary
201 | License(s).
202 |
203 | 3.4. Notices
204 |
205 | You may not remove or alter the substance of any license notices
206 | (including copyright notices, patent notices, disclaimers of warranty, or
207 | limitations of liability) contained within the Source Code Form of the
208 | Covered Software, except that You may alter any license notices to the
209 | extent required to remedy known factual inaccuracies.
210 |
211 | 3.5. Application of Additional Terms
212 |
213 | You may choose to offer, and to charge a fee for, warranty, support,
214 | indemnity or liability obligations to one or more recipients of Covered
215 | Software. However, You may do so only on Your own behalf, and not on
216 | behalf of any Contributor. You must make it absolutely clear that any
217 | such warranty, support, indemnity, or liability obligation is offered by
218 | You alone, and You hereby agree to indemnify every Contributor for any
219 | liability incurred by such Contributor as a result of warranty, support,
220 | indemnity or liability terms You offer. You may include additional
221 | disclaimers of warranty and limitations of liability specific to any
222 | jurisdiction.
223 |
224 | 4. Inability to Comply Due to Statute or Regulation
225 |
226 | If it is impossible for You to comply with any of the terms of this License
227 | with respect to some or all of the Covered Software due to statute,
228 | judicial order, or regulation then You must: (a) comply with the terms of
229 | this License to the maximum extent possible; and (b) describe the
230 | limitations and the code they affect. Such description must be placed in a
231 | text file included with all distributions of the Covered Software under
232 | this License. Except to the extent prohibited by statute or regulation,
233 | such description must be sufficiently detailed for a recipient of ordinary
234 | skill to be able to understand it.
235 |
236 | 5. Termination
237 |
238 | 5.1. The rights granted under this License will terminate automatically if You
239 | fail to comply with any of its terms. However, if You become compliant,
240 | then the rights granted under this License from a particular Contributor
241 | are reinstated (a) provisionally, unless and until such Contributor
242 | explicitly and finally terminates Your grants, and (b) on an ongoing
243 | basis, if such Contributor fails to notify You of the non-compliance by
244 | some reasonable means prior to 60 days after You have come back into
245 | compliance. Moreover, Your grants from a particular Contributor are
246 | reinstated on an ongoing basis if such Contributor notifies You of the
247 | non-compliance by some reasonable means, this is the first time You have
248 | received notice of non-compliance with this License from such
249 | Contributor, and You become compliant prior to 30 days after Your receipt
250 | of the notice.
251 |
252 | 5.2. If You initiate litigation against any entity by asserting a patent
253 | infringement claim (excluding declaratory judgment actions,
254 | counter-claims, and cross-claims) alleging that a Contributor Version
255 | directly or indirectly infringes any patent, then the rights granted to
256 | You by any and all Contributors for the Covered Software under Section
257 | 2.1 of this License shall terminate.
258 |
259 | 5.3. In the event of termination under Sections 5.1 or 5.2 above, all end user
260 | license agreements (excluding distributors and resellers) which have been
261 | validly granted by You or Your distributors under this License prior to
262 | termination shall survive termination.
263 |
264 | 6. Disclaimer of Warranty
265 |
266 | Covered Software is provided under this License on an "as is" basis,
267 | without warranty of any kind, either expressed, implied, or statutory,
268 | including, without limitation, warranties that the Covered Software is free
269 | of defects, merchantable, fit for a particular purpose or non-infringing.
270 | The entire risk as to the quality and performance of the Covered Software
271 | is with You. Should any Covered Software prove defective in any respect,
272 | You (not any Contributor) assume the cost of any necessary servicing,
273 | repair, or correction. This disclaimer of warranty constitutes an essential
274 | part of this License. No use of any Covered Software is authorized under
275 | this License except under this disclaimer.
276 |
277 | 7. Limitation of Liability
278 |
279 | Under no circumstances and under no legal theory, whether tort (including
280 | negligence), contract, or otherwise, shall any Contributor, or anyone who
281 | distributes Covered Software as permitted above, be liable to You for any
282 | direct, indirect, special, incidental, or consequential damages of any
283 | character including, without limitation, damages for lost profits, loss of
284 | goodwill, work stoppage, computer failure or malfunction, or any and all
285 | other commercial damages or losses, even if such party shall have been
286 | informed of the possibility of such damages. This limitation of liability
287 | shall not apply to liability for death or personal injury resulting from
288 | such party's negligence to the extent applicable law prohibits such
289 | limitation. Some jurisdictions do not allow the exclusion or limitation of
290 | incidental or consequential damages, so this exclusion and limitation may
291 | not apply to You.
292 |
293 | 8. Litigation
294 |
295 | Any litigation relating to this License may be brought only in the courts
296 | of a jurisdiction where the defendant maintains its principal place of
297 | business and such litigation shall be governed by laws of that
298 | jurisdiction, without reference to its conflict-of-law provisions. Nothing
299 | in this Section shall prevent a party's ability to bring cross-claims or
300 | counter-claims.
301 |
302 | 9. Miscellaneous
303 |
304 | This License represents the complete agreement concerning the subject
305 | matter hereof. If any provision of this License is held to be
306 | unenforceable, such provision shall be reformed only to the extent
307 | necessary to make it enforceable. Any law or regulation which provides that
308 | the language of a contract shall be construed against the drafter shall not
309 | be used to construe this License against a Contributor.
310 |
311 |
312 | 10. Versions of the License
313 |
314 | 10.1. New Versions
315 |
316 | Mozilla Foundation is the license steward. Except as provided in Section
317 | 10.3, no one other than the license steward has the right to modify or
318 | publish new versions of this License. Each version will be given a
319 | distinguishing version number.
320 |
321 | 10.2. Effect of New Versions
322 |
323 | You may distribute the Covered Software under the terms of the version
324 | of the License under which You originally received the Covered Software,
325 | or under the terms of any subsequent version published by the license
326 | steward.
327 |
328 | 10.3. Modified Versions
329 |
330 | If you create software not governed by this License, and you want to
331 | create a new license for such software, you may create and use a
332 | modified version of this License if you rename the license and remove
333 | any references to the name of the license steward (except to note that
334 | such modified license differs from this License).
335 |
336 | 10.4. Distributing Source Code Form that is Incompatible With Secondary
337 | Licenses If You choose to distribute Source Code Form that is
338 | Incompatible With Secondary Licenses under the terms of this version of
339 | the License, the notice described in Exhibit B of this License must be
340 | attached.
341 |
342 | Exhibit A - Source Code Form License Notice
343 |
344 | This Source Code Form is subject to the
345 | terms of the Mozilla Public License, v.
346 | 2.0. If a copy of the MPL was not
347 | distributed with this file, You can
348 | obtain one at
349 | http://mozilla.org/MPL/2.0/.
350 |
351 | If it is not possible or desirable to put the notice in a particular file,
352 | then You may include the notice in a location (such as a LICENSE file in a
353 | relevant directory) where a recipient would be likely to look for such a
354 | notice.
355 |
356 | You may add additional accurate notices of copyright ownership.
357 |
358 | Exhibit B - "Incompatible With Secondary Licenses" Notice
359 |
360 | This Source Code Form is "Incompatible
361 | With Secondary Licenses", as defined by
362 | the Mozilla Public License, v. 2.0.
363 |
364 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Matrix Math for the Web
2 |
3 | This content kit is brief overview of manipulating 3d objects with matrices (a concept from linear algebra.) Matrix math is used heavily in WebGL, but web developers are more familiar with DOM manipulations. This intro divorces the explanation of matrices from the WebGL APIs by using the CSS3 `matrix3d` transform.
4 |
5 | It demonstrates translation, scale, and rotation transformations, as well as exploring how to compose a single matrix transform from multiple transforms through matrix multiplication.
6 |
7 | ## Lessons
8 |
9 | Lesson | | Code
10 | --------------- | -------------------------------------------------------- | --------------------------------------------
11 | Multiplication | [JSFiddle](https://jsfiddle.net/tatumcreative/eax84e8g/) | [01-multiplication](lessons/01-multiplication/)
12 | Translation | [JSFiddle](https://jsfiddle.net/tatumcreative/g24mgw6y/) | [02-translation](lessons/02-translation/)
13 | Scale | [JSFiddle](https://jsfiddle.net/tatumcreative/fndd6e1b/) | [03-scale](lessons/03-scale/)
14 | Rotation Basics | [JSFiddle](https://jsfiddle.net/tatumcreative/9vr2dorz/) | [04-rotate](lessons/04-rotate/)
15 | Rotate X/Y/Z | [JSFiddle](https://jsfiddle.net/tatumcreative/tk072doc/) | [05-rotate-all](lessons/05-rotate-all/)
16 | Composition | [JSFiddle](https://jsfiddle.net/tatumcreative/qxxg3yvc/) | [06-composition](lessons/06-composition/)
17 |
18 | ## Navigating the lessons
19 |
20 | Lessons are located both in this repo and on JSFiddle. The `.js` files contain the lessons as comments next to the live code. The lessons are designed so that the code can be edited and tweaked for experimentation while following along. When working from the code in the repo, the lessons are located in `/lessons` and are in alphabetical order.
21 |
22 | ## Getting started (10 min)
23 |
24 | The lessons can either be worked online from JSFiddle, or downloaded and explored locally. The content of the lessons is mixed in with the code. The `script.js` files contain most of the lesson, while the `index.html` contains the HTML. To download these files either [grab the zip file](https://github.com/TatumCreative/mdn-lighting-models/archive/master.zip) or run `git clone git@github.com:TatumCreative/mdn-lighting-models.git` from the command line.
25 |
26 | #### Working locally checklist
27 |
28 | 1. Verify browser supports unprefixed CSS3 transforms.
29 | 2. Download the lesson files to your machine.
30 | 3. Open the lessons in the browser:
31 | * Either open the index.html files from the lessons in your browser
32 | * Or if you are serving files with a local webserver, make sure and serve them from the root directory of the content kit so that the shared js files can be correctly loaded in.
33 |
34 | #### Working on JSFiddle checklist
35 |
36 | 1. Verify browser supports unprefixed CSS3 transforms.
37 | 2. Visit the JSFiddle links
38 |
39 | ## Lesson requirements
40 |
41 | These lessons require a [browser that supports unprefixed CSS3 3d transforms.](http://caniuse.com/#feat=transforms3d). The browsers that support this feature are Firefox 16+, Google Chrome 36+, Opera 23+, Safari 9+ and Internet Explorer 10+. It's assumed that the audience is familiar with a basic level web development, CSS, markup, and JavaScript.
42 |
43 | ## Updates and Correction
44 |
45 | [Submit an issue](./issues) or a [pull request](https://help.github.com/articles/using-pull-requests/) for any corrections or updates. For a history of the updates visit the [commit history](https://github.com/TatumCreative/mdn-lighting-models/commits/master).
--------------------------------------------------------------------------------
/lessons/01-multiplication/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Multiplication
6 |
7 |
8 |
9 |
10 | See script.js for the lesson.
11 |
12 |
16 |
17 |
18 |
29 |
40 |
41 |
42 |
43 |
--------------------------------------------------------------------------------
/lessons/01-multiplication/script.js:
--------------------------------------------------------------------------------
1 | /*
2 | To start, a 3d transformation matrix is a set of 16 values arranged in a 4x4 grid.
3 | In JavaScript it is easy to represent a matrix as an array. The typical starting
4 | point is to show the identity matrix. When this matrix is multiplied against another
5 | point or matrix then the result will be identical.
6 | */
7 |
8 | var identityMatrix = [
9 | 1, 0, 0, 0,
10 | 0, 1, 0, 0,
11 | 0, 0, 1, 0,
12 | 0, 0, 0, 1
13 | ];
14 |
15 | /*
16 | Speaking of multiplication, what does this operation look like in a matrix? The easier
17 | example is to show the multiplication of a single point. You may not that a 3d point
18 | doesn't quite match up with a 4x4 matrix, so typically a fourth dimension W is added.
19 | For a typical position setting this value to 1 will make the math work out.
20 |
21 | Notice how the matrix and point line up:
22 |
23 | [ 1, 0, 0, 0,
24 | 0, 1, 0, 0,
25 | 0, 0, 1, 0,
26 | 0, 0, 0, 1 ]
27 |
28 | [ 4, 3, 2, 1]
29 |
30 | Note: The W component eventually has some additional uses that are not explored
31 | by this content kit.
32 |
33 | */
34 |
35 | function multiplyMatrixAndPoint(matrix, point) {
36 |
37 | //Give a simple variable name to each part of the matrix, a column and row number
38 | var c0r0 = matrix[ 0], c1r0 = matrix[ 1], c2r0 = matrix[ 2], c3r0 = matrix[ 3];
39 | var c0r1 = matrix[ 4], c1r1 = matrix[ 5], c2r1 = matrix[ 6], c3r1 = matrix[ 7];
40 | var c0r2 = matrix[ 8], c1r2 = matrix[ 9], c2r2 = matrix[10], c3r2 = matrix[11];
41 | var c0r3 = matrix[12], c1r3 = matrix[13], c2r3 = matrix[14], c3r3 = matrix[15];
42 |
43 | //Now set some simple names for the point
44 | var x = point[0];
45 | var y = point[1];
46 | var z = point[2];
47 | var w = point[3];
48 |
49 | //Multiply the point against each part of the 1st column, then add together
50 | var resultX = (x * c0r0) + (y * c0r1) + (z * c0r2) + (w * c0r3);
51 |
52 | //Multiply the point against each part of the 2nd column, then add together
53 | var resultY = (x * c1r0) + (y * c1r1) + (z * c1r2) + (w * c1r3);
54 |
55 | //Multiply the point against each part of the 3rd column, then add together
56 | var resultZ = (x * c2r0) + (y * c2r1) + (z * c2r2) + (w * c2r3);
57 |
58 | //Multiply the point against each part of the 4th column, then add together
59 | var resultW = (x * c3r0) + (y * c3r1) + (z * c3r2) + (w * c3r3);
60 |
61 | return [resultX, resultY, resultZ, resultW]
62 | }
63 |
64 | /*
65 | Now try multiplying the point by the matrix. It should return the exact same value.
66 | */
67 |
68 | var identityResult = multiplyMatrixAndPoint(identityMatrix, [4,3,2,1]); // Returns [4,3,2,1]
69 |
70 | console.log(identityResult);
71 |
72 | /*
73 | Returning the same point is not very useful, but there are other types of
74 | matrices that can perform helpful operations on points. The next sections
75 | will demonstrate some of these matrices.
76 |
77 | In addition to to multiplying a matrix and a point together you can also
78 | multiply two matrices together. The function from above can be re-used
79 | to help out in this process.
80 | */
81 |
82 | function multiplyMatrices(matrixA, matrixB) {
83 |
84 | // Slice the second matrix up into columns
85 | var column0 = [matrixB[0], matrixB[4], matrixB[8], matrixB[12]];
86 | var column1 = [matrixB[1], matrixB[5], matrixB[9], matrixB[13]];
87 | var column2 = [matrixB[2], matrixB[6], matrixB[10], matrixB[14]];
88 | var column3 = [matrixB[3], matrixB[7], matrixB[11], matrixB[15]];
89 |
90 | // Multiply each column by the matrix
91 | var result0 = multiplyMatrixAndPoint( matrixA, column0 );
92 | var result1 = multiplyMatrixAndPoint( matrixA, column1 );
93 | var result2 = multiplyMatrixAndPoint( matrixA, column2 );
94 | var result3 = multiplyMatrixAndPoint( matrixA, column3 );
95 |
96 | // Turn the result columns back into a single matrix
97 | return [
98 | result0[0], result1[0], result2[0], result3[0],
99 | result0[1], result1[1], result2[1], result3[1],
100 | result0[2], result1[2], result2[2], result3[2],
101 | result0[3], result1[3], result2[3], result3[3]
102 | ]
103 | }
104 |
105 | // Usage:
106 | var someMatrix = [
107 | 4, 0, 0, 0,
108 | 0, 3, 0, 0,
109 | 0, 0, 5, 0,
110 | 4, 8, 4, 1
111 | ]
112 |
113 | var someMatrixResult = multiplyMatrices(identityMatrix, someMatrix);
114 | // Returns a new array equivalent to someMatrix
115 |
116 | console.log(someMatrixResult)
--------------------------------------------------------------------------------
/lessons/02-translation/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Translations
6 |
7 |
8 |
9 |
10 |
11 |
Move me with a matrix
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
14 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
15 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
16 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
18 | officia deserunt mollit anim id est laborum.
19 |
20 |
21 |
22 |
23 |
Move me with a matrix
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
28 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
30 | officia deserunt mollit anim id est laborum.
31 |
39 |
40 |
41 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/lessons/02-translation/script.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | A translation matrix is based off the identity matrix. It moves the object
4 | in one of 3 directions, x, y, or z. The easiest way to think of a translation
5 | is like picking up a coffee cup. The coffee cup must be kept upright and oriented
6 | the same way so that no coffee is spilled. It can move up in the air off the table
7 | and around the air in space.
8 |
9 | Now the coffee can't actually be drank with only a translation matrix because
10 | the cup cannot be tilted. In another lesson, a new matrix will be discussed that
11 | will be able to handle that task.
12 |
13 | */
14 |
15 | var x = 50;
16 | var y = 100;
17 | var z = 0;
18 |
19 | var translationMatrix = [
20 | 1, 0, 0, 0,
21 | 0, 1, 0, 0,
22 | 0, 0, 1, 0,
23 | x, y, z, 1
24 | ];
25 |
26 | // Grab the DOM element
27 | var moveMe = document.getElementById('move-me');
28 |
29 | // Returns a result like: "matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 100, 200, 0, 1);"
30 | var matrix3dRule = MDN.matrixArrayToCssMatrix( translationMatrix );
31 |
32 | // Set the transform
33 | moveMe.style.transform = matrix3dRule;
--------------------------------------------------------------------------------
/lessons/03-scale/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Scale
6 |
7 |
8 |
9 |
10 |
11 |
Move me with a matrix
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
14 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
15 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
16 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
18 | officia deserunt mollit anim id est laborum.
19 |
20 |
21 |
22 |
23 |
Move me with a matrix
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
28 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
30 | officia deserunt mollit anim id est laborum.
31 |
39 |
40 |
41 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/lessons/03-scale/script.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | A scale matrix makes something larger or smaller in one of 3 dimension: width, height, and depth.
4 | In typical (cartesian) coordinates this would be stretching and shrinking in x, y, and z.
5 |
6 | */
7 |
8 | var w = 1.5; // width (x)
9 | var h = 0.7; // height (y)
10 | var d = 1; // depth (z)
11 |
12 | var scaleMatrix = [
13 | w, 0, 0, 0,
14 | 0, h, 0, 0,
15 | 0, 0, d, 0,
16 | 0, 0, 0, 1
17 | ];
18 |
19 | var moveMe = document.getElementById('move-me');
20 |
21 | var matrix3dRule = MDN.matrixArrayToCssMatrix( scaleMatrix );
22 |
23 | moveMe.style.transform = matrix3dRule;
--------------------------------------------------------------------------------
/lessons/04-rotate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Rotation
6 |
7 |
8 |
9 |
10 |
11 |
Move me with a matrix
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
14 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
15 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
16 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
18 | officia deserunt mollit anim id est laborum.
19 |
20 |
21 |
22 |
23 |
Move me with a matrix
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
28 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
30 | officia deserunt mollit anim id est laborum.
31 |
39 |
40 |
41 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/lessons/04-rotate/script.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Rotation matrices start looking a little bit more complicated than scaling and transform
4 | matrices. They use trigonometric functions to perform the rotation. While this section
5 | won't break the steps down into exhaustive detail, take this example for illustration.
6 |
7 |
8 | // Manually rotating a point about the origin without matrices
9 | var point = [10,2];
10 |
11 | // Calculate the distance from the origin
12 | var distance = Math.sqrt(point[0] * point[0] + point[1] * point[1]);
13 |
14 | // 60 degrees
15 | var rotationInRadians = Math.PI / 3;
16 |
17 | var transformedPoint = [
18 | Math.cos( rotationInRadians ) * distance,
19 | Math.sin( rotationInRadians ) * distance
20 | ];
21 |
22 |
23 | It is possible to encode these type of steps into a matrix, and do it each of the
24 | x, y, and z dimensions. Below is the representation of a rotation about the X axis
25 |
26 | */
27 |
28 | var sin = Math.sin;
29 | var cos = Math.cos;
30 |
31 | // NOTE: There is no perspective in these transformations, so a rotation
32 | // at this point will only appear to only shrink the div
33 |
34 | var a = Math.PI * 0.3; //Rotation amount
35 |
36 | // Rotate around Z axis
37 | var rotateZMatrix = [
38 | cos(a), -sin(a), 0, 0,
39 | sin(a), cos(a), 0, 0,
40 | 0, 0, 1, 0,
41 | 0, 0, 0, 1
42 | ];
43 |
44 | var moveMe = document.getElementById('move-me');
45 |
46 | var matrix3dRule = MDN.matrixArrayToCssMatrix( rotateZMatrix );
47 |
48 | moveMe.style.transform = matrix3dRule;
--------------------------------------------------------------------------------
/lessons/05-rotate-all/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Rotate All
6 |
7 |
8 |
9 |
10 |
11 |
Move me with a matrix
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
14 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
15 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
16 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
18 | officia deserunt mollit anim id est laborum.
19 |
20 |
21 |
22 |
23 |
Move me with a matrix
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
28 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
30 | officia deserunt mollit anim id est laborum.
31 |
39 |
40 |
41 |
52 |
53 |
54 |
55 |
--------------------------------------------------------------------------------
/lessons/05-rotate-all/script.js:
--------------------------------------------------------------------------------
1 | /*
2 |
3 | Here are the other rotation matrices. One big note is that there is no perspective
4 | applied, so it might not feel very 3d yet. The flatness is equivalent to when a camera
5 | zooms in really close onto an object in the distance, the sense of perspective disappears.
6 |
7 | */
8 |
9 | var sin = Math.sin;
10 | var cos = Math.cos;
11 |
12 | function rotateAroundXAxis(a) {
13 |
14 | return [
15 | 1, 0, 0, 0,
16 | 0, cos(a), -sin(a), 0,
17 | 0, sin(a), cos(a), 0,
18 | 0, 0, 0, 1
19 | ];
20 | }
21 |
22 | function rotateAroundYAxis(a) {
23 |
24 | return [
25 | cos(a), 0, sin(a), 0,
26 | 0, 1, 0, 0,
27 | -sin(a), 0, cos(a), 0,
28 | 0, 0, 0, 1
29 | ];
30 | }
31 |
32 | function rotateAroundZAxis(a) {
33 |
34 | return [
35 | cos(a), -sin(a), 0, 0,
36 | sin(a), cos(a), 0, 0,
37 | 0, 0, 1, 0,
38 | 0, 0, 0, 1
39 | ];
40 | }
41 |
42 | // var matrix = rotateAroundXAxis( Math.PI * 0.3 );
43 | // var matrix = rotateAroundYAxis( Math.PI * 0.3 );
44 | var matrix = rotateAroundZAxis( Math.PI * 0.3 );
45 |
46 | var moveMe = document.getElementById('move-me');
47 | var matrix3dRule = MDN.matrixArrayToCssMatrix( matrix );
48 | moveMe.style.transform = matrix3dRule;
--------------------------------------------------------------------------------
/lessons/06-composition/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 | Matrix Translations
6 |
7 |
8 |
9 |
10 |
11 |
Move me with a matrix
12 |
13 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
14 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
15 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
16 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
17 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
18 | officia deserunt mollit anim id est laborum.
19 |
20 |
21 |
22 |
23 |
Move me with a matrix
24 |
25 | Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
26 | incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
27 | exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
28 | irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
29 | pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
30 | officia deserunt mollit anim id est laborum.
31 |