p5.automated-canvas
Usage
Browser Example
Add the library to your project with a script tag in the index.html
<script src='https://unpkg.com/p5.ac@1.0.0/dist/p5.ac.min.js'></script>
Webpack Example
import p5 from 'p5';
import p5AC from 'p5.ac';
p5AC(p5);Overwrites
createCanvas()
In addition to the default parameters, the method accepts an object with custom options to create a canvas which dimensions are relative to the window.
The default options are:
function setup() {
createCanvas({
type: 'full',
margin: 0,
centered: false,
renderer: undefined,
doResize: true,
debouncedResizeDelay: 600,
});
};-
type: string [full, square]
-
margin: number [0, 1]
in relation to windowWidth/windowHeight
is constrained to 0 and _defaultCanvasSize.width === 100 -
centered: boolean
automagically translates the origin of the canvas to the center instead of the top left corner -
renderer: p5.constant | string
necessary for webgl -
doResize: boolean
automagically resize the canvas on window resize event -
debouncedResizeDelay: number
Added p5 methods
windowResizeTriggered()
This method is called only once at the beginning of a resize event.
windowResizeFinished()
This method is called only once at the end of a resize event.
@todo isWindowResizing()
find a better way to declare if statements in draw (or inside of windowResizeTriggered) to call a redraw from the triggered event (requestAnimationFrame (?), register method 'post' (?))
function draw() {
background(255);
if (isWindowResizing()) {
background(0);
}
};
function windowResizeTriggered() {
redraw();
};
toggleLoop()
simplify calls of loop() and noLoop()
returns the current loop state
function mouseReleased() {
console.log('looping: ' + toggleLoop());
};toggleFullscreen()
simplify calls of fullscreen()
returns the current fullscreen state
function keyReleased(e) {
if (e.code === 'KeyF') console.log('fullscreen: ' + toggleFullscreen());
};Added p5 properties
widthHalf, heightHalf
instead of recalculating the position of the canvas center each frame.
resizeRatio, resizeRatioX, resizeRatioY
the ratio between the dimensions before and after the resize event.
@todo consider pixel density ?
let x = 100;
let y = -200;
let radius = 20;
function windowResizeTriggered() {
console.log('triggered');
};
function windowResizeFinished() {
x *= resizeRatioX;
y *= resizeRatioY;
radius *= resizeRatio;
console.log(x, y, radius);
};
function draw() {
background(50);
ellipse(x, y, radius);
}@todo
- registered method remove
Ressources
https://github.com/processing/p5.js/blob/main/contributor_docs/creating_libraries.md
https://www.sitepoint.com/rollup-javascript-bundler-introduction/
https://github.com/processing/p5.js-sound/blob/main/src/app.js