What is the difference between createGraphics() and createDiv()

p5.js Beginners
1

the code as following

let pg, div;

function setup() {
  createCanvas(400,400);
  pg = createGraphics(400,400);
  div = createDiv();
}

function draw() {
  pg.rect(50,50,50,50);
  pg.fill("red");
  pg.noStroke();
  image(pg, 0, 0);  // it works, the rect appears

  div.size(400,400);
  div.position(0, 0);
  div.style("background","yellow");   // it works, the div appears

  div.rect(40,40,40,40); // Error: div.rect is not a function

I am very confused about the instances pg and div, what is the difference between them. In my opinion, the pg just like the Layer in Photoshop, we can draw something on it, and if we have a serval of pgs, they are in order, but it seems that the pg has to be rendered every time we draw somthing on it, in other words, if we have called image(pg, 0, 0) (the only way to render the pg?), the pg can’t update automatically even though we draw on it again unless we call image(pg, 0, 0) again manually. So it is impossible or difficult for me to ceate dynamic design with pg. And for div, how can we draw something on it, or it is just like pg?

Looking forward you guys reply, thanks so much :wink:!

PS: Why not give us learners the complete properties and methods for each Object, the [Reference] (reference | p5.js) is just something scattered, not systematic.

2

Hi,
you understood quite well what does createGraphics : it is a layer on which you can draw additional stuff on it. It actually creates one more canvas uppon the original one.
Why would be difficult to have dynamic design with it ? You only need to call the function image() at the end of your modifications as you said, in the draw or elsewhere. (You just need to call it once by frame)

createDiv manipulates the DOM (= the HTML of the page), so it does not affect your p5 canvas. If you want to use it as a drawing space, you’ll have to create another canvas in this div.

You can check the complete properties of p5 objects, search p5.[object] on the reference page. In your case : reference | p5.js

1 Like
3

Hi! Just to add a bit more background - they may share similar ideas in terms of “containing” graphics but p5.Graphics and div are completely different things. p5.Graphics is so-called off-screen buffer and only exists in the memory. As you pointed out, it only shows up when you use image() [1], and it won’t updated - imagine p5.Graphics like a stamp.

On the other hand, div is rather a “concrete” element on an HTML page. As the name is from division, div is used for dividing a page for layout, and it can contain text, images, canvases (including p5 canvas), videos and so on (you can attach them with parent function). You can effectively “draw” with div using css properties like border and background-color like you did, but it has nothing to do with p5.js functions, because this is happening outside the canvas, and p5.js is only “helping” the browser draw a div. If you are interested in HTML and CSS, take a look at “developer tool” on your browser so you can how HTML pages are rendered.

And finally, thank you for the suggestion on the website! Can you elaborate a bit more - do you mean there should be categories for each classes like p5.Graphics and p5.Element ? Or is it confusing that CSS styles are not included in the reference? I can open an “issue” on github as feedback. But note that maintainers are mostly volunteers and it’s not their full-time job, so please be nice to them :slight_smile:

[1] which is not true in webgl mode as you can pass it as a texture to a shader.

4 Likes
4

Thanks so much.
After checking carefully, I find that I put the pg.background(200) in the function draw(), that is the reason why I can’t save my previous drawing in the canvas, instead we should put it in the function setup().

1 Like
5

Thanks very much for your thoughtful reply :wink:.
As you have said, p5.Graphics is based on p5.js, and div is the same div in Javascript(previously I thought the div is wrapped in p5.js, that is what making me confused), div and canvas are both elements in Javascript. Maybe I have understood.

By the way, I am very grateful to the creators and maintainers of p5.js, becuase p5.js is so wonderful that can make all the people join in programming and design, and it is based on web, so crazy!!! However, I think the document could be friendly more for newbies if we can add the logic behind p5.js, for example, the p5.Graphics is based on the same thought as the Layer in Photoshop, but the reference | p5.js doesn’t tell it at all. In my opinion, the description " add one layer on canvas to draw something on it just like Layer in Photoshop" is better than “thin wrapper around a renderer, to be used for creating a graphics buffer object”, the former is what we can imagine easily, but the latter is so abstract. I think the current reference | p5.js is not the perfect material for us learners to learn p5.js, as I said before, it is scattered, it should be used for reference(just like the name) rather than systematic learning, learning should be based on logic rather than scattered skills. Maybe you think that the reference | p5.js is user-friendly enough, but please keep in mind, the p5.js learners are mostly newbies in programming, so it is better to write document from their perspective, analogy is a good way.

PS：I will be so sorry if there is any offence in language, but it is not out from my heart, just because of the difference in language(English is not my native language).

2 Likes
6

thanks for the comments! I appreciate it and I will forward to the contributors :slight_smile: One point is that while the reference should be beginner friendly enough, it is not an exhaustive material for learning. For example, you already know Photoshop but not everyone does, and having a clear language for explaining a function/class is very tricky in a single page of document. That should be complemented by tutorials and examples.

1 Like
7

Yes, I am so agree with you, that is the meaning of Reference. My point is that maybe we can add one tutorial which tells the logic bebind p5.js for learners :grinning:.

8

thanks again! I posted an issue, and if you have any comments feel free to continue on github (I recommend to post feedback there instead of this forum because most of the contributors are not active on this forum)

1 Like
9

Thanks so much to post an issue. I will follow it :wink:.

10

I have post it on github issues, but no one replys yet, so I post it here for the answer as soon as possible.

Yes, we have to acknowledge that the reference | p5.js is user-friendly enough for most of the functions, such as line(), push(), pop(), clear(), but at least for p5.Element, it is not clear enough.

For example

let cv, pg, div;

function setup() {
  // canvas, graphics buffers and the HTML elements are included in p5.Element
  cv = createCanvas(400, 400);
  pg = createGraphics(300, 300);
  div = createDiv();  // confusion(1): why can't set width and height like createDiv(200, 200), the other two can do it

  // confusion(2): there are at least 3 ways to set background( or other properties) for canvas, but not the same for graphics buffers and the HTML elements.
  cv.background("red");  // it works
  cv.elt.style.background("red");  // it works
  cv.style("background", "red"); // it works

  pg.background("yellow");  // it works
  pg.elt.style.background("yellow");  //  it can't work
  pg.style("background", "red");  // it can't work

  div.background("blue");  // it can't work
  div.elt.style.background("blue");  // it can't work
  div.style("background", "blue");  // it works
  div.background("yellow");  // it can't work 

  div.size(200, 200);
  div.position(0, 0);
  image(pg, 0, 0);
}

the reference | p5.js describes the p5.Element as “Base class for all elements added to a sketch, including canvas, graphics buffers, and other HTML elements. It is not called directly, but p5.Element objects are created by calling createCanvas, createGraphics, createDiv, createImg, createInput, etc.” So why some methods can be used for createCanvas(), but not the same case in other objects, their performance is not consistent. If they inherit from other different classes, not just the base class p5.Element, maybe the reference should point out.

That is the reason why I suggest to add one tutorial to explain the logic behind the p5.js, at least one chapter for p5.Element.

11

it works but it’s not “painting” the canvas. It’s setting the CSS property instead.

The confusion is coming from the fact that you are mixing up two components - canvas and HTML. They share some similar attributes and names but they have completely different concepts. Canvas is a feature of HTML, where you can use functions to draw on, like literally a canvas. p5.js makes it easier to draw (with simple functions like line and ellipse), and everything will result on the canvas. p5.Graphics is part of the canvas (let’s say it’s a spare canvas) and it only lives in the canvas.

On the other hand HTML is a markup “language”, how you code a webpage. You can use layouts like div, lists, tables, anchors, images and so on. When this information is retrieved, the browser renders the result to make a visual representation of the HTML. And HTML comes with CSS to style - to add borders, background colors and so on. They have their own language and rules, which have nothing to do with canvas (in fact they have, because canvas is part of HTML). What makes it confusing is that HTML is not always static. You can use JavaScript to add divs, images after the page is loaded. This makes web powerful to create interactive pages. p5.js has helper functions to do this - like adding divs and change it’s color.

The challenge is that p5.js makes it easier to access HTML, but still you need to learn the language of HTML and CSS to make use of it. This is beyond the scope of the “core” of p5.js, and I would say that this should be clearly stated in the reference. You used background attribute of CSS to change color, but there are bunch of other attributes like border, shadow, animations and so on, which are completely irrelevant of what you draw on the canvas.

An analogy can be (I don’t know if it is good though) that HTML is a park and canvas is a sandbox. You can play with sand in the sandbox but you cannot apply to how you play with a swing or a slide. But the sandbox actually exists in a park.

12

Thanks for your reply.

However, I think you have misunderstood my meaning.

My point is that the p5.Element is the base class for canvas, graphics buffers and other HTML elements, just like the description in reference | p5.Element, it means that they should have the same properties and methods( in deed they are not), unless they also inherit from other classes individually( but the reference don’t tell it at all). That is what confused me.

13

I see. In that case you may be confused with inheritance. p5.Element is the base class. It offers functions like parent, id, style. Canvas (p5.Renderer) inherits p5.Element. Thus a canvas has access to what p5.Element offers. Moreover, a canvas has extra functions specific to canvas (e.g., background, line, etc). It doesn’t mean that p5.Element has access to background or line.

And for example, p5.MediaElement is another class that inherits p5.Element. It also has access to parent, id, etc. that is offered by p5.Element. However, it does not have background or line, because it doesn’t inherit p5.Renderer.

14

Ok, thanks for your reply continuously, and all your answers help me a lot. Now I have realized that maybe the problem is from me, I don’t have a thorough understanding of some concepts in programming, so next step I will learn by reading books and online tutorials, instead of asking question nonsensly.

Also thanks other people for helping me :grinning:

2 Likes
15

no problem and we are all here to learn :slight_smile: if you have further questions feel free to post on the forum!

2 Likes
16

We are happy to help. There is no need to be uncomfortable about asking questions. It is an important part of the learning process. :smile:

2 Likes