Award-winning creative focused on data-driven art and visualizations, trying to push the boundaries of the web one visual story at a time ✨
three.js exploration: fragment shaders
three.js exploration: shapes
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup(invalidation)
// create just one triangle
const vertices = [
0, 1, 0, // top
0.5, 0, 1, // right
-0.5, 0, 1 // left
]
const faces = [
// 0, 1, 2 // only one face
2, 1, 0
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 20, 0)
const material = new THREE.MeshNormalMaterial()
const triangle = new THREE.Mesh(geometry, material)
scene.add(triangle)
// tell renderer to render scene & camera
renderer.render(scene, camera);
// return the renderer's canvas element
// but normally would want to append it to the DOM
return renderer.domElement
}
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup(invalidation)
// create just one triangle
const front = Math.tan(Math.PI / 6)
const back = Math.cos(Math.PI / 6)
const vertices = [
0, 1, 0, // 0: top
1, 0, front, // 1: right
-1, 0, front, // 2: left
0, 0, -back, // 3: back middle
0, -1, 0, // 4: bottom
]
const faces = [
2, 1, 0, // left, right, top
1, 3, 0, // right, back, top
3, 2, 0, // back, left, top
2, 4, 1, // left, bottom, right
1, 4, 3, // right, bottom, back
3, 4, 2, // back, bottom, left
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 30, 0)
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// scale the mesh
mesh.scale.set(0.5, 1, 0.5)
// rotate, render, and return dom element
while (true) {
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
yield renderer.domElement;
}
}
{
// set up scene, camera, and renderer
const {scene, camera, renderer} = setup(invalidation)
// create just one triangle
const vertices = [
-1, 1, 1, // 0: left top front
-1, -1, 1, // 1: left bottom front
1, -1, 1, // 2: right bottom front
1, 1, 1, // 3: right top front
1, -1, -1, // 4: right bottom back
1, 1, -1, // 5: right top back
-1, -1, -1, // 6: left bottom back
-1, 1, -1, // 7: left top back
0, 1, 0, // 8: top middle
0, -1, 0, // 9: bottom middle
]
const faces = [
0, 1, 2, // front 1
0, 2, 3, // front 2
3, 2, 4, // right 1
3, 4, 5, // right 2
5, 4, 6, // back 1
5, 6, 7, // back 2
7, 6, 1, // left 1
7, 1, 0, // left 2
8, 0, 3, // top front
8, 3, 5, // top right
8, 5, 7, // top back
8, 7, 0, // top left
9, 2, 1, // bottom front
9, 4, 2, // bottom right
9, 6, 4, // bottom back
9, 1, 6, // bottom left
]
const geometry = new THREE.PolyhedronGeometry(vertices, faces, 30, 0)
const material = new THREE.MeshNormalMaterial()
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
// scale the mesh
mesh.scale.set(0.5, 1, 0.5)
while (true) {
mesh.rotation.y += 0.01;
renderer.render(scene, camera);
yield renderer.domElement;
}
}
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.
