OSC message as uniforms exampleExamples from the Book of Shaders /ch 1-6Tutorial: Build Your Own Live Music VisualizationSawtooth wave speed problem
Examples from the Book of Shaders /ch 7-? WIP
shader({
width: 300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
// Each result will return 1.0 (white) or 0.0 (black).
float left = step(0.1,st.x); // Similar to ( X greater than 0.1 )
float bottom = step(0.1,st.y); // Similar to ( Y greater than 0.1 )
// The multiplication of left*bottom will be similar to the logical AND.
color = vec3( left * bottom );
fragColor = vec4(color,1.0);
}
`
shader({
width:300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
// bottom-left
vec2 bl = step(vec2(0.1),st);
float pct = bl.x * bl.y;
//top-right
vec2 tr = step(vec2(0.1),1.0-st);
pct *= tr.x * tr.y;
color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
shader({
width: 300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
// Each result will return 1.0 (white) or 0.0 (black).
float left = smoothstep(0.1,0.13,st.x); // Similar to ( X greater than 0.1 )
float bottom = smoothstep(0.1,0.13,st.y); // Similar to ( Y greater than 0.1 )
// The multiplication of left*bottom will be similar to the logical AND.
color = vec3( left * bottom );
fragColor = vec4(color,1.0);
}
`
shader({
width:300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
// bottom-left
vec2 bl = smoothstep(vec2(0.1),vec2(0.13),st);
float pct = bl.x * bl.y;
//top-right
vec2 tr = smoothstep(vec2(0.1),vec2(0.13),1.0-st);
pct *= tr.x * tr.y;
color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
shader({
width: 300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
// a. The DISTANCE from the pixel to the center
pct = distance(st,vec2(0.5));
// b. The LENGTH of the vector
// from the pixel to the center
// vec2 toCenter = vec2(0.5)-st;
// pct = length(toCenter);
// c. The SQUARE ROOT of the vector
// from the pixel to the center
// vec2 tC = vec2(0.5)-st;
// pct = sqrt(tC.x*tC.x+tC.y*tC.y);
vec3 color = vec3(pct);
color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
shader({
width: 300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
// a. The DISTANCE from the pixel to the center
pct = distance(st,vec2(0.5));
float left = step(0.3,pct); // Similar to ( X greater than 0.1 )
vec3 color = vec3(left);
fragColor = vec4(color,1.0);
}
`
shader({
width: 300,
height: 300,
iTime: true,
visibility
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
pct = distance(st,vec2(0.5));
//float left = step(0.1,pct); // Similar to ( X greater than 0.1 )
float left = smoothstep(0.3,0.33,pct);
vec3 color = vec3(left);
fragColor = vec4(color,1.0);
}
`
shader({
width: 300,
height: 300,
iTime: true,
visibility,
inputs:{d: viewof range}
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
float r = -0.687328364064339;
pct = distance(st,vec2(0.4))/r + distance(st,vec2(d)/r);
vec3 color = vec3(pct);
color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
viewof a = Inputs.range([-1, 1], {label: "a"})
viewof b = Inputs.range([-1, 1], {label: "b"})
shader({
width: 300,
height: 300,
iTime: true,
visibility,
inputs:{a:viewof a, b: viewof b}
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
pct = min(distance(st,vec2(a)),distance(st,vec2(b)));
vec3 color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
viewof c = Inputs.range([-1, 1], {label: "c"})
viewof d = Inputs.range([-1, 1], {label: "d"})
shader({
width: 300,
height: 300,
iTime: true,
visibility,
inputs:{a:viewof c, b: viewof d}
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
float pct = 0.0;
pct = pow(distance(st,vec2(a)),distance(st,vec2(b)));
vec3 color = vec3(pct);
fragColor = vec4(color,1.0);
}
`
viewof radius = Inputs.range([0, 1], {label: "Radius"})
shader({
width: 300,
height: 300,
iTime: true,
visibility,
inputs: {r:viewof radius}
})`
float circle(in vec2 _st, in float _radius){
vec2 dist = _st-vec2(0.5);
return 1.-smoothstep(_radius-(_radius*0.01),
_radius+(_radius*0.01),
dot(dist,dist)*4.0);
}
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(circle(st,r));
fragColor = vec4(color,1.0);
}
`
viewof t = Inputs.range([0, 1], {label: "t"})
viewof p = Inputs.range([0, 50], {label: "p"})
shader({
width: 400,
height: 400,
iTime: true,
visibility,
inputs:{t:viewof t,p:viewof p}
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
st.x *= iResolution.x/iResolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
// Remap the space to -1. to 1.
st = st *2.-1.;
// Make the distance field
d = length( abs(st*p))+iTime*-1.0;
//d = length( min(abs(st)-.3,0.) );
//d = length( max(abs(st)-.3,0.) );
// Visualize the distance field
fragColor = vec4(vec3(fract(d)),1.0);
}
`
viewof s = Inputs.range([0, 10], {label: "s"})
shader({
width: 400,
height: 400,
iTime: true,
visibility,
inputs:{s:viewof s}
})`
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec3 color = vec3(0.0);
vec2 pos = vec2(0.5)-st;
float r = length(pos)*2.0;
float a = atan(pos.y,pos.x);
//float f = cos(a*s);
// float f = cos(a*3.);
//float f = abs(cos(a*s));
//float f = abs(cos(a*2.5))*.5+.3;
//float f = abs(cos(a*12.)*sin(a*s))*.8+.1;
float f = smoothstep(-.5,1., cos(a*10.*s))*0.2+0.5;
color = vec3( 1.-smoothstep(f,f+0.02,r) );
fragColor = vec4(color, 1.0);
}
`
shader({
width: 400,
height: 400,
iTime: true,
visibility,
inputs:{s:viewof h}
})`
#define PI 3.14159265359
#define TWO_PI 6.28318530718
void mainImage(out vec4 fragColor,in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
st.x *= iResolution.x/iResolution.y;
vec3 color = vec3(0.0);
float d = 0.0;
// Remap the space to -1. to 1.
st = st *2.-1.;
// Number of sides of your shape
int N = 3;
// Angle and radius from the current pixel
float a = atan(st.x,st.y)+PI;
float r = TWO_PI/float(N);
// Shaping function that modulate the distance
d = cos(floor(.5+a/r)*r-a)*length(st);
color = vec3(1.0-smoothstep(s,.41,d));
// color = vec3(d);
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.
