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);
}
`
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.
