Last active
November 13, 2024 03:28
-
-
Save stemcstudio/2ab1e6d8d63200623e4dba63d9f5e5ad to your computer and use it in GitHub Desktop.
DaVinci eight Box
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> | |
| <base href="/"> | |
| <style> | |
| body { | |
| background-color: blue; | |
| } | |
| </style> | |
| <script src="/vendor/davinci-mathscript@1.3.5/davinci-mathscript.min.js"></script> | |
| <script src="/assets/js/stemcstudio-systemjs@1.0.0/system.js"></script> | |
| </head> | |
| <body> | |
| <script> | |
| System.config({ | |
| "warnings": false, | |
| "map": { | |
| "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.60/dist/system/index.min.js", | |
| "dat.gui": "https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.min.js" | |
| } | |
| }); | |
| </script> | |
| <canvas id="my-canvas"></canvas> | |
| <script> | |
| System.register('./index.js', [ | |
| 'dat.gui', | |
| 'davinci-eight' | |
| ], function(exports_1, context_1) { | |
| 'use strict'; | |
| var dat_gui_1, davinci_eight_1, e1, e2, e3, engine, scene, ambients, camera, dirLight, box, trackball, gui, animate; | |
| var __moduleName = context_1 && context_1.id; | |
| return { | |
| setters: [ | |
| function(dat_gui_1_1) { | |
| dat_gui_1 = dat_gui_1_1; | |
| }, | |
| function(davinci_eight_1_1) { | |
| davinci_eight_1 = davinci_eight_1_1; | |
| } | |
| ], | |
| execute: function() { | |
| e1 = davinci_eight_1.Geometric3.e1(true); | |
| e2 = davinci_eight_1.Geometric3.e2(true); | |
| e3 = davinci_eight_1.Geometric3.e3(true); | |
| engine = new davinci_eight_1.Engine('my-canvas', { | |
| eightLogging: true | |
| }).size(500, 500).clearColor(0.1, 0.1, 0.1, 1).enable(davinci_eight_1.Capability.DEPTH_TEST); | |
| scene = new davinci_eight_1.Scene(engine); | |
| ambients = []; | |
| camera = new davinci_eight_1.PerspectiveCamera(); | |
| camera.eye.z = 3; | |
| ambients.push(camera); | |
| dirLight = new davinci_eight_1.DirectionalLight(); | |
| ambients.push(dirLight); | |
| box = new davinci_eight_1.Box(engine, { | |
| openBack: false, | |
| openFront: false, | |
| openBase: false, | |
| openCap: false, | |
| openLeft: false, | |
| openRight: false, | |
| offset: undefined, | |
| tilt: undefined | |
| }); | |
| box.width = 0.8; | |
| box.depth = 0.8; | |
| box.height = 0.1; | |
| trackball = new davinci_eight_1.TrackballControls(camera, window); | |
| trackball.subscribe(engine.canvas); | |
| gui = new dat_gui_1.GUI(); | |
| gui.add(box, 'width', 0, 1); | |
| gui.add(box, 'depth', 0, 1); | |
| gui.add(box, 'height', 0, 1); | |
| animate = function(timestamp) { | |
| engine.clear(); | |
| trackball.update(); | |
| dirLight.direction.copy(camera.look).sub(camera.eye); | |
| var t = Ms.mul(timestamp, 0.001); | |
| box.R.rotorFromGeneratorAngle(Ms.wedge(e2, e3), t); | |
| scene.render(ambients); | |
| box.color = davinci_eight_1.Color.red; | |
| box.X = Ms.mul(Ms.neg(0.5), e1); | |
| box.render(ambients); | |
| box.color = davinci_eight_1.Color.blue; | |
| box.X = Ms.mul(Ms.pos(0.5), e1); | |
| box.render(ambients); | |
| requestAnimationFrame(animate); | |
| }; | |
| requestAnimationFrame(animate); | |
| } | |
| }; | |
| }); | |
| </script> | |
| <script> | |
| System.defaultJSExtensions = true | |
| System.import('./index.js').catch(function(e) { | |
| console.error(e) | |
| }) | |
| </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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <base href='/'> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <canvas id='my-canvas'></canvas> | |
| </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 { GUI } from 'dat.gui' | |
| import { Box, Capability, Color, DirectionalLight, Engine, Facet, Geometric3, PerspectiveCamera, Scene, TrackballControls } from 'davinci-eight' | |
| const e1 = Geometric3.e1(true) | |
| const e2 = Geometric3.e2(true) | |
| const e3 = Geometric3.e3(true) | |
| const engine = new Engine('my-canvas', { eightLogging: true }) | |
| .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 box = new Box(engine, { | |
| openBack: false, | |
| openFront: false, | |
| openBase: false, | |
| openCap: false, | |
| openLeft: false, | |
| openRight: false, | |
| offset: undefined, | |
| tilt: undefined | |
| }) | |
| box.width = 0.8 | |
| box.depth = 0.8 | |
| box.height = 0.1 | |
| const trackball = new TrackballControls(camera, window) | |
| // Subscribe to mouse events from the canvas. | |
| trackball.subscribe(engine.canvas) | |
| const gui = new GUI() | |
| gui.add(box, 'width', 0, 1) | |
| gui.add(box, 'depth', 0, 1) | |
| gui.add(box, 'height', 0, 1) | |
| /** | |
| * 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) | |
| scene.render(ambients) | |
| box.color = Color.red | |
| box.X = -0.5 * e1 | |
| box.render(ambients) | |
| box.color = Color.blue | |
| box.X = +0.5 * e1 | |
| box.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": "DaVinci eight Box", | |
| "dependencies": { | |
| "dat.gui": "0.7.9", | |
| "davinci-eight": "8.4.60" | |
| }, | |
| "name": "eight-box", | |
| "version": "1.0.0", | |
| "keywords": [ | |
| "EIGHT", | |
| "WebGL", | |
| "Box", | |
| "STEMCstudio", | |
| "Cookbook" | |
| ], | |
| "author": "David Geo Holmes" | |
| } |
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
| { | |
| "hideConfigFiles": false, | |
| "hideReferenceFiles": false, | |
| "linting": true, | |
| "noLoopCheck": false, | |
| "operatorOverloading": true, | |
| "overrides": [ | |
| { | |
| "name": "dat.gui", | |
| "version": "0.7.9", | |
| "system": "https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.min.js", | |
| "types": "https://cdn.jsdelivr.net/npm/@types/dat.gui@0.7.7/package.json" | |
| } | |
| ], | |
| "references": {}, | |
| "showGeneratedFiles": false | |
| } |
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: blue; | |
| } |
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
| { | |
| "map": { | |
| "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.60/package.json", | |
| "dat.gui": "https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.min.js" | |
| } | |
| } |
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 | |
| } | |
| } |
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
| { | |
| "map": { | |
| "davinci-eight": "https://cdn.jsdelivr.net/npm/davinci-eight@8.4.60/package.json", | |
| "dat.gui": "https://cdn.jsdelivr.net/npm/@types/dat.gui@0.7.7/package.json" | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment