p5 sketch running fullscreen

robhak · February 2015

how can i setup my p5 sketch running fullscreen in the browser?

KevinWorkman · February 2015

Google "Processing.js fullscreen".

First result: http://processingjs.org/reference/screen/

Second result: http://forum.processing.org/one/topic/processing-js-full-screen-in-browser.html

Third result: http://forum.processing.org/one/topic/true-full-screen-in-processing-js.html

If nothing in any of the above links works, then post an MCVE showing what you've tried and where you're stuck, and we'll go from there.

SteveTiffany · February 2015

I was just experimenting with full screen in p5. This is what I came up with (updated Feb. 27, 2015):

p5 Full Screen Demo

Here's the HTML:

<!DOCTYPE html> <html> <head> <title>p5.js Full Screen Demo</title> <script src="libraries/p5.js" type="text/javascript"></script> <script src="sketch.js" type="text/javascript"></script> <style type="text/css"> body {margin:0; padding:0;} /* remove top and left whitespace */ canvas {display:block;} /* remove scrollbars */ canvas:focus {outline:0;} /* remove blue outline around canvas */ .fs {position:fixed; bottom:20px; right:20px;} #enter {display:block;} #exit {display:none;} </style> </head> <body> <img id="enter" class="fs" src="enter.png"> <img id="exit" class="fs" src="exit.png"> </body> </html>

Here's the sketch:

var viewfs;
var exitfs;
var showing = true;
var waitress;

function setup() {
  createCanvas(windowWidth,windowHeight);
  viewfs = document.getElementById("enter");
  exitfs = document.getElementById("exit");
  background(0);
  waitress = millis() + 10000; 
}

function draw() {
  var currtime = millis();
  var x1 = random(-(width*0.1),width*0.9); 
  var x2 = x1 + width*random(0.1,0.3);
  var y1 = random(-(height*0.1),height*0.9); 
  var y2 = y1 + height*random(0.1,0.3);
  stroke(int(random(255)), int(random(255)), int(random(255))); 
  for (var i=0; i<70; i++) {
    line(random(x1,x2), random(y1,y2), random(x1,x2), random(y1,y2));
  }

  // Show mouse pointer and Enter/Exit FS image when mouse is moved.
  // Hide them 10 seconds after page loads, or 2 seconds after last  
  // mouse movement or window resize. 
  if ((mouseX != pmouseX) || (mouseY != pmouseY)) { // if mouse moved,
    if (!showing) { // and if they're hidden,
      cursor(); // show pointer and relevant image
      if (fullscreen()) { 
        exitfs.style.display = "block";
      } else {
         viewfs.style.display = "block";
      }
      showing = true; 
    }
    if (waitress < currtime + 2000) { // if not in first 10 seconds,
      waitress = currtime + 2000; // hide stuff 2 seconds from now
    }
  } else { // mouse has not moved
    if (showing) {
      if (currtime > waitress) { // they've been visible long enough,
        noCursor(); showing = false; // so hide pointer and images
        viewfs.style.display = "none";
        exitfs.style.display = "none";
      }
    }
  }
}

function mouseReleased() {
  if (mouseX>windowWidth-320 && mouseX<windowWidth-20 
    && mouseY>windowHeight-80 && mouseY<windowHeight-20) {
    var fs = fullscreen();
    fullscreen(!fs);
  }
}

function windowResized() {
  waitress = millis() + 2000;
  if (fullscreen()) {
    resizeCanvas(displayWidth, displayHeight);
    viewfs.style.display = "none";
    exitfs.style.display = "block";
  } else {
    resizeCanvas(windowWidth,windowHeight);
    exitfs.style.display = "none";
    viewfs.style.display = "block";
  }
  cursor();  
  showing = true;
  background(0);
}

And here are the two images it uses:

robhak · February 2015

thanks very much!

SteveTiffany · February 2015

You’re welcome!

For the record, I have now tested the 2/27 update on all the browsers to which I have access.

OS X Mavericks: Works fine in Safari, Chrome, Opera, and Firefox.

Windows 8: Works in Internet Explorer 11, Chrome, Opera and Firefox (but see below).

Windows XP: Works in Chrome, Opera, and Firefox. Of course IE 8 doesn’t even support the Canvas element, so it doesn't work in that.

Windows 8 and XP were running on a Mac using VMware Fusion 5.

In order to get this working in IE 11 in Windows 8, I had to open up p5.js v0.4.2 and add

else if (document.msExitFullscreen) {
  document.msExitFullscreen();
}

near the end of function exitFullscreen() -- after the closing curly bracket on line 2244. I let the developers know on Github about this minor oversight, so they'll probably fix it in the next version of p5.

robhak · February 2015

awesome thank you!

Howdy, Stranger!

Categories

In this Discussion

p5 sketch running fullscreen

Answers