Hello again.
So we're going to continue our sessions.
In this session, we're going to be starting to look at how do we use these
data structures in a way that they're kind of useful.
We are going to be building a color palette, which is a series of colors that
have good relationships, synergies, if you think of them like that with each other.
But in order to do that, we need to learn a little bit about how processing
can help us manage color and understand color a bit further, all right?
So we're going to learn a little bit about hexing operations.
You probably are familiar already with the notation of color through an RGB notation,
which is red green blue notation, and that requires three colors, right?
So in this example, we have a series of colors,
all of them with their RGB notation.
But we can also use this hex notation, which is very difficult to remember in
a way you wouldn't intuitively come to it, but it's incredibly useful.
If you want to reference a color with a single variable, all right?
You will actually see this hex color quite a bit.
As a matter of fact, let me just take you to a website,
this is a website that I really like, which is colors.co.
Here we have a website that will actually help you find and
explore different color palettes, right?
And if I press space, I can just flip through these color palettes and
I can actually use values as color references for my colors, right?
That would be a very quick way of picking the color as opposed to
remembering three ingredients like the RGB, right?
So we're going to try to create a color palette, but first,
let's see how the hexing and unhexing operations would really work.
How do we kind of convert this kind of hexadecimal notation to
something that we can use within processing?
So let's get started with that.
We're going to start here in processing,
and the first thing we want to do is,
as we traditionally have done.
Let's just do a setup and let's do a window of 1200 by 1200 and
make sure that the window is appearing.
Maybe this is too big right now, let's just do 1200 by 600 and
we can do a background of traditionally we would do a color here so
we could say 255, 0, 0, and that would be red color.
So we can start, we are using RGB as our first and
most intuitive way of perhaps addressing color in code.
But let's look at different options, right?
So let's create a variable that we're going to represent as our rgb_color.
So rgb_color would be something
like the color 255, 0, 0, right?
So that's the way you would use a variable for color.
So the same thing, we're just making it a little bit more explicit here,
that color, it's a variable, but we can actually unhex or hex that color.
So let's just see the hex value, which is the hex decimal notation of that color.
So we could say hex_color = hex
parentheses rgb_color, right?
Let's print out the result of that operation.
We're going to maintain the background with the red color, but this time we're
actually printing to see what is the outcome of this operation here, right?
So let's print that, and you see, we're seeing something
quite similar to the notation that we saw on the website, right?
Down here in the console, we're starting to get a version of this color,
a representation of that color through it, hexadecimal notation, right?
So that's going to be really useful, to convert the color into that format.
What we actually need is to do the opposite,
it's like if we have this format, we need to unhex that property, right?
Into a color that we can actually use, right?
So let's just go to that website again and pick one of the colors that we like,
let's pick this color here, it's a mandarin color.
So if I click on it, it's just going to automatically select that value for me.
If we want to keep it as a comment, we can just remember it,
just putting that comment here.
But let's imagine that we actually want to use this color for our background.
So if we try to use this would actually, it won't work, we will have an error here.
So what we actually want to do is put this under quotations like so, right?
And then we want to use the unhex operator, right?
So what we're doing here is converting a value that it's coming
with this notation into something that processing can understand.
Sometimes you will realize that depending on the website,
you might be needing to add a couple of f values to this notation here.
And you see that the way that processing is printing out these hexadecimal values,
they do sometimes include those fs on the front.
So in case that's the case, but
in this case we actually don't seem to have a problem at all.
So let's do a quick recap of what we've done in this session.
We managed to identify that we can create rgb_color variables,
we can convert those rgb_color variables into a hexadecimal annotation.
And we can actually bring hexadecimal notations from a website and through
an unhexing operation, meaning we convert it into a format that processing can use.
We can use it in our background or
any kind of color operation that processing might need.
So we're going to be using this in the following sessions, so I'll see you then.