P5.js: Add a wiki page tutorial about positioning the canvas

[toolness]

Currently, the default canvas created by p5 doesn't have any style applied to it, but @iamjessklein and I aren't sure if this is optimal behavior for beginners. We may be wrong, but it's probably more likely that they'd like their canvas centered on the page?

Of course, we don't want to disrupt the styling of more experienced users, so I wonder if we could do something like the following when p5 global mode initializes itself:

1. Check to see if the p5 canvas is the only visible element on the page.
2. If it is, inject the following CSS into the page:

``` css
html, body {
height: 100%;
}

   body {
     margin: 0;
     display: flex;
     justify-content: center;
     align-items: center;
   }

```

Thoughts? If this is a bad idea, I guess we could just move the above CSS onto a wiki page or something... Or explicitly add a p5 method called centerCanvasOnPage() maybe? Hmm.

[lmccart]

Heh we went back and forth on this for a while at the beginning. We eventually felt that while there might be preferred formattings, it's hard to say what that might be for one user vs another. For example, some users might prefer default browser padding or margin was set to 0 and canvas placed in top left. It also gets further complicated when you add in the p5.dom library and the question of where those extra DOM elements should appear by default comes up. :)

We decided that the most intuitive, least confusing or invasive, and easiest to keep consistent approach would be for everything to append directly to the end of body with no extra css styling. The user is then free to style and position as desired without having to override or deal with any other styling applied without their knowledge.

This also seemed to go along with the idea of transparency that we try to carry through the library. The hope being that if you eventually do things outside of p5, it aligns more closely and seamlessly with default browser behavior, instead of feeling like your safety net fell away abruptly.

Does this make sense? I'm happy to revisit if others have strong opinions otherwise.

[toolness]

Oh yeah, that totally makes sense! Thanks for the explanation.

Do you mind if I make a wiki page? Called "Positioning the Canvas" maybe? It could link to the Intro to HTML and CSS wiki page... and link to it from Getting Started? Er wait, that page seems to have the same content as p5js.org/get-started/... Or if you think it's important enough, we could even make a custom tutorial for it.

[lmccart]

A wiki page would be great! Maybe start there and see if it should become a tutorial? It might also make sense to mention the parent() function as a way of positioning your canvas on an existing page.
This example might help as well, using the position() function: https://github.com/ITPNYU/ICM-2015/blob/master/07_dom/15_position_canvas_resize/sketch.js.

Let's delete the getting started page if it's a replica of the website page (I think it is).

[toolness]

Ok cool, I will do that! I'll just change the description of this issue and assign it to myself so I don't forget about it, if that's cool.

[shiffman]

One thing I'll add to this discussion is we can revisit this question in connection with the development of the p5.js web editor and sharing as there might be a "view" which would involve default canvas positioning. But I agree this is too much magic behind the scenes and what the browser would do by default should be the default. . with a tutorial / etc on how to do otherwise. A good topic for a video maybe!

[toolness]

Ok, here's an initial attempt:

https://github.com/processing/p5.js/wiki/Positioning-your-canvas

Thoughts?

One of the funky things about the tutorial is that it uses mixed (valid, standards-compliant) HTML5 for its sketches, rather than pure JavaScript like most of the other tutorials do. That could be particularly intimidating for readers who are unfamiliar with HTML and CSS. I did link to the intro to HTML and CSS at the beginning of the tutorial in the hopes that the reader would look at that first, but maybe that expectation should be more explicit.

Another thing I'm a bit queasy about is that the tutorial doesn't actually do a lot to actually _explain_ what is going on. It's almost a bit more like "example code snippets" than a tutorial that really teaches the reader something.

[shiffman]

I fixed one tiny thing at the bottom, you can just pass the id directly to parent i.e.

function setup() {
  var canvas = createCanvas(100, 100);
  canvas.parent('holder');
  background('pink');
}

A couple things I would suggest changing:

1. Use numbers like background(255, 0, 200) instead of background('pink');. I think a lot of beginners won't be used to the HTML String colors. Now that I say that, I think maybe I just have old old out-of-date Processing thinking and having the String "pink" is actually good / clear / simpler?
2. Always include createCanvas().
3. I would suggest separating the HTML and JS code into two blocks. Also, perhaps it's bad practice (?) but for legibility I might simplify the HTML and get rid of the meta and DOCTYPE stuff. For example:

<html>
  <head>
    <title>My Sketch</title>
    <script src="libraries/p5.js"></script>
    <script src="sketch.js"></script>
  </head>
  <body>
  </body>
<html>

// sketch.js
function setup() {
  createCanvas(320, 240);
  background(255, 0, 200);
}

[toolness]

Cool, thanks for the feedback and fixes!

The reason I had the HTML be fully self-contained was to make it easy to copy-paste into either a text editor like Atom or an online tool like jsbin. However, I definitely like the legibility of using two separate blocks, so that's cool.

Heh, good question about the 'pink' string. When I teach CSS, I begin with the human-readable colors, because my learners are usually so cognitively overloaded from learning all about HTML and CSS that I want to delay having to teach them about color systems. However, since these are p5 learners, RGB will likely be second nature to them by the time they get to reading this tutorial, so I think you may be correct that 255, 0, 200 might be more familiar to them than 'pink'--especially if lots of other tutorials and code snippets use RGB as well (which I think they do?).

The <!DOCTYPE html> and <meta charset="utf-8"> are actually _technically_ required to make the snippets valid HTML5, but I think it's ok to leave them out for learning purposes.

Surprisingly, the <html>, <head>, and <body> tags actually aren't required by the HTML5 standard--their existence can be implied from other elements on the page--but I think that explicitly putting them in like you did is probably a good idea, since those elements help with the conceptual understanding of HTML (and most people learn HTML by learning those elements first, so pages without them will likely look weird and unfamiliar).

[toolness]

Ok, I fixed things up a bit.

What do you think of having the p5 script tag point to p5 on the CDN? That is, rather than:

<script src="libraries/p5.js"></script>

we have:

<script src="http://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.23/p5.js"></script>

It's a lot more verbose, but I like that it makes it super-easy to copy-paste into any desktop or web-based editor and "just work", as long as the user is online. It's also (hopefully) straightforward for users to replace it with their local copy if they really want.

Alternatively, um, I guess a shorter version could be:

<script src="http://p5js.org/js/p5.min.js"></script>

... but that feels weird, and anyways, it's also the minified version, which won't have friendly debugger and all that stuff. I guess it does make me wish that there were a more memorable and concise URL we could use to quickly load p5 from anywhere on the net, though.

[lmccart]

I think linking to the CDN makes sense.

[lmccart]

I like to use this one, too. It doesn't require any knowledge of CSS / HTML:

function setup() {
  var cnv = createCanvas(600, 400);
  var x = (windowWidth - width)/2;
  var y = (windowHeight - height)/2;
  cnv.position(x, y);
  background(200);
}

Tutorial looks great BTW, thank you!

[toolness]

Sure thing!!

I like that your solution doesn't require CSS/HTML. An additional benefit is that because it's in JS, the reader will likely find it straightforward to tweak the code to position the canvas however they want. For example, moving the canvas to the bottom-right of the page instead of the center is straightforward with your JS snippet, but doing it with CSS flexbox requires reading up a bit on how flexbox works. (And honestly, I find flexbox's property names confusing enough that I have to look at that Complete Guide to Flexbox every single time I want to use it!)

The only thing I might change with your snippet is to also position the canvas in windowResized() function, so that the canvas always stays centered, e.g.:

var cnv;

function centerCanvas() {
  var x = (windowWidth - width)/2;
  var y = (windowHeight - height)/2;
  cnv.position(x, y);
}

function setup() {
  cnv = createCanvas(600, 400);
  centerCanvas();
  background(200);
}

function windowResized() {
  centerCanvas();
}

I think I'll add that as an alternative way of doing things in the tutorial--that way readers will know there are always different ways of doing things on the web, each with their drawbacks/advantages, and they can choose whichever path they want.

[lmccart]

The page is looking great, thanks @toolness! Should I go ahead and link to it from the reference? I am thinking of adding links from the createCanvas() and .parent() entries, are there other places it should go?

[toolness]

Thanks! Sure, I think it'd be great if you could link to it from those entries in the reference... I can't think of any other places it should be linked from.

[danielpferreira]

One suggestion: to mention that the positioning of the canvas requires the p5.dom library (or add it to the HTML sample in that page).

(This is my first "contribution" in github. Please let me know of any mistakes!)

[lmccart]

great suggestion, I've incorporated it here: https://github.com/processing/p5.js/wiki/Positioning-your-canvas