https://github.com/expo/expo-processing
Utilities for using Processing.js on Expo
https://github.com/expo/expo-processing
Last synced: 4 months ago
JSON representation
Utilities for using Processing.js on Expo
- Host: GitHub
- URL: https://github.com/expo/expo-processing
- Owner: expo
- Created: 2017-07-13T21:44:34.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2020-02-06T19:14:30.000Z (over 5 years ago)
- Last Synced: 2025-04-08T12:09:45.652Z (6 months ago)
- Language: JavaScript
- Size: 6.77 MB
- Stars: 96
- Watchers: 5
- Forks: 6
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
*NOTE: GIF above looks weird some times because it's a GIF, the real thing is nice, I promise...*
# expo-processing
Use [Processing.js](http://processingjs.org) on [Expo](https://expo.io)! 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.io/versions/latest/get-started/installation/),
run `expo install processing-js expo-processing expo-gl` 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 ;
}
_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
);
};
};
}
````