Generative artist, sharing my journey in visual experiments.
Published
Edited
Feb 25, 2021
2 forks
Importers
32 stars
{
// 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')
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.
