Back to shaders

Shader test bench

Waveform Displace.fs

vidvox-isf-files pattern glsl runnable fragment MIT
Source
runnable fragment

Complete GLSL fragment shader. Stronghold runs it directly when the browser can compile it.

Code

uniform sampler2D inputImage;
uniform float audio;
uniform float displaceX;
uniform float displaceY;
uniform float detailX;
uniform float detailY;
precision mediump float;
/*{
    "CATEGORIES": [
        "Audio Visualizer",
        "Distortion Effect"
    ],
    "CREDIT": "icalvin102 (calvin@icalvin.de)",
    "DESCRIPTION": "Displaces image with audio waveform",
    "INPUTS": [
        {
            "NAME": "inputImage",
            "TYPE": "image"
        },
        {
            "LABEL": "Audio Waveform",
            "NAME": "audio",
            "TYPE": "audio"
        },
        {
            "DEFAULT": 0.1,
            "LABEL": "Displace X",
            "MAX": 1,
            "MIN": 0,
            "NAME": "displaceX",
            "TYPE": "float"
        },
        {
            "DEFAULT": 0.1,
            "LABEL": "Displace Y",
            "MAX": 1,
            "MIN": 0,
            "NAME": "displaceY",
            "TYPE": "float"
        },
        {
            "DEFAULT": 0.5,
            "LABEL": "Detail X",
            "MAX": 1,
            "MIN": 0,
            "NAME": "detailX",
            "TYPE": "float"
        },
        {
            "DEFAULT": 0.5,
            "LABEL": "Detail Y",
            "MAX": 1,
            "MIN": 0,
            "NAME": "detailY",
            "TYPE": "float"
        }
    ],
    "ISFVSN": "2",
    "PASSES": [
        {
            "DESCRIPTION": "Renderpass 0"
        }
    ]
}
*/

void main()	{

	vec4 inputPixelColor;
	vec2 uv = (gl_FragCoord.xy / u_resolution.xy).xy;
	vec2 waveLoc = fract((uv)*vec2(detailX, detailY));

	vec2 wave = vec2(texture2D(audio, vec2(waveLoc.x, 0.0)).r, texture2D(audio, vec2(waveLoc.y, 1.0)).r)-.5;
	wave *= vec2(displaceY, displaceX);

	inputPixelColor = texture2D(inputImage, uv + wave.yx);

	gl_FragColor = inputPixelColor;
}