title: Make p5.js canvas responsive for mobile
body: <p>I'm having troubles resizing the elements of my p5.js sketch for mobile and big screens.</p>
  <p>In particular I'd need the white circle reacting to the sound and the obj to shrink when on mobile and to scale when on big screen. Furthermore, I'd need the info appearing when on hover on the play button to slightly move right - in order for them not to be covered by the button copy, when on mobile.</p>
  <p>I tried using Media Queries With JavaScript, but it didn't seem to work.</p>
  <p>Here's the sketch's editor:
  <a href="https://editor.p5js.org/c.b/sketches/yeGBMr1PD" rel="nofollow noreferrer">https://editor.p5js.org/c.b/sketches/yeGBMr1PD</a></p>
  <p>Any thoughts? Thanks!</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>var song;
  var button;
  var amp;
  var canvas;
  var showInfo = false;
  
  let angle;
  let extraCanvas;
  
  let kitten;
  let train;
  
  
  function preload() {
    kitten = loadImage('kitten2.jpg');
    train = loadModel('train-corrected.obj');
  }
  
  function windowResized() {
    resizeCanvas(windowWidth, windowHeight);
  }
  
  function setup() {
    canvas = createCanvas (windowWidth, windowHeight);
    canvas.position (0, 0);
    canvas.style('z-index', '-3');
    song = loadSound('yume.mp3', loaded);
    amp = new p5.Amplitude();
    background('#F4EDED');
    extraCanvas = createGraphics(windowWidth, windowHeight, WEBGL);
    extraCanvas.clear();
  }
  
  function loaded() {
    button = createButton('Play');
    button.mousePressed(togglePlaying);
    button.mouseOver(onMouseOver);
    button.mouseOut(onMouseOut);
    button.position(15,15);
    button.style('background-color', '#F4EDED');
    button.style('color:#E21118');
    button.style('font-size', '1.9em');
    button.style('border', '0');
    button.style('background', 'none');
    button.style('outline', 'none');
  }
  
  function draw() {
    //sound reaction
    background('#F4EDED');
  
    var vol = amp.getLevel();
    var diam = map(vol, 0, 0.3, 360, 500);
  
    fill('#FFFFFF');
    noStroke();
    ellipse(width / 2, height / 2, diam, diam);
      if(showInfo) {
        let s = 'Yume Miru Kokoro by Riki Miyagawa, \nJapan 1934. \nThis could loop all morning.';
        fill(50);
        text(s, 105, 20, 250, 80); // Text wraps within text box
    }
  
    // obj
  
    extraCanvas.ambientLight(30);
    extraCanvas.directionalLight(255, 255, 255, 0, 80, 15);
    extraCanvas.directionalLight(255, 255, 255, 0, -180, 5);
    extraCanvas.directionalLight(86, 54, 2, 0, 0, 1);
    extraCanvas.noStroke();
  
    extraCanvas.push();
  
    extraCanvas.rotateZ(frameCount * 0.003);
    extraCanvas.rotateX(frameCount * 0.005);
    extraCanvas.rotateY(frameCount * 0.003);
  
    // Rotate in direction of mouse
    let posX = width/6;
    let posY = height/6;
  
    let angle = Math.atan2(mouseY-posY, mouseX-posX);
  
    // Rotate on MouseDrag
    /*let angle = 0;
  
    if (mouseIsPressed) {
      angle =  atan2(mouseY - height / 2, mouseX - width / 2);
    }*/
  
    extraCanvas.rotateX(angle);
    extraCanvas.rotateY(angle);
    extraCanvas.rotateZ(angle);
  
    //extraCanvas.translate(-100, 0, 0);
    extraCanvas.clear();
    extraCanvas.texture(kitten);
    extraCanvas.model(train);
  
    imageMode(CENTER)
    image(extraCanvas, width / 2, height / 2);
    //image(extraCanvas, 0, 0);
    //extraCanvas.imageMode(CENTER);
  
  
    extraCanvas.pop();
  
  }
  
  function myFunction(x) {
    if (x.matches) { // If media query matches
      document.body.style.backgroundColor = "black";
    } else {
     document.body.style.backgroundColor = "pink";
    }
  }
  
  var x = window.matchMedia("(max-width: 550px)")
  myFunction(x) // Call listener function at run time
  x.addListener(myFunction) // Attach listener function on state changes
  
  function togglePlaying() {
    if (!song.isPlaying()) {
      song.play();
      song.setVolume(0.3);
      button.html('Pause');
    } else {
      song.stop();
      button.html('Play');
    }
  }
  
  function onMouseOver() {
    showInfo = true;
  }
  function onMouseOut(){
    showInfo = false;
  }</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html, body {
    margin: 0;
    padding: 0;
  }
  canvas {
    display: block;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
    &lt;head&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.js"&gt;&lt;/script&gt;
      &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/addons/p5.sound.min.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" type="text/css" href="style.css"&gt;
      &lt;meta charset="utf-8" /&gt;
  
    &lt;/head&gt;
    &lt;body&gt;
      &lt;script src="sketch.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>