Last active
August 4, 2020 18:28
-
-
Save stemcstudio/37e9e5fa96f71e345e7933937b5bb293 to your computer and use it in GitHub Desktop.
Vector Addition
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 characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <!-- STYLES-MARKER --> | |
| <style> | |
| /* STYLE-MARKER */ | |
| </style> | |
| <!-- SHADERS-MARKER --> | |
| <!-- SCRIPTS-MARKER --> | |
| <!-- SYSTEM-SHIM-MARKER --> | |
| </head> | |
| <body> | |
| <canvas id='my-canvas'></canvas> | |
| <script> | |
| // CODE-MARKER | |
| </script> | |
| <script> | |
| System.defaultJSExtensions = true | |
| System.import('./index') | |
| </script> | |
| </body> | |
| </html> |
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 characters
| import { Geometric3 } from 'davinci-eight' | |
| import { Engine, Capability, Scene } from 'davinci-eight' | |
| import { Facet, PerspectiveCamera, DirectionalLight } from 'davinci-eight' | |
| import { Arrow } from 'davinci-eight' | |
| import { Color } from 'davinci-eight' | |
| import { GridXY } from 'davinci-eight' | |
| import { TrackballControls } from 'davinci-eight' | |
| const e1 = Geometric3.e1(true) | |
| const e2 = Geometric3.e2(true) | |
| // We need mutability for our model. | |
| const aVector = Geometric3.vector(1, 0.1, 0) | |
| const bVector = Geometric3.vector(0.1, 1, 0) | |
| let cVector = aVector + bVector | |
| const engine = new Engine('my-canvas') | |
| .size(500, 500) | |
| .clearColor(0.1, 0.1, 0.1, 1.0) | |
| .enable(Capability.DEPTH_TEST) | |
| const scene = new Scene(engine) | |
| const ambients: Facet[] = [] | |
| const camera = new PerspectiveCamera() | |
| camera.eye.z = 3 | |
| ambients.push(camera) | |
| const dirLight = new DirectionalLight() | |
| ambients.push(dirLight) | |
| const a = new Arrow(engine, {}) | |
| a.color = Color.red | |
| a.axis = e1 + 0.1 * e2 | |
| scene.add(a) | |
| const b = new Arrow(engine, {}) | |
| b.color = Color.blue | |
| b.axis = e2 + 0.1 * e1 | |
| scene.add(b) | |
| const c = new Arrow(engine, {}) | |
| c.color = Color.gray | |
| c.axis = e1 + e2 | |
| scene.add(c) | |
| const updateC = function() { | |
| a.axis = aVector | |
| a.length = aVector.magnitude() | |
| b.axis = bVector | |
| b.length = bVector.magnitude() | |
| cVector = aVector + bVector | |
| c.axis = cVector | |
| c.length = cVector.magnitude() | |
| } | |
| const arrow = new Arrow(engine, {}) | |
| const gridXY = new GridXY(engine) | |
| // gridXY.visible = false | |
| scene.add(gridXY) | |
| const trackball = new TrackballControls(camera, window) | |
| // Subscribe to mouse events from the canvas. | |
| trackball.subscribe(engine.canvas) | |
| const gui = new dat.GUI() | |
| const folderA = gui.addFolder("a - red") | |
| folderA.add(aVector, 'x', -1.0, 1.0).onChange(updateC) | |
| folderA.add(aVector, 'y', -1.0, 1.0).onChange(updateC) | |
| folderA.open() | |
| const folderB = gui.addFolder("b - blue") | |
| folderB.add(bVector, 'x', -1, 1).onChange(updateC) | |
| folderB.add(bVector, 'y', -1, 1).onChange(updateC) | |
| folderB.open() | |
| /** | |
| * animate is the callback point for requestAnimationFrame. | |
| * This has been initialized with a function expression in order | |
| * to avoid issues associated with JavaScript hoisting. | |
| */ | |
| const animate: FrameRequestCallback = function(_timestamp: number) { | |
| engine.clear() | |
| // Update the camera based upon mouse events received. | |
| trackball.update() | |
| // Keep the directional light pointing in the same direction as the camera. | |
| dirLight.direction.copy(camera.look).sub(camera.eye) | |
| // const t = timestamp * 0.001 | |
| // box.R.rotorFromGeneratorAngle(e2 ^ e3, t) | |
| a.X = - Geometric3.fromVector(aVector) / 2 | |
| b.X = - Geometric3.fromVector(bVector) / 2 | |
| c.X = - Geometric3.fromVector(cVector) / 2 | |
| scene.render(ambients) | |
| arrow.color = a.color | |
| arrow.color.scale(0.8) | |
| arrow.axis = a.axis | |
| arrow.length = a.length | |
| arrow.X = c.X | |
| arrow.render(ambients) | |
| arrow.color = b.color | |
| arrow.color.scale(0.8) | |
| arrow.axis = b.axis | |
| arrow.length = b.length | |
| arrow.X = c.X + Geometric3.fromVector(a.axis) | |
| arrow.render(ambients) | |
| // This call keeps the animation going. | |
| requestAnimationFrame(animate) | |
| } | |
| // This call "primes the pump". | |
| requestAnimationFrame(animate) |
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 characters
| { | |
| "description": "Vector Addition", | |
| "dependencies": { | |
| "DomReady": "1.0.0", | |
| "davinci-eight": "8.2.1", | |
| "dat.gui": "0.7.7" | |
| }, | |
| "name": "vector-addition", | |
| "version": "0.1.0", | |
| "keywords": [ | |
| "STEMCstudio" | |
| ], | |
| "operatorOverloading": true, | |
| "author": "David Geo Holmes", | |
| "linting": true, | |
| "hideConfigFiles": true | |
| } |
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 characters
| body { | |
| background-color: white; | |
| } |
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 characters
Show hidden characters
| { | |
| "allowJs": true, | |
| "checkJs": true, | |
| "declaration": true, | |
| "emitDecoratorMetadata": true, | |
| "experimentalDecorators": true, | |
| "jsx": "react", | |
| "module": "system", | |
| "noImplicitAny": true, | |
| "noImplicitReturns": true, | |
| "noImplicitThis": true, | |
| "noUnusedLocals": true, | |
| "noUnusedParameters": true, | |
| "preserveConstEnums": true, | |
| "removeComments": false, | |
| "skipLibCheck": true, | |
| "sourceMap": true, | |
| "strictNullChecks": true, | |
| "suppressImplicitAnyIndexErrors": true, | |
| "target": "es5", | |
| "traceResolution": true | |
| } |
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 characters
| { | |
| "rules": { | |
| "array-type": [ | |
| true, | |
| "array" | |
| ], | |
| "curly": false, | |
| "comment-format": [ | |
| true, | |
| "check-space" | |
| ], | |
| "eofline": true, | |
| "forin": true, | |
| "jsdoc-format": true, | |
| "new-parens": true, | |
| "no-conditional-assignment": false, | |
| "no-consecutive-blank-lines": true, | |
| "no-construct": true, | |
| "no-for-in-array": true, | |
| "no-inferrable-types": [ | |
| true | |
| ], | |
| "no-magic-numbers": false, | |
| "no-shadowed-variable": true, | |
| "no-string-throw": true, | |
| "no-trailing-whitespace": [ | |
| true, | |
| "ignore-jsdoc" | |
| ], | |
| "no-var-keyword": true, | |
| "one-variable-per-declaration": [ | |
| true, | |
| "ignore-for-loop" | |
| ], | |
| "prefer-const": true, | |
| "prefer-for-of": true, | |
| "prefer-function-over-method": false, | |
| "prefer-method-signature": true, | |
| "radix": true, | |
| "semicolon": [ | |
| true, | |
| "never" | |
| ], | |
| "trailing-comma": [ | |
| true, | |
| { | |
| "multiline": "never", | |
| "singleline": "never" | |
| } | |
| ], | |
| "triple-equals": true, | |
| "use-isnan": true | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment