Showing my P5 sketch with a projector

p5.js Project Guidance
1

Hey, I have a p5 project that is in a square format (800X800)
I want to project it on a wall. How can I do that that it will be only shown the sketch? (without my browser tool Bar or something)
Thanks :smile:

1 Like
2

Hello @Omri,

I was able to center the sketch on the page with CSS:

sketch.js:

function setup() {
  var cnv = createCanvas(800, 800);
  background(255, 0, 200);
}

function keyPressed() {
    let fs = fullscreen();
    fullscreen(!fs);
}

style.css:

/* style.css */

html, body {
  height: 100%;
}

body {
  margin: 0;
  display: flex;

  /* This centers our sketch horizontally. */
  justify-content: center;

  /* This centers our sketch vertically. */
  align-items: center;
}

References:
https://p5js.org/reference/#/p5/fullscreen
https://github.com/processing/p5.js/wiki/Positioning-your-canvas

image
image1920×1199 16 KB

:)

4 Likes
4

Thanks, @glv. This, of course, works really well for a page that contains a sketch as its sole content.

I must admit having been skeptical regarding whether it would also work similarly in the p5.js Web Editor. Happily, it works in that context as well. :smile: It must be that I don’t fully understand specifically what in your example code enables it to push all the other content on the page aside, including the editing pane and the console, in order to display only the sketch itself.

1 Like
5

My example code is from the wiki page and I added fullscreen().
This combination worked at my end.

There are additional links in the wiki page to peruse.

:)

1 Like
6

Thanks! :slight_smile:

There’s lots of great material there, including your contribution.

1 Like