Generative artist, sharing my journey in visual experiments.
Published
Edited
Feb 25, 2021
2 forks
Importers
32 stars
Roland DXY-1300Hello svg5Getting started with ln, the 3D Line Art EngineHello lnFlowers of NoiseColorful polygonshatchMultiplePolygons testHexagrid NoiseRecursive grid #1Möbius strips for pen plotterHatch test CMJ(N)TilesRotated ArcsPlotter templateSnake skinflowfieldStipplingGenerating SVGsRosaceVorogrid10 PrintGrowing spacesnoise wavesBreaking thingsConfined TreesSunburstsVoronoise
ln
Also listed in…
tools
{
// first thing is to create a scene
const scene = new ln.Scene()
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 paths = []
const { x: x1, y: y1, z: z1 } = this.min
const { x: x2, y: y2, z: z2 } = this.max
for(let i = 0; i <= 40; i++) {
const p = i / 40
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, y1, z), new ln.Vector(x2, y2, z)])
paths.push([new ln.Vector(x2, y, z2), new ln.Vector(x1, y, z2)])
}
return paths
}
scene.add(cube)
let eye = new ln.Vector(2, 4, 3)
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)}`
}
await visibility(), (() => {
const scene = new ln.Scene()
const a = new ln.Sphere(new ln.Vector(0, 0, 0), 1.1)
const s = .8
const b = new ln.Cube(new ln.Vector(-s, -s, -s), new ln.Vector(s, s, s))
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
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)])
paths.push([new ln.Vector(x1, y, z1), new ln.Vector(x1, y, 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
}
const c = new ln.Cylinder(0.6, -2, 2)
const d = new ln.TransformedShape(c, ln.rotate(new ln.Vector(1, 0, 0), Math.PI/2))
const e = new ln.TransformedShape(c, ln.rotate(new ln.Vector(0, 1, 0), Math.PI/2))
const result = new ln.BooleanShape(
ln.CSGOperation.Difference,
new ln.BooleanShape(
ln.CSGOperation.Difference,
new ln.BooleanShape(
ln.CSGOperation.Difference,
new ln.BooleanShape(ln.CSGOperation.Intersection, a, b),
c
),
d
),
e
)
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 // rendered 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)}`
})()
await visibility(), (() => {
function shape(x, y) {
return -1 / Math.pow((Math.pow(x, 2) + Math.pow(y, 2)), 2)
}
const scene = new ln.Scene()
const min = new ln.Vector(-2, -2, -4)
const max = new ln.Vector(2, 2, 2)
const box = new ln.Box(min, max)
const fn = new ln.Function(shape, box, ln.Direction.Below)
scene.add(fn)
const eye = new ln.Vector(3, 0, 3)
const center = new ln.Vector(1.1, 0, 0)
const up = new ln.Vector(0, 0, 1)
const height = 500
const paths = scene.render(eye, center, up, width, height, 50, 0.1, 100, 0.01)
return svg`${ln.toSVG(paths, width, height)}`
})()
ln = import('https://unpkg.com/@lnjs/core@0.5.0/es/index.js?module')
// ln = ({
// ...axis,
// ...box,
// Cone: cone.default,
// ...csg,
// Cube: cube.default,
// ...cylinder,
// ...filter,
// ...func,
// ...hit,
// ...math,
// ...matrix,
// Mesh: mesh.default,
// ...obj,
// ...path,
// ...paths,
// Plane: plane.default,
// Ray: ray.default,
// Scene: scene.default,
// ...set,
// ...shape,
// ...sphere,
// ...tree,
// Triangle: triangle.default,
// Vector: vector.default
// })
// axis = import('https://unpkg.com/@lnjs/core@0.3.0/es/axis.js?module')
// box = import('https://unpkg.com/@lnjs/core@0.3.0/es/box.js?module')
// cone = import('https://unpkg.com/@lnjs/core@0.3.0/es/cone.js?module')
// csg = import('https://unpkg.com/@lnjs/core@0.3.0/es/csg.js?module')
// cube = import('https://unpkg.com/@lnjs/core@0.3.0/es/cube.js?module')
// cylinder = import('https://unpkg.com/@lnjs/core@0.3.0/es/cylinder.js?module')
// filter = import('https://unpkg.com/@lnjs/core@0.3.0/es/filter.js?module')
// func = import('https://unpkg.com/@lnjs/core@0.3.0/es/function.js?module')
// hit = import('https://unpkg.com/@lnjs/core@0.3.0/es/hit.js?module')
// math = import('https://unpkg.com/@lnjs/core@0.3.0/es/math.js?module')
// matrix = import('https://unpkg.com/@lnjs/core@0.3.0/es/matrix.js?module')
// mesh = import('https://unpkg.com/@lnjs/core@0.3.0/es/mesh.js?module')
// obj = import('https://unpkg.com/@lnjs/core@0.3.0/es/obj.js?module')
// path = import('https://unpkg.com/@lnjs/core@0.3.0/es/path.js?module')
// paths = import('https://unpkg.com/@lnjs/core@0.3.0/es/paths.js?module')
// plane = import('https://unpkg.com/@lnjs/core@0.3.0/es/plane.js?module')
// ray = import('https://unpkg.com/@lnjs/core@0.3.0/es/ray.js?module')
// scene = import('https://unpkg.com/@lnjs/core@0.3.0/es/scene.js?module')
// set = import('https://unpkg.com/@lnjs/core@0.3.0/es/set.js?module')
// shape = import('https://unpkg.com/@lnjs/core@0.3.0/es/shape.js?module')
// sphere = import('https://unpkg.com/@lnjs/core@0.3.0/es/sphere.js?module')
// tree = import('https://unpkg.com/@lnjs/core@0.3.0/es/tree.js?module')
// triangle = import('https://unpkg.com/@lnjs/core@0.3.0/es/triangle.js?module')
// vector = import('https://unpkg.com/@lnjs/core@0.3.0/es/vector.js?module')
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.