0.3.5 • Published 10 months ago
layers.p5 v0.3.5
A multi-canvas p5.js extension that adds MIDI binding and gesture controls, CLI tooling, and more
Features
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
0.2.20
10 months ago
0.2.19
10 months ago
0.2.18
10 months ago
0.2.17
10 months ago
0.0.34
12 months ago
0.2.15
10 months ago
0.2.14
10 months ago
0.2.13
10 months ago
0.2.12
10 months ago
0.2.11
10 months ago
0.2.10
11 months ago
0.3.0
10 months ago
0.2.1
12 months ago
0.2.0
12 months ago
0.2.7
11 months ago
0.3.5
10 months ago
0.2.6
11 months ago
0.2.9
11 months ago
0.2.8
11 months ago
0.3.2
10 months ago
0.2.3
11 months ago
0.3.1
10 months ago
0.2.2
12 months ago
0.3.4
10 months ago
0.2.5
11 months ago
0.3.3
10 months ago
0.2.4
11 months ago
0.1.0
2 years ago
0.1.1
2 years ago
0.1.8
2 years ago
0.1.7
2 years ago
0.1.4
2 years ago
0.1.3
2 years ago
0.1.6
2 years ago
0.1.5
2 years ago
0.0.9
2 years ago
0.0.8
2 years ago
0.0.7
2 years ago
0.0.6
2 years ago
0.0.5
2 years ago
0.0.4
2 years ago
0.0.3
2 years ago
0.0.2
2 years ago
0.0.1
2 years ago