» Tutorial Effects - Mr. Wiggle
This site relies heavily on Javascript. You should enable it if you want the full experience. Learn more.

Tutorial Effects - Mr. Wiggle

Italian | Spanish | Mandarin | Japanese

TOC: Of Effects and Shaders
Back: Vertexshader Preparations
Next: Function Printing


Lets start with the famous MrWiggle effect, it distorts a mesh by sine waves:

The vertex shader is called for each vertex of the mesh. As you have learned here, the input of the vertex shader is the data stored in the vertex of the mesh which is now processed:

vs2ps VS(
    float4 PosO  : POSITION,
    float4 TexCd : TEXCOORD0)
{
...
}

Here we are interested in the PosO vector, which is the position of the current vertex. We will add an offset to the x coordinate of the vertex depending on its vertical position (y coordinate):

PosO.x += sin(PosO.y);

To control the waves we add some parameters:

PosO.x += sin(PosO.y * Frequency + Phase) * Amplitude;

Then the vertex shader with its inputs looks like:

float Frequency = 10;
float Phase = 0;
float Amplitude = 0.01;
 
vs2ps VS(
    float4 PosO  : POSITION,
    float4 TexCd : TEXCOORD0)
{
    //declare output struct
    vs2ps Out;
 
    //offset x coordinate
    PosO.x += sin(PosO.y * Frequency + Phase) * Amplitude;
 
    //transform position
    Out.Pos = mul(PosO, tWVP);
 
    //transform texturecoordinates
    Out.TexCd = mul(TexCd, tTex);
 
    return Out;
}

And the patch accordingly:

mr wiggle patch

Next: Function Printing
Back: Vertexshader Preparations
TOC: Of Effects and Shaders

anonymous user login

Shoutbox

~4d ago

joreg: Workshop on 22 02: Unlocking Shader Artistry: A Journey through ‘The Book of Shaders’ with FUSE. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-12-book-of-shaders/

~15d ago

joreg: Talk and Workshop on February 15 & 16 in Frankfurt: https://visualprogramming.net/blog/vvvv-at-node-code-frankfurt/

~16d ago

woei: @Joanie_AntiVJ: think so, looks doable

~17d ago

xd_nitro: Anyone remember who increased projector brightness by removing some components that product the color?

~18d ago

Joanie_AntiVJ: This looks super interesting (vectors over network) would anyone here know how to implement this in beta? https://github.com/madmappersoftware/Ponk

~24d ago

joreg: Workshop on 01 02: Data Sensing and Logging with Arduino Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-09-data-sensing-and-logging-with-arduino-and-vvvv/

~29d ago

domj: I've added myself to vvvv specialists available for hire See at the bottom, lmk if you want to collab or in need of tutoring! ❤️

~1mth ago

joreg: Workshop on 25.01: Create Sequencers and Precise Clock Based Tools. Signup here: https://thenodeinstitute.org/courses/ws23-vvvv-08-create-sequencers-and-precise-clock-based-tools-in-vvvv-gamma/