await visibility(), bnbThree({
w: 800, h: 800,
numFrames: 300,
fps: 20,
record: true,
video: 'mp4',
createScene: (THREE, s, g) => {
const scene = new THREE.Scene()
scene.background = new THREE.Color(parseInt(palette[0].substr(1),16))
const pg = 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)
}
}
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(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 material = new THREE.MeshBasicMaterial({
wireframe: 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])
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
geometry.parameters.path.getPointAt(t, position)
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 = -2.9
normal.copy(binormal).cross(direction)
position.add(normal.clone().multiplyScalar(offset))
camera.position.copy(position)
geometry.parameters.path.getPointAt((t + 16 / geometry.parameters.path.getLength()) % 1, lookAt)
camera.matrix.lookAt(camera.position, lookAt, normal)
camera.quaternion.setFromRotationMatrix(camera.matrix)
renderer.render(scene, camera)
return renderer
}
}
})