expo-processing 0.0.0-canary-20231123-1b19f96

package/README.md

@@ -0,0 +1,86 @@
+https://user-images.githubusercontent.com/379606/119428009-fb40c200-bcc0-11eb-8328-fb19e5d3557c.mp4
+
+*NOTE: The recording above looks weird some times because of artifacts, the real thing is nice, I promise...*
+
+# expo-processing
+
+Use [Processing.js](http://processingjs.org) on [Expo](https://expo.dev)! Just
+`npm i -S processing-js expo-processing` in your Expo project and import it with
+`import { ProcessingView } from 'expo-processing;`.
+
+## Components
+
+### `ExpoProcessing.ProcessingView`
+
+Display a `Processing.js` sketch.
+
+#### Props
+
+The component accepts all `View` layout props for specifying its layout.
+
+- `sketch`: A Processing.js sketch function that takes a `processing` instance
+  and calls Processing.js functions on it, such as the [`sketchProc` function](http://processingjs.org/articles/jsQuickStart.html#javascriptonlyprocessingcode) in
+  the Processing.js documentation for writing JavaScript-only Processing.js
+  code.
+
+## Example
+
+This is based on
+the ["In and out"](https://www.openprocessing.org/sketch/434617) sketch on
+OpenProcessing.org.
+
+In
+a
+[new blank Expo project](https://docs.expo.dev/versions/v18.0.0/guides/up-and-running.html),
+run `npm i -S processing-js expo-processing` to install Processing.js and ExpoProcessing. Then replace
+`App.js` with the following:
+
+```js
+import React from 'react';
+import { ProcessingView } from 'expo-processing';
+
+export default class App extends React.Component {
+  render() {
+    return (
+      <ProcessingView style={{ flex: 1 }} sketch={this._sketch} />
+    );
+  }
+
+  _sketch = (p) => {
+    p.setup = () => {
+      p.strokeWeight(7);
+    }
+
+    const harom = (ax, ay, bx, by, level, ratio) => {
+      if (level <= 0) {
+        return;
+      }
+
+      const vx = bx - ax;
+      const vy = by - ay;
+      const nx = p.cos(p.PI / 3) * vx - p.sin(p.PI / 3) * vy;
+      const ny = p.sin(p.PI / 3) * vx + p.cos(p.PI / 3) * vy;
+      const cx = ax + nx;
+      const cy = ay + ny;
+      p.line(ax, ay, bx, by);
+      p.line(ax, ay, cx, cy);
+      p.line(cx, cy, bx, by);
+
+      harom(
+        ax * ratio + cx * (1 - ratio),
+        ay * ratio + cy * (1 - ratio),
+        ax * (1 - ratio) + bx * ratio,
+        ay * (1 - ratio) + by * ratio,
+        level - 1,
+        ratio);
+    }
+
+    p.draw = () => {
+      p.background(240);
+      harom(
+        p.width - 142, p.height - 142, 142, p.height - 142, 6,
+        (p.sin(0.0005 * Date.now() % (2 * p.PI)) + 1) / 2);
+    }
+  }
+}
+````

package/index.js

@@ -0,0 +1,84 @@
+import React from 'react';
+import { GLView } from 'expo-gl';
+
+const Browser = require('processing-js/lib/Browser');
+Browser.window = window;
+const Processing = require('processing-js/src')(Browser);
+
+export class ProcessingView extends React.Component {
+  componentWillUnmount() {
+    if (this._p) {
+      this._p.exit();
+      this._p = null;
+    }
+    cancelAnimationFrame(this._rafID);
+  }
+
+  render() {
+    const { sketch, ...props } = this.props;
+    return <GLView {...props} onContextCreate={this._onGLContextCreate} />;
+  }
+
+  _onGLContextCreate = gl => {
+    // Canvas polyfilling
+
+    let canvas = Browser.document.createElement('canvas');
+
+    canvas.getContext = () => gl;
+
+    // Cache uniform and attrib locations
+
+    const origGetUniformLocation = gl.getUniformLocation;
+    gl.getUniformLocation = (program, name) => {
+      if (!program.uniformLocationCache) {
+        program.uniformLocationCache = {};
+      }
+      let loc = program.uniformLocationCache[name];
+      if (loc !== undefined) {
+        return loc;
+      }
+      loc = origGetUniformLocation.call(gl, program, name);
+      program.uniformLocationCache[name] = loc;
+      return loc;
+    };
+
+    const origGetAttribLocation = gl.getAttribLocation;
+    gl.getAttribLocation = (program, name) => {
+      if (!program.attribLocationCache) {
+        program.attribLocationCache = {};
+      }
+      let loc = program.attribLocationCache[name];
+      if (loc !== undefined) {
+        return loc;
+      }
+      loc = origGetAttribLocation.call(gl, program, name);
+      program.attribLocationCache[name] = loc;
+      return loc;
+    };
+
+    // Call `gl.endFrameEXP()` every frame
+
+    const keepFlushing = () => {
+      gl.endFrameEXP();
+      this._rafID = requestAnimationFrame(keepFlushing);
+    };
+    keepFlushing();
+
+    // The Processing sketch
+
+    new Processing(canvas, p => {
+      this._p = p;
+
+      // Force render viewport size / mode
+      p.size(gl.drawingBufferWidth, gl.drawingBufferHeight, p.WEBGL);
+      p.size = () => {};
+
+      // Run user's sketch
+      if (this.props.sketch) {
+        this.props.sketch(p);
+      } else {
+        p.draw = () => {};
+      }
+    });
+  };
+}

package/package.json

@@ -0,0 +1,32 @@
+{
+  "name": "expo-processing",
+  "version": "0.0.0-canary-20231123-1b19f96",
+  "description": "Utilities for using Processing.js on Expo",
+  "main": "index.js",
+  "keywords": [
+    "expo",
+    "processing.js",
+    "graphics",
+    "opengl",
+    "gl"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/expo/expo.git",
+    "directory": "packages/expo-processing"
+  },
+  "bugs": {
+    "url": "https://github.com/expo/expo/issues"
+  },
+  "author": "650 Industries, Inc.",
+  "license": "MIT",
+  "homepage": "https://github.com/expo/expo/tree/main/packages/expo-processing",
+  "dependencies": {
+    "expo-gl": "0.0.0-canary-20231123-1b19f96"
+  },
+  "peerDependencies": {
+    "expo": "*",
+    "processing-js": "^1.6.6"
+  },
+  "gitHead": "1b19f96bd0e50f43e4329e388347423e7cce20b6"
+}