A multi-canvas p5.js extension that adds MIDI binding and gesture controls, CLI tooling, and more
Features
Organize and stack code across multiple responsive
|
Edit variables by right clicking on a
|
Right click to download stacks of Layers as GIFs and videos |
Use via CDN or npm or clone the library directly to take advantage of the CLI |
Getting Started
Normally with p5.js you have one setup() and draw()
<script>
let canvas
function setup () {
canvas = createCanvas(width, height)
canvas.parent('#target-container')
textAlign(CENTER)
}
function draw () {
background(0)
stroke(255)
text('Hello world', width/2, height/2)
}
</script>But with Layers.p5 you can split your code across many
<script>
// Create a new managed canvas
new Layer({
// (Optional) Reference this Layer with Layers[id]
id: 'hello',
// (Optional) Defaults to same size as .target (fullscreen if no .target)
width: 250,
height: 250,
// (Optional) Goes at the end of <body> by default
target: '#target-container',
// (Optional) A new canvas is automatically created
setup () {
// p5 methods automatically point to this.canvas
textAlign(CENTER)
},
draw () {
background(0)
text('Hello world', width/2, height/2)
}
})
</script>More info coming soon
Install
Either with HTML
<script src="https://unpkg.com/p5@1.6.0/lib/p5.min.js"></script>
<script src="https://unpkg.com/layers.p5@0.3.5/dist/layers.p5.js"></script>or with NPM
From command line:
npm i p5 layers.p5Inside your app.js:
import 'p5'
import Layers from 'Layers.p5'or on OpenProcessing.org
Add Layers.p5 to your Libraries: https://unpkg.com/layers.p5@0.3.5/dist/layers.p5.js
Acknowledgements
- Windows 98.css Theme forked from: https://jdan.github.io/98.css/
- https://www.svgrepo.com/svg/499639/reload