xref: /expo/packages/expo-processing/README.md (revision b52e368f) 
1https://user-images.githubusercontent.com/379606/119428009-fb40c200-bcc0-11eb-8328-fb19e5d3557c.mp4
2
3*NOTE: The recording above looks weird some times because of artifacts, the real thing is nice, I promise...*
4
5# expo-processing
6
7Use [Processing.js](http://processingjs.org) on [Expo](https://expo.dev)! Just
8`npm i -S processing-js expo-processing` in your Expo project and import it with
9`import { ProcessingView } from 'expo-processing;`.
10
11## Components
12
13### `ExpoProcessing.ProcessingView`
14
15Display a `Processing.js` sketch.
16
17#### Props
18
19The component accepts all `View` layout props for specifying its layout.
20
21- `sketch`: A Processing.js sketch function that takes a `processing` instance
22  and calls Processing.js functions on it, such as the [`sketchProc` function](http://processingjs.org/articles/jsQuickStart.html#javascriptonlyprocessingcode) in
23  the Processing.js documentation for writing JavaScript-only Processing.js
24  code.
25
26## Example
27
28This is based on
29the ["In and out"](https://www.openprocessing.org/sketch/434617) sketch on
30OpenProcessing.org.
31
32In
33a
34[new blank Expo project](https://docs.expo.dev/versions/v18.0.0/guides/up-and-running.html),
35run `npm i -S processing-js expo-processing` to install Processing.js and ExpoProcessing. Then replace
36`App.js` with the following:
37
38```js
39import React from 'react';
40import { ProcessingView } from 'expo-processing';
41
42export default class App extends React.Component {
43  render() {
44    return (
45      <ProcessingView style={{ flex: 1 }} sketch={this._sketch} />
46    );
47  }
48
49  _sketch = (p) => {
50    p.setup = () => {
51      p.strokeWeight(7);
52    }
53
54    const harom = (ax, ay, bx, by, level, ratio) => {
55      if (level <= 0) {
56        return;
57      }
58
59      const vx = bx - ax;
60      const vy = by - ay;
61      const nx = p.cos(p.PI / 3) * vx - p.sin(p.PI / 3) * vy;
62      const ny = p.sin(p.PI / 3) * vx + p.cos(p.PI / 3) * vy;
63      const cx = ax + nx;
64      const cy = ay + ny;
65      p.line(ax, ay, bx, by);
66      p.line(ax, ay, cx, cy);
67      p.line(cx, cy, bx, by);
68
69      harom(
70        ax * ratio + cx * (1 - ratio),
71        ay * ratio + cy * (1 - ratio),
72        ax * (1 - ratio) + bx * ratio,
73        ay * (1 - ratio) + by * ratio,
74        level - 1,
75        ratio);
76    }
77
78    p.draw = () => {
79      p.background(240);
80      harom(
81        p.width - 142, p.height - 142, 142, p.height - 142, 6,
82        (p.sin(0.0005 * Date.now() % (2 * p.PI)) + 1) / 2);
83    }
84  }
85}
86````
87