viewof zoom = Inputs.range([0, 1], {label: "Zoom"})
shader({width:400, height: 400, iTime: true, visibility, inputs: {size: viewof zoom}})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 st = fragCoord.xy/iResolution.xy;
vec4 color = vec4(st.x,st.y,size,1.0);
fragColor = color;
}
`
shader({width:400, height: 400, iTime: true, visibility, inputs: {size: viewof zoom}})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*3.0;
vec2 uv = -1. + 2. * normCoord; // move to the middle
float r = sin(time + uv.x);
float g = sin(time + uv.y * 10.);
float b = mod(uv.x / uv.y,1.0);
vec4 color = vec4(r,g,b,1.0);
fragColor = color;
}
`
viewof modd = Inputs.range([0, 10], {label: "modd"})
shader({width:400, height: 400, iTime: true, visibility, inputs: {size: viewof modd}})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*3.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
float b = fract(uv.x / uv.y);
vec4 color = vec4(b,b,b,1.0);
fragColor = color;
}
`
shader({width:400, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
float r = length(uv*10.0);
float rings = sin(time-r);
vec4 color = vec4(rings,rings,rings,1.0);
fragColor = color;
}
`
shader({width:400, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
float angle= sin(atan(uv.x,uv.y)+time);
vec4 color = vec4(angle,angle,angle,1.0);
fragColor = color;
}
`
shader({width:600, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
float r = length(uv*10.0);
float rings = sin(time-r);
float angle= sin(atan(uv.x,uv.y)+time);
vec4 color = vec4(rings,angle,1.0,1.0);
fragColor = color;
}
`
shader({width:600, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solve
float r = length(uv*10.0);
float rings = sin(time-r);
float angle= sin(atan(uv.x,uv.y)+time);
vec4 color = vec4(rings,angle,1.0,1.0);
fragColor = color;
}
`
shader({width:600, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float r = length(uv*10.0);
float rings = sin(time-r);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings + angle +time);
vec4 color = vec4(rings,angle,swirly,1.0);
fragColor = color;
}
`
shader({width:600, height: 400, iTime: true, visibility})`
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float r = length(uv*10.0);
float rings = sin(time-r);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec4 color = vec4(0,rings,swirly,1.0);
fragColor = color;
}
`
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec3 brightness = vec3(0.3);
vec3 contrast = vec3(0.5);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2);
vec3 pallete = cosPalette(angle,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec3 brightness = vec3(0.3);
vec3 contrast = vec3(0.5);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2);
vec3 pallete = cosPalette(angle+swirly+rings,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec3 brightness = vec3(mix(0.7,0.1, sin(time)));
vec3 contrast = vec3(0.5);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2);
vec3 pallete = cosPalette(angle+swirly+rings,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec3 brightness = vec3(mix(0.7,0.1, sin(time+length(uv*20.))+1.)/2.);
vec3 contrast = vec3(0.15);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2);
vec3 pallete = cosPalette(angle+swirly+rings,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
Using getBPMVis() (not working)
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
float getBPMVis(float bpm){
float pbs = 60./bpm;
float bpmVis =tan((iTime*3.14)/pbs);
bpmVis = clamp(bpmVis,0.,10.);
bpmVis = abs(bpmVis/20.);
bpmVis = 1.+(bpmVis*0.05);
return bpmVis;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
float beat = getBPMVis(120.0);
vec3 brightness = vec3(mix(0.7,0.1, sin(time+length(uv*20.))+1.)/2.);
vec3 contrast = vec3(0.15);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2)*beat;
vec3 pallete = cosPalette(angle+swirly+rings,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
shader({ width: 600, height: 400, iTime: true, visibility })`
vec3 cosPalette(float t, vec3 brightness,vec3 contrast, vec3 osc, vec3 phase) {
return brightness + contrast *cos(6.28318 *(osc*t+phase));
}
// smooth mod(x,y) with radius smoothness of e
float smoothMod(float x, float y, float e){
float PI = 3.1415;
float top = cos(PI * (x/y)) * sin(PI * (x/y));
float bot = pow(sin(PI * (x/y)),2.);
float at = atan(top/bot);
return y * (1./2.) - (1./PI) * at ;
}
// Repeat around the origin by a fixed angle.
// For easier use, num of repetitions is use to specify the angle.
vec2 pModPolar(inout vec2 p, float repetitions) {
float PI = 3.14;
float angle = 2.*PI/repetitions;
float a = atan(p.y, p.x) + angle/2.;
float r = length(p);
float c = floor(a/angle);
a = smoothMod(a,angle,0.1) - angle/2.;
vec2 p2 = vec2(cos(a), sin(a))*r;
// For an odd number of repetitions, fix cell index of the cell in -x direction
// (cell index would be e.g. -5 and 5 in the two halves of the cell):
//if (abs(c) >= (repetitions/2.)) c = abs(c);
return p2;
}
void mainImage(out vec4 fragColor, in vec2 fragCoord) {
vec2 normCoord = fragCoord.xy/iResolution.xy;
float time = iTime*1.0;
vec2 uv = -1.0 + 2. * normCoord; // center coords
uv.x *= iResolution.x/iResolution.y; // remap uv.x to solvxqe
uv = pModPolar(uv,20.0);
uv.x += sin(iTime/10.);
float radius = length(uv*10.0);
float rings = sin(time-radius);
float angle= sin(atan(uv.x,uv.y)+time);
float swirly = sin(rings - cos(angle)*0.2 +time);
vec3 brightness = vec3(mix(0.7,0.1, sin(time+length(uv*20.))+1.)/2.);
vec3 contrast = vec3(0.15);
vec3 osc=vec3(0.5,1.0,0.0);
vec3 phase =vec3(0.4,0.9,0.2);
vec3 pallete = cosPalette(angle+swirly+rings,brightness,contrast,osc,phase);
vec4 color = vec4(pallete,1.0);
fragColor = color;
}
`
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.