Multiple canvas class

p5.js Development
1

I started using p5.js about half year ago. I wanted two canvases in the first major project I attempted was disappointed to read createCanvas should only be used once. Before learning there were already a couple of ways to accomplish multiple canvases, I decided to create a MyCanvas (for the lack of a better name) class as a learning experience. Unfortunately, that meant having to write new methods to accomplish what already were available for the p5 canvas. To simplify the task I have completely ignored 3 dimensions and webgl. Validation of parameters is normally ignored. Documentation is very limited. But so far I have been able to write new methods for about 60% of the existing canvas methods. Unfortunately, I will have to learn more about p5.js before rewriting many of those left.
There is no need to be concerned about instance mode. Some examples, testing, files, and limited documentation is available at http://brinkje.com/p5js/MyCanvas/ . I am wondering if this of interest and worthy of more effort or if it was just great learning experience.
One treats the new MyCanvas like any other named DOM element. A simplistic example might coded like this:

tvar canvas1, canvas2;
function setup() {
  canvas1 = createMyCanvas(300, 170);
  canvas1.fill(255, 0, 0);
  canvas2 = createMyCanvas(300, 200);
  canvas2.stroke(255, 0, 255);
}
function draw() {
  canvas1.background("FloralWhite");
  canvas1.rect(canvas1.mouseX, canvas1.mouseY,  200, 80);
  canvas2.background("Khaki");
  canvas2.line(canvas2.mouseX, canvas2.mouseY, 250, 120);
}ype or paste code here
1 Like
2

Have you heard of instance mode? It allows you to use multiple canvases. Interestingly, it looks like what you created has a lot in common with how instance mode works!

3

I agree that there are many similarities with instance mode. I learned about it recently but at first it seems a little mystical. Moreover, it seems to be a little bit of a secret. For example, the reference for createCanvas says “If you want more than one drawing canvas you could use [createGraphics] …” But the createGraphics technique doesn’t really give multiple canvases which part of the reason I started this project. At least for people who have used named DOM elements, I think that MyCanvas technique is easier to understand.

4

Thank you for your really good stuff.

5

Thank you for your comment. I would be most happy to hear that you have a good application of it, have any comments or suggestions.

Jim

6

Hi jimbrink,
at the beginning of the year I had some spare time. Looking for videos about FFT (for private teaching reasons) I found Daniel Shiffmans videos and found them great. His book Nature of Code I found interesting as well and wanted to translate some chapters into german language and build a webpage as simple as possible with multy canvases.
I don’t wanted to use these huge CMS systems, so this topics reminds me to look for a good website building system without going away too far from HTML/CSS/JS.

So your multiple canvas topic seems to be a good start for me at the next rainy days.
Thanks
Herby

7

Thank you for your interest. The CanvasClass () has many more implemented functions that MyCanvas and is recommeded. It seems to be a pretty good way to handle multiple canvases in standard p5.js. I have had some success with static WEBGL sketches but normally have problems with WEBGL sketches that are not static. Initial testing suggests that instant mode may be a better way in those situations. I really don’t understand why because CanvasClass is actually based on instant mode but hides it so the user doesn’t need to be concerned with it.

Jim Brink