Created
August 2, 2015 18:38
-
-
Save mathdoodle/77744ad7d5008ea0b680 to your computer and use it in GitHub Desktop.
Doodle 1
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
| { | |
| "uuid": "55c1453f-cfdc-4901-a865-aa4f44b02b96", | |
| "description": "Doodle 1", | |
| "dependencies": { | |
| "DomReady": "latest", | |
| "davinci-blade": "1.1.1", | |
| "davinci-eight": "latest" | |
| }, | |
| "operatorOverloading": 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
| <!doctype html> | |
| <html> | |
| <head> | |
| <style> | |
| /* STYLE-MARKER */ | |
| </style> | |
| <script id='vs' type='x-shader/x-vertex'> | |
| attribute vec3 aVertexPosition; | |
| attribute vec3 aVertexNormal; | |
| uniform vec3 uColor; | |
| uniform mat4 uModelMatrix; | |
| uniform mat3 uNormalMatrix; | |
| uniform mat4 uViewMatrix; | |
| uniform mat4 uProjectionMatrix; | |
| uniform vec3 uAmbientLight; | |
| uniform vec3 uDirectionalLightColor; | |
| uniform vec3 uDirectionalLightDirection; | |
| varying highp vec4 vColor; | |
| varying highp vec3 vLight; | |
| void main(void) { | |
| gl_Position = uProjectionMatrix * uViewMatrix * uModelMatrix * vec4(aVertexPosition, 1.0); | |
| vColor = vec4(uColor, 1.0); | |
| vec3 L = normalize(uDirectionalLightDirection); | |
| vec3 N = normalize(uNormalMatrix * aVertexNormal); | |
| float cosineFactor = max(dot(N,L), 0.0); | |
| vLight = uAmbientLight + cosineFactor * uDirectionalLightColor; | |
| } | |
| </script> | |
| <script id='fs' type='x-shader/x-fragment'> | |
| varying highp vec4 vColor; | |
| varying highp vec3 vLight; | |
| void main(void) { | |
| gl_FragColor = vec4(vColor.xyz * vLight, vColor.a); | |
| } | |
| </script> | |
| <!-- SCRIPTS-MARKER --> | |
| </head> | |
| <body> | |
| <script> | |
| // CODE-MARKER | |
| </script> | |
| <canvas id='my-canvas'> | |
| Your browser does not support the canvas element. | |
| </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
| DomReady.ready(function() { | |
| try { | |
| main(); | |
| } | |
| catch(e) { | |
| console.error(e); | |
| } | |
| }); | |
| var e1 = blade.e3ga.e1; | |
| var e2 = blade.e3ga.e2; | |
| var e3 = blade.e3ga.e3; | |
| var tilt = 45 * Math.PI / 180; | |
| var S = Math.cos(tilt / 2) - (e2 ^ e1) * Math.sin(tilt / 2); | |
| var B = e3 ^ e1; | |
| var T = 4; | |
| var f = 1 / T; | |
| var omega = 2 * Math.PI * f; | |
| function main() { | |
| var scene = EIGHT.drawList(); | |
| var canvas = <HTMLCanvasElement>document.getElementById('my-canvas'); | |
| canvas.width = window.innerWidth; | |
| canvas.height = window.innerHeight; | |
| var renderer = EIGHT.webGLRenderer(canvas); | |
| renderer.clearColor(0.2, 0.2, 0.2, 1.0); | |
| var monitor = EIGHT.contextMonitor(canvas).addContextUser(renderer).start(); | |
| var perspective = EIGHT.perspective().setAspect(canvas.clientWidth / canvas.clientHeight).setEye(e1 + 3.0 * e3); | |
| var aLight = new EIGHT.AmbientLight({color: EIGHT.Color.fromRGB(0.3, 0.3, 0.3)}); | |
| var dLight = new EIGHT.DirectionalLight({color: EIGHT.Color.fromRGB(0.7, 0.7, 0.7), direction: new EIGHT.Vector3([2, 3, 5])}); | |
| var ambients = EIGHT.uniforms([perspective, aLight, dLight]); | |
| var mesh = new EIGHT.BoxBuilder().setWidth(0.5).setHeight(0.5).setDepth(0.5).buildMesh(); | |
| var model = new EIGHT.Node(); | |
| var shaders = EIGHT.smartProgram(mesh.getAttribMeta(), [model.getUniformMeta(), ambients.getUniformMeta()]); | |
| var cube = EIGHT.drawableModel(mesh, shaders, model); | |
| console.log(cube.shaders.vertexShader); | |
| console.log(cube.shaders.fragmentShader); | |
| cube.model.color = EIGHT.Color.fromRGB(1, 1, 0); | |
| scene.add(cube); | |
| var arrowMesh = new EIGHT.ArrowBuilder().setAxis(e2).buildMesh(); | |
| var arrow = EIGHT.drawableModel(arrowMesh, EIGHT.shaderProgramFromScripts('vs', 'fs'), new EIGHT.Node()) | |
| arrow.model.color = EIGHT.Color.fromRGB(1, 0, 0); | |
| arrow.model.position.copy(e1); | |
| scene.add(arrow); | |
| var sphere = EIGHT.sphere(ambients, {radius: 0.25}); | |
| sphere.model.color = EIGHT.Color.fromRGB(0.4, 0.4, 1.0); | |
| scene.add(sphere); | |
| var vortex = EIGHT.vortex(ambients); | |
| vortex.model.color = EIGHT.Color.fromRGB(0.0, 1.0, 0.0); | |
| scene.add(vortex); | |
| var cylinder = EIGHT.cylinder(ambients); | |
| cylinder.model.color = EIGHT.Color.fromRGB(0.0, 1.0, 1.0); | |
| cylinder.model.position.copy(-e1); | |
| scene.add(cylinder); | |
| EIGHT.animation((time: number) => { | |
| var theta = omega * time; | |
| // simple harmonic motion | |
| cube.model.position.copy(1.2 * Math.sin(theta) * e2); | |
| // precession | |
| var R = Math.cos(theta / 2) - B * Math.sin(theta / 2) | |
| arrow.model.attitude.copy(R * S * ~R); | |
| // orbit | |
| sphere.model.position.copy(2 * Math.cos(theta) * e1 - Math.sin(theta) * (e3 - 0.5 * e2)); | |
| cylinder.model.attitude.copy(e3 ^ e2); | |
| renderer.render(scene, ambients); | |
| }).start(); | |
| } |
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 { margin: 0; } | |
| canvas { width: 100%; height: 100% } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment