https://github.com/idyll-lang/idyll-plugin-p5
P5JS support for Idyll documents
https://github.com/idyll-lang/idyll-plugin-p5
Last synced: about 1 month ago
JSON representation
P5JS support for Idyll documents
- Host: GitHub
- URL: https://github.com/idyll-lang/idyll-plugin-p5
- Owner: idyll-lang
- License: mit
- Created: 2020-01-09T15:45:16.000Z (over 5 years ago)
- Default Branch: master
- Last Pushed: 2020-01-16T16:43:46.000Z (over 5 years ago)
- Last Synced: 2025-04-19T05:14:52.944Z (about 1 month ago)
- Language: JavaScript
- Size: 839 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Idyll P5JS Plugin
This plugin enables you to embed P5 sketches in Idyll documents.
## Installation
```
$ npm install --save-dev idyll-plugin-p5
```
Add it to your idyll configuration in package.json:
```json
"idyll": {
"compiler": {
"postProcessors": ["idyll-plugin-p5"]
}
}
```
## Example
Variables declared in idyll file can be accessed from p5 scripts using _variableName_ syntax. P5JS methods can be accessed using the variable 'p'
````javascript
[var name:"myVar" value:10 /]
[var name:"myVar2" value:60 /]
[Range value:myVar min:0 max:100 /]
[Range value:myVar2 min:0 max:100 /]
```exec:p5
function setup() {
}
function draw() {
p.clear()
p.background(100);
p.ellipse(p.width/2, p.height/2, _myVar2_, _myVar_);
}
```
````
This is how the output would look:
