Generative artist, sharing my journey in visual experiments.
p = getRandomPalette()
palette = shuffle([...p, '#111111', '#111111', '#ffffff', random() < .5 ? '#ffff00' : '#ff0000'])
//palette = ["#111111", "#113a5d", "#f9f9f9", "#ff0000", "#ff7a8a", "#ffffff"]
// palette = ['#111111', '#015ABB', '#FED500']
// palette = ["#212121", "#ffffff", "#111111", "#0d7377", "#14ffec", "#323232", "#ff0000"]
//palette = cut(0, 255, 4).map(i => (i | 0).toString(16).padStart('0', 2)).map(d => `#${d}${d}${d}`)
displayPalettes(palette)
await visibility(), bnbThree({
w: 800, h: 800,
// play: false,
numFrames: 300,
fps: 20,
record: true,
video: 'mp4',
// chromaticAberration: 1,
// shutterAngle: .3,
// samplesPerFrame: 8,
/*
// simple shaderPass to rotate the scene upside down
shaderPass: `
precision mediump float;
uniform vec2 u_resolution;
uniform sampler2D u_texture;
float luma(vec3 color) {
return dot(color, vec3(0.299, 0.587, 0.114));
}
float luma(vec4 color) {
return dot(color.rgb, vec3(0.299, 0.587, 0.114));
}
float dither8x8(vec2 position, float brightness) {
int x = int(mod(position.x, 8.0));
int y = int(mod(position.y, 8.0));
int index = x + y * 8;
float limit = 0.0;
if (x < 8) {
if (index == 0) limit = 0.015625;
if (index == 1) limit = 0.515625;
if (index == 2) limit = 0.140625;
if (index == 3) limit = 0.640625;
if (index == 4) limit = 0.046875;
if (index == 5) limit = 0.546875;
if (index == 6) limit = 0.171875;
if (index == 7) limit = 0.671875;
if (index == 8) limit = 0.765625;
if (index == 9) limit = 0.265625;
if (index == 10) limit = 0.890625;
if (index == 11) limit = 0.390625;
if (index == 12) limit = 0.796875;
if (index == 13) limit = 0.296875;
if (index == 14) limit = 0.921875;
if (index == 15) limit = 0.421875;
if (index == 16) limit = 0.203125;
if (index == 17) limit = 0.703125;
if (index == 18) limit = 0.078125;
if (index == 19) limit = 0.578125;
if (index == 20) limit = 0.234375;
if (index == 21) limit = 0.734375;
if (index == 22) limit = 0.109375;
if (index == 23) limit = 0.609375;
if (index == 24) limit = 0.953125;
if (index == 25) limit = 0.453125;
if (index == 26) limit = 0.828125;
if (index == 27) limit = 0.328125;
if (index == 28) limit = 0.984375;
if (index == 29) limit = 0.484375;
if (index == 30) limit = 0.859375;
if (index == 31) limit = 0.359375;
if (index == 32) limit = 0.0625;
if (index == 33) limit = 0.5625;
if (index == 34) limit = 0.1875;
if (index == 35) limit = 0.6875;
if (index == 36) limit = 0.03125;
if (index == 37) limit = 0.53125;
if (index == 38) limit = 0.15625;
if (index == 39) limit = 0.65625;
if (index == 40) limit = 0.8125;
if (index == 41) limit = 0.3125;
if (index == 42) limit = 0.9375;
if (index == 43) limit = 0.4375;
if (index == 44) limit = 0.78125;
if (index == 45) limit = 0.28125;
if (index == 46) limit = 0.90625;
if (index == 47) limit = 0.40625;
if (index == 48) limit = 0.25;
if (index == 49) limit = 0.75;
if (index == 50) limit = 0.125;
if (index == 51) limit = 0.625;
if (index == 52) limit = 0.21875;
if (index == 53) limit = 0.71875;
if (index == 54) limit = 0.09375;
if (index == 55) limit = 0.59375;
if (index == 56) limit = 1.0;
if (index == 57) limit = 0.5;
if (index == 58) limit = 0.875;
if (index == 59) limit = 0.375;
if (index == 60) limit = 0.96875;
if (index == 61) limit = 0.46875;
if (index == 62) limit = 0.84375;
if (index == 63) limit = 0.34375;
}
return brightness < limit ? 0.0 : 1.0;
}
vec3 dither8x8(vec2 position, vec3 color) {
return color * dither8x8(position, luma(color));
}
vec4 dither8x8(vec2 position, vec4 color) {
return vec4(color.rgb * dither8x8(position, luma(color)), 1.0);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution;
// uv.x = 1. - uv.x;
//gl_FragColor = texture2D(u_texture, uv);
vec4 color = texture2D(u_texture, uv);
gl_FragColor = dither8x8(gl_FragCoord.xy, color);
}`,
*/
createScene: (THREE, s, g) => {
// based on https://threejs.org/examples/#webgl_geometry_extrude_splines
const scene = new THREE.Scene()
//scene.background = new THREE.Color(0x1E2630)
scene.background = new THREE.Color(parseInt(palette[0].substr(1),16))
// create a simple texture using p5js
const pg = s.createGraphics(1024, 1024)
// const pg2 = s.createGraphics(1024, 1024)
class Rect{
constructor(x,y,w,h) {
this.x = x
this.y = y
this.w = w
this.h = h
this.offset = random()
this.offsetX = random(pg.width)
this.color = palette[randInt(0, palette.length)]
this.speed = randInt(1, 5)
}
display(s,t) {
let tt = ((t + this.offset * this.speed) % 1)*2
if(tt>.1){
s.fill(this.color)
s.stroke(this.color)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width - pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width + pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
/*
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width, this.y + pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width - pg.width, this.y + pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width + pg.width, this.y + pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width, this.y - pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width - pg.width, this.y - pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width + pg.width, this.y - pg.height, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
*/
}
}
display2(s,t) {
let tt = ((t + this.offset * this.speed) % 1)*2
if(tt>.1){
s.fill(255)
s.stroke(255)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width - pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
s.rect(this.offsetX + this.x + easings.easeCubicInOut(linearstep(tt, .5, 1)) * pg.width + pg.width, this.y, easings.easeCubicInOut(linearstepUpDown(tt, .1, .5, .5, 1)) * this.w, this.h)
}
}
}
// const rects = array(80).map((d, i, arr) => new Rect(0, pg.height/arr.length*randInt(i), pg.width/2, pg.height/arr.length))
// const rects = array(400).map((d, i, arr) => new Rect(0, pg.height/80*randInt(80), pg.width/2, pg.height/80))
const rects = array(2000).map((d, i, arr) => new Rect(0, random(pg.height), randInt(10, 300), expRand(10, 200, 3)))
const tex = new THREE.Texture(pg.canvas)
tex.repeat = new THREE.Vector2(4, 5)
tex.wrapS = tex.wrapT = THREE.RepeatWrapping
// const alphaMap = new THREE.Texture(pg2.canvas)
// alphaMap.repeat = new THREE.Vector2(4, 1)
// alphaMap.wrapS = tex.wrapT = THREE.RepeatWrapping
// tex.needsUpdate = true // make sure to update the texture
const material = new THREE.MeshBasicMaterial({
wireframe: false,
// alphaMap,
// transparent: false,
map: tex,
side: THREE.DoubleSide
})
const geometry = new THREE.TubeGeometry(new curves.Curves.GrannyKnot(), 1500, 3, 5, true)
const mesh = new THREE.Mesh(geometry, material)
scene.add(mesh)
const camera = new THREE.PerspectiveCamera(45, g.w / g.h, 0.001, 100)
const renderer = new THREE.WebGLRenderer({ antialias: true })
renderer.setSize(g.w, g.h)
const direction = new THREE.Vector3()
const binormal = new THREE.Vector3()
const normal = new THREE.Vector3()
const position = new THREE.Vector3()
const lookAt = new THREE.Vector3()
const fixedT = random()
return (s, t, g) => {
pg.background(palette[0])
// pg.clear()
rects.forEach(r => r.display(pg, 1-t))
pg.stroke('white')
pg.strokeWeight(3)
for(let i = 0; i <= 5; i ++) {
let x = s.map(i, 0, 5, 0, pg.width)
pg.line(x, 0, x, pg.height)
}
tex.needsUpdate = true
// pg2.background(0)
// rects.forEach(r => r.display2(pg2, 1-t))
// alphaMap.needsUpdate = true
//t = fixedT
geometry.parameters.path.getPointAt(t, position)
// interpolation
const segments = geometry.tangents.length
const pickt = t * segments
const pick = Math.floor(pickt)
const pickNext = (pick + 1) % segments
binormal.subVectors(geometry.binormals[pickNext], geometry.binormals[pick])
binormal.multiplyScalar(pickt - pick).add(geometry.binormals[pick])
geometry.parameters.path.getTangentAt(t, direction)
// const offset = 3
const offset = -2.9
normal.copy(binormal).cross(direction)
// we move on a offset on its binormal
position.add(normal.clone().multiplyScalar(offset))
camera.position.copy(position)
// using arclength for stablization in look ahead
geometry.parameters.path.getPointAt((t + 16 / geometry.parameters.path.getLength()) % 1, lookAt)
// camera orientation 2 - up orientation via normal
camera.matrix.lookAt(camera.position, lookAt, normal)
camera.quaternion.setFromRotationMatrix(camera.matrix)
renderer.render(scene, camera)
return renderer
}
}
})
import {array, random, shuffle, randInt, linearstep, linearstepUpDown, expRand, cut} from '@makio135/utilities'
curves = import('https://unpkg.com/three@0.125.0/examples/jsm/curves/CurveExtras.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.