p5.js-website-OLD icon indicating copy to clipboard operation
p5.js-website-OLD copied to clipboard

In Reference examples, surface the size of the canvas

Open iamjessklein opened this issue 9 years ago • 5 comments

As someone new to reading through documentation, it can be challenging to understand how to conceive of the space of the canvas. It might be helpful to surface this information on hover or toggle via a small grid-like approach. Something like this:

canvas-size

iamjessklein avatar Feb 27 '16 20:02 iamjessklein

I think this is a great idea--not just for beginners, but even for experienced coders who understand coordinates but just don't know how big the example canvas is.

It might possibly look a bit noisy/redundant if the page has lots of separate examples; if it does, maybe we could just display the grid for the first example?

Oh, I guess it might also be a bit useless for the examples that don't do anything with coordinates, but I'm not sure how many of those exist. But it might be worth exploring whether we can turn the functionality off for certain examples, if it's deemed not-so-useful.

toolness avatar Feb 27 '16 20:02 toolness

One way to get to a proof of concept here would be to prototype a few simple little interactions here. I'm happy to do that.

iamjessklein avatar Feb 27 '16 20:02 iamjessklein

I love this idea! If you want to prototype a few examples, that'd be wonderful. @toolness makes a good point, maybe it's worth also prototyping an example that doesn't related to the grid to see if it still feels ok or if we want a disable mechanism.

lmccart avatar Feb 28 '16 16:02 lmccart

:+1: We could try a toggle or hover state to see if that would work.

iamjessklein avatar Feb 29 '16 18:02 iamjessklein

yeah i think the hover could be a great idea, because it keeps things looking simple and doesn't add visual complexity unless you want it. looking forward to seeing what you come up with.

lmccart avatar Mar 01 '16 00:03 lmccart