p5-scaler

A small library for scaling p5.js sketches.

• Resizes/scales the canvas depending on the size of the parent HTML element.
• The aspect ratio can be either fixed or variable.
• Works on both global and instance mode of p5.js.
• TypeScript/ES6 friendly.

GitHub: https://github.com/fal-works/p5-scaler

Use with <script> tag

After loading p5.js, load p5-scaler.js (or *.min.js for reducing size) via <script> tag.

The order is important as p5-scaler.js will refer to the global variable p5.

<script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fal-works/[email protected]/lib/p5-scaler.js"></script>

p5-scaler.js will define a global variable p5s so that you can use it in your sketch.

For a tutorial sample code, see: https://editor.p5js.org/FAL/sketches/W08t3h2qR

Use on TypeScript / ES6

Install via NPM:

npm install @fal-works/p5-scaler

And then something like:

import * as p5s from "@fal-works/p5-scaler";

If on instance mode, be sure to associate the scaler object with p5 instance by calling setP5Instance() method.