q5play
    Preparing search index...

    Function createImageShader

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

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

      Parameters

      • code: string

        WGSL shader code excerpt

      Returns GPUShaderModule

      a shader program

      await Canvas(200, 400);
      imageMode(CENTER);

      let logo = loadImage('/q5js_logo.avif');

      let grate = createImageShader(`
      @fragment
      fn fragMain(f: FragParams) -> @location(0) vec4f {
      var texColor = textureSample(tex, samp, f.texCoord);
      texColor.b += (q.mouseX + f.position.x) % 20 / 10;
      return texColor;
      }`);

      q5.draw = function () {
      background(0.7);
      shader(grate);
      image(logo, 0, 0, 180, 180);
      };
      //