View CMYK Droplet
you can also create an HTML file with the following content and open it in your browser to see the artifact:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CMYK Droplet</title>
</head>
<body style="margin:0;overflow:hidden;background:#000;">
<canvas id="c"></canvas>
<script type="x-shader/x-fragment" id="frag">
precision mediump float;
uniform float u_time;
uniform vec2 u_res;
vec3 cmykToRgb(vec4 cmyk) {
float r = (1.0 - cmyk.x) * (1.0 - cmyk.w);
float g = (1.0 - cmyk.y) * (1.0 - cmyk.w);
float b = (1.0 - cmyk.z) * (1.0 - cmyk.w);
return vec3(r, g, b);
}
void main() {
vec2 uv = gl_FragCoord.xy / u_res.xy;
uv -= 0.5;
uv.x *= u_res.x / u_res.y;
float t = u_time * 0.2;
float d = length(uv);
float ripple = sin(d * 40.0 - t * 10.0) * 0.02;
uv += normalize(uv) * ripple;
float c = 0.5 + 0.5 * sin(t);
float m = 0.5 + 0.5 * sin(t + 2.0);
float y = 0.5 + 0.5 * sin(t + 4.0);
float k = 0.2 + 0.2 * sin(t + 6.0);
vec3 color = cmykToRgb(vec4(c, m, y, k));
float vignette = smoothstep(0.8, 0.0, d);
color *= vignette;
gl_FragColor = vec4(color, 1.0);
}
</script>
<script type="x-shader/x-vertex" id="vert">
attribute vec2 a_position;
void main() {
gl_Position = vec4(a_position, 0.0, 1.0);
}
</script>
<script>
const canvas = document.getElementById('c');
const gl = canvas.getContext('webgl');
canvas.width = innerWidth;
canvas.height = innerHeight;
function createShader(t, s) {
const h = gl.createShader(t);
gl.shaderSource(h, s);
gl.compileShader(h);
return h;
}
const vert = createShader(gl.VERTEX_SHADER, document.getElementById('vert').textContent);
const frag = createShader(gl.FRAGMENT_SHADER, document.getElementById('frag').textContent);
const prog = gl.createProgram();
gl.attachShader(prog, vert);
gl.attachShader(prog, frag);
gl.linkProgram(prog);
gl.useProgram(prog);
const buf = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buf);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, -1, 1, 1, -1, 1]), gl.STATIC_DRAW);
const pos = gl.getAttribLocation(prog, 'a_position');
gl.enableVertexAttribArray(pos);
gl.vertexAttribPointer(pos, 2, gl.FLOAT, false, 0, 0);
const ut = gl.getUniformLocation(prog, 'u_time');
const ur = gl.getUniformLocation(prog, 'u_res');
function draw(t) {
gl.viewport(0, 0, canvas.width, canvas.height);
gl.uniform1f(ut, t * 0.001);
gl.uniform2f(ur, canvas.width, canvas.height);
gl.drawArrays(gl.TRIANGLES, 0, 6);
requestAnimationFrame(draw);
}
requestAnimationFrame(draw);
</script>
</body>
</html>