1.4: Color – p5.js Tutorial

1.4: Color – p5.js Tutorial


[BELL RINGING] All right, hi. Why is the background pink? That is the question
that I would like to answer in this video. Color. Color is the next thing. If you watched the last
video, you hopefully made some beautiful,
interesting– or not even that beautiful, but
you made your own drawing. And you’re proud of it, I’m
proud of you for making it. Now you want to add color. And you probably looked
ahead to how to do it, and started adding color anyway. But if you didn’t, I’m going
to show you how to do that. Now, before I do that,
I do want to mention some other kind of
logistical things that I’ve kind of
forgotten to mention. So, one thing is, whenever I
create a sketch with the p5 web editor, I’m going to put a link
to that sketch in the video’s description. So you could go down the video
description and click on it. And so, if you go to
the link to the sketch, you’re actually going
to go to a page that’s going to look just like this. It’s kind of the same
code, if you hit play, it’s going to have
the same output. Now, you might not
have the dark theme with high contrast
turned on, so your layout might look a little different. But ultimately, the code
is going to be the same. But you won’t have a Save
option because you’re looking at a project that’s made– that I made in my account,
that I’ve shared with you. So bear with me for a second,
I’m going to be right back. So, I’m back. Now, this is another sketch that
I’ve made for another course. And I’m going to kind of
get to all this stuff, and how all this
kind of stuff works. But, even now, look at
all this complicated code. It kind of might make
some sense to you, right? Oh, line, you know about that. Ellipse, you know about that. Oh, what’s this x and y? This is all stuff
going to get to. But this is a sketch called
Oscillation by natureofcode, which is a different account. So, I can edit this code, right? I could say, like, line
100 and then, oh, it’s doing something
slightly different, I’m not sure what exactly. But there’s no save option,
where’s the Save option? You’re going to want to
go to File Duplicate. And m you’re going to see
that it says oscillation copy by the codingtrain. And I could rename
this, and I could say, oscillation demo
for YouTube or something, and I’ve renamed my sketch. But this is how, when you go
to a sketch that I’ve made, you will come to a page that
says, you know, color example by codingtrain. And you will, then,
do File Duplicate and start writing your own. The truth of the matters is
that the stuff that I’m doing is so simple, you don’t really
need to duplicate my code to keep doing it. But that’s an important piece,
as I go through future videos. I want to mentioned that at
the outset of this video. OK, I’m not going to worry about
that, I’m going to go away. Now, we’re back here. Color. How does color work
on the computer? Yeah, I should have
thought of this before I started recording this video. But I’m going to say it
with three syllables, RBG. Remember this, RGB, RGB. R stands for red, g stands
for green, b stands for blue. The way that you
create a digital color is by mixing some amount of
red, some amount of green, and some amount of blue. So that’s that that’s
where I want to start. But that’s the concept, how do
I apply that concept to function names, and arguments
of those functions? Well, actually, guess what? We have done that already. In here, there is a function
that is talking about color. Background is a
function that draws a solid color over the entire
background of the canvas. And there is,
somehow, 220 sprinkles of red, zero sprinkles
of green, right? RGB, those are the arguments. And 200 sprinkles of blue. And when you sprinkle
that amount of red, and that amount of
blue, you get this pink. But let’s just go with this. What if we take out
all of the blue? You can see that’s pretty red. What if I take out
all of the red? Now it’s black. What if I just put some
really big numbers in here, like, just guess, like, 1,000? Look at that. Now we’ve got white, so
all the colors all mixed together make white. That’s weird, right? Because if you, like,
worked with paint, and you were to mix,
like, a whole lot of paint together, you get this,
like, brown muddy color, get darker and darker. This is the way that the
color mixing is working, here. It’s, like, mixing light. So the analogy, here, is
I have a red flashlight, a green flashlight,
and a blue flashlight. And if I shine all those
flashlights together in the same spot,
they mix together. It’s additive color,
the more we add up all those colors, the
brighter and brighter it gets. But, actually, this
is kind of wrong, the fact that I’m
putting 1,000 in here. So the idea, here,
is we’re sprinkling a certain amount of red, and
a certain amount of green, and a certain amount of blue. And by the way, there are
other ways to set color, but I’ll get to that. This is not the only way,
because some of you watching, are like, I heard
something about HSB color. And there’s all sorts
of other ways to do it, but this is the
fundamental, basic way. The amount that I can
sprinkle has a range. No red, none more red, is zero. The maximum amount
of red is 255. By the way, how many numbers
are there between 0 and 255 if you keep the 0? 0, 1, 2, 3, 4– it’s 256. Again, we’re back to this
weird counting from zero thing. So there’s 256
possibilities, 0 through 255. So, now, let’s come
back to this and see. All right, let’s go
back to zero, 0, 0, 0. Let’s do 255, we can
see that it’s blue. Let’s do 100,000,
it’s the same blue. So p5 is kind of
smart enough to know when you call the
background function, if you by accident put a number in
there that’s bigger than 255, just consider it 255. Now, you can customize
those ranges for yourself, and there’s reasons why
you might want to do that. Again, I’m going to
come back to that, you can look up the function
color mode for how to do that. But let’s just stay with
the default, a red, a green, and a blue. So, I’m not really very
talented visual design wise. So I’m not going to
talk to you about how to pick beautiful colors
that work well together. You’re going to have that
talent yourself, I bet. Or you might find
some other resources. But this is how it works, RGB. One thing you
might notice s, did you notice how when they
were all zero, it was black, and they were all
255 it was white? What happens if I make
them all, like, 100? It’s, like, this gray color. When r equals g equals b, when
the red, green, and blue values are all equal, this is something
known as grayscale color. Grayscale color is
a color, saturation is a term, its desaturated,
it’s a color but it’s gray. 0 through 255, zero being
black, 255 being white. For shorthand, all of
the color functions– and there’s more of them– allow you to, if you want
to do a grayscale function, you can skip having more three. And you could just use one. So if you put one argument
in the background function, you’re assuming a
grayscale color. Let’s make note of
this because there are a lot of different ways. So let’s assume that there’s
some type of color function, right? Background being the one
that we know right now. If it has one argument,
this is grayscale. If it has three
arguments, this is RGB. And you can make a gray color
with the RGB being equal, but this is the way that you
can call any color function. Now what other color
functions are there? Let’s go to the p 5 reference. I don’t know why I don’t
have that open anymore. Let’s look for color. Oh, look at those, so many
things, so many things, setting, setting, oh. So there’s a lot of stuff about
creating and reading color, and a definite good to
come back to that stuff. This is really what we
care about, setting color. So now you want to
make your new sketch. Your next assignment is to
use any and all of these. Stroke, no Stroke, no Fill,
Fill, maybe colorMode clear. Background. So, background we know about. I clicked on it by
accident, but that’s nice, we’re looking at the reference. But Fill and Stroke
are the next concepts that I want to talk about. So what are the
color functions– don’t use my fingers. So color functions could
be background, that’s one. Here’s another one, Fill. Here’s another one, Stroke. If this is our canvas and
the shape we chose to draw is an ellipse– with the
ellipse function– Fill describes the
interior of that shape. Stroke describes the
outline of that shape. So let me show you
what I mean by that. If I come back to the
editor, and I’m going to get rid of the line. And I’m just going to stay
with just this rectangle, leave background at 100. What I want to do is, right
before I draw the rectangle, I’m going to say Fill, and
I’m going to say, 0, 0, 255. Look. I should show you about
the console on errors, I can’t believe I haven’t
shown you about that yet. All right, look at
this, it’s blue. The interior of
that shape is blue. Now, what’s the outline? It’s black. So by the way the default
Fill in p5 is white. And the default stroke
outline is black. But I could now say,
stroke 0, 255, 0, and I’m already driving myself crazy
with my inconsistent white space. And we can zoom in and see the
outline is now a green color. So the interior,
the Fill, is blue. The outline is green. What if I were to do another
shape, like an ellipse, and put that at,
like, 50,50, 100, 75? Oh, look, it’s also
green on the outside, and blue on the inside. What if I want that ellipse
to be a different color? What if I put, like, down
here, Fill 0, 255, 0? That didn’t work. Why didn’t I work? I’m saying Fill
green that ellipse. Well, order, order,
remember order. The ellipse, let’s
move the ellipse over, you see how the ellipse is
on top of the rectangle? It’s because it’s
drawn after it. But you need to set the color
of what you’re about to draw. Notice how Fill and Stroke are
right before the rectangle. Well, that’s set to blue,
that’s set to green. The ellipse is still picking
up that Fill and Stroke. It’s like you’re saying hey,
computer thing that’s drawing the stuff, pick up this pen. And I told it to pick up this
green pen for the interior. I meant to make it red, but
I told it after it already drew the ellipse. So let’s make this
red, because that’s what I wanted to demonstrate. But if I go, and I
take this, and I put it before it, suddenly, it’s red. So, look at that. So I kind of want
to group things. The idea here is I can make
a stroke that’s like, 255, so that’s just using
grayscale color. So you can see, like, oh,
the interior here is blue, the outline is green,
the interior is red, the outline is white. There we go. You probably have
a lot of questions, ask them in the comments. There’s a few more things I
need to cover in this video. Why– why, why, why– when we looked over
here in the reference, is there a no Fill
and no Stroke? And by the way, I encourage
you to go and look at these reference
pages, and read them. Because you’ll find the things
that I’m explaining to you are explained there, and
probably more clearly. And it also has examples. Why is there no
Fill and no Stroke? Well, you might think
to yourself, oh, what if I don’t want this
circle to have an outline? No outline of that
circle, please. Oh, I’ll just put
zero in here, right? Zero must be like, no outline. But, remember, zero
is not no outline, zero is an outline
that is black. And this is why,
instead of Stroke, if I say no Stroke, then,
suddenly, there is no outline. So no Stroke means no outline. And I could say, also, instead
of Fill, no Fill means no Fill. Look at that. So I’m just seeing the
background color come through, because I’m only drawing
the outline of that shape. Now I’m going to go back
and put the Fill in. And I realized there’s
a few other things I want to talk about. OK, so remember I said
there were lots of ways? Guess what? There is another way. I could have– 1, 2, 3, 4– I could have four. So RGB is not the whole
picture, there is also RGBA. And a stands for
something called alpha. Alpha is a word
for transparency. Meaning, is the
color see-through? What does that even mean right? Transparency. So by the way, the
same range, right? 0 to 255, for the a. 255 is the default, meaning,
that color is just all there. Another word, by
the way, is opacity. So this idea of kind of
making the color a little bit transparent, so it’s a
blend with what’s behind it. Now, of course, this
is all about just creating the illusion of that. There is no blending
of the colors, nobody painting your computer screen. It’s just a single pixel
with a certain color. But p5 knows that if you
wanted to appear transparent, it knows what colors
behind it, and it can figure out how to
make that illusion happen. So for example, if we come over
here, for this ellipse, right? This ellipse that’s red, if
I were to say comma 255 here, nothing has changed. I’m adding that alpha value. If I put zero, there it’s gone. It’s fully transparent,
I can’t see it at all. If I make this
100, look at that, you can see how it
sort of looks light, and it’s blending with the
background, and blending there. So maybe I want to just
give it a little bit more– 175– and you can start
to see that there. So this is something you
can play with, transparency. So just to finish
this whole thing off, I can have one
argument for anything. Background, Fill, and Stroke
is a grayscale color, 0 to 255. Three Arguments is an RGB
color with 100 percent opacity. It is fully opaque, it is
not at all transparent. If I add the fourth
argument, I get an RGB color with some amount
of transparency. And by the way, if I
just use two numbers, then I’m having grayscale
with some alpha. So it’s a grayscale
value with some alpha. So that’s important
to know as well. So those are all of the options. Now, what is your assignment? If you’re watching this and
you’re going to make something, take your drawing
and give it color. Fill it with color,
set the background, set the Fill and Stroke
of different shapes. I’ll give you one more
little treat, here. If I add a function
called Stroke Weight, this is a function that’s
not setting the color. But you know how I’m
trying to show you that the outline of
this is like, red? I can’t even see
it, that’s weird. Let me make it blue. Oh, you know why? Because I put this. Oh, I have so much
more to show you. That the outline is blue, but I
have to, like, zoom all the way in to show it to you. What if I add this thing
called Stroke weight? And I just put the
number one in there. What that number one
means is the outline of a shape is one pixel wide. It’s a thin, one
pixel wide outline. I could make that eight, and
suddenly, it’s much thicker. And, you know, I can zoom
in just to show this to you. I could be sort of insane and
make this like, 24 or 105. You know, it’s only, like,
the stroke is, like, wider than the actual shape, itself. But the point is just to be
able to– if you want to adjust the width of that outline– that’s something you can do
with the Stroke Weight function. Thanks. So, what I want to do
is show you something about code comments and errors. This is really
important, I’ve kind of been skipping over that. I’m going to do that, I’m
going to make a video really about that, separately,
with the p5.js web editor. And that will be
coming next, OK? So, you probably I watched it
before you do your project, or afterwards, whatever. But that’s going to
help you a little bit. Just kind of keeping things
organized and managed, OK? So I’ll see you soon. [BELL RINGING] [MUSIC PLAYING]

90 thoughts to “1.4: Color – p5.js Tutorial”

  1. So crazy. I was going back in these videos to try to figure out the atom command for launching a p5 sketch in Chrome and all the vids disappeared and now you are using the web edition.

  2. Hey, what if i have differents shapes like your example and i want to make the ellipse just transparent where the ellipse and the rect meets, like the intersection of the shapes.

  3. I am glad you could join me today for the 'joy of coding'. With this coat of Liquid White, you can blend RGBA colours right on the Canvas.

    The sky is phthalo blue, the clouds are titanium white, the grass is phthalo green, the happy little tree is phthalo green, Midnight Black, Van Dyke Brown and Dark Sienna.

  4. Might be nice for it to say who you copied the sketch from, so you can find the original again (and other stuff by that person)

  5. I have already learned JavaScript now i have started learning p5.js with you… thank you so much for these videos… P5.js is easier than canvas HTML5.

  6. Is there a way to fill under a line, i know i could also just draw a rectangle and fill it the color i want. But i would love to know if its possible to just draw a line in the middle of the canvas and change the color under that line.

  7. I'm having a problem. Whenever I type
    noStroke();
    It removes all the strokes in all the shapes after this line. Is there a way I can undo or remove this function after a few lines or something

  8. Hi, Dan. Thanks for all your videos i have good teacher after a long time. its been now easier with friendly environment doing code with you. i don't know if i should do or not. but i want to say something. You are good teacher at YouTube. I want to request something to you i am struggling for. I have problem working with multiple api at p5. I would be very thankful to you if you would hear to my request and add another video to api playlist? actually i am working on something like trivago.com

  9. https://editor.p5js.org/swuggles/present/EGWY485b3
    Can you tell me why my noStroke is removing the stroke from all shapes? I think I have the order correct. This is the first code I have ever written.

  10. First and foremost, I really enjoy your programming tutorials and teaching style. I took an opportunity to make a basic circle picture using different colors, strokes, and sizes. https://editor.p5js.org/raiderProgrammer/full/T36YiCD1V

  11. Thanks for the lessons, I started to train and use the editor today, this is my first training "https://editor.p5js.org/DavidAlves/present/ZmKXpvf99" hahaha a robot;

  12. Hey! I made a house with p5.js. (I feel so accomplished) https://editor.p5js.org/ari.js/sketches/Z6Qd2Pmzx

  13. Thanks man!Your enthusiasm is sooo motivating. Like, after I see you telling me to do a drawing with all that joy I feel like If i don't do it im the scum of the earth,haha!Thanks!

  14. Why did the rectangle turn red at 12:42? Fill is written after drawing the rectangle…? Or is it because draw function loops over and over again? I guess I answered my own question lol

  15. If i am learn p5.js what is the benifit?
    i am looking for strong in javascript.but p5.js is help for this?

  16. Hi, I'm Brazilian. I saw your course. I like to use as base to my course for public school children. You inspire me. I will start witch Scratch from MIT, maybe some game platform (construct3, stencyl), then your course. I do not really know the right way. I will be a volunteer but I hope it evolves into a small school in my town.

  17. There cannot be a better way to learn this than right here on the Coding Train! Every word is rapturous and in a code learning environment that is unheard of. I am on my way and look forward to all the future coded creations.

  18. function setup() {
    createCanvas(400, 400);
    }

    function draw() {
    background(0, 255 , 255);

    rectMode(CENTER);
    rect(200, 200, 200, 50);
    rect(300, 200, 100, 100, 0, 50, 50, 0);

    line(340, 200, 355, 200,);
    line(355, 200, 365, 195);
    line(365, 195, 375, 205);
    line(375, 205, 385, 195);
    line(385, 195, 395, 205);
    line(395, 205, 400, 200);

    circle(100, 150, 120);
    circle(100, 250, 120);

    }

  19. https://editor.p5js.org/ROB/sketches/WLXA-r7fe

    and Windows, jeje
    https://editor.p5js.org/ROB/sketches/uVK_a5Q_X

  20. Hey man, 10ku, I did knew NOTHING about p5.js, i didn't knew anything about js to say the true.
    I did this
    function setup() {

    createCanvas(600, 400);

    // put setup code here

    }

    function draw() {

    background(0,125,55);

    fill(250,255,0);

    stroke (250,255,0);

    strokeWeight(2);

    quad(300,0,0,200,300,400,600,200);

    fill(0,0,258);

    noStroke();

    circle(300,200,250,250);

    // put drawing code here

    }

    to thank u.

    Keep teaching man.

Leave a Reply

Your email address will not be published. Required fields are marked *