P5.ac NPM | npm.io

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);
}