Hi. Welcome to this new video on our programming
for designers course. We're starting Week 2, and we are going to be
revisiting primitives. We actually ended
up with primitives and we drew a line at
the end of Week 1. But let's go back a little bit and understand how you would draw primitives with
processing in Python. As we have seen, we start
by creating a canvas, which is a window that has a
specific height and width. Within that, we can
specify coordinates. If we have a point, we
have an x and y value, we can specify a particular
point in this canvas. What is important
to remember is that the zero coordinate starts
on the top left corner. If you have a point in
space such as this one, like 100, 40, that's the x and y. We calculate that
from the top left. We move 100 units to the right, and that is our x-axis. Then y-axis is starting
from the top, moving down. That's the way we
calculate a point. We can actually have
certain primitives, certain geometries
such as a line, rectangle, circles,
ellipses, and so on, that have their own
specific construct. If you're wondering, how do I learn about these requirements? Well, processing has, as
we have been discussing, a reference file, a website, where you can actually
go specifically and see what are the functions that are
available for you. In the case of the line, you
will see the keyword line, non-capital, l. Requires
two pieces of information, an x and a y, basically two
points, each one of them being a coordinate. How would we specify those two coordinates that
are required for the line? As we saw already
in the last videos, we can actually draw
a line between 0, 0 and a particular point, which would be the
position of the mouse. That's providing four values, x, y, x, y, for those two points. But we can also look at, in the case of a
rectangle for instance, which is a different primitive, we have to read
the documentation. Because it might be
counterintuitive to think, well, perhaps the beginning of
the rectangle is a point, and the other information that we have to
provide is a point. But it is in fact
actually that you have to provide the width and the
height of a rectangle. It's really important that we
look at the documentation. What do these numbers mean
when I say rectangle or rect? 40, 20, 60, 70, as
you can see here. The 40, 20 is the starting point on the
top left of the rectangle. Then the 60 is the width, calculating it in the x-axis. Then moving down in the y-axis, we actually have the
height of the rectangle. Like that, all constructs, all primitives will have
their own construct. Will have their
own data required. It's important that we
look at the reference. Some of them you will
start memorizing. But often you might
start working with a different library
that will require a different requirement or some new information that
you might need to provide. It's always important
to be able to access the documentation files, the reference files, and understand what information
can you provide. Let's just do some examples of that in code
within processing. Here we are in processing. As we have done before, we're going to just start
with some variables. I always recommend you to have a template for this material, the width and the height, if you don't want to be writing this boilerplate
code all the time. We have the size. This is, if you remember, the construction of our canvas. I'm going to be copy
pasting those variables in. Let's just give it a color. The background, we've talked about color a little bit before. We could do a black
background with a zero, but let's just
create an arbitrary color, something like this. Let's see what we're
getting at this point. We have a pink screen, a vibrant color here. We can stop this. Let's just construct
some primitives. We don't need to necessarily
draw this in the draw loop. We're not going to be doing
anything animated just yet. As a matter of fact, we can
actually just do it here. Let's just talk about
primitives, specifically. If we do a rectangle
as we've been seeing, let's just draw a rectangle. Let's start by placing the rectangle in
something arbitrary. Again, 200, 200,
that's coordinate of the top left corner
of the rectangle. Let's do a small
rectangle of 20*20, as you can see here. You can see this very small
rectangle currently has a white background and a
black outline or stroke. Let's see how we could actually modify some of these rectangle, some of these primitives
as we construct them, we can give them attributes
and some properties. One of the things that we
can do is say no stroke. This will actually eliminate
the stroke completely. If we don't want
to have a stroke, meaning the outline
of the rectangle, that would be the
way to do that. One of the things that we
can do is comment that out and say stroke. Maybe we want to give
it a specific color, something like 0, 0, 120. Like a dark blue. Again, maybe we cannot
see it too much. Let's just make this rectangle bigger by increasing the
width and the height. Let's just do 100 units in this direction and 100 units
in this other direction, so we have a bigger rectangle. But what if we want to increase the thickness of the
stroke or the outline? Well, there's a property
which is stroke weight. That is the term, this variable if you look
into the documentation, you can actually specify
the thickness by default. We're working with a number one. If we use something
like a number three, you will see that
we start getting a thicker border, or
a thicker outline. We have control over the color. If this outline exists
or if it doesn't exist. You might be thinking,
well, what about the color inside the rectangle? What if I want to
just change the color of the rectangle itself? Well, let's do the feel. Feel color by default
in this case is white. We might be able to say, well, what if we want to also give
it some hue of blue, RGB. Who remember RGB? The last channel. The third channel.
It's a blue channel. I'm going for something darker, maybe like that
doesn't really create too much contrast with
the actual outline. Maybe do brighter
than the outline. We're losing those. We're creating some
vibrance there. But as you can see, perhaps
again, playing with color, it's always an
interesting thing to do, to start creating, as you can see here,
just some variation. We have control over the feel. If you're look at the
documentation many times, some of these values, the documentation might
offer that you can provide three arguments as we do here which represents RGB or four. There are options here. It's not mandatory that
we do the fourth one. What did we do the
fourth one as a 50? Let's look at what
that would do. What you could see
here is that we started almost loose the
field, but not completely. When we actually use four
values in the color definition, we're doing an alpha, which this represents
the transparency. If we would do a value of zero, that would be
completely transparent. Or if we do a value of 255, we can actually make
it completely solid. I think, yeah, that's actually something that we can control, but
that's optional. An alternative version
of doing let's say no feel would be to say no feel. That's a keyword that represents that we only care
about the outlined. We don't care about
the inner paint. Again, maybe for that we
want to do a thicker weight. It depends on what
you want to go for. Let's look at a different primitive that we
haven't covered yet. Let's look at an ellipse, because this will give a case. Let's do an ellipse of 200, also by 200, and 100, and 100. The same coordinates that
we have for the rectangle, but in this case,
for an ellipse. Those will overlap. But this actually illustrates
an interesting condition. Which is an ellipse when it's constructed, as
you can see here, it doesn't take the
top left corner as a construction protocol
just to call it something. It actually takes the center and you're actually giving it the
coordinate of the center, and then the width and the height in
diameter, not in radius. You can see that the circle
that we're obtaining is exactly the same
size of the rectangle, but it's actually
not in the right, in the exact location. This is something
that you should learn about in the
reference files. See what is the requirements. There are different ways of constructing something
like an ellipse. Basically can switch
the construction style. But obviously, we're getting into more advancement options. For now, I would
invite you to really revise the reference files every time that you
want to do a primitive, make sure that you
understand what are the options that
primitive is giving you. We're going to
leave this tutorial here and I'll see
you in the next one.