Placeholder Image

字幕列表 影片播放

  • Hello, here I am from the future to insert a video here

  • 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]

Hello, here I am from the future to insert a video here

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

2.6: createGraphics() - p5.js教程 (2.6: createGraphics() - p5.js Tutorial)

  • 2 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字