Last active
January 6, 2024 15:35
-
-
Save stemcstudio/5c58e76429c8679e80fb6c7722ed5b7e to your computer and use it in GitHub Desktop.
DaVinci eight Sphere
This file contains 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: #cccccc; | |
| } | |
| </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.54/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', [ | |
| 'davinci-eight', | |
| 'dat.gui' | |
| ], function (exports_1, context_1) { | |
| 'use strict'; | |
| var davinci_eight_1, dat_gui_1, e1, e2, e3, engine, scene, ambients, camera, dirLight, sphere, wireSphere, pointSphere, solidSphere, trackball, model, gui, makeSphere, animate; | |
| var __moduleName = context_1 && context_1.id; | |
| return { | |
| setters: [ | |
| function (davinci_eight_1_1) { | |
| davinci_eight_1 = davinci_eight_1_1; | |
| }, | |
| function (dat_gui_1_1) { | |
| dat_gui_1 = dat_gui_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', {}).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); | |
| sphere = new davinci_eight_1.Sphere(engine); | |
| sphere.radius = 0.2; | |
| trackball = new davinci_eight_1.TrackballControls(camera, window); | |
| trackball.subscribe(engine.canvas); | |
| model = { | |
| azimuthLength: Math.PI, | |
| elevationLength: Ms.div(Ms.mul(3, Math.PI), 4) | |
| }; | |
| gui = new dat_gui_1.GUI(); | |
| gui.add(model, 'azimuthLength', 0, Ms.mul(2, Math.PI)).onChange(function (_value) { | |
| makeSphere(); | |
| }); | |
| gui.add(model, 'elevationLength', 0, Math.PI).onChange(function (_value) { | |
| makeSphere(); | |
| }); | |
| makeSphere = function () { | |
| wireSphere = new davinci_eight_1.Sphere(engine, { | |
| azimuthStart: model.azimuthStart, | |
| azimuthLength: model.azimuthLength, | |
| elevationLength: model.elevationLength, | |
| mode: 'wire' | |
| }); | |
| wireSphere.color = davinci_eight_1.Color.gray; | |
| wireSphere.radius = 1; | |
| pointSphere = new davinci_eight_1.Sphere(engine, { | |
| azimuthStart: model.azimuthLength, | |
| azimuthLength: Ms.sub(Ms.mul(2, Math.PI), model.azimuthLength), | |
| elevationLength: model.elevationLength, | |
| mode: 'point' | |
| }); | |
| pointSphere.color = wireSphere.color; | |
| pointSphere.radius = 1; | |
| solidSphere = new davinci_eight_1.Sphere(engine, { | |
| azimuthStart: 0, | |
| azimuthLength: Ms.mul(2, Math.PI), | |
| elevationStart: model.elevationLength, | |
| elevationLength: Ms.sub(Math.PI, model.elevationLength) | |
| }); | |
| solidSphere.color = wireSphere.color; | |
| solidSphere.radius = 1; | |
| }; | |
| makeSphere(); | |
| animate = function (_timestamp) { | |
| engine.clear(); | |
| trackball.update(); | |
| dirLight.direction.copy(camera.look).sub(camera.eye); | |
| var t = 0.7; | |
| sphere.R.rotorFromGeneratorAngle(Ms.wedge(e2, e3), t); | |
| scene.render(ambients); | |
| sphere.color = davinci_eight_1.Color.red; | |
| sphere.X = Ms.mul(Ms.neg(0.5), e1); | |
| sphere.render(ambients); | |
| sphere.color = davinci_eight_1.Color.cobalt; | |
| sphere.X = Ms.mul(Ms.pos(0.5), e1); | |
| sphere.render(ambients); | |
| wireSphere.R.rotorFromGeneratorAngle(Ms.wedge(e2, e3), Ms.div(Math.PI, 4)); | |
| wireSphere.render(ambients); | |
| pointSphere.R.rotorFromGeneratorAngle(Ms.wedge(e2, e3), Ms.div(Math.PI, 4)); | |
| pointSphere.render(ambients); | |
| solidSphere.R.rotorFromGeneratorAngle(Ms.wedge(e2, e3), Ms.div(Math.PI, 4)); | |
| solidSphere.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 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 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 { Capability, Color, DirectionalLight, Engine, Facet, Geometric3, PerspectiveCamera, Scene, Sphere, SphereOptions, TrackballControls } from 'davinci-eight' | |
| import { GUI } from 'dat.gui' | |
| const e1 = Geometric3.e1(true) | |
| const e2 = Geometric3.e2(true) | |
| const e3 = Geometric3.e3(true) | |
| 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 sphere = new Sphere(engine) | |
| sphere.radius = 0.2 | |
| let wireSphere: Sphere | |
| let pointSphere: Sphere | |
| let solidSphere: Sphere | |
| const trackball = new TrackballControls(camera, window) | |
| // Subscribe to mouse events from the canvas. | |
| trackball.subscribe(engine.canvas) | |
| const model: SphereOptions = { | |
| azimuthLength: Math.PI, | |
| elevationLength: 3 * Math.PI / 4 | |
| } | |
| const gui = new GUI() | |
| gui.add(model, 'azimuthLength', 0, 2 * Math.PI).onChange(function(_value: any) { | |
| // model.azimuthLength = value | |
| makeSphere() | |
| }) | |
| gui.add(model, 'elevationLength', 0, Math.PI).onChange(function(_value: any) { | |
| // model.elevationLength = value | |
| makeSphere() | |
| }) | |
| const makeSphere = function() { | |
| wireSphere = new Sphere(engine, { | |
| azimuthStart: model.azimuthStart, | |
| azimuthLength: model.azimuthLength, | |
| elevationLength: model.elevationLength, | |
| mode: 'wire' | |
| }) | |
| wireSphere.color = Color.gray | |
| wireSphere.radius = 1 | |
| pointSphere = new Sphere(engine, { | |
| azimuthStart: model.azimuthLength, | |
| azimuthLength: 2 * Math.PI - (model.azimuthLength as number), | |
| elevationLength: model.elevationLength, | |
| // If you really want to do this then drop down a layer. | |
| mode: 'point' | |
| }) | |
| pointSphere.color = wireSphere.color | |
| pointSphere.radius = 1 | |
| solidSphere = new Sphere(engine, { | |
| azimuthStart: 0, | |
| azimuthLength: 2 * Math.PI, | |
| elevationStart: model.elevationLength, | |
| elevationLength: Math.PI - (model.elevationLength as number) | |
| }) | |
| solidSphere.color = wireSphere.color | |
| solidSphere.radius = 1 | |
| } | |
| makeSphere() | |
| /** | |
| * 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 = 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 = .7 // timestamp * 0.001 | |
| sphere.R.rotorFromGeneratorAngle(e2 ^ e3, t) | |
| scene.render(ambients) | |
| sphere.color = Color.red | |
| sphere.X = -0.5 * e1 | |
| sphere.render(ambients) | |
| sphere.color = Color.cobalt | |
| sphere.X = +0.5 * e1 | |
| sphere.render(ambients) | |
| // wireSphere.X = -0.5 * e1 - 0.0 * e2 | |
| wireSphere.R.rotorFromGeneratorAngle(e2 ^ e3, Math.PI / 4) | |
| wireSphere.render(ambients) | |
| // pointSphere.X = +0.5 * e1 - 0.0 * e2 | |
| pointSphere.R.rotorFromGeneratorAngle(e2 ^ e3, Math.PI / 4) | |
| pointSphere.render(ambients) | |
| solidSphere.R.rotorFromGeneratorAngle(e2 ^ e3, Math.PI / 4) | |
| solidSphere.render(ambients) | |
| // This call keeps the animation going. | |
| requestAnimationFrame(animate) | |
| } | |
| // This call "primes the pump". | |
| requestAnimationFrame(animate) |
This file contains 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 Sphere", | |
| "dependencies": { | |
| "davinci-eight": "8.4.54", | |
| "dat.gui": "0.7.9" | |
| }, | |
| "name": "eight-sphere", | |
| "version": "1.0.0", | |
| "keywords": [ | |
| "Azimuth", | |
| "Elevation", | |
| "Segments", | |
| "Cookbook", | |
| "STEMCstudio" | |
| ], | |
| "author": "David Geo Holmes" | |
| } |
This file contains 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 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: #cccccc; | |
| } |
This file contains 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.54/package.json", | |
| "dat.gui": "https://cdn.jsdelivr.net/npm/dat.gui@0.7.9/build/dat.gui.min.js" | |
| } | |
| } |
This file contains 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 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 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.54/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