@fal-works/p5-scaler

A small library for scaling p5.js sketches.

Usage no npm install needed!

<script type="module">
  import falWorksP5Scaler from 'https://cdn.skypack.dev/@fal-works/p5-scaler';
</script>

README

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/p5@1.3.0/lib/p5.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@fal-works/p5-scaler@0.2.2/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.