implement .if()

mngyuan · Nov 25, 2024 · 84a9f38 · 84a9f38
1 parent 65c4752
commit 84a9f38
Show file tree

Hide file tree

Showing 5 changed files with 123 additions and 35 deletions.
diff --git a/examples/if/index.html b/examples/if/index.html
@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Sketch</title>
+
+    <link rel="stylesheet" type="text/css" href="style.css" />
+
+    <script src="../../lib/p5.min.js"></script>
+    <script src="../../lib/p5.sound.min.js"></script>
+    <script src="../../p5.every.js"></script>
+  </head>
+
+  <body>
+    <script src="sketch.js"></script>
+  </body>
+</html>
+
diff --git a/examples/if/jsconfig.json b/examples/if/jsconfig.json
@@ -0,0 +1,10 @@
+{
+  "compilerOptions": {
+    "target": "es6"
+  },
+  "include": [
+    "*.js",
+    "**/*.js",
+    "/Users/mngyuan/.vscode/extensions/samplavigne.p5-vscode-1.2.16/p5types/global.d.ts"
+  ]
+}
diff --git a/examples/if/sketch.js b/examples/if/sketch.js
@@ -0,0 +1,26 @@
+function setup() {
+  createCanvas(400, 400);
+
+  every(2).seconds
+    .show(draw1)
+    .show(draw2)
+    .show(draw3).if(function () {
+      return keyIsPressed;
+    });
+}
+
+function draw() {
+  // This won't show anything, but we must have a draw() function for p5
+  background(220);
+}
+
+function draw1() {
+  background('red');
+}
+
+function draw2() {
+  background('blue');
+}
+function draw3() {
+  background('green');
+}
diff --git a/examples/if/style.css b/examples/if/style.css
@@ -0,0 +1,8 @@
+html, body {
+  margin: 0;
+  padding: 0;
+}
+
+canvas {
+  display: block;
+}
diff --git a/p5.every.js b/p5.every.js
@@ -1,5 +1,40 @@
 let _context;
 
+const skipToNextScene = (frameCount, len) => {
+  const totalLenOfScenes = _context.sceneFs.reduce(
+    (acc, {len}) => acc + len,
+    0,
+  );
+  // need to recompute this otherwise the closure uses the old value from the outer scope
+  const cyclicFrameCount =
+    (frameCount + _context.skippedFrames) % totalLenOfScenes;
+  _context.skippedFrames += len - cyclicFrameCount;
+  _context.skippedFrames = _context.skippedFrames % totalLenOfScenes;
+  if (_context.timerPaused) {
+    _context.timerPaused = false;
+  }
+};
+
+const calculateCurrentScene = (frameCount) => {
+  // 'len' is counted in frames; calculate the total length
+  const totalLenOfScenes = _context.sceneFs.reduce(
+    (acc, {len}) => acc + len,
+    0,
+  );
+  const cyclicFrameCount =
+    (frameCount + _context.skippedFrames) % totalLenOfScenes;
+  // Pick scene from _context.sceneFs based on cyclicFrameCount and ranges of len
+  let len = 0,
+    i;
+  for (i = 0; i < _context.sceneFs.length; i++) {
+    len += _context.sceneFs[i].len;
+    if (cyclicFrameCount < len) {
+      break;
+    }
+  }
+  return [i, len];
+};
+
 p5.prototype.every = function (n) {
   // Reset context; we want every() to be like a setup(),
   // called once per sketch to register
@@ -33,8 +68,13 @@ p5.prototype.every = function (n) {
           keycode ?? true;
         return myself;
       },
-      until: function () {},
-      if: function () {},
+      until: function () {
+        return myself;
+      },
+      if: function (predicate) {
+        _context.sceneFs[_context.sceneFs.length - 1].if = predicate;
+        return myself;
+      },
     };
     return myself;
   };
@@ -53,24 +93,9 @@ p5.prototype.every = function (n) {
 };
 
 p5.prototype.chooseScene = function () {
-  // 'len' is counted in frames; calculate the total length
-  const totalLenOfScenes = _context.sceneFs.reduce(
-    (acc, {len}) => acc + len,
-    0,
-  );
-  const cyclicFrameCount =
-    (this.frameCount + _context.skippedFrames) % totalLenOfScenes;
-
   if (!_context.timerPaused) {
-    // Pick scene from _context.sceneFs based on cyclicFrameCount and ranges of len
-    let len = 0,
-      i;
-    for (i = 0; i < _context.sceneFs.length; i++) {
-      len += _context.sceneFs[i].len;
-      if (cyclicFrameCount < len) {
-        break;
-      }
-    }
+    let [i, len] = calculateCurrentScene(this.frameCount);
+
     if (_context.scene != i) {
       // Changing scenes
 
@@ -81,6 +106,18 @@ p5.prototype.chooseScene = function () {
       _context.keyboardListeners.map((listener) =>
         document.removeEventListener('keydown', listener),
       );
+      // Check new scene(s)'s predicate
+      let checked = [];
+      while (_context.sceneFs[i].if && _context.sceneFs[i].if()) {
+        if (checked.includes((i + 1) % _context.sceneFs.length)) {
+          // We've checked all scenes, none of them passed
+          break;
+        }
+        checked.push(i);
+        // skip to the start of the next scene
+        skipToNextScene(this.frameCount, len);
+        [i, len] = calculateCurrentScene(this.frameCount);
+      }
       // Add new scene's listeners
       if (_context.sceneFs[i].mousePressed) {
         document.addEventListener(
@@ -98,14 +135,7 @@ p5.prototype.chooseScene = function () {
         }
         const listener = () => {
           // just skip to the start of the next scene
-          // need to recompute this otherwise the closure uses the old value from the outer scope
-          const cyclicFrameCount =
-            (this.frameCount + _context.skippedFrames) % totalLenOfScenes;
-          _context.skippedFrames += len - cyclicFrameCount;
-          _context.skippedFrames = _context.skippedFrames % totalLenOfScenes;
-          if (_context.timerPaused) {
-            _context.timerPaused = false;
-          }
+          skipToNextScene(this.frameCount, len);
         };
         document.addEventListener('mousedown', listener);
         _context.mouseListeners.push(listener);
@@ -124,14 +154,7 @@ p5.prototype.chooseScene = function () {
             e.keyCode == _context.sceneFs[_context.scene].untilKeyPressed
           ) {
             // just skip to the start of the next scene
-            // need to recompute this otherwise the closure uses the old value from the outer scope
-            const cyclicFrameCount =
-              (this.frameCount + _context.skippedFrames) % totalLenOfScenes;
-            _context.skippedFrames += len - cyclicFrameCount;
-            _context.skippedFrames = _context.skippedFrames % totalLenOfScenes;
-            if (_context.timerPaused) {
-              _context.timerPaused = false;
-            }
+            skipToNextScene(this.frameCount, len);
           }
         };
         document.addEventListener('keydown', listener);
@@ -141,6 +164,7 @@ p5.prototype.chooseScene = function () {
       _context.scene = i;
     }
   }
+
   _context.sceneFs[_context.scene] && _context.sceneFs[_context.scene].drawF();
 };
 p5.prototype.registerMethod('post', p5.prototype.chooseScene);