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

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