Reset test sketch

Author: davepagurek

preview/index.html

@@ -23,28 +23,237 @@
     p5.registerAddon(rendererWebGPU);
 
     const sketch = function (p) {
-      p.setup = async function() {
+      let fbo;
+      let sh, sh2;
+      let ssh;
+      let tex;
+      let font;
+      let redFilter;
+      let env;
+      let instance;
+
+      // Compute shader variables
+      let computeShader;
+      let particleBuffer;
+      let bouncingCirclesShader;
+      let circleGeometry;
+      const NUM_CIRCLES = 100;
+      const RADIUS = 2;
+
+      p.setup = async function () {
         await p.createCanvas(400, 400, p.WEBGPU);
-        p.background(0)
-      }
-      p.draw = function() {
+        env = await p.loadImage('img/spheremap.jpg');
+        font = await p.loadFont(
+          'font/PlayfairDisplay.ttf'
+        );
+        fbo = p.createFramebuffer();
+
+        instance = p.buildGeometry(() => p.sphere(5));
+        circleGeometry = p.buildGeometry(() => p.sphere(RADIUS));
+
+        redFilter = p.baseFilterShader().modify(() => {
+          p.getColor((inputs, canvasContent) => {
+            let col = p.getTexture(canvasContent, inputs.texCoord);
+            col.g = col.r;
+            col.b = col.r;
+            return col;
+          })
+        }, { p })
+
+        tex = p.createImage(100, 100);
+        tex.loadPixels();
+        for (let x = 0; x < tex.width; x++) {
+          for (let y = 0; y < tex.height; y++) {
+            const off = (x + y * tex.width) * 4;
+            tex.pixels[off] = p.round((x / tex.width) * 255);
+            tex.pixels[off + 1] = p.round((y / tex.height) * 255);
+            tex.pixels[off + 2] = 0;
+            tex.pixels[off + 3] = 255;
+          }
+        }
+        tex.updatePixels();
+        fbo.draw(() => {
+          p.imageMode(p.CENTER);
+          p.image(tex, 0, 0, p.width, p.height);
+        });
+
+        sh = p.baseMaterialShader().modify(() => {
+          const time = p.uniformFloat(() => p.millis());
+          p.getWorldInputs((inputs) => {
+            inputs.position.y += 40 * p.sin(time * 0.005);
+            return inputs;
+          });
+        }, { p })
+        sh2 = p.baseMaterialShader().modify(() => {
+          p.getWorldInputs((inputs) => {
+            inputs.position.x += 20 * p.instanceID();
+            return inputs;
+          });
+        }, { p })
+
+        // Initialize storage buffers with random positions and velocities
+        const initialParticles = [];
+        for (let i = 0; i < NUM_CIRCLES; i++) {
+          initialParticles.push({
+            position: [p.random(-150, 150), p.random(-150, 150)],
+            velocity: [
+              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1),
+              0.1 * p.random(1, 3) * (p.random() > 0.5 ? 1 : -1)
+            ]
+          })
+        }
+
+        particleBuffer = p.createStorage(initialParticles);
+
+        // Create compute shader for physics simulation
+        computeShader = p.buildComputeShader(() => {
+          const particles = p.uniformStorage('particles', particleBuffer);
+          const bounds = p.uniformVec2(() => [p.width / 2 - RADIUS, p.height / 2 - RADIUS]);
+          const deltaTime = p.uniformFloat(() => p.deltaTime * 0.1);
+
+          const idx = p.index.x;
+
+          // Read current position and velocity
+          let position = particles[idx].position;
+          let velocity = particles[idx].velocity;
+
+          // Update position
+          position += velocity * deltaTime;
+
+          // Bounce off boundaries
+          if (position.x > bounds.x || position.x < -bounds.x) {
+            velocity.x = -velocity.x;
+            position.x = p.clamp(position.x, -bounds.x, bounds.x);
+          }
+          if (position.y > bounds.y || position.y < -bounds.y) {
+            velocity.y = -velocity.y;
+            position.y = p.clamp(position.y, -bounds.y, bounds.y);
+          }
+
+          particles[idx].position = position;
+          particles[idx].velocity = velocity;
+        }, { p, RADIUS, particleBuffer });
+
+        // Shader for rendering bouncing circles from storage buffer
+        bouncingCirclesShader = p.baseMaterialShader().modify(() => {
+          const particles = p.uniformStorage('particles', particleBuffer);
+
+          p.getWorldInputs((inputs) => {
+            const instanceIdx = p.instanceID();
+            inputs.position.xy += particles[instanceIdx].position;
+            return inputs;
+          });
+        }, { p, particleBuffer });
+      };
+
+      p.draw = function () {
+        // Run compute shader to update physics
         debugger
-        p.push()
-        p.fill(0, 1)
+        p.compute(computeShader, NUM_CIRCLES);
+
+        p.clear();
+        p.rotateY(p.millis() * 0.001);
+        p.push();
+        //p.clip(() => p.rect(-50, -50, 200, 200));
+        /*p.orbitControl();
+        p.push();
+        p.textAlign(p.CENTER, p.CENTER);
+        p.textFont(font);
+        p.textSize(85)
+        p.fill('red')
         p.noStroke()
-        //p.plane(p.width, p.height)
-        p.rectMode(p.CENTER)
-        p.rect(0, 0, p.width, p.height)
+        p.rect(0, 0, 100, 100);
+        p.fill(0);
+        p.push()
+        p.rotate(p.millis() * 0.001)
+        p.text('Hello!', 0, 0);
         p.pop()
-        
-        p.fill(255)
-        p.noStroke()
-        p.circle(
-          100 * p.sin(p.frameCount * 0.1),
-          0,
-          50
-        )
-      }
+        p.pop();
+        return;*/
+        p.orbitControl();
+        const t = p.millis() * 0.002;
+        p.background(200);
+        p.panorama(env);
+        p.push();
+        p.imageLight(env);
+        p.shader(sh);
+        // p.strokeShader(ssh)
+        p.ambientLight(10);
+        //p.directionalLight(100, 100, 100, 0, 1, -1);
+        //p.pointLight(155, 155, 155, 0, -200, 500);
+        p.specularMaterial(255);
+        p.shininess(50);
+        p.metalness(100);
+        //p.stroke('white');
+        p.noStroke();
+        for (const [i, c] of ['red', 'gray', 'blue'].entries()) {
+          p.push();
+          p.fill(c);
+          p.translate(
+            p.width/3 * p.sin(t + i * Math.E),
+            0, //p.width/3 * p.sin(t * 0.9 + i * Math.E + 0.2),
+            p.width/3 * p.sin(t * 1.2 + i * Math.E + 0.3),
+          )
+          if (i % 2 === 0) {
+            if (i === 0) {
+              p.texture(fbo)
+            }
+            p.box(30);
+          } else {
+            p.sphere(30);
+          }
+          p.pop();
+        }
+        p.pop();
+
+        p.push();
+        p.shader(sh2);
+        p.noStroke();
+        p.fill('red');
+        p.model(instance, 10);
+        p.pop();
+
+        // Draw compute shader-driven bouncing circles
+        p.push();
+        p.shader(bouncingCirclesShader);
+        p.noStroke();
+        p.fill('#4ECDC4');
+        p.model(circleGeometry, NUM_CIRCLES);
+        p.pop();
+
+        // Test beginShape/endShape with immediate mode shapes
+        p.push();
+        p.translate(0, 100, 0);
+        p.fill('yellow');
+        p.noStroke();
+
+        // Draw a circle using beginShape/endShape
+        p.beginShape();
+        const numPoints = 16;
+        for (let i = 0; i < numPoints; i++) {
+          const angle = (i / numPoints) * Math.PI * 2;
+          const x = Math.cos(angle) * 50;
+          const y = Math.sin(angle) * 50;
+          p.vertex(x, y);
+        }
+        p.endShape(p.CLOSE);
+
+        p.translate(100, 0, 0);
+        p.fill('purple');
+
+        // Draw a square using beginShape/endShape
+        p.beginShape();
+        p.vertex(-30, -30);
+        p.vertex(30, -30);
+        p.vertex(30, 30);
+        p.vertex(-30, 30);
+        p.endShape(p.CLOSE);
+
+        p.pop();
+
+        // p.filter(p.BLUR, 10)
+        p.pop();
+      };
     };
 
     new p5(sketch);