Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
shader({width, height: 200, iTime: true, visibility})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
fragColor = vec4(1.0,0.0,1.0,1.0);
}
`
shader({width, height: 200, iTime: true, visibility})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
float r = float(abs(sin(iTime*0.95)));
float g = float(abs(sin(iTime*1.0)));
float b = float(abs(sin(iTime*1.0)));
fragColor = vec4(r,g,b,1.0);
}
`
shader({width, height: 200, iTime: true, visibility})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
fragColor = vec4(st.x,st.y,0.0,1.0);
}
`
shader({ width, height: 200, iTime: true, visibility })`
float plot(vec2 st) {
return smoothstep(0.02, 0.0, abs(st.y - st.x));
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(st.x);
float pct = plot(st); // Plot a line
color = vec3(1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
fragColor = vec4(color,1.0);
}
`
shader({ width, height: 200, iTime: true, visibility })`
#define PI 3.14159265359
float plot(vec2 st, float pct){
return smoothstep( pct-0.02, pct, st.y) -
smoothstep( pct, pct+0.02, st.y);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float y = pow (st.x, 0.4);
vec3 color = vec3(y);
// Plot a line
float pct = plot(st, y);
color = vec3(1.0-pct)*color+pct*vec3(0.0,1.0,0.0);
fragColor = vec4(color,1.0);
}
`
shader({ width, height: 200, iTime: true, visibility, uniforms: {amp: "float", frec: "float"} })`
vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec3 color = vec3(0.0);
float pct = abs(sin(iTime));
// Mix uses pct (a value from 0-1) to
// mix the two colors
color = mix(colorA, colorB, pct);
fragColor = vec4(color,1.0);
}
`
shader({
width,
height: 200,
iTime: true,
visibility,
uniforms: { amp: "float", frec: "float" }
})`
#define PI 3.14159265359
vec3 colorA = vec3(0.149,0.141,0.912);
vec3 colorB = vec3(1.000,0.833,0.224);
float plot (vec2 st, float pct){
return smoothstep( pct-0.01, pct, st.y) -
smoothstep( pct, pct+0.01, st.y);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
vec3 pct = vec3(st.x);
pct.r = smoothstep(0.0,1.0, st.x);
pct.g = sin(st.x*PI);
pct.b = pow(st.x,0.5);
color = mix(colorA, colorB, pct);
// Plot transition lines for each channel
color = mix(color,vec3(1.0,0.0,0.0),plot(st,pct.r));
color = mix(color,vec3(0.0,1.0,0.0),plot(st,pct.g));
color = mix(color,vec3(0.0,0.0,1.0),plot(st,pct.b));
fragColor = vec4(color,1.0);
}
`
shader({
width,
height: 200,
iTime: true,
visibility
})`
#define TWO_PI 6.28318530718
// Function from Iñigo Quiles
// https://www.shadertoy.com/view/MsS3Wc
vec3 hsb2rgb( in vec3 c ){
vec3 rgb = clamp(abs(mod(c.x*6.0+vec3(0.0,4.0,2.0),
6.0)-3.0)-1.0,
0.0,
1.0);
rgb = rgb*rgb*(3.0-2.0*rgb);
return c.z * mix( vec3(1.0), rgb, c.y);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
// Use polar coordinates instead of cartesian
vec2 toCenter = vec2(0.5)-st;
float angle = atan(toCenter.y,toCenter.x);
float radius = length(toCenter)*2.0;
// Map the angle (-PI to PI) to the Hue (from 0 to 1)
// and the Saturation to the radius
color = hsb2rgb(vec3((angle/TWO_PI)+iTime,radius,1.0));
fragColor = vec4(color,1.0);
}
`
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.