how can processing.js detect browser's size?

Question

As mentioned, how can processing.js respond to a browser's size? (responsive design) i've tried screen.width and screen.height but it didn't work well. It seems only detect the size of the computer's screen size.

What's more, i want to keep pace with the window's size when dragged and changed the size of the browser

Snowonthemountain

Answer 1

 size(window.innerWidth, window.innerHeight); 

according to https://groups.google.com/forum/?fromgroups=#!topic/processingjs/2-U_P7_BHlY

or

void setup() {
size( $(window).width(),
    $(window).height() );
...
}

according to Get Viewport Width With JQuery and Use In Processing JS

Syncarpous

what if i drag and change the size of the browser? Is there any method i can keep pace with the size? – Snowonthemountain

Answer 2

Here is how I approached this issue using Zerb Foundation 3 responsive web framework, Javascript, jQuery and Processing.js. You can take a look at Living Map Project if you want to dig through the source.

in javascript / jquery:

// handle page resizing
$(window).resize(function() {
var pjs = Processing.getInstanceById('livingmap');
pjs.resizeSketch(document.getElementById('div_p5canvas').offsetWidth,  document.getElementById('div_p5canvas').offsetHeight);
} );

in your .pde processing js code (note: the calculation was what I felt worked well using zurb's foundation 3, the grid I defined and how that translated as pixels:

void resizeSketch(int w, int h) {
  if (w < 680) {
    size(w, floor(float(w)/680*610) - 30);
    } else size(680, 610 - 30);
}

in your html:

<div class="flex-video widescreen" id="div_p5canvas"
<canvas id="livingmap" data-processing-sources="livingmap_2.pde" style="height:auto; width:auto; focus { outline: 0; }" tabindex="1"></canvas>
</div>

Richella