Welcome to this new video. In this conclusion of Week 1, we are going to be putting
everything together. We're going to start
building a drawing, really thinking through
design problems, and really trying to
use data structures in a way in which we could
be creative with them. We're going to be using all the different tools
that we learned this week. We're going to learn about how to use typography
together with lists, at the same time, how do
we use color palettes to incorporate color
and some interactivity. Let's get started. We're
here in processing, let's just start our canvas by defining the image size that we're going to
be working with. We've been working with
this size of 1,200, we're going to do
actually an image size in X just to be more specific and Y it's
going to be 600. This is something that you
will be able to change, but again, we want to create a template that would
be useful for us. Let's just make sure that we can get started with the
set up as we often do. We're going to do a background. Let's just start with
a black background, and size, we'll do
our variables here. We have something to work with and we will be
taking it as we go. We have a black background. If you want to make
it more visible, you can make it red background. with our RGBs. But we will be replacing this with hexadecimal
system that we've been using so far in the past so that we could actually connect
it to a color palette. What do we want to do here? The drawing that I'm going
to try to work with you here is very similar to what we've been doing
before but really, I want to be able to paint with fonts in the screen using
our color palette system. It's still a very abstract
drawing in a way, but it's trying to be aware of how different a finite
number of symbols, in this case text symbols, could actually be used for
a form of painting tool. I think that that
could actually be an interesting exercise putting together everything
that we've done. We will start by creating what I would
call possible characters. Here, the possible characters is going to be a list
of finite elements, and I'm going to do an X, I'm going to use capital O, I'm going to use an underscore, and these are arbitrary symbols that I'm
going to be using so you feel free to change them and see what
results you get. I'm going to pick four
string symbols that have been written in the
syntax of a list. What I want to be able to do
is that I will be able to pick any one of these
symbols at random, again, with the idea that
random could be a great variety of
things but we can also use randomness to select between a pre-specified
list of things, that's how lists in
this case are coming in and we're going to try to create a drawing tool with them. We're going to just stamp
these symbols as fonts in the screen as we drag
the cursor around. That would be our first step. Let's just go ahead and create a font. We've done this before. We're going to use F
for the font variable, we're going to create
the font, oops, there we go, and
we're going to use the Corbel Bold font, which I think it's going
to have a size of 24. We're creating a
font that we will use and as we learned before, let's define that font
as a text font F, and finally we're going to define text line,
sorry for that. We're going to do
left and center. All these attributes contribute to the way the font is
presented in the screen. If you are always wondering
what the changes would be, go into the processing
documentation reference and see what are the other options for
different text alignments. An experiment of how
changing that might change the look of your composition. I will go back to this set up, but I think at this point, I would like to see some of
these fonts in the screen. We want to just transition to moving to the draw function, which is where we're going to be doing most of the dynamic
parts of the code. Let's define a position
where the font will be, which is going to be based
on the mouse position. We could say that
the position x, let's just do it with
underscores to be consistent. Here, we could say
something like mouse X. Position y, it could
be mouse y like that. Now, we can actually
use our font. Let me just create a little
bit of space so we can keep the code in the middle. We can use our text command and say the font that we want
out of the possible fonts. We will use one of these
characters for now, copy that in here. The text that we're going
to use is going to be the first character
of that list. It's going to be this x. The position we're
going to place it in the screen
will be position x. Position y would be
the y coordinate. We need to specify
which character we are using and which position
x and which position y. At this point as well, we might want to define the
fill or basically the color. Because we haven't brought in the idea of the
color palette yet, we're going to use a
simple placeholder. Let's use something
like green or white. Basically, a 255 would
give us a white. Let's see what we have so far. I always like testing a few lines of code,
seeing what we have. At this point, you see we have the Xs following the mouse. We can print them
wherever we want. That's maybe not too exciting, but that's a place to start
about our drawing tool. We are able to print these fonts into the screen at any position
where the mouse is. One of the things that I
want to start doing here is control a little bit more
of how that is presented. Instead of thinking that
anywhere where the mouse is, we're going to start
placing these fonts with some degree of alignment
to the screen. If we really start
thinking, this is going to be a segue to what
it's going to be Week 2 where we actually
start talking about grids. But here, I would like to start thinking what
would be the cell size if we would have
something like a grid in the background and
I could only place these fonts in specific
locations in that grid? Maybe I would define
the cell size in x as a proportion
of the image size. I could say the image size is
the entirety of the canvas. What if I divide that by 60? That would be how big I want a particular cell to be in x. In order to do a similar
proportion in y, I'm going to copy paste that. I'm going to define that the image size in y which I
know is half the size of x, because we're using a
1,200 by 600 canvas. I'm going to divide this by 30. Now, I have basically
some piece of information that's a proportion of the entirety of the screen. What we're going to do
is use that information to influence the
position of this xs. We're going to start by
dividing this information by cell x here. The mouse position divided by the cell position and
then we're going to also multiply it times
the cell position. This is going to start
making the position of the mouse be always
fitting within the proportion of the
screen as if it had a snapping to an invisible grid. Let's just go through
this math together again. There we go. We have
this information. This division could be a decimal place because
the mouse position could be like infinitely small. If we want to make
also sure that we keep a rigid grid a little
bit more organized, we would do something
like round. Round, it's a way of
approximating a number, a decimal, a float
towards an integer. This position now, let's
see what we have here. We are basically
changing the way we are positioning these
Xs in the screen. You can see now I'm
starting to do something that the cursor could
be incredibly small, meaning the movement could
be incredibly precise, but I cannot move away from positions that fit
an invisible grid. I'm using this X as a form of ASCII form of drawing
and form of painting. It's been used by a lot
of graphic designers. It's been using a lot
in video games as well. We could start getting
something quite interesting. It's a drawing tool that has
certain constraints to it. It's not absolutely free. But again, it's a system that we could actually
manipulate quite a bit. I invite you to play
with this system. For instance, currently we are only using one of
the characters, X, because we are picking up the first entity
of that list here. We're using the first entity X, but if you want to do the
same with the second entity, we can put a one here, and you'll see that we
get the same system , but with circles. We are overlapping. If our mouse sticks
to a position, it remains there for a while. That circle gets redrawn
over and over again. That's something that we're
going to keep like this. I think that for these
first few lessons, it's going to be better for us to maintain these drawing tools. Rather simple, but certainly flexible to different
design-out. Again, you can change the different fonts
that you have here. The different sample characters. Why did we create these
possible characters? Well, currently, we are
drawing with one out of them. Let's do one final thing
that we're going to say that the current character, or the character that
we want to work with. Let's call that character. Let's pick a random entity, so a random symbol from that
possible characters list. Here we will need to
import the random module. This won't run. I think that I'm still haven't imported the random module.
Let's remember that. Rend range as we've
been using before. We could say from 0-4, which is the number of
characters we have. But if instead of that, let's say sometimes we want to have less characters
or more characters, the proper way of doing this
would be specifying with the rend function how
long would be this list. Let's calculate the length
of that list, like that. That would give us
a random character between zero and the
length of the list. If this list has more items, it will pick one random
out of a longer list. We don't have to worry about changing a hard-coded
number like a four, or a five, or something
like that every time that we change the number of characters
we're working with. This is going to be represented
by the character value. Now instead of using this
hard-coded number one, which is the second
entity of the list, we're going to use
this character. This will create, hopefully,
something interesting. We just mentioned
that this is not working yet because we
have to import randomness. Import random. I think that we are still
having an error somewhere. Let's just find what that is. I think that we
had an error here. We actually misspelled
random rand range here. Let's see if that
works. There we go. It's a little bit messier
right now because you see this overlap is actually not really being very clear. But we are able to sample a random character
out of this list. One of the things that
we would actually do is reduce the speed. Processing is
actually running at an incredible speed,
frames per second. Maybe 60 frames per
second, maybe more. One of the things
that we could do is control the speed
of the sampling, so that we don't have as
much as that overlap. We could also, and this would be a good exploration for you,
is to start thinking, well, how can I identify
if I've already written a particular character
in a particular cell? This is exactly what we're
going to do in Week 2, which is understand grids as a data structure and how we
can allocate data into them. I'm also presenting here
a little bit of a problem that would be resolved
with the knowledge that we'll acquire later. How would we reduce how
much we iterate every time? Here in the draw, we're
going to say if frame count. We're going to use
the modular function. Here we could use
something like 10 = 0. This function here,
this if statement, says processing maintains
track of which frame we're in. The modular function, basically, it's a calculation
of the remainder. If the number 10 fits perfectly
into a number like 100, then there is no remainder. There is no accident, in a way, in that equation. Therefore, the
result will be zero. If, for instance, we have
99 as the frame count, number 10 will fit nine times into the frame count and there will be a
remainder of nine. We wouldn't get this.
This is a way of saying do this every 10 frames. If you want to do it
every two frames, you do it every two, or every three, or every five. Let's just use a
number like five. If we indent all
of this code here, we're basically saying, only do this every five frames. In a way, we're not slowing down the way
the program runs. We're just reducing the amount
of sampling we're doing. We can actually navigate. If we still linger, you'll see that we can paint
on top of our drawing still. But we are able to create
a drawing tool that requires a sense of its own
pacing, its own momentum. We're bringing in a sense of, what is the speed by which
you navigate and move around? We're going to be leaving here, this first part of the video. Let's do a quick recap
of what we've done. We've identified or created a list of possible characters. These are arbitrary.
You can actually switch them and see how your drawing
would actually change. We've initiated a
font, in this case, the Corbel font, which
you can also change. You can decide and use
a different font style. We have been drawing these fonts, sampling
them randomly. It could be any of
those characters. We're sampling them, and we're printing them in
the position of the mouse. But we're not just printing
them where the mouse is, we're basically aligning
the mouse snapping to an invisible grid
that we created here. That's it for this first video. We're going to
continue this script in a second video
to complete that. Bringing back color palettes, being able to swap between
different color palettes, and see if we can finalize this first drawing as the conclusion of this Week 1. I'll see you in the next video.