2d:null 2e:["$","title",null,{"children":"Getting started with ln, the 3D Line Art Engine | Lionel Radisson | Observable"}] 33:T5dc,await visibility(), (() => { // create a scene const scene = new ln.Scene() // create a box const min = new ln.Vector(-1, -1, -1) const max = new ln.Vector(1, 1, 1) const cube = new ln.Cube(min, max) // we can specify which paths to render and create new ones: cube.paths = function() { const { x: x1, y: y1, z: z1 } = this.min const { x: x2, y: y2, z: z2 } = this.max const paths = [] const N = 10 for(let i = 0; i <= N; i++) { const p = i / N const x = x1 + (x2 - x1) * p const y = y1 + (y2 - y1) * p const z = z1 + (z2 - z1) * p paths.push([new ln.Vector(x, y2, z1), new ln.Vector(x, y2, z2)]) // on top face paths.push([new ln.Vector(x2, y, z2), new ln.Vector(x1, y, z2)]) // on front face paths.push([new ln.Vector(x2, y1, z), new ln.Vector(x2, y2, z)]) // on right face // uncomment these for more paths :) // paths.push([new ln.Vector(x1, y2, z), new ln.Vector(x2, y2, z)]) // on top face // paths.push([new ln.Vector(x, y1, z2), new ln.Vector(x, y2, z2)]) // on front face // paths.push([new ln.Vector(x2, y, z1), new ln.Vector(x2, y, z2)]) // on right face } return paths } scene.add(cube) let eye = new ln.Vector(3, 2, 4) let center = new ln.Vector(0, 0, 0) let up = new ln.Vector(0, 1, 0) const height = 500 let paths = scene.render(eye, center, up, width, height, 40, 0.1, 100, 0.01) return svg`${ln.toSVG(paths, width, height)}` })()34:Te0d,await visibility(), (() => { // creating a Scene const scene = new ln.Scene() // create a function to return the paths for a given cube given the number on each axis const getPaths = (cube, nx = 10, ny = 10, nz =10) => () => { const paths = [] const { x: x1, y: y1, z: z1 } = cube.min const { x: x2, y: y2, z: z2 } = cube.max paths.push([new ln.Vector(x1, y1, z1), new ln.Vector(x1, y2, z1)]) paths.push([new ln.Vector(x1, y1, z1), new ln.Vector(x1, y1, z2)]) paths.push([new ln.Vector(x2, y2, z2), new ln.Vector(x1, y2, z2)]) paths.push([new ln.Vector(x2, y2, z2), new ln.Vector(x2, y1, z2)]) paths.push([new ln.Vector(x2, y2, z2), new ln.Vector(x2, y2, z1)]) paths.push([new ln.Vector(x1, y2, z1), new ln.Vector(x2, y2, z1)]) paths.push([new ln.Vector(x1, y2, z1), new ln.Vector(x1, y2, z2)]) paths.push([new ln.Vector(x1, y2, z2), new ln.Vector(x1, y1, z2)]) paths.push([new ln.Vector(x1, y1, z2), new ln.Vector(x2, y1, z2)]) for(let i = 1; i < nx; i++) { const p = i / nx const x = x1 + (x2 - x1) * p paths.push([new ln.Vector(x, y1, z2), new ln.Vector(x, y2, z2)]) paths.push([new ln.Vector(x, y1, z1), new ln.Vector(x, y1, z2)]) paths.push([new ln.Vector(x, y2, z1), new ln.Vector(x, y2, z2)]) } for(let i = 1; i < ny; i++) { const p = i / ny const y = y1 + (y2 - y1) * p paths.push([new ln.Vector(x1, y, z2), new ln.Vector(x2, y, z2)]) paths.push([new ln.Vector(x1, y, z1), new ln.Vector(x1, y, z2)]) } for(let i = 1; i < nz; i++) { const p = i / nz const z = z1 + (z2 - z1) * p paths.push([new ln.Vector(x1, y2, z), new ln.Vector(x2, y2, z)]) paths.push([new ln.Vector(x1, y1, z), new ln.Vector(x1, y2, z)]) } return paths } // create a cube at the center let cube = new ln.Cube(new ln.Vector(-2, -2, -2), new ln.Vector(2, 2, 2)) cube.paths = getPaths(cube, 30, 30, 30) scene.add(cube) // let's add 200 randomly positioned boxes for(let i = 0; i < 200; i ++) { let length = randInt(1, 30) let p = (randInt(30) + length/4) * coin() // pos on axis let w = random(.08, 1.5) let offset1 = random(1.9 - w/2) * coin() let offset2 = random(1.9 - w/2) * coin() let min, max let axis = randInt(3) if(axis === 0) { // x axis min = new ln.Vector(p - length / 2, offset1 - w/2, offset2 - w/2) max = new ln.Vector(p + length / 2, offset1 + w/2, offset2 + w/2) } else if(axis === 1) { // y axis min = new ln.Vector(offset1 - w/2, p - length / 2, offset2 - w/2) max = new ln.Vector(offset1 + w/2, p + length / 2, offset2 + w/2) } else { // z axis min = new ln.Vector(offset1 - w/2, offset2 - w/2, p - length / 2) max = new ln.Vector(offset1 + w/2, offset2 + w/2, p + length / 2) } const box = new ln.Cube(min, max) const diffx = max.x - min.x const diffy = max.y - min.y const diffz = max.z - min.z box.paths = getPaths(box, random(1, 15) * diffx | 0, random(1, 15) * diffy | 0, random(1, 15) * diffz | 0) scene.add(box) } // render the scene const eye = new ln.Vector(-28, 12, 8) const center = new ln.Vector(-3, 0, 0) const height = width / 21 * 29.7 const angle = Math.PI / 2. + .5 const up = new ln.Vector(-.3, 1.2, -.6).normalize() // compute the paths to show const paths = scene.render(eye, center, up, width, height, 40, 0.1, 150, 0.01) // display the SVG return svg`${ln.toSVG(paths, width, height)}` })()35:T540,md`___ ## Going further In addition to the [\`Cube\`](https://lnjs.surge.sh/classes/cube.html) class, \`ln.js\` provides a lot of other primitives like [\`Sphere\`](https://lnjs.surge.sh/classes/sphere.html), [\`Cylinder\`](https://lnjs.surge.sh/classes/cylinder.html), [\`Cone\`](https://lnjs.surge.sh/classes/cone.html), [\`Plane\`](https://lnjs.surge.sh/classes/plane.html), [\`Triangle\`](https://lnjs.surge.sh/classes/triangle.html) and [more](https://lnjs.surge.sh/globals.html) to play with. We can also use [\`ln.TransformedShape\`](https://lnjs.surge.sh/classes/transformedshape.html) to create a new shape from an existing one, and applying a transformation matrix to [translate](https://lnjs.surge.sh/globals.html#translate), [scale](https://lnjs.surge.sh/globals.html#scale) or [rotate](https://lnjs.surge.sh/globals.html#rotate) our new shape. And we can use [\`ln.BooleanShape\`](https://lnjs.surge.sh/classes/booleanshape.html) to create complex shapes from 2 other shapes by using Boolean operations ([intersection](https://lnjs.surge.sh/enums/csgoperation.html#intersection), [difference](https://lnjs.surge.sh/enums/csgoperation.html#union), [union](https://lnjs.surge.sh/enums/csgoperation.html#difference)), this is also known as [Constructive Solid Geometry](https://en.wikipedia.org/wiki/Constructive_solid_geometry).`36:Ta22,await visibility(), (() => { const scene = new ln.Scene() // first, we create a Sphere centered on (0, 0, 0) with a diameter of 1.1 const a = new ln.Sphere(new ln.Vector(0, 0, 0), 1.1) // then we create a Cube as we did previously and define its paths const b = new ln.Cube(new ln.Vector(-.8, -.8, -.8), new ln.Vector(.8, .8, .8)) b.paths = () => { const paths = [] const { x: x1, y: y1, z: z1 } = b.min const { x: x2, y: y2, z: z2 } = b.max for(let i = 0; i <= 30; i++) { const p = i / 30 const x = x1 + (x2 - x1) * p const y = y1 + (y2 - y1) * p const z = z1 + (z2 - z1) * p paths.push([new ln.Vector(x, y2, z1), new ln.Vector(x, y2, z2)]) paths.push([new ln.Vector(x2, y, z1), new ln.Vector(x2, y, z2)]) paths.push([new ln.Vector(x2, y, z2), new ln.Vector(x1, y, z2)]) } return paths } // now we create a Cylinder they are always centered on (0, 0, 0) const c = new ln.Cylinder(0.6, -2, 2) // here we are creating copies of the cylinder 'c' applying a transformation to it // in this case a rotation of Math.PI/2 (= 90°) around the X axis (1, 0, 0) for the first one const d = new ln.TransformedShape(c, ln.rotate(new ln.Vector(1, 0, 0), Math.PI/2)) // in this case a rotation of Math.PI/2 (= 90°) around the Y axis (0, 1, 0) for the second one const e = new ln.TransformedShape(c, ln.rotate(new ln.Vector(0, 1, 0), Math.PI/2)) // Finally, we can create a BooleanShape using CSG operation // (Sphere & Cube) - CylinderA - CylinderB - Cylinder let result = new ln.BooleanShape(ln.CSGOperation.Intersection, a, b) // intersection of 'a' and 'b' result = new ln.BooleanShape(ln.CSGOperation.Difference, result, c) // remove the first cylinder result = new ln.BooleanShape(ln.CSGOperation.Difference, result, d) // remove the second cylinder result = new ln.BooleanShape(ln.CSGOperation.Difference, result, e) // remove the third cylinder scene.add(result) // define camera parameters const eye = new ln.Vector(1.1, 2.2, 1.2) // camera position const center = new ln.Vector(0, 0, -0.2) // camera looks at const up = new ln.Vector(0, 0, 1) // up direction // define rendering parameters const height = 500 // view height const fovy = 50 // vertical field of view, degrees const znear = 0.1 // near z plane const zfar = 10 // far z plane const step = 0.01 // how finely to chop the paths for visibility testing const paths = scene.render(eye, center, up, width, height, fovy, znear, zfar, step) return svg`${ln.toSVG(paths, width, height)}` })()37:[{"id":"86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","href":"https://static.observableusercontent.com/files/86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","name":"86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6.png","type":"image/png","lastModified":1606605905759.682,"size":23176}] 31:{"id":"b08e0e69b57800c6","slug":"getting-started-with-ln","title":"Getting started with ln, the 3D Line Art Engine","thumbnail":"05212de0f08ea576e407f9e3142b1477bd6530973d9500ef3ea947335b3f2d5d","access_level":"public","create_time":"$D2020-06-29T10:22:21.299Z","update_time":"$D2026-03-18T22:05:48.864Z","view_time":null,"first_public_time":"$D2020-12-07T14:17:16.036Z","fork":false,"stars":73,"starred":false,"owner":{"type":"team","id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":"starter_2024"},"version":734,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null}],"members":[{"type":"individual","id":"cae924adff874d09","login":"makio135","name":"Lionel Radisson","avatar_url":"https://avatars-next.observableusercontent.com/1ebff675951134ccb48ffd1faaeabdecafe0daf8d168685c768f506435e400f0","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":18,"collection":{"id":"7c2f7212b5f71444","slug":"plotter","title":"Penplotter","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"type":"notebook","body":{"title":"Getting started with ln, the 3D Line Art Engine","cells":[{"id":0,"value":"md`# Getting started with \\`ln\\`, the 3D Line Art Engine\n\n![](https://camo.githubusercontent.com/e38a23f4ab5674acc1eb149e19b252b5f237c946/687474703a2f2f692e696d6775722e636f6d2f485932466732742e706e67)\n\n[ln, The 3D Line Art Engine](https://github.com/fogleman/ln), created by [Michael Fogleman](https://www.michaelfogleman.com/), is a Go package written to plot 3D drawings with plotters:\n> \\`ln\\` is a vector-based 3D renderer written in Go. It is used to produce 2D vector graphics (think SVGs) depicting 3D scenes.\n> \n> *The output of an OpenGL pipeline is a rastered image. The output of \\`ln\\` is a set of 2D vector paths.*\n\nGo can require a bit of setup to use but thankfully, [Brandon Dail](https://github.com/aweary) ported this awesome tool to JavaScript: [ln.js](https://github.com/aweary/ln.js).\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"md`[

](https://x.com/makio135) [

](https://instagram.com/makio135)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":480,"value":"md`___\n## Our First Scene`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`The first thing to do is to import \\`ln\\` in our notebook:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"ln = import('https://unpkg.com/@lnjs/core@0.5.0/es/index.js?module')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"md`And we now have access to \\`ln\\` classes and methods, you can check the complete list [here](http://lnjs.surge.sh/globals.html). \n\nWe'll start by creating a \\`Scene\\`, a virtual space to position 3D objects and setup a camera to render them:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"scene = new ln.Scene()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"md`Ok, so now that we have an empty \\`Scene\\`, we can create some objects. \nLet's start with one of the primitives offered by \\`ln\\`: a \\`Cube\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"cube = {\n // A \"Cube\" in ln is defined by the position of 2 points\n // We are using vectors to store the X, Y and Z coordinates of a position in 3D space\n const min = new ln.Vector(-1, -1, -1)\n const max = new ln.Vector(1, 1, 1)\n return new ln.Cube(min, max)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":647,"value":"md`(See [An Introduction to Vectors](https://mathinsight.org/vector_introduction) if you want to learn more about vectors)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"md`Before rendering our \\`Scene\\`, we need to define the position of the camera (\\`eye\\`), where the camera points to (\\`center\\`) and define an \\`up\\` vector to orient the camera:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"eye = new ln.Vector(3, 2, 4)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"center = new ln.Vector(0, 0, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"up = new ln.Vector(0, 1, 0)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":448,"value":"md`We also need to define the viewport dimensions. \nWe're going to use the \\`width\\` variable from Observable and define an \\`height\\`:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"width // corresponds to the width of the notebook","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":23,"value":"height = 500","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`As well as some parameters needed to define the rendering:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"fovy = 40 // vertical field of view, in degrees","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":639,"value":"znear = 0.1 // near z plane","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"zfar = 10 // far z plane","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"md`Paths will be limited between \\`znear\\` and \\`zfar\\`.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"step = 0.01 // how finely to chop the paths for visibility testing","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":436,"value":"md`All the elements are setup, we can now add our 3D Objects to our scene and compute which paths are going to be seen:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"paths = {\n scene.add(cube)\n return scene.render(eye, center, up, width, height, fovy, znear, zfar, step)\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"md`And voila, this is our first 3D scene rendered in a SVG 🎉`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"svg`${ln.toSVG(paths, width, height)}` // we are using the `svg` utility from Observable to render our SVG","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"html`

\n And Observable provides very usefull features like built-in saving SVG 🤩
\n We can simply open the cell menu in the left margin to download any SVG cell as either SVG or PNG.\n \n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`___\n## Getting serious\n\nA simple box is nice, but we can do better :) \n\\`ln\\` allows us to define a function to compute the paths of an Object, so let's do this:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":459,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"md`We can now create a new scene with a bunch of these boxes: \n(This one takes some time, hit the \"Dismiss warning\" button if it shows up)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":578,"value":"md`\\`random\\`, \\`randInt\\`, \\`coin\\` are some of my helpers from [@makio135/utilities](https://observablehq.com/@makio135/utilities) for randomness:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":95,"value":"import {random, randInt, coin} from '@makio135/utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":516,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":525,"value":"md`And even function based shapes, get a glimpse:`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":464,"value":"await visibility(), (() => {\n function shape(x, y) {\n return -1 / (x ** 2 + y ** 2) ** 2\n }\n\n const scene = new ln.Scene()\n const min = new ln.Vector(-2, -2, -4)\n const max = new ln.Vector(2, 2, 2)\n const box = new ln.Box(min, max)\n const fn = new ln.Function(shape, box, ln.Direction.Below)\n scene.add(fn)\n\n const eye = new ln.Vector(3, 0, 3)\n const center = new ln.Vector(1, 0, 0)\n const up = new ln.Vector(0, 0, 1)\n const height = 500\n const paths = scene.render(eye, center, up, width, height, 50, 0.1, 100, 0.01)\n return svg`${ln.toSVG(paths, width, height)}`\n})()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":542,"value":"md`___\nln.js still has a lot more to play with, like an [\\`OBJLoader\\`](https://lnjs.surge.sh/globals.html#loadobj), but that might be for another notebook. \n\nHope you found it interesting, have fun and take care ✌️\n\n
\nLionel Radisson \n[

](https://twitter.com/makio135) [