Public
Edited
Jun 5, 2021
3 stars
md`# Reusable Anaglyph Function Bits`
intergratedRenderer(scene)
intergratedRenderer(axis(3), { world: { rX: -1, rY: 0, rZ: -0.85, mx: 0, my: 0, mz: 0 } })
perspectiveController
scene = {
let scene = []
scene = scene.concat(pyramidGrid)
scene = scene.concat(axis(3))
return scene
}
axis(3)
pyramidGrid = {
const rowsOfPyramids = 9
const rangeInput = Math.floor(rowsOfPyramids / 2) * 3
const x = d3.range(-rangeInput, rangeInput + 1, 3)
const y = d3.range(-rangeInput, rangeInput + 1, 3)
const origins = d3.cross(x, y).filter((c) => {
const isMiddleX = (c[0] <= 3 && c[0] >= -3)
const isMiddleY = (c[1] <= 3 && c[1] >= -3)
return !isMiddleX || !isMiddleY
})
let list = []
origins.forEach((o) => {
const peak = [o[0], o[1], 2, 1]
const pcorners = [
[o[0] + 1, o[1] + 1, 0, 1],
[o[0] + 1, o[1] - 1, 0, 1],
[o[0] - 1, o[1] - 1, 0, 1],
[o[0] - 1, o[1] + 1, 0, 1]
]
const bottom = d3.range(4).map((i) => { return [pcorners[i], pcorners[(i + 1) % 4]] })
const sides = d3.range(4).map((i) => { return [peak, pcorners[(i + 1) % 4]] })
list = list.concat(bottom)
list = list.concat(sides)
})
return list
}
import {intergratedRenderer,perspectiveController, axis} with {scene} from '@tonyhschu/anaglyph-rendering-in-svg'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
