Public
Edited
Jan 17, 2024
6 forks
24 stars
domain = ({ x:[-1,1], y:[-1,1], z:[-1,1], ticks:5})
function f(x, y, t){
// inward ripple wave
let phase1 = (.5+.5*Math.sin( t/15+0*Math.PI + .5*Math.sqrt(x**2+y**2) ))**2
let rippleWave = Math.cos(2*t + 25*Math.sqrt(.2+x**2+y**2) )
// outward spiral wave
let phase2 = (.5+.5*Math.sin(t/15+.75*Math.PI - .5*Math.sqrt(x**2+y**2) ))**2
let spiralWave = (
Math.cos( // wave shape
-2*t // animate
+ 18*Math.sqrt(.2+x**2+y**2) // outward ripple
- 2*Math.atan((x+.001)/y) // spiral ramp
)
*(x**2+y**2)/(x**2+y**2+.03) // smooth roughness near origin
+ 1 - (x**2+y**2)/(x**2+y**2+.03) // adds a bump so the spiral arms connect
)
// chaotic inverse wave
let phase3 = Math.max(0,1-phase1-phase2)
let inverseWave = Math.sin(20*(x*y)/Math.sqrt(1+x**2+y**2)-t)
return .13*phase1*rippleWave + .15*phase2*spiralWave + .2*phase3*inverseWave + .35
}
function transform(x, y, z, t){
//transform matrix
let tx = 1*x + 0*y + 0*z
let ty = 0*x + 1*y + 0*z
let tz = 0*x + 0*y + 1*z
return [tx, ty, tz]
}
options = ({
surface: new THREE.MeshStandardMaterial({
color: 'lightblue',
roughness: .5,
metalness:.02,
side: THREE.DoubleSide,
wireframe: false
}),
line: new THREE.LineBasicMaterial({
color: 'blue',
transparent: true,
opacity: .15,
depthwrite:false
})
})
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.
