<!-- RESOLUTION -->
<shader-doodle>
<script type="x-shader/x-fragment">
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
vec3 color = vec3(st.x, st.y, 1.);
gl_FragColor = vec4(color, 1.);
}
</script>
</shader-doodle>
<!-- TIME -->
<shader-doodle>
<script type="x-shader/x-fragment">
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
gl_FragColor = vec4(color, 1.);
}
</script>
</shader-doodle>
<!-- MOUSE -->
<shader-doodle>
<script type="x-shader/x-fragment">
void main() {
vec2 p = gl_FragCoord.xy / u_resolution.xx;
vec2 m = u_mouse / u_resolution.xx;
vec3 color = vec3(0.);
color = mix(
color,
vec3(1., 0., 0.),
1. - smoothstep(.03, .035, length(p - m.xy))
);
gl_FragColor = vec4(color, 1.);
}
</script>
</shader-doodle>
<!-- MOUSEDRAG -->
<shader-doodle>
<script type="x-shader/x-fragment">
float distanceToSegment(vec2 a, vec2 b, vec2 p) {
vec2 pa = p - a;
vec2 ba = b - a;
float h = clamp(dot(pa, ba) / dot(ba, ba), 0., 1.);
return length(pa - ba * h);
}
void main(){
vec2 p = gl_FragCoord.xy / u_resolution.xx;
vec4 m = u_mousedrag / u_resolution.xxxx;
vec3 color = vec3(0.);
// yellow line
if(m.z > 0.) {
float d = distanceToSegment(m.xy, m.zw, p);
color = mix(
color,
vec3(1., 1., 0.),
1. - smoothstep(.004, .008, d));
}
// red dot
color = mix(
color,
vec3(1., 0., 0.),
1. - smoothstep(.03, .035, length(p - m.xy))
);
// blue dot
color = mix(
color,
vec3(0., 0., 1.),
1. - smoothstep(.03, .035, length(p - abs(m.zw)))
);
gl_FragColor = vec4(color, 1.);
}
</script>
</shader-doodle>
<!-- TEXTURE -->
<shader-doodle>
<sd-texture src="https://cdn.glitch.com/58ce9b6c-c856-4442-980a-75acac77fb48%2Fpeppers.jpg?v=1583569319608"></sd-texture>
<script type="x-shader/x-fragment">
uniform sampler2D u_texture0;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
float distortion = sin(st.y * 25. + u_time * 5.) * .005;
vec4 texture = texture2D(u_texture0, vec2(
st.x + distortion * u_mouse.x / 100.,
st.y + distortion * u_mouse.y / 100.
));
gl_FragColor = texture;
}
</script>
</shader-doodle>
<!-- VIDEO TEXTURE -->
<shader-doodle>
<sd-texture src="https://cdn.glitch.com/58ce9b6c-c856-4442-980a-75acac77fb48%2Fballet.mp4?v=1583570209002"></sd-texture>
<script type="x-shader/x-fragment">
uniform sampler2D u_texture0;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
float distortion = sin(uv.y * 20. + u_time * 5.) * .02;
float r = texture2D(u_texture0, uv).r;
uv = vec2(uv.x + distortion, uv.y);
vec2 gb = texture2D(u_texture0, uv).gb;
gl_FragColor = vec4(r, gb, 1.);
}
</script>
</shader-doodle>
<!-- CAMERA TEXTURE -->
<shader-doodle>
<sd-texture webcam></sd-texture>
<script type="x-shader/x-fragment">
uniform sampler2D u_texture0;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
// mirror uv for camera
uv.x = (uv.x - 1.) * -1.;
float distortion = sin(uv.y * 20. + u_time * 5.) * .02;
float r = texture2D(u_texture0, uv).r;
uv = vec2(uv.x + distortion, uv.y);
vec2 gb = texture2D(u_texture0, uv).gb;
gl_FragColor = vec4(r, gb, 1.);
}
</script>
</shader-doodle>
<!-- CANVAS TEXTURE -->
<style>
#canvas {
position: absolute;
opacity: 0;
height: 1px;
width: 1px;
}
</style>
<canvas id="canvas"></canvas>
<shader-doodle>
<sd-texture src="#canvas"></sd-texture>
<script type="x-shader/x-fragment">
uniform sampler2D u_texture0;
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
float distortion = sin(uv.y * 50. + u_time * 1.) * .01;
vec4 texture = texture2D(u_texture0, vec2(
uv.x + distortion,
uv.y - u_time * .05
));
gl_FragColor = texture;
}
</script>
</shader-doodle>
<script>
const text = 'L O R E M I P S U M';
const canvas = document.getElementById("canvas");
canvas.height = 1024; canvas.width = 1024;
const ctx = canvas.getContext("2d");
ctx.font = "Bold " + canvas.width / 12 + "px 'Helvetica'";
ctx.textAlign = "center";
ctx.textBaseline = "top";
ctx.fillStyle = '#000';
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = '#fff';
ctx.translate(canvas.width / 2, 0);
for (var i = -1; i < 6; i++) {
ctx.fillText(text, 0, i * canvas.height / 6);
}
</script>
<!-- AUDIO TEXTURE -->
<shader-doodle>
<sd-audio
src="https://s.halvves.com/majortunage.mp3"
autoplay
loop
crossorigin="anonymous"
></sd-audio>
<script type="x-shader/x-fragment">
uniform sampler2D u_audio0;
// audio is a 512x2 texture
// row 1 is freq data
float fft(sampler2D audio, float f) {
return texture2D(audio, vec2(f, .25)).x;
}
// row 2 is sound wave
float wave(sampler2D audio, float t) {
return texture2D(audio, vec2(t, .75)).x;
}
void main() {
vec2 uv = gl_FragCoord.xy / u_resolution.xy;
float a = fft(u_audio0, uv.x * .65);
float w = wave(u_audio0, uv.x * .65);
// spectrum and wave viewer from:
// https://www.shadertoy.com/view/Xds3Rr
// convert frequency to colors
vec3 col = vec3(a, 4. * a * (1. - a), 1. - a) * a;
// add wave form on top
col += 1. - smoothstep(0., .15, abs(w - uv.y) );
// output final color
gl_FragColor = vec4(col, 1.);
}
</script>
</shader-doodle>
<!-- NODES (EXPERIMENTAL) -->
<shader-doodle>
<sd-node name="motionblur" prevbuffer>
<sd-node name="rotate">
<sd-node name="basic_gl">
<script type="x-shader/x-fragment">
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
vec3 color = vec3(st.x, st.y, abs(sin(u_time)));
gl_FragColor = vec4(color, 1.);
}
</script>
</sd-node>
<script type="x-shader/x-fragment">
uniform sampler2D basic_gl;
const float PI = 3.1415926;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
float angle = 2. * PI * (.5 + .5 * cos(u_time));
float scale = .7 + .4 * cos(u_time);
mat2 rotation = mat2(cos(angle), -sin(angle), sin(angle), cos(angle));
vec2 p = (st - vec2(.5)) * rotation / scale + vec2(.5);
gl_FragColor = p.x < 0. || p.x > 1. || p.y < 0. || p.y > 1.
? vec4(0., 0., 0., 1.)
: texture2D(basic_gl, p);
}
</script>
</sd-node>
<script type="x-shader/x-fragment">
uniform sampler2D rotate, u_prevbuffer;
void main () {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
gl_FragColor = vec4(mix(
texture2D(rotate, st),
texture2D(u_prevbuffer, st),
.8
).rgb, 1.);
}
</script>
</sd-node>
<script type="x-shader/x-fragment">
uniform sampler2D motionblur;
void main() {
vec2 st = gl_FragCoord.xy / u_resolution.xy;
gl_FragColor = texture2D(motionblur, st);
}
</script>
</shader-doodle>