p5.js Responsive Sketch

This simple library can help you make your p5.js sketch responsive according to the screen size, check out this demo.

It also works in p5.js editor, here is a working demo.

Why use it?

Often in creative coding you want to create an HQ sketch (eg. 1080px x 1080px). In a standard environment your sketch will eventually overflow your viewport; and if you change the dimensions of the sketch with resizeCanvas(), all the elements in sketch have to scale proportianally (not an easy task).

This library takes a different approch: it scales the canvas element using css to fit the viewport without affecting the sketch: this way you can easily adjust the viewport or browse your sketch on a mobile device, all elements of the sketch will not be modified.

How to use it

Load the library with CDN after sketch.js.

<script src="sketch.js"></script>
<script src="https://unpkg.com/p5-responsive-sketch"></script>

Or download sketch-responsive.js and load it in your project.

<script src="sketch.js"></script>
<script src="sketch-responsive.js"></script>

Inside sketch.js, use the responsiveSketch() function after createCanvas().

function setup() {
  createCanvas(1080, 1080);
  responsiveSketch();
}

Your sketch will be resized according to the available window.

Mouse position

This library will modify the canvas using css scale() transformation: therefore the mouseX and mouseY variables will no longer be correct.

To solve this you can retrieve the right position of the mouse like this.

Define a global variable at the beginning of your sketch and use the responsiveMousePos() function to get the right position inside draw().

let mPos;

function setup() {
  createCanvas(1080, 1080);
  responsiveSketch();
}

function draw() {
  background(255);
  
  mPos = responsiveMousePos();
  
  // Wrong position
  strokeWeight(1);
  circle(mouseX, mouseY, 150);

  // Right position
  strokeWeight(10);
  circle(mPos.x, mPos.y, 150);
}

Take a look a the demo to see it in action.

Options

You can optionally pass some options as an object.

Margin

This will set the margin around the canvas. Default to 80, 0 to disable.

responsiveSketch({
  margin: 10
});

Center on page

By default the canvas will be centered in the page using css flex. You can turn off this behavior with the centerOnPage option.

responsiveSketch({
  margin: 0,
  centerOnPage: false
});

Pixel density

By default the pixel density is set to 1. You can pass any number or set the option to null to manage that on your own.

responsiveSketch({
  margin: 0,
  pixelDensity: null
});

ES6 Compatibility

This library is not yet ready for use with ES6.