2b:null 2c:["$","title",null,{"children":"Getting started with ln, the 3D Line Art Engine | Byron | Observable"}] 31:T786,await visibility(), (() => { // create a scene const scene = new ln.Scene() // create a box const min = new ln.Vector(-2, -1, -1) const max = new ln.Vector(2, 2, 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 } let cubes = new Array(20).map( (idx) => { // let c = { // A "Cube" in ln is defined by the position of 2 points // We are using vectors to store the X, Y and Z coordinates of a position in 3D space const min = new ln.Vector(-2, -1, 1) const max = new ln.Vector(2, 1, 2) const c = new ln.Cube(min, max) scene.add( c ); return c; // } } ) // scene.add(cubes) let eye = new ln.Vector(0,0,8) 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, 30, 0.1, 100, 0.01) return svg`${ln.toSVG(paths, width, height)}` })()32:Te27,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, 2, 2, 3) scene.add(cube) // let's add 200 randomly positioned boxes for(let i = 0; i < 0; i ++) { let length = randInt(1, 30) let p = (randInt(1) + length/40) * coin() // pos on axis let w = random(.08, 1.5) let offset1 = random(0.9 - w/2) * coin() let offset2 = random(0.9 - w/2) * coin() let min, max let axis = 1;//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)}` })()33: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).`34: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)}` })()35:[{"id":"86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","href":"https://static.observableusercontent.com/files/86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6","name":"86ed4677f865be5442de9a63b8ebe510c87087441445d7424009e92f4a96389fca89d63781801bb036cc4d0f6c4eed65914ce14a46e615e4c96390f992bfc2e6.png","type":"image/png","lastModified":1674119686213.94,"size":23176}] 2f:{"id":"ba9bd02a44b9eb3b","slug":null,"title":"Getting started with ln, the 3D Line Art Engine","thumbnail":"2bf459184fc0f6e746299a8bff8f531be512a0943e7b466dbd61d3bc1e5dfdf9","access_level":"public","create_time":"$D2023-01-19T09:14:46.213Z","update_time":"$D2023-12-04T22:48:14.013Z","view_time":null,"first_public_time":"$D2023-01-19T09:14:46.213Z","fork":{"id":"b08e0e69b57800c6","slug":"getting-started-with-ln","title":"Getting started with ln, the 3D Line Art Engine","owner":{"id":"33d0c3f28420ec9c","login":"makio135","name":"Lionel Radisson"}},"stars":0,"starred":false,"owner":{"type":"team","id":"61b11e81160dcfa4","login":"codecreative","name":"Byron","avatar_url":"https://avatars-next.observableusercontent.com/4e9aa89dd6daf11c0ab419019e4fe0cef7ccf8bd07e8d3f1f5ca96e5b06dad45","tier":"starter_2024"},"version":889,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"5daeb19cae5b7296","login":"codecreative","name":"Byron","avatar_url":"https://avatars-next.observableusercontent.com/4e9aa89dd6daf11c0ab419019e4fe0cef7ccf8bd07e8d3f1f5ca96e5b06dad45","tier":null}],"members":[{"type":"individual","id":"5daeb19cae5b7296","login":"codecreative","name":"Byron","avatar_url":"https://avatars-next.observableusercontent.com/4e9aa89dd6daf11c0ab419019e4fe0cef7ccf8bd07e8d3f1f5ca96e5b06dad45","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"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://twitter.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(-2, -1, -1)\n const max = new ln.Vector(2, 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":"$31","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":"$32","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":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":461,"value":"$34","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) * 8)\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(0, 1, -1)\n const center = new ln.Vector(0, 1, -1)\n const up = new ln.Vector(0, 1, -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) [