Attaching Vertex Data to Stroke

2025-02-23 13:22 UTC o3-mini-high Open in ChatGPT ↗

You

this p5.js creates variable store width.

how can we attach vertex data to the stroke, which the shader can look up?

let myShader;

function setup() { createCanvas(200, 200, WEBGL); myShader = baseStrokeShader().modify({ uniforms: { ‘float time’: () => millis() }, declarations: ‘vec3 myPosition;’, ‘vec3 getWorldPosition’: (vec3 pos) { myPosition = pos; return pos; }, ‘float getStrokeWeight’: (float w) { // Add a somewhat random offset to the weight // that varies based on position and time float scale = 0.8 + 0.2*sin(10.0 * sin( floor(time/250.) + myPosition.x*0.01 + myPosition.y*0.01 )); return w * scale; } }); }

function draw() { background(255); shader(myShader); myShader.setUniform(‘time’, millis()); strokeWeight(10); beginShape(); for (let i = 0; i <= 50; i++) { let r = map(i, 0, 50, 0, width/3); let x = rcos(i0.2); let y = rsin(i0.2); vertex(x, y); } endShape(); }

ChatGPT

When you want your shader to vary the stroke (for example, its weight) based on per‐vertex data, you need to ensure that data is available to the shader as an attribute. In p5.js the built‐in immediate mode drawing (using beginShape/vertex) only sends the vertex position (as aPosition) by default. So if you need more information (or you want to “attach” the vertex data to the stroke), you have to do one of two things:

1. Reuse the position attribute:
   As shown in your code, you can “hook into” the vertex shader by overriding a helper function (here, getWorldPosition) so that each vertex’s world position is captured (into your myPosition variable) as it’s processed. Your shader then calls getStrokeWeight, which uses that stored myPosition along with time to modulate the stroke width. This is effectively “attaching” the vertex data (its position) to the stroke.

2. Pass custom attributes:
   If you need additional per‐vertex data beyond what p5.js provides by default, you must create your own geometry buffers (for example, using p5.Geometry or raw WebGL buffers) and attach your extra data as custom attributes. In your shader you would then declare and access these custom attributes (for instance, an extra vec3 attribute) much like you do for the vertex positions. (Note that immediate mode drawing with beginShape() doesn’t support adding extra custom data directly.)

So, the short answer is: You attach vertex data to the stroke by either capturing the vertex position (or any custom data, if you create your own geometry) in your shader’s vertex function (using something like getWorldPosition) or by supplying a custom attribute buffer – this way the shader can “look up” the vertex data and vary the stroke accordingly.

In your sample code you’re already doing the first method by intercepting the vertex position via getWorldPosition and then using it in getStrokeWeight to vary the stroke width based on both position and time.

You

show an example where we attach an extra buffer with stroke weights ranging from 1 to 0

ChatGPT

Below is an example that creates a custom attribute buffer for stroke weights (ranging from 1 down to 0) and attaches it to a shader. In this example we generate a set of vertices forming a line, create two buffers (one for the vertex positions and one for the stroke weights), and then use raw WebGL calls (via p5’s drawingContext) to pass these buffers as attributes to our custom shader.

In the vertex shader we declare two attributes—one for the position (aPosition) and one for the stroke weight (aStrokeWeight). We pass the stroke weight along as a varying (vStrokeWeight) so the fragment shader can use it (in this case, to modulate the color intensity, but you could use it however you like).

Here’s the complete p5.js sketch:

let myShader;
let positionBuffer;
let weightBuffer;
let positions;
let strokeWeights;
const numVerts = 51; // number of vertices

function setup() {
  createCanvas(400, 400, WEBGL);

  // Vertex shader: we pass along the stroke weight attribute
  const vertShader = `
  attribute vec3 aPosition;
  attribute float aStrokeWeight;

  uniform mat4 projectionMatrix;
  uniform mat4 modelViewMatrix;

  varying float vStrokeWeight;

  void main(){
    vStrokeWeight = aStrokeWeight;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(aPosition, 1.0);
  }
  `;

  // Fragment shader: use the stroke weight to modulate the color
  const fragShader = `
  precision mediump float;
  varying float vStrokeWeight;

  void main(){
    // Here we simply use the stroke weight to set a grayscale value.
    gl_FragColor = vec4(vStrokeWeight, vStrokeWeight, vStrokeWeight, 1.0);
  }
  `;

  // Create the shader
  myShader = new p5.Shader(this._renderer, vertShader, fragShader);

  // Create buffers for vertex positions and stroke weights
  positions = new Float32Array(numVerts * 3);
  strokeWeights = new Float32Array(numVerts);

  for (let i = 0; i < numVerts; i++) {
    // Create a spiral-like line
    let r = map(i, 0, numVerts - 1, 0, width / 3);
    let angle = i * 0.2;
    let x = r * cos(angle);
    let y = r * sin(angle);
    let z = 0;
    positions[i * 3] = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;

    // Stroke weight ranging from 1 (at the first vertex) to 0 (at the last)
    strokeWeights[i] = map(i, 0, numVerts - 1, 1.0, 0.0);
  }

  let gl = this._renderer.GL;

  // Create and bind the position buffer
  positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // Create and bind the stroke weight buffer
  weightBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, weightBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, strokeWeights, gl.STATIC_DRAW);
}

function draw() {
  background(50);
  // Activate our custom shader
  shader(myShader);

  let gl = this._renderer.GL;
  gl.useProgram(myShader.program);

  // --- Set up the vertex position attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  const posLoc = gl.getAttribLocation(myShader.program, 'aPosition');
  gl.enableVertexAttribArray(posLoc);
  // 3 components per vertex (x, y, z)
  gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

  // --- Set up the stroke weight attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, weightBuffer);
  const weightLoc = gl.getAttribLocation(myShader.program, 'aStrokeWeight');
  gl.enableVertexAttribArray(weightLoc);
  // 1 component per vertex (the stroke weight)
  gl.vertexAttribPointer(weightLoc, 1, gl.FLOAT, false, 0, 0);

  // Draw the vertices as a line strip
  gl.drawArrays(gl.LINE_STRIP, 0, numVerts);

  // Clean up (optional)
  gl.disableVertexAttribArray(posLoc);
  gl.disableVertexAttribArray(weightLoc);
}

Explanation

1. Buffers and Data:
   We build two arrays:

   • positions holds the x, y, z coordinates of each vertex.
   • strokeWeights holds a value that linearly decreases from 1.0 at the start of the line to 0.0 at the end.

2. Shader Setup:
   The vertex shader receives both attributes. It passes the stroke weight value to the fragment shader via the varying vStrokeWeight. The fragment shader then uses this value to set a grayscale color (brighter for higher weights).

3. Binding Buffers:
   In the draw loop we bind our buffers and set up the attribute pointers. Finally, we draw the vertices using gl.drawArrays(gl.LINE_STRIP, …).

This example demonstrates how to attach an extra buffer (for stroke weights) to your geometry so that your shader can look up and use per-vertex data. You can modify the fragment shader to utilize the stroke weight in more creative ways, such as varying the line width in a custom rendered effect.

You

TypeError: Argument 1 (‘program’) to WebGL2RenderingContext.getAttribLocation must be an instance of WebGLProgram at /sketch.js:83:38

ChatGPT

This error usually means that the shader’s program object isn’t being referenced correctly. In p5.js the compiled WebGL program is stored on the shader object under a property like _program rather than program. To fix the error, replace your calls to myShader.program with myShader._program.

Below is the updated draw function snippet that shows how to bind the attribute buffers using the underlying WebGLProgram:

function draw() {
  background(50);
  // Activate our custom shader.
  shader(myShader);

  let gl = this._renderer.GL;
  // Use the underlying WebGLProgram stored in _program.
  let program = myShader._program;
  gl.useProgram(program);

  // --- Set up the vertex position attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  const posLoc = gl.getAttribLocation(program, 'aPosition');
  gl.enableVertexAttribArray(posLoc);
  // 3 components per vertex (x, y, z)
  gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

  // --- Set up the stroke weight attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, weightBuffer);
  const weightLoc = gl.getAttribLocation(program, 'aStrokeWeight');
  gl.enableVertexAttribArray(weightLoc);
  // 1 component per vertex (the stroke weight)
  gl.vertexAttribPointer(weightLoc, 1, gl.FLOAT, false, 0, 0);

  // Draw the vertices as a line strip.
  gl.drawArrays(gl.LINE_STRIP, 0, numVerts);

  // Optionally, disable the vertex attributes.
  gl.disableVertexAttribArray(posLoc);
  gl.disableVertexAttribArray(weightLoc);
}

Explanation

• Shader Program Reference:
  Instead of using myShader.program, we use myShader._program, which holds the actual WebGLProgram instance created by p5.js.

• Attribute Binding:
  With the correct program reference, the calls to gl.getAttribLocation() succeed, allowing you to bind your custom buffers (for positions and stroke weights) to the shader’s attributes.

This should resolve the error you encountered.

You

stay as close as possible to this example

let myShader;

function setup() { createCanvas(200, 200, WEBGL); myShader = baseStrokeShader().modify({ uniforms: { ‘float time’: () => millis() }, declarations: ‘vec3 myPosition;’, ‘vec3 getWorldPosition’: (vec3 pos) { myPosition = pos; return pos; }, ‘float getStrokeWeight’: (float w) { // Add a somewhat random offset to the weight // that varies based on position and time float scale = 0.8 + 0.2*sin(10.0 * sin( floor(time/250.) + myPosition.x*0.01 + myPosition.y*0.01 )); return w * scale; } }); }

function draw() { background(255); shader(myShader); myShader.setUniform(‘time’, millis()); strokeWeight(10); beginShape(); for (let i = 0; i <= 50; i++) { let r = map(i, 0, 50, 0, width/3); let x = rcos(i0.2); let y = rsin(i0.2); vertex(x, y); } endShape(); }

ChatGPT

Below is one way to “stay close” to your original sketch while adding a custom buffer for per‐vertex stroke weights (ranging from 1 to 0). In this example we still use your modified baseStrokeShader (with a tiny addition to its declarations so it knows about the extra attribute) but we generate our vertex data in arrays and then draw them with raw WebGL calls. (Because p5’s immediate mode drawing via beginShape() does not let you attach extra attributes directly.)

let myShader;
let numVerts = 51;
let positions;
let strokeWeights;
let positionBuffer;
let strokeWeightBuffer;

function setup() {
  createCanvas(200, 200, WEBGL);

  // Modify the base shader to include our extra attribute.
  // (Note the added declaration for "aStrokeWeight".)
  myShader = baseStrokeShader().modify({
    uniforms: {
      'float time': () => millis()
    },
    // Add our custom attribute declaration along with our variable
    declarations: 'vec3 myPosition;\nattribute float aStrokeWeight;',
    'vec3 getWorldPosition': `(vec3 pos) {
      myPosition = pos;
      return pos;
    }`,
    'float getStrokeWeight': `(float w) {
      // Here w will be the per-vertex stroke weight from our buffer.
      float scale = 0.8 + 0.2*sin(10.0 * sin(
        floor(time/250.) +
        myPosition.x*0.01 +
        myPosition.y*0.01
      ));
      return w * scale;
    }`
  });

  // Allocate arrays for positions and stroke weights.
  positions = new Float32Array(numVerts * 3);
  strokeWeights = new Float32Array(numVerts);

  // Create vertex data similar to your for-loop.
  for (let i = 0; i < numVerts; i++) {
    let r = map(i, 0, numVerts - 1, 0, width / 3);
    let angle = i * 0.2;
    let x = r * cos(angle);
    let y = r * sin(angle);
    let z = 0;

    positions[i * 3]     = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;

    // Stroke weight goes linearly from 1 (first vertex) to 0 (last vertex)
    strokeWeights[i] = map(i, 0, numVerts - 1, 1.0, 0.0);
  }

  // Create buffers using the underlying WebGL context.
  const gl = this._renderer.GL;

  // Position buffer
  positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // Stroke weight buffer
  strokeWeightBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, strokeWeights, gl.STATIC_DRAW);
}

function draw() {
  background(255);

  // Activate our shader and update the time uniform.
  shader(myShader);
  myShader.setUniform('time', millis());

  // Use raw WebGL to bind our custom buffers.
  const gl = this._renderer.GL;
  let program = myShader._program; // use _program instead of program
  gl.useProgram(program);

  // Bind the position buffer (attribute aPosition is automatically used by p5)
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  const posLoc = gl.getAttribLocation(program, 'aPosition');
  gl.enableVertexAttribArray(posLoc);
  gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

  // Bind our custom stroke weight buffer.
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  const swLoc = gl.getAttribLocation(program, 'aStrokeWeight');
  gl.enableVertexAttribArray(swLoc);
  gl.vertexAttribPointer(swLoc, 1, gl.FLOAT, false, 0, 0);

  // Draw the line strip using our vertex data.
  gl.drawArrays(gl.LINE_STRIP, 0, numVerts);

  // Cleanup: disable the attributes
  gl.disableVertexAttribArray(posLoc);
  gl.disableVertexAttribArray(swLoc);
}

Explanation

• Shader Modification:
  We use your baseStrokeShader().modify(…) call almost unchanged, except we add

  attribute float aStrokeWeight;

  to the declarations. The getStrokeWeight function now expects its input (w) to come from our custom attribute.

• Vertex Data:
  Instead of calling beginShape() and vertex() each frame, we precompute an array of vertex positions (just like your original loop) and an accompanying array of stroke weights that linearly decreases from 1.0 to 0.0.

• Buffer Setup and Drawing:
  In setup(), we create two WebGL buffers (one for positions and one for stroke weights). In draw(), we bind these buffers and set up the attribute pointers on the shader program (using myShader._program). Finally, we draw the vertices as a line strip with gl.drawArrays.

This example preserves much of the structure of your original code while adding a custom attribute for stroke weights that your shader can look up and modify.

You

TypeError: Argument 1 (‘program’) to WebGL2RenderingContext.getAttribLocation must be an instance of WebGLProgram at /sketch.js:82:38

🌸 p5.js says: Yikes! An error occurred compiling the vertex shader:ERROR: 0:106: ‘attribute’ : Illegal use of reserved word

​

ChatGPT

Below is an updated example that stays very close to your original sketch but uses a custom attribute for stroke weights. In this version, we update the shader declarations for WebGL2 (using “in” instead of “attribute”) and retrieve the active shader program via the WebGL context. This avoids the “illegal use of reserved word” error and ensures that we pass a valid WebGLProgram to getAttribLocation.

let myShader;
let numVerts = 51;
let positions;
let strokeWeights;
let positionBuffer;
let strokeWeightBuffer;

function setup() {
  createCanvas(200, 200, WEBGL);

  // Modify the base shader.
  // Note: For WebGL2 we declare custom attributes using "in" rather than "attribute".
  myShader = baseStrokeShader().modify({
    uniforms: {
      'float time': () => millis()
    },
    // Add our extra attribute declaration
    declarations: 'vec3 myPosition;\nin float aStrokeWeight;',
    'vec3 getWorldPosition': `(vec3 pos) {
      myPosition = pos;
      return pos;
    }`,
    'float getStrokeWeight': `(float w) {
      float scale = 0.8 + 0.2*sin(10.0 * sin(
        floor(time/250.) +
        myPosition.x*0.01 +
        myPosition.y*0.01
      ));
      return w * scale;
    }`
  });

  // Precompute vertex positions and stroke weights.
  positions = new Float32Array(numVerts * 3);
  strokeWeights = new Float32Array(numVerts);

  for (let i = 0; i < numVerts; i++) {
    let r = map(i, 0, numVerts - 1, 0, width / 3);
    let angle = i * 0.2;
    let x = r * cos(angle);
    let y = r * sin(angle);
    let z = 0;
    positions[i * 3]     = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;

    // Stroke weight goes linearly from 1.0 (first vertex) to 0.0 (last vertex)
    strokeWeights[i] = map(i, 0, numVerts - 1, 1.0, 0.0);
  }

  // Create WebGL buffers for our custom data.
  const gl = this._renderer.GL;

  // Position buffer
  positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // Stroke weight buffer
  strokeWeightBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, strokeWeights, gl.STATIC_DRAW);
}

function draw() {
  background(255);

  // Activate our shader and update the time uniform.
  shader(myShader);
  myShader.setUniform('time', millis());

  const gl = this._renderer.GL;

  // Retrieve the active shader program.
  let program = gl.getParameter(gl.CURRENT_PROGRAM);
  if (!program) {
    console.error("No active shader program found.");
    return;
  }

  // --- Bind and set up the position attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  let posLoc = gl.getAttribLocation(program, 'aPosition');
  gl.enableVertexAttribArray(posLoc);
  gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

  // --- Bind and set up the stroke weight attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  let swLoc = gl.getAttribLocation(program, 'aStrokeWeight');
  gl.enableVertexAttribArray(swLoc);
  gl.vertexAttribPointer(swLoc, 1, gl.FLOAT, false, 0, 0);

  // Draw the vertices as a line strip.
  gl.drawArrays(gl.LINE_STRIP, 0, numVerts);

  // Clean up by disabling the attributes.
  gl.disableVertexAttribArray(posLoc);
  gl.disableVertexAttribArray(swLoc);
}

Key Changes

1. Shader Declaration:
   We replaced

   attribute float aStrokeWeight;

   with

   in float aStrokeWeight;

   to match WebGL2 conventions. This prevents the “illegal use of reserved word” error.

2. Program Reference:
   Instead of referencing myShader._program, we retrieve the active program with

   let program = gl.getParameter(gl.CURRENT_PROGRAM);

   which ensures that a valid WebGLProgram instance is passed to getAttribLocation.

3. Maintaining Structure:
   The rest of the sketch remains as close as possible to your original example while integrating the custom buffer for stroke weights.

This updated code should compile without errors and allow your shader to look up the per-vertex stroke weight data.

You

how do I set the color of the stroke?

ChatGPT

To set the stroke color in your custom shader, you’ll need to pass a uniform (say, a vec3) that represents the color, and then use it in your fragment shader. For example, if you want your stroke to be red, you can add a uniform called strokeColor and update your shader’s fragment code to use that value.

Below is a modified version of your sketch that includes a strokeColor uniform. In this example the strokeColor is set to red (i.e. $1.0, 0.0, 0.0$), but you can change it as needed:

let myShader;
let numVerts = 51;
let positions;
let strokeWeights;
let positionBuffer;
let strokeWeightBuffer;

function setup() {
  createCanvas(200, 200, WEBGL);

  // Modify the base shader:
  // - Add a uniform for the stroke color.
  // - Declare our custom attribute with "in" for WebGL2.
  myShader = baseStrokeShader().modify({
    uniforms: {
      'float time': () => millis(),
      'vec3 strokeColor': () => [1.0, 0.0, 0.0]  // red color; adjust as needed
    },
    declarations: 'vec3 myPosition;\nin float aStrokeWeight;',
    'vec3 getWorldPosition': `(vec3 pos) {
      myPosition = pos;
      return pos;
    }`,
    'float getStrokeWeight': `(float w) {
      float scale = 0.8 + 0.2*sin(10.0 * sin(
        floor(time/250.) +
        myPosition.x*0.01 +
        myPosition.y*0.01
      ));
      return w * scale;
    }`
  });

  // Precompute vertex positions and stroke weights.
  positions = new Float32Array(numVerts * 3);
  strokeWeights = new Float32Array(numVerts);

  for (let i = 0; i < numVerts; i++) {
    let r = map(i, 0, numVerts - 1, 0, width / 3);
    let angle = i * 0.2;
    let x = r * cos(angle);
    let y = r * sin(angle);
    let z = 0;
    positions[i * 3]     = x;
    positions[i * 3 + 1] = y;
    positions[i * 3 + 2] = z;

    // Stroke weight goes linearly from 1.0 (first vertex) to 0.0 (last vertex)
    strokeWeights[i] = map(i, 0, numVerts - 1, 1.0, 0.0);
  }

  // Create WebGL buffers for our data.
  const gl = this._renderer.GL;

  // Position buffer
  positionBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, positions, gl.STATIC_DRAW);

  // Stroke weight buffer
  strokeWeightBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  gl.bufferData(gl.ARRAY_BUFFER, strokeWeights, gl.STATIC_DRAW);
}

function draw() {
  background(255);

  // Activate our shader and update the time uniform.
  shader(myShader);
  myShader.setUniform('time', millis());
  // Optionally, you can change the stroke color dynamically by calling:
  // myShader.setUniform('strokeColor', [r, g, b]);

  const gl = this._renderer.GL;

  // Retrieve the active shader program.
  let program = gl.getParameter(gl.CURRENT_PROGRAM);
  if (!program) {
    console.error("No active shader program found.");
    return;
  }

  // --- Bind and set up the position attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
  let posLoc = gl.getAttribLocation(program, 'aPosition');
  gl.enableVertexAttribArray(posLoc);
  gl.vertexAttribPointer(posLoc, 3, gl.FLOAT, false, 0, 0);

  // --- Bind and set up the stroke weight attribute ---
  gl.bindBuffer(gl.ARRAY_BUFFER, strokeWeightBuffer);
  let swLoc = gl.getAttribLocation(program, 'aStrokeWeight');
  gl.enableVertexAttribArray(swLoc);
  gl.vertexAttribPointer(swLoc, 1, gl.FLOAT, false, 0, 0);

  // Draw the vertices as a line strip.
  gl.drawArrays(gl.LINE_STRIP, 0, numVerts);

  // Clean up by disabling the attributes.
  gl.disableVertexAttribArray(posLoc);
  gl.disableVertexAttribArray(swLoc);
}

How It Works

1. Uniform Declaration:
   In the shader modification, we add a uniform vec3 strokeColor that holds the desired stroke color.

   'vec3 strokeColor': () => [1.0, 0.0, 0.0]

2. Shader Fragment Modification:
   Your base shader’s fragment shader needs to use this uniform. For example, the fragment shader might include:

   precision mediump float;
   uniform vec3 strokeColor;
   // ... other declarations and varyings ...
   
   void main(){
     gl_FragColor = vec4(strokeColor, 1.0);
   }

   (If you’re using a provided baseStrokeShader, you may need to modify its fragment shader code similarly.)

3. Setting the Uniform:
   In your draw loop, you can update the strokeColor dynamically using:

   myShader.setUniform('strokeColor', [1.0, 0.0, 0.0]);

   This example sets it to red, but you can change the RGB values as desired.

By adding this uniform and using it in your fragment shader, you gain full control over the stroke color rendered by your shader.

You

see this example??

a custom per-vertex value (Alpha) is passed:

let myShader;

function setup() { createCanvas(200, 200, WEBGL); myShader = baseStrokeShader().modify({ ‘float random’: (vec2 p) { vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }, ‘Inputs getPixelInputs’: (Inputs inputs) { // Replace alpha in the color with dithering by // randomly setting pixel colors to 0 based on opacity float a = inputs.color.a; inputs.color.a = 1.0; inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0; return inputs; } }); }

function draw() { background(255); shader(myShader); strokeWeight(10); beginShape(); for (let i = 0; i <= 50; i++) { stroke( 0, 255 * map(i, 0, 20, 0, 1, true) * map(i, 30, 50, 1, 0, true) ); vertex( map(i, 0, 50, -1, 1) * width/3, 50 * sin(i/10 + frameCount/100) ); } endShape(); }

You

see this example??

a custom per-vertex value (Alpha) is passed:

let myShader;

function setup() { createCanvas(200, 200, WEBGL); myShader = baseStrokeShader().modify({ ‘float random’: (vec2 p) { vec3 p3 = fract(vec3(p.xyx) * .1031); p3 += dot(p3, p3.yzx + 33.33); return fract((p3.x + p3.y) * p3.z); }, ‘Inputs getPixelInputs’: (Inputs inputs) { // Replace alpha in the color with dithering by // randomly setting pixel colors to 0 based on opacity float a = inputs.color.a; inputs.color.a = 1.0; inputs.color *= random(inputs.position.xy) > a ? 0.0 : 1.0; return inputs; } }); }

function draw() { background(255); shader(myShader); strokeWeight(10); beginShape(); for (let i = 0; i <= 50; i++) { stroke( 0, 255 * map(i, 0, 20, 0, 1, true) * map(i, 30, 50, 1, 0, true) ); vertex( map(i, 0, 50, -1, 1) * width/3, 50 * sin(i/10 + frameCount/100) ); } endShape(); }

ChatGPT

This example shows how you can pass a custom per‐vertex value—in this case, an alpha value—into your shader and then use it to modify the final pixel color. Here’s what’s happening:

1. Custom Shader Functions:
   The call to

   myShader = baseStrokeShader().modify({
     'float random': (vec2 p) { … },
     'Inputs getPixelInputs': (Inputs inputs) { … }
   });

   adds two custom functions into the shader code:

   • random(vec2 p): This function generates a pseudo‐random float based on a 2D input.
   • getPixelInputs(Inputs inputs): This function intercepts the pixel (fragment) inputs right before output. In the code, it takes the incoming alpha (from inputs.color.a), resets it to 1.0, and then uses the random function along with the pixel’s position to decide whether to completely black out the pixel (by multiplying the color by 0) or leave it as is.

2. Per‐Vertex Alpha via Stroke:
   In the draw() function, each vertex is drawn with a stroke color that has an alpha value determined by a couple of map() calls. This means each vertex carries its own alpha value. When p5.js sets the stroke for each vertex, that per‐vertex alpha is passed along to the shader as part of the built-in stroke color.

3. Using the Custom Alpha in the Shader:
   Inside the modified getPixelInputs function, the shader:

   • Reads the alpha value from the stroke (set in the stroke(...) call).
   • Uses the random function with the fragment’s x-y position to generate a noise value.
   • Compares the noise against the alpha value and, if the random number is greater than the alpha, sets the output color to black (or effectively “dithers” the pixel off).

This approach lets you have fine control over how each vertex’s alpha affects the final rendered stroke. You can extend this idea to pass other custom per-vertex values (like a custom stroke color) by adding additional attributes or modifying the inputs in a similar fashion.

If you want to change the stroke color directly, you could modify the Inputs getPixelInputs function to adjust inputs.color based on your own per-vertex or uniform data. For example, you might mix in a uniform color or use a custom attribute that you pass in a similar way as the alpha.

Overall, this example demonstrates a flexible way to override how the shader handles pixel inputs, using per-vertex data (here provided by the stroke’s alpha) to drive effects like dithering.

You

let’s say we want to use the G color value passed in the stroke to modify the strokeweight

ChatGPT

Below is an example that stays close to your original code while modifying the stroke weight based on the green (G) channel from the stroke color. In this example we assume the baseStrokeShader automatically passes along the per‐vertex stroke color as an attribute named aStrokeColor. We add that to our shader’s declarations and then use its .g component inside getStrokeWeight:

let myShader;

function setup() {
  createCanvas(200, 200, WEBGL);

  // Modify the base stroke shader.
  // We add a declaration for our per-vertex stroke color (aStrokeColor)
  // and then use its green channel to scale the stroke weight.
  myShader = baseStrokeShader().modify({
    uniforms: {
      'float time': () => millis()
    },
    declarations: 'vec3 myPosition;\n in vec4 aStrokeColor;',
    'vec3 getWorldPosition': `(vec3 pos) {
      myPosition = pos;
      return pos;
    }`,
    'float getStrokeWeight': `(float w) {
      // Compute a base scale using position and time
      float scale = 0.8 + 0.2*sin(10.0 * sin(
        floor(time/250.) +
        myPosition.x*0.01 +
        myPosition.y*0.01
      ));
      // Multiply by the green channel from the stroke color.
      // (Assuming aStrokeColor is normalized between 0 and 1.)
      return w * scale * aStrokeColor.g;
    }`
  });
}

function draw() {
  background(255);
  shader(myShader);
  myShader.setUniform('time', millis());

  // Set a stroke color with a custom green channel.
  // For example, stroke(0, 127, 0) will result in a normalized green value ~0.5,
  // reducing the stroke weight to about half.
  stroke(0, 127, 0);
  strokeWeight(10);

  beginShape();
  for (let i = 0; i <= 50; i++) {
    let r = map(i, 0, 50, 0, width / 3);
    let x = r * cos(i * 0.2);
    let y = r * sin(i * 0.2);
    vertex(x, y);
  }
  endShape();
}

Explanation

• Shader Declarations:
  We extend the shader by adding a new declaration:

  in vec4 aStrokeColor;

  This lets the shader access the per-vertex stroke color (which p5.js provides when you call stroke()).

• Modifying Stroke Weight:
  In the custom getStrokeWeight function, we compute a base scale based on position and time. We then multiply by aStrokeColor.g (the green channel) so that if the green value is less than 1, the effective stroke weight is reduced.

• Using stroke():
  In the draw loop, calling stroke(0, 127, 0) sets the stroke color to a medium green (with the green channel approximately 0.5 after normalization). This value directly affects the stroke weight through our shader.

This approach lets you control the stroke weight based on the stroke’s green color value, giving you creative control over how per-vertex color data influences the rendered geometry.