in between 2.5 and 3.1.

This is less of a fundamentals of programming concept,

and more of a computer graphics concept.

But it is just, like, being asked to me so many times--

over, and over, and over again--

that I feel the need to add this as a tutorial, here.

So, what so many people are trying to do--

in watching these tutorials and learning

to program graphics in p5--

is have something that you can paint.

Like, draw a trail, or something that layers over time.

But also, something that doesn't have

that trail, that animates without leaving

where it was before.

And, in fact, the true answer to that

is, you know, maybe you would want

to wait until object oriented programming in arrays.

Because later, you'll see some techniques

for doing this where you can just, like, store

all the information.

And store the history of the information,

and draw it, or not draw it.

But for right now, I'm going to show you a technique.

And I actually have a video about this already,

but it uses some fancier things that kind of

aren't at this point, here, in this tutorial series.

You could go look at that other video about create graphics,

too.

But I'm going to show you how create graphics works.

So, this is what I have right now, I'm going to show you the.

Problem this is a p5 sketch, where I want

this square to move around.

But I want it to animate without leaving a trail.

But I also want to be able to paint over this canvas.

And I can't now, because if I click, it draws the circle.

But it's not drawing its trail.

Oh, so I can take the background out and then now,

oh, I can paint.

But oh, now, that.

So either I'm not erasing the background and everything

has a trail, or I'm erasing the background and nothing

as a trail.

So there is a way around-- not around this.

Which is to use something called create graphics.

And we'll create graphics will actually

let me do is basically have two canvases.

I can have two canvases, one with trails, one

without trails.

And the one with trails, like, can kind of, like,

layer on top of the one without trails.

So, I want, like, so here, let's put background back here.

So this is no trails, and this is, here, trails.

Right now, everything is being drawn on this one canvas,

so everything is no trails.

So, instead, I can make a variable.

I'm going to call it, like, canvas two.

It's sort of like our extra canvas.

Maybe I'll call it-- let's just, yeah.

Like, I'll call it extra canvas, very silly,

silly variable name, but let's call it that.

And I'm going to say, extra canvas

equals create graphics 400, 400.

So what this is doing, is just, like, this is create canvas.

It's a little bit weird, like, why don't I

just say create canvas?

Well, you have to use different terminology.

The canvas is only in p5, it's the thing

that refers to the actual thing that you're seeing.

But I want to create an off screen canvas that's

a graphics object.

And so, now, once I have that, I can do things

like say, extra canvas background.

And I'm going to say like, 255, 0 0.

Now, we don't see it, I've drawn this red background, 255, 0,

0 on another canvas.

How do I see that canvas?

Well, the way that I see that canvas

is, by saying, image extra canvas 0 0.

So, basically, this is me drawing the extra [INAUDIBLE]..

But I don't see it.

Why?

Because I immediately drew the background after it.

So let me comment out this background.

Then you say, look the extra canvas

is there, behind the thing that's moving.

This is kind of what we want.

But, I actually want to do this in a different way.

I want the extra canvas to be on top.

I want the extra canvas to come at the end.

Oh, but now I don't see the stuff on the main canvas,

because the extra canvas is covering it.

Well, guess what?

I can actually call a function, instead of drawing

a background called clear.

And what clear does, is it makes that extra canvas completely

transparent.

So, now, I have a completely see through extra canvas

sitting on top of the regular canvas.

And guess what?

What if now I draw stuff to that extra canvas?

Like, I draw the ellipse extra canvas.

So instead of saying just plain ellipse,

I'm saying extra canvas dot.

And the reason why I don't want to put this here,

is this involves some syntax that we're not familiar with.

It's a variable dot a function name,

and this is foreshadowing object oriented programming.

But, for now, you can see I'm drawing the ellipse

on this extra canvas.

And I am going to set the extra canvas to have no stroke,

and the extra canvas to have fill.

And now look at that, I'm drawing a trail ,

and that is not drawing a trail.

Now, let's make this a little bit more

clear, what's going on, just for a second.

Because I want the square to be quite a different color.

So I to make it red, so you can really see it.

And what's interesting about this

is, note, so I'm drawing but no, look, I can draw over it.

So I am drawing over it, so this is sort of like code one, where

I'm drawing over it.

What if I want the red thing to be on top?

Well, no problem, I'll just move this, right?

Actually, all I could do is move the drawing of the rectangle

after I draw the extra canvas.

Let's see if that works.

There we go.

So, now I'm painting underneath.

The background for the main canvas

is still at the beginning, then I layer in the transparent one,

then I layer that.

So what I saw students and people watching this try to do

is try to create, like, a lot of stars.

Even though this video can really be done,

I'm going to have two code examples linked

in the video's description.

I'm going to duplicate this.

I will show you what people were trying

to do instead of painting.

One thing you might want to do is have a lot of stars.

In which case-- if you were using random--

I'm going to take out if mouse is pressed.

And I'm going to say, let star x equal random width, let star y

equal random height.

And, you know, you might have a nicer visual design

than just an ellipse.

But I'm going to star x, star y.

I'm going to draw an ellipse at star x and star

y, that's like 10 by 10.

And then if I run this, oh, look at that.

Why, I totally forgot the thing that I'm doing, right?

This is the thing, I'm drawing all these stars

but the whole point of this is I want to draw them

on the extra canvas.

Extra canvas.

So, now, you see this is a way that I

can layer things up randomly, while something is animating.

By not erasing the background on part,

by erasing the background on part.

So I'll clean up both these code examples

and link them in this video's description.

Hope this, like, answered the question that a lot of you

seem to have right at this part.

OK, see you later.

[MUSIC PLAYING]