Public
Edited
Jul 2, 2024
2 stars
Insert cell
Insert cell
ln = import('https://unpkg.com/@lnjs/core@0.5.0/es/index.js?module')
Insert cell
Insert cell
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);
}
Insert cell
Insert cell
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);
}
Insert cell
Insert cell
cone = {
const radius = 1;
const height = 2;
return new ln.Cone(radius, height);
}
Insert cell
Insert cell
cylinder = {
const radius = 1;
const z0 = 0;
const z1 = 1;
return new ln.Cylinder(radius, z0, z1);
}
Insert cell
Insert cell
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);
}
Insert cell
Insert cell
sphere = {
const center = new ln.Vector(0, 0, 0);
const radius = 1;
return new ln.Sphere(center, radius);
}
Insert cell
showcase([func])
Insert cell
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);
}
Insert cell
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)}`;
}
Insert cell
Insert cell
Insert cell
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);
}
Insert cell

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.
Learn more