expo-processing v2.3.11
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 on Expo! 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 aprocessing
instance and calls Processing.js functions on it, such as thesketchProc
function in the Processing.js documentation for writing JavaScript-only Processing.js code.
Example
This is based on the "In and out" sketch on OpenProcessing.org.
In
a
new blank Expo project,
run npm i -S processing-js expo-processing
to install Processing.js and ExpoProcessing. Then replace
App.js
with the following:
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);
}
}
}
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
11 months ago
10 months ago
11 months ago
10 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
8 years ago
8 years ago
8 years ago
8 years ago