레퍼런스 loadStrokeShader()

loadStrokeShader()

이 API는 실험적입니다

향후 p5.js 버전에서 동작이 변경될 수 있습니다.

Loads a new shader from a file that can change how strokes are drawn. Pass the resulting shader into the strokeShader() function to apply it to any strokes you draw.

Since this function loads data from another file, it returns a Promise. Use it in an async function setup, and await its result.

let myShader;
async function setup() {
  createCanvas(200, 200, WEBGL);
  myShader = await loadStrokeShader('myMaterial.js');
}

function draw() {
  background(255);
  strokeShader(myShader);
  strokeWeight(30);
  line(
    -width/3,
    sin(millis()*0.001) * height/4,
    width/3,
    sin(millis()*0.001 + 1) * height/4
  );
}

Inside your shader file, you can call p5.strands hooks to change parts of the shader. For example, you might use the worldInputs hook to change each vertex, or you might use the pixelInputs hook to change each pixel on the surface of a stroke.

// myMaterial.js
pixelInputs.begin();
let opacity = 1 - smoothstep(
  0,
  15,
  length(pixelInputs.position - pixelInputs.center)
);
pixelInputs.color.a *= opacity;
pixelInputs.end();

Read the reference for buildStrokeShader, the version of loadStrokeShader that takes in a function instead of a separate file, for a full list of hooks you can use and examples for each.

The second parameter, successCallback, is optional. If a function is passed, as in loadStrokeShader('myShader.js', onLoaded), then the onLoaded() function will be called once the shader loads. The shader will be passed to onLoaded() as its only argument. The return value of handleData(), if present, will be used as the final return value of loadStrokeShader('myShader.js', onLoaded).

예제

구문

loadStrokeShader(url, [onSuccess], [onFailure])

매개변수

url
String: The URL of your p5.strands JavaScript file.
onSuccess
Function: A callback function to run when loading completes.
onFailure
Function: A callback function to run when loading fails.

반환값

Promise<p5.Shader>: The stroke shader.
Notice any errors or typos? Please let us know. Please feel free to edit src/webgl/material.js and open a pull request!

관련 레퍼런스