how can processing.js detect browser's size?

前端 未结 2 1478
伪装坚强ぢ
伪装坚强ぢ 2021-02-09 03:09

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 t

相关标签:
2条回答
  • 2021-02-09 03:54
     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

    0 讨论(0)
  • 2021-02-09 03:59

    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>
    
    0 讨论(0)
提交回复
热议问题