2.6: createGraphics() - p5.js Tutorial

Timestamps:
0:00 Introduction
1:42 Create Two Canvases with createGraphics()
3:45 Use clear() to Make the Extra Canvas Transparent
5:00 Order of Shapes within Draw()

Editing by Mathieu Blanchette
Animations by Jason Heglund
Music from Epidemic Sound

#creategraphics #p5js #javascript

[doxugh]

I realized you were an actually teacher when I saw google classroom on your tabs

[galaxybear]

i am new to coding and a friend of mine who knows coding sayed u are so good i am watching your videos for a while and i can say your videos are the best u are so helpfull to people like me so thank u for making this videos for us

[kranefivem]

hello bro, i am home from dentist, i finished my tooth i'm so happy, i can't wait to watch this video.

[kngjulien_]

Thanks! This is exactly what I needed. I was redrawing a lot of stuff every frame which killed the performance.

[adityaphatak]

I came here from Mike Boyd . Loved your content.

[xerxius]

I am addicted to this series now. can't sleep 😊😊

[StephanMwangi]

Hey!! Thanks for the fun you've shared to me through programming. Having an really good and fun time and aspiring to be a fun teacher like you😁

[sebas]

this playlist has an epic story-time film

[LuizNotari]

Please take a class showing how to draw with Canvas using the mouse over an image, outlining the background image transparently, as if you were going to put a wax paper on an image and outlining the image with the mouse and then filling in that outline with color.
Save the mouse coordinates so that we have parts of the outlined and painted images. It would be the coloring book, copying around and then coloring. Remember when you were a child you used to make an outline in a drawing and then fill it with colors, color the drawing. This would be a very cool project.

[goldthumb]

This trick is so useful. Thanks a lot for sandwiching it in.

[weirdough]

I like these future jumps. Hopefully I will get 2024 in between as well.

[mihaicretu]

well, this one i didn't really get, i hope it will become more clear as i go along <3

[planetdamageofficial]

Hi! Thanks for doing this series of videos, I'm steamrolling through this - learning Javascript and working with Processing to give a very instantaneous visual feedback helps a lot with keeping the motivation. I do have some questions, though! :) 1) createGraphics does remind me of adding a new layer on top of your current graphics layer in any graphics program. Is there a limit as to how many can you have simultaneously on screen? (I bet there's heaps of performance issues after a while!) 2) is layername.clear() the simplest or only way to make your layer transparent? 3) is there a way to set an opacity or a graphic overlay on createGraphics? Thanks muchly and YOU ROCK!

[terracoon]

omg thank you much!! this helped me litterally to sleep, because i was thinking of how to solf this😂

[RSkyCar]

Hello, Daniel! Could you explain, do I have some limitation creating as many layers as I want in a separate files using classes for example? Thank you!

[morelight]

Hope you'll explain the underlying concepts like the basis of computer graphics, the image function, and how p5.js actually generates the pixels and Is p5.js a graphics engine?

[phatakom]

What to do if I want no trails on extra canvas and trails on main canvas?

[LucidProgramming]

Excellent tutorial, thanks for sharing!

[thomasclarke]

Is "let" the new "var"


plz help im new to this stuff

[ashish]

can i do something like preload with createGraphics, as in i wait for some image to load in createGraphics canvas and when that image is loaded, i draw it on the main canvas ?