https://github.com/rtlevy/p5-display
A library of controllable React components for p5.js sketches.
https://github.com/rtlevy/p5-display
frontend javascript library p5 react typescript
Last synced: 5 months ago
JSON representation
A library of controllable React components for p5.js sketches.
- Host: GitHub
- URL: https://github.com/rtlevy/p5-display
- Owner: rtlevy
- License: mit
- Created: 2019-07-14T22:42:14.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-07T07:53:34.000Z (over 2 years ago)
- Last Synced: 2025-04-24T06:06:18.649Z (5 months ago)
- Topics: frontend, javascript, library, p5, react, typescript
- Language: TypeScript
- Homepage:
- Size: 829 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 18
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
A library of controllable React components for p5.js sketches.
# Usage
npm install --save p5-display
p5-display is intended to be used with a bundling tool such as Webpack.
The library is written in Typescript and declaration files are included.
# Example (written in Typescript)
```tsx
import * as React from "react";
import * as ReactDOM from "react-dom";
import { P5DisplayStateful, useP5, P5Instance } from "p5-display";
const sketch = (p: P5Instance) => {
let t = 0;
p.setup = () => {
p.createCanvas(500, 500);
}
p.draw = () => {
p.rect(0,0, p.sin(t) * 250 + 250, p.cos(t) * 250 + 250);
t += 0.01;
}
p.reset = () => {
t = 0;
p.clear();
p.draw();
}
}
function Example(props: {}) {
return
}
ReactDOM.render(
, document.getElementById('content-root'));
```
# Building
npm install
npm run build
To build docs, run
npm run docs