title: Trying to get responsive window and shapes using p5.js
body: <p>I'm making my way through JavaScript tutorials (using p5.js) and was interested in coding a responsive screen with four shapes that scale down and stick next to each other while doing so.</p>
  <p>Is defining a separate variable for y enough, or would it be better to redefine all the shapes by a new set of x and y variables? Window height/width <em>seems</em> like it should be the correct code to use.</p>
  <p>My code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function setup() {
    createCanvas(window.innerWidth, window.innerHeight);
  }
  
  function draw() {
    background(200);
    noStroke();
  
    var labelw = window.innerWidth/8;
    var labelh = labelw/4;
    var sectionw = window.innerWidth;
    var sectionh = window.innerHeight;
  
    // Red
    if(window.innerWidth/2 &lt; window.innerHeight){
      fill(200, 50, 50);
      rect(0, 0, sectionw/2, sectionw/4)
    }
  
    // Blue
    if(window.innerWidth/2 &lt; window.innerHeight){
      fill(50, 50, 200);
      rect(sectionw/2, 0, sectionw/2, sectionw/4)
    }
  
    // Green
    if(window.innerWidth/2 &lt; window.innerHeight){
      fill(130, 230, 130);
      rect(0, sectionh/2, sectionw/2, sectionw/4)
    }
  
    // Purple
    if(window.innerWidth/2 &lt; window.innerHeight){
      fill(190, 100, 230);
      rect(sectionw/2, sectionh/2, sectionw/2, sectionw/4)
    }
  
    // label1
    fill(50)
    rect(0, 0, labelw, labelh)
    fill(255);
    textSize(labelw/10);
    text("Test Label\nTestIdeo, 19xx-20xx",0, 0, 200, 200);
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.16/p5.js"&gt;&lt;/script&gt;
  &lt;html&gt;
    &lt;head&gt;&lt;/head&gt;
    &lt;body&gt;&lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>