Back to shaders
Shader test bench
Dreamy Zoom.fs
runnable fragment
Complete GLSL fragment shader. Stronghold runs it directly when the browser can compile it.
Code
uniform sampler2D startImage;
uniform sampler2D endImage;
uniform float progress;
uniform float rotation;
uniform float scale;
precision mediump float;
/*{
"CATEGORIES": [
"Distortion"
],
"CREDIT": "Automatically converted from https://www.github.com/gl-transitions/gl-transitions/tree/master/DreamyZoom.glsl",
"DESCRIPTION": "",
"INPUTS": [
{
"NAME": "startImage",
"TYPE": "image"
},
{
"NAME": "endImage",
"TYPE": "image"
},
{
"DEFAULT": 0,
"MAX": 1,
"MIN": 0,
"NAME": "progress",
"TYPE": "float"
},
{
"DEFAULT": 6,
"MAX": 10,
"MIN": 0,
"NAME": "rotation",
"TYPE": "float"
},
{
"DEFAULT": 1.2,
"MAX": 10,
"MIN": 0,
"NAME": "scale",
"TYPE": "float"
}
],
"ISFVSN": "2"
}
*/
vec4 getFromColor(vec2 inUV) {
return texture2D(startImage, inUV);
}
vec4 getToColor(vec2 inUV) {
return texture2D(endImage, inUV);
}
// Author: Zeh Fernando
// License: MIT
// Definitions --------
#define DEG2RAD 0.03926990816987241548078304229099 // 1/180*PI
// Transition parameters --------
// In degrees
// Multiplier
// The code proper --------
float ratio = u_resolution.x/u_resolution.y;
vec4 transition(vec2 uv) {
// Massage parameters
float phase = progress < 0.5 ? progress * 2.0 : (progress - 0.5) * 2.0;
float angleOffset = progress < 0.5 ? mix(0.0, rotation * DEG2RAD, phase) : mix(-rotation * DEG2RAD, 0.0, phase);
float newScale = progress < 0.5 ? mix(1.0, scale, phase) : mix(scale, 1.0, phase);
vec2 center = vec2(0, 0);
// Calculate the source point
vec2 assumedCenter = vec2(0.5, 0.5);
vec2 p = (uv.xy - vec2(0.5, 0.5)) / newScale * vec2(ratio, 1.0);
// This can probably be optimized (with distance())
float angle = atan(p.y, p.x) + angleOffset;
float dist = distance(center, p);
p.x = cos(angle) * dist / ratio + 0.5;
p.y = sin(angle) * dist + 0.5;
vec4 c = progress < 0.5 ? getFromColor(p) : getToColor(p);
// Finally, apply the color
return c + (progress < 0.5 ? mix(0.0, 1.0, phase) : mix(1.0, 0.0, phase));
}
void main() {
gl_FragColor = transition((gl_FragCoord.xy / u_resolution.xy).xy);
}