Document update()

Author: davepagurek

src/webgpu/p5.RendererWebGPU.js

@@ -50,19 +50,16 @@ function rendererWebGPU(p5, fn) {
     }
 
     /**
-     * Updates the contents of the storage buffer with new data.
-     *
-     * The format of the new data must match the format used when the buffer
-     * was created with <a href="#/p5/createStorage">`createStorage()`</a>:
-     * an array of objects for struct buffers, or an array/Float32Array of
-     * floats for plain float buffers.
+     * Updates the data in the buffer with new values. The new data must be in
+     * the same format as the data originally passed to
+     * <a href="#/p5/createStorage">`createStorage()`</a>.
      *
      * @method update
      * @for p5.StorageBuffer
      * @beta
      * @webgpu
      * @webgpuOnly
-     * @param {Array|Float32Array} data The new data to write into the buffer.
+     * @param {Number[]|Float32Array|Object[]} data The new data to write into the buffer.
      */
     update(data) {
       const device = this._renderer.device;
@@ -120,12 +117,70 @@ function rendererWebGPU(p5, fn) {
   }
 
   /**
-   * Represents a GPU storage buffer created by <a href="#/p5/createStorage">createStorage()</a>.
+   * A block of data that shaders can read from, and compute shaders can also
+   * write to. This is only available in WebGPU mode.
+   *
+   * Note: <a href="#/p5/createStorage">`createStorage()`</a> is the recommended
+   * way to create an instance of this class.
+   *
+   * ```js example
+   * let particles;
+   * let computeShader;
+   * let displayShader;
+   * let instance;
+   * const numParticles = 100;
+   *
+   * async function setup() {
+   *   await createCanvas(100, 100, WEBGPU);
+   *   particles = createStorage(makeParticles(width / 2, height / 2));
+   *   computeShader = buildComputeShader(simulate);
+   *   displayShader = buildMaterialShader(display);
+   *   instance = buildGeometry(drawParticle);
+   * }
+   *
+   * function makeParticles(x, y) {
+   *   let data = [];
+   *   for (let i = 0; i < numParticles; i++) {
+   *     let angle = (i / numParticles) * TWO_PI;
+   *     let speed = random(0.5, 2);
+   *     data.push({
+   *       position: createVector(x, y),
+   *       velocity: createVector(cos(angle) * speed, sin(angle) * speed),
+   *     });
+   *   }
+   *   return data;
+   * }
+   *
+   * function drawParticle() {
+   *   sphere(2);
+   * }
+   *
+   * function simulate() {
+   *   let data = uniformStorage(particles);
+   *   let idx = index.x;
+   *   data[idx].position = data[idx].position + data[idx].velocity;
+   * }
+   *
+   * function display() {
+   *   let data = uniformStorage(particles);
+   *   worldInputs.begin();
+   *   let pos = data[instanceID()].position;
+   *   worldInputs.position.xy += pos - [width / 2, height / 2];
+   *   worldInputs.end();
+   * }
    *
-   * Storage buffers hold data that can be read and written by compute shaders,
-   * and read by vertex and fragment shaders. Pass a `p5.StorageBuffer` to
-   * <a href="#/p5.Shader/setUniform">setUniform()</a> or
-   * <a href="#/p5/uniformStorage">uniformStorage()</a> to bind it to a shader.
+   * function draw() {
+   *   background(30);
+   *   if (frameCount % 60 === 0) {
+   *     particles.update(makeParticles(random(width), random(height)));
+   *   }
+   *   compute(computeShader, numParticles);
+   *   noStroke();
+   *   fill(255, 200, 50);
+   *   shader(displayShader);
+   *   model(instance, numParticles);
+   * }
+   * ```
    *
    * @class p5.StorageBuffer
    * @beta