q5play
    Preparing search index...

    Function createTextShader

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

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

      Parameters

      • code: string

        WGSL shader code excerpt

      Returns GPUShaderModule

      a shader program

      await Canvas(200);
      textAlign(CENTER, CENTER);

      let spin = createTextShader(`

      fn vertexMain(v : VertexParams) -> FragParams { let char = textChars[v.instanceIndex]; let text = textMetadata[i32(char.w)]; let fontChar = fontChars[i32(char.z)]; let pos = calcPos(v.vertexIndex, char, fontChar, text);

      var vert = transformVertex(pos, text.matrixIndex);

let i = f32(v.instanceIndex + 1);
vert.y *= cos((q.frameCount - 5 * i) * 0.05);

var f : FragParams;
f.position = vert;
f.texCoord = calcUV(v.vertexIndex, fontChar);
f.fillColor = colors[i32(text.fillIndex)];
f.strokeColor = colors[i32(text.strokeIndex)];
f.strokeWeight = text.strokeWeight;
f.edge = text.edge;
return f;

      }`);

      q5.draw = function () { clear(); shader(spin); fill(1, 0, 1); textSize(32); text('Hello, World!', 0, 0); };

    Settings

    Member Visibility