Example things I like: geometry, trippy geometry, recursion, maps. 👌
Published
Edited
Mar 19, 2021
33 stars
Guided Tour of an Infinite Sphere Grid
Also listed in…
Observable's Instagram Shares
// TODO: To alleviate the abrupt changes when stepping too fast between presets: Model the dynamic uniforms with something akin to differential equations and regulate them with PID controllers. Presets are then just new target values for the regulators.
presets = {
mutable previousPresetIndex = 0;
return [
{
caption: "Welcome! Click to proceed"
},
{
caption: "Let's explore different versions of this strange world"
},
{
caption: "Small spheres",
sphereRadius: 0.3
},
{
caption: "Tiny spheres",
sphereRadius: 0.1
},
{
caption: "Medium spheres",
sphereRadius: 1.75,
spiralAmplitude: 0
},
{
caption: "Touching spheres, retracting to reveal the next layer",
sphereRadius: 2.5,
spiralAmplitude: 0
},
{
caption: "Intersecting a little",
sphereRadius: 3,
spiralAmplitude: 0
},
{
caption: "Intersecting a bit more",
sphereRadius: 2.5 * Math.sqrt(2) * 0.95,
spiralAmplitude: 0
},
{
caption: "Overlapping the view centerline",
sphereRadius: 5,
spiralAmplitude: 0
// spiralAmplitude: 2.5 * Math.sqrt(2)
},
{
caption: "Overlapping even more, and we're spiralling again",
sphereRadius: 10
},
{
caption: "Very large spheres, heavily overlapping",
sphereRadius: 20.0
},
{
caption: "Default sphere size again, spiralling more",
spiralAmplitude: 25
},
{
caption: "Fast forward",
forwardSpeed: 25,
spiralAmplitude: 0.3,
rollSpeed: 2
},
{
caption: "Reduced ray march iteration count gives a metablob-like effect",
maxSteps: 20
},
{
caption: "Reducing max iteration count too far",
maxSteps: 10
},
{
caption: "Much too far",
maxSteps: 6
},
{
caption: "Seemingly moving, but actually static",
spiralAmplitude: 0,
forwardSpeed: 0,
rollSpeed: 0,
colorCycleSpeed: 10
},
{
caption: "Thanks for watching! The End",
forwardSpeed: -10,
spiralAmplitude: 0,
colorCycleSpeed: 0,
rollSpeed: 0,
colorAmplitude: 0,
apertureAmplitude: 0
}
];
}
dynamicUniforms = ({
spiralAmplitude: {
defaultValue: 5.0,
type: "float"
},
forwardSpeed: {
defaultValue: 1,
type: "float"
},
rollSpeed: {
defaultValue: 1,
type: "float"
},
colorCycleSpeed: {
defaultValue: 1,
type: "float"
},
maxSteps: {
defaultValue: maxMaxsteps,
type: "int"
},
sphereRadius: {
defaultValue: 1,
type: "float"
},
colorAmplitude: {
defaultValue: 1,
type: "float"
},
apertureAmplitude: {
defaultValue: 1,
type: "float"
},
spherePositionAmplitude: {
defaultValue: 0,
type: "float"
}
})
animationDuration = 3000
function setPresetIndex(i) {
mutable previousPreset = preset;
setInput(viewof presetIndex, i);
}
frag = [
frag_preamble(),
frag_dynamicUniforms(),
frag_getSceneDistance(),
frag_getGradient(),
frag_getNormal(),
frag_rayMarch(),
frag_getLight(),
frag_getFisheyeRayDirection(),
frag_getPosition(),
frag_main()
].join("\n")
easeCos = t => 0.5 * (1 - Math.cos(Math.PI * t))
function setInput(input, value) {
input.value = value;
input.dispatchEvent(new CustomEvent("input"));
}
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.
