ln = import('https://unpkg.com/@lnjs/core@0.5.0/es/index.js?module')
cube = {
// right-left, out-in, up, down
const min = new ln.Vector(-0.5, -0.5, -0.5);
const max = new ln.Vector(0.5, 0.5, 0.5);
return new ln.Cube(min, max);
}
triangle = {
const v1 = new ln.Vector(0, 2, 1);
const v2 = new ln.Vector(1, 0, 2);
const v3 = new ln.Vector(2, 1, 0);
return new ln.Triangle(v1, v2, v3);
}
cone = {
const radius = 1;
const height = 2;
return new ln.Cone(radius, height);
}
cylinder = {
const radius = 1;
const z0 = 0;
const z1 = 1;
return new ln.Cylinder(radius, z0, z1);
}
outlineCylinder = {
const eye = new ln.Vector(0, 0, 0);
const up = new ln.Vector(0, 0, 0);
const radius = 1;
const z0 = 0;
const z1 = 1;
return new ln.OutlineCylinder(eye, up, radius, z0, z1);
}
sphere = {
const center = new ln.Vector(0, 0, 0);
const radius = 1;
return new ln.Sphere(center, radius);
}
showcase([func])
func = {
const shapeFn = (x, y) => -5 - Math.sin(x * 2) / 30;
const box = new ln.Box(new ln.Vector(-1, -1, -1), new ln.Vector(1, 1, 1));
const direction = ln.Direction.Above;
return new ln.Function(shapeFn, box, direction);
}
function showcase(shapes) {
const scene = new ln.Scene();
const eye = new ln.Vector(3, 3, 3);
const center = new ln.Vector(0, 0, 0);
const up = new ln.Vector(0, 0, 1);
const height = 200;
const fovy = 40;
const znear = 0.1;
const zfar = 10;
const step = 0.01;
shapes.forEach((shape) => scene.add(shape));
const paths = scene.render(
eye,
center,
up,
width,
height,
fovy,
znear,
zfar,
step
);
return svg`${ln.toSVG(paths, width, height)}`;
}
outlineSphere = {
// TODO: Figure out how to render anything at all
const eye = new ln.Vector(0, 0, 0);
const up = new ln.Vector(0, 0, 0);
const center = new ln.Vector(0, 0, 0);
const radius = 1;
return new ln.OutlineSphere(eye, up, center, radius);
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.