Skip to content

Instantly share code, notes, and snippets.

@stemcstudio
Last active August 4, 2020 15:09
Show Gist options
  • Save stemcstudio/452dd3c6aa8d6b5f5e4be91e5c421fa9 to your computer and use it in GitHub Desktop.
Save stemcstudio/452dd3c6aa8d6b5f5e4be91e5c421fa9 to your computer and use it in GitHub Desktop.
DaVinci eight Grids

Grids

Overview

Demonstrates how to write convenience wrappers for the EIGHT.Grid.

gridXY demonstrates a complete encapsulation.

gridYZ demonstrates a customized options list.

gridZX demonstrates a customized options list.

import { Engine, Grid } from 'davinci-eight'
export default function gridXY(engine: Engine,
options: {
xMin?: number;
xMax?: number;
xSegments?: number;
yMin?: number;
yMax?: number;
ySegments?: number;
} = {}): Grid {
return new Grid(engine, {
uMin: options.xMin,
uMax: options.xMax,
uSegments: options.xSegments,
vMin: options.yMin,
vMax: options.yMax,
vSegments: options.ySegments,
aPosition: (u: number, v: number) => {
return { x: u, y: v, z: 0 }
}
})
}
import { Engine, Grid } from 'davinci-eight'
export default function gridYZ(engine: Engine,
options: {
yMin?: number;
yMax?: number;
ySegments?: number;
zMin?: number;
zMax?: number;
zSegments?: number;
} = {}) {
return new Grid(engine, {
uMin: options.yMin,
uMax: options.yMax,
uSegments: options.ySegments,
vMin: options.zMin,
vMax: options.zMax,
vSegments: options.zSegments,
aPosition: (u: number, v: number) => {
return { x: 0, y: u, z: v }
}
})
}
import { Engine, Grid } from 'davinci-eight'
export default function gridZX(engine: Engine,
options: {
zMin?: number;
zMax?: number;
zSegments?: number;
xMin?: number;
xMax?: number;
xSegments?: number;
} = {}) {
return new Grid(engine, {
uMin: options.zMin,
uMax: options.zMax,
uSegments: options.zSegments,
vMin: options.xMin,
vMax: options.xMax,
vSegments: options.xSegments,
aPosition: (u: number, v: number) => {
return { x: v, y: 0, z: u }
}
})
}
<!DOCTYPE html>
<html>
<head>
<script src="https://jspm.io/[email protected]"></script>
<link rel='stylesheet' href='style.css'>
</head>
<body>
<canvas id='canvas'></canvas>
<script>
System.defaultJSExtensions = true
System.import('./index')
</script>
</body>
</html>
import { Engine, Capability, Scene } from 'davinci-eight'
import { BlendingFactorSrc, BlendingFactorDest } from 'davinci-eight'
import { DirectionalLight, Facet, PerspectiveCamera } from 'davinci-eight'
import { TrackballControls } from 'davinci-eight'
import { Box } from 'davinci-eight'
import { Color } from 'davinci-eight'
import { e2, e3 } from './math'
import gridXY from './gridXY'
import gridYZ from './gridYZ'
import gridZX from './gridZX'
const engine = new Engine('canvas')
.size(500, 500)
.clearColor(0.1, 0.1, 0.1, 1.0)
.enable(Capability.DEPTH_TEST)
.enable(Capability.BLEND)
.blendFunc(BlendingFactorSrc.SRC_ALPHA, BlendingFactorDest.ONE)
const scene = new Scene(engine)
const ambients: Facet[] = []
const camera = new PerspectiveCamera()
camera.eye.copy(e3 - e2).normalize().scale(10)
camera.up.copy(e2)
ambients.push(camera)
const dirLight = new DirectionalLight()
ambients.push(dirLight)
const trackball = new TrackballControls(camera, window)
// Workaround because Trackball no longer supports context menu for panning.
trackball.noPan = true
trackball.subscribe(engine.canvas)
const plane = new Box(engine)
plane.color = Color.blue
plane.width = 6
plane.height = 6
plane.depth = 0.2
plane.opacity = 0.4
plane.transparent = true
scene.add(plane)
const cube = new Box(engine)
cube.color = Color.red
cube.opacity = 1.
cube.transparent = false
scene.add(cube)
const gXY = gridXY(engine, { xMin: -4, xMax: 4, xSegments: 8, yMin: -4, yMax: 4, ySegments: 8 })
gXY.color = Color.gray
scene.add(gXY)
const gYZ = gridYZ(engine, { yMin: -4, yMax: 4, ySegments: 8, zMin: -4, zMax: 4, zSegments: 8 })
gYZ.color = Color.gray
scene.add(gYZ)
const gZX = gridZX(engine, { zMin: -4, zMax: 4, zSegments: 8, xMin: -4, xMax: 4, xSegments: 8 })
gZX.color = Color.gray
scene.add(gZX)
const stats = new Stats()
stats.showPanel(0)
document.body.appendChild(stats.domElement)
/**
* Animates the scene.
*/
function animate() {
stats.begin()
engine.clear()
trackball.update()
dirLight.direction.copy(camera.look).sub(camera.eye)
// const t = timestamp * 0.001
scene.render(ambients)
stats.end()
requestAnimationFrame(animate)
}
requestAnimationFrame(animate)
import { Geometric3 } from 'davinci-eight'
//
// Basis elements
//
export const zero = Geometric3.zero()
export const one = Geometric3.one()
export const e1 = Geometric3.e1()
export const e2 = Geometric3.e2()
export const e3 = Geometric3.e3()
/**
* The pseudoscalar for Euclidean 3D Geometric Space.
*/
export const I = e1 ^ e2 ^ e3
//
// Universal functions
//
export { exp } from 'davinci-eight'
export { log } from 'davinci-eight'
export { cos } from 'davinci-eight'
export { sin } from 'davinci-eight'
//
// Constants
//
/**
* A complete turn, 2 * π.
*/
export const τ = 2 * Math.PI
{
"description": "DaVinci eight Grids",
"dependencies": {
"stats.js": "0.16.0",
"davinci-eight": "8.2.0"
},
"operatorOverloading": true,
"name": "copy-of-eight-alpha-blending",
"version": "0.1.0",
"keywords": [
"WebGL",
"EIGHT",
"Grid",
"STEMCstudio"
],
"author": "David Geo Holmes",
"linting": true,
"hideConfigFiles": true
}
body {
margin: 0;
overflow: hidden;
background: blue;
}
canvas {
width: 500px;
height: 500px;
}
#stats {
position: absolute;
top: 0;
left: 0;
}
{
"allowJs": true,
"checkJs": true,
"declaration": true,
"emitDecoratorMetadata": true,
"experimentalDecorators": true,
"jsx": "react",
"module": "system",
"noImplicitAny": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noUnusedLocals": true,
"noUnusedParameters": false,
"preserveConstEnums": true,
"removeComments": false,
"skipLibCheck": true,
"sourceMap": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"target": "es5",
"traceResolution": true
}
{
"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