width = 500
height = 500
viewof zoom = Inputs.range([-10, 10], { value: 0, step: 1, label: "zoom" })
shader({
iTime: true,
visibility,
inputs: {
a: viewof a,
b: viewof b,
zoom: viewof zoom
}
})`void mainImage(out vec4 fragColor, in vec2 fragCoord)
{
vec2 center = vec2(a, b);
vec2 uv = (fragCoord.xy / iResolution.xy);
vec2 c = center + (uv * 4.0 - vec2(2.0)); // * (zoom / 4.0);
vec2 z = vec2(0.0);
bool escaped = false;
for (int i = 0; i < ${iterations}; i++) {
z = mat2(z,-z.y,z.z)*z + c;
if (length(z) > 2.0) {
escaped = true;
break;
}
}
fragColor = escaped ? vec4(1.0) : vec4(vec3(0.0), 1.0);
}
`
shader({
width: 900,
height: 500,
iTime: true,
visibility
//inputs: { size: viewof zoom }
})`
float mandelbrot( in vec2 c )
{
const float B = 256.0;
float l = 0.0;
vec2 z = vec2(0.0);
for( int i=0; i<512; i++ )
{
z = vec2( z.x*z.x - z.y*z.y, 2.0*z.x*z.y ) + c;
if( dot(z,z)>(B*B) ) break;
l += 1.0;
}
if( l>511.0 ) return 0.0;
//return l;
// equivalent optimized smooth interation count
float sl = l - log2(log2(dot(z,z))) + 4.0;
float al = smoothstep( -0.1, 0.0, sin(0.5*6.2831*iTime ) );
l = mix( l, sl, al );
return l;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec3 col = vec3(0.0);
vec2 p = (-iResolution.xy + 2.0*fragCoord.xy)/iResolution.y;
float time = iTime;
float zoo = 0.62 + 0.38*cos(.07*time);
float coa = cos( 0.15*(1.0-zoo)*time );
float sia = sin( 0.15*(1.0-zoo)*time );
zoo = pow( zoo,8.0);
vec2 xy = vec2( p.x*coa-p.y*sia, p.x*sia+p.y*coa);
vec2 c = vec2(-.745,.186) + xy*zoo;
float l = mandelbrot(c);
col += 0.5 + 0.5*cos( 3.0 + l*0.15 + vec3(0.0,0.6,1.0));
fragColor = vec4( col, 1.0 );
}
`
shader({
// width,
// height: 200,
iTime: true,
visibility
//inputs: { size: viewof zoom }
})`
// https://www.shadertoy.com/view/4df3Rn
// Created by inigo quilez - iq/2013
// https://www.youtube.com/c/InigoQuilez
// https://iquilezles.org
// I share this piece (art and code) here in Shadertoy and through its Public API, only for educational purposes.
// You cannot use, sell, share or host this piece or modifications of it as part of your own commercial or non-commercial product, website or project.
// You can share a link to it or an unmodified screenshot of it provided you attribute "by Inigo Quilez, @iquilezles and iquilezles.org".
// If you are a teacher, lecturer, educator or similar and these conditions are too restrictive for your needs, please contact me and we'll work it out.
// See here for more information on smooth iteration count:
//
// https://iquilezles.org/articles/msetsmooth
// increase this if you have a very fast GPU
#define AA 2
float mandelbrot( in vec2 c )
{
#if 1
{
float c2 = dot(c, c);
// skip computation inside M1 - https://iquilezles.org/articles/mset1bulb
if( 256.0*c2*c2 - 96.0*c2 + 32.0*c.x - 3.0 < 0.0 ) return 0.0;
// skip computation inside M2 - https://iquilezles.org/articles/mset2bulb
if( 16.0*(c2+2.0*c.x+1.0) - 1.0 < 0.0 ) return 0.0;
}
#endif
const float B = 256.0;
float l = 0.0;
vec2 z = vec2(0.0);
for( int i=0; i<512; i++ )
{
z = vec2( z.x*z.x - z.y*z.y, 2.0*z.x*z.y ) + c;
if( dot(z,z)>(B*B) ) break;
l += 1.0;
}
if( l>511.0 ) return 0.0;
// ------------------------------------------------------
// smooth interation count
//float sl = l - log(log(length(z))/log(B))/log(2.0);
// equivalent optimized smooth interation count
float sl = l - log2(log2(dot(z,z))) + 4.0;
float al = smoothstep( -0.1, 0.0, sin(0.5*6.2831*iTime ) );
l = mix( l, sl, al );
return l;
}
void mainImage( out vec4 fragColor, in vec2 fragCoord )
{
vec3 col = vec3(0.0);
#if AA>1
for( int m=0; m<AA; m++ )
for( int n=0; n<AA; n++ )
{
vec2 p = (-iResolution.xy + 2.0*(fragCoord.xy+vec2(float(m),float(n))/float(AA)))/iResolution.y;
float w = float(AA*m+n);
float time = iTime + 0.5*(1.0/24.0)*w/float(AA*AA);
#else
vec2 p = (-iResolution.xy + 2.0*fragCoord.xy)/iResolution.y;
float time = iTime;
#endif
float zoo = 0.62 + 0.38*cos(.07*time);
float coa = cos( 0.15*(1.0-zoo)*time );
float sia = sin( 0.15*(1.0-zoo)*time );
zoo = pow( zoo,8.0);
vec2 xy = vec2( p.x*coa-p.y*sia, p.x*sia+p.y*coa);
vec2 c = vec2(-.745,.186) + xy*zoo;
float l = mandelbrot(c);
col += 0.5 + 0.5*cos( 3.0 + l*0.15 + vec3(0.0,0.6,1.0));
#if AA>1
}
col /= float(AA*AA);
#endif
fragColor = vec4( col, 1.0 );
}
`
import {shader} from "@mbostock/shader"
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.