processing · limzykenneth · Mar 22, 2025 · Feb 13, 2025 · Feb 13, 2025 · Feb 13, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -28,6 +28,7 @@
     "acorn": "^8.12.1",
     "acorn-walk": "^8.3.4",
     "colorjs.io": "^0.5.2",
+    "escodegen": "^2.1.0",
     "file-saver": "^1.3.8",
     "gifenc": "^1.0.3",
     "i18next": "^19.0.2",

diff --git a/preview/global/index.html b/preview/global/index.html
@@ -13,9 +13,9 @@
   }
   </style>
 
-  <script src="./p5.js"></script>
+  <script src="/p5.js"></script>
 </head>
 <body>
-<script src="./sketch.js"></script>
+<script src="/sketch.js"></script>
 </body>
 </html>
diff --git a/preview/global/sketch.js b/preview/global/sketch.js
@@ -1,55 +1,50 @@
-const vertSrc = `#version 300 es
- precision mediump float;
- uniform mat4 uModelViewMatrix;
- uniform mat4 uProjectionMatrix;
-
- in vec3 aPosition;
- in vec2 aOffset;
-
- void main(){
-   vec4 positionVec4 = vec4(aPosition.xyz, 1.0);
-   positionVec4.xy += aOffset;
-   gl_Position = uProjectionMatrix * uModelViewMatrix * positionVec4;
- }
-`;
-
-const fragSrc = `#version 300 es
- precision mediump float;
- out vec4 outColor;
- void main(){
-   outColor = vec4(0.0, 1.0, 1.0, 1.0);
- }
-`;
-
-let myShader;
-function setup(){
-  createCanvas(100, 100, WEBGL);
+p5.disableFriendlyErrors = true;
+function windowResized() {
+  resizeCanvas(windowWidth, windowHeight);
+}
 
-  // Create and use the custom shader.
-  myShader = createShader(vertSrc, fragSrc);
+let myModel;
+let starShader;
+let starStrokeShader;
+let stars;
+
+function starShaderCallback() {
+  const time = uniformFloat(() => millis());
+  getWorldInputs((inputs) => {
+    inputs.position.y += instanceID() * 20 - 1000;
+    inputs.position.x += 40*sin(time * 0.001 + instanceID());
+    return inputs;
+  });
+  getObjectInputs((inputs) => {
+    inputs.position *= sin(time*0.001 + instanceID());
+    return inputs;
+  })
+}
 
-  describe('A wobbly, cyan circle on a gray background.');
+async function setup(){
+  createCanvas(windowWidth, windowHeight, WEBGL);
+  stars = buildGeometry(() => sphere(20, 7, 4))
+  starShader = baseMaterialShader().modify(starShaderCallback); 
+  starStrokeShader = baseStrokeShader().modify(starShaderCallback)
 }
 
 function draw(){
-  // Set the styles
-  background(125);
+  background(0,200,240);
+  orbitControl();
+  // noStroke();
+
+  push();
+  stroke(255,0,255)
+  fill(255,200,255)
+  strokeShader(starStrokeShader)
+  shader(starShader);
+  model(stars, 100);
+  pop();
+  push();
+  shader(baseMaterialShader());
   noStroke();
-  shader(myShader);
-
-  // Draw the circle.
-  beginShape();
-  for (let i = 0; i < 30; i++){
-    const x = 40 * cos(i/30 * TWO_PI);
-    const y = 40 * sin(i/30 * TWO_PI);
-
-    // Apply some noise to the coordinates.
-    const xOff = 10 * noise(x + millis()/1000) - 5;
-    const yOff = 10 * noise(y + millis()/1000) - 5;
-
-    // Apply these noise values to the following vertex.
-    vertexProperty('aOffset', [xOff, yOff]);
-    vertex(x, y);
-  }
-  endShape(CLOSE);
+  rotateX(HALF_PI);
+  translate(0, 0, -250);
+  plane(10000)
+  pop();
 }
diff --git a/preview/global/vite.config.mjs b/preview/global/vite.config.mjs
@@ -17,7 +17,7 @@ export default defineConfig({
       name: 'reload',
       configureServer(server) {
         const { ws, watcher } = server;
-        const buildLibPath = path.resolve(libPath, './p5.rollup.js');
+        const buildLibPath = path.resolve(libPath, './p5.js');
         watcher.add(buildLibPath);
         watcher.on('change', file => {
           if(file === buildLibPath){

diff --git a/src/image/filterRenderer2D.js b/src/image/filterRenderer2D.js
@@ -234,7 +234,8 @@ class FilterRenderer2D {
     this._shader.setUniform('canvasSize', [this.pInst.width, this.pInst.height]);
     this._shader.setUniform('radius', Math.max(1, this.filterParameter));
     this._shader.setUniform('filterParameter', this.filterParameter);
-
+    this._shader.setDefaultUniforms();
+
     this.pInst.states.setValue('rectMode', constants.CORNER);
     this.pInst.states.setValue('imageMode', constants.CORNER);
     this.pInst.blendMode(constants.BLEND);