q5play
    Preparing search index...

    Function createVideoShader

    • ⚡ Creates a shader that q5 can use to draw video frames.

      Use this function to customize a copy of the default video shader.

      Parameters

      • code: string

        WGSL shader code excerpt

      Returns GPUShaderModule

      a shader program

      await Canvas(200, 600);

      let vid = createVideo('/assets/apollo4.mp4');
      vid.hide();

      let flipper = createVideoShader(`

      fn vertexMain(v: VertexParams) -> FragParams { var vert = transformVertex(v.pos, v.matrixIndex);

      var vi = f32(v.vertexIndex);
vert.y *= cos((q.frameCount + vi * 10) * 0.03);

var f: FragParams;
f.position = vert;
f.texCoord = v.texCoord;
return f;

      }

      fn fragMain(f: FragParams) -> @location(0) vec4f { var texColor = textureSampleBaseClampToEdge(tex, samp, f.texCoord); texColor.r = 0; texColor.b *= 2; return texColor; }`);

      q5.draw = function () { clear(); if (mouseIsPressed) vid.play(); shader(flipper); image(vid, -100, 150, 200, 150); };

    Settings

    Member Visibility