Adaptive canvas size for sketch in web

mcfetrmatt

Hi there,

I am having trouble finding a solution to this, perhaps I don't know the right terms to search. I have created a sketch and uploaded it to my website, what would be great to have is allow the canvas to stretch with the browser window, much like text does. What is the best way to create a sketch so that it can be used on different monitors with different resolutions and mobile screens?

Any tips greatly appreciated :)

Thanks! Matt

GoToLoop

You can use variables screen.width & screen.height as arguments for size():
http://ProcessingJS.org/reference/screen/

Notice though that variables screenWidth & screenHeight work as well.
However be aware they're called displayWidth & displayHeight for Java Mode a long time now! L-)

mcfetrmatt

Thanks for the reply GoToLoop. The screenWidth and screenHeight seems to reference the monitors native resolution, but not the current size of the browser window.

Is it possible to have a sketch scale itself proportionally to the browser windows width? Or would it be best to just make the sketch centered on the page and have the sketch and web background colours the same so it looks like it scales?

GoToLoop

I did some research and it seems like those dimensions you want are stored in innerWidth & innerHeight properties:

1. https://developer.Mozilla.org/en-US/docs/Web/API/Window/innerWidth
2. https://developer.Mozilla.org/en-US/docs/Web/API/Window/innerHeight

Pjs library (JavaScript Mode) got a "secret" internal property called externals:
https://GitHub.com/processing-js/processing-js/blob/master/src/Processing.js#L175

It stores an object w/ 4 properties: canvas, context, sketch & window.
Among them, window is the most important, b/c it gives access to the whole web page members, including innerWidth & innerHeight:
https://developer.Mozilla.org/en-US/docs/Web/API/Window

Here's a short example on how to use it. You can paste it at the link below too:
http://ProcessingJS.org/tools/processing-helper.html

/**
 * Size() to JS Window (v1.0)
 * GoToLoop (2016-Oct-17)
 *
 * forum.Processing.org/two/discussion/18556/
 * adaptive-canvas-size-for-sketch-in-web#Item_3
 */

static final boolean IS_PJS = 1/2 == 1/2.;

void settings() {
  size(externals.window.innerWidth, externals.window.innerHeight);

  println(width + " x " + height);
  print(externals.window.innerWidth + " x ");
  println(externals.window.innerHeight);
}

void setup() {
  if (IS_PJS)  settings();
  exit();
}

GoToLoop

However, using externals breaks cross-mode compatibility between Java & JS modes. :(

However, there's a hack which still allows it to run in Java Mode: create a faux interface for externals.

Just place this interface externals in another ".java" tab. Call it "externals.java":

interface externals {
  interface window {
    int innerWidth = 800, innerHeight = 600;
  }
}

In this case, I've chosen arbitrary values 800 & 600, just so the program can still run in Java Mode. :ar!