Welcome to the second part of creating a final
composition for this Week 1. We are halfway of completing
our typographic drawing. If you haven't seen
the first part, please start in
that one because we are going to continue from
the code that we left off. Let's look at what
we have so far. We have a arbitrary
color background and we have a way
of drawing with the mouse using these
arbitrary characters that come from typography, so we are able to decide
which characters we're using and you can change those
characters here and how you can display them in
an invisible grid format. What I wanted to in the
second part is really try to reintegrate
the ideas of lists, color palettes, and
dictionaries that we've been learning all
throughout this first week. Let's create the
possible palettes because we want to be able to switch between colors as well. I'm going to go and
say, my color palettes, that's going to be a dictionary. I'm going to start
with a dictionary. I think this is going to be
the most concise version of this, as we've discussed. The dictionary I want to create is identifying
with a name, a particular color palette. Let's just write something. Let's go to the website
that we've been using. We have here coolors.co. I'm going to use
this first palette. I'm going to select the font
and go back to processing. Let's just call this Coral. That's going to be our key name, and now that key name is
going to be associated to a list The list is going to
be a list of color values. We're going to do
this color value, and we're replacing
that with FF. That has been our pattern
for bringing colors. I'm going to copy
paste this first. Just for the structure,
we want to do five colors and close the list. This is basically what
we're trying to do. This is the first entry
of our dictionary. We use a coma. We can copy
paste this once more. I'm going to do two
color palettes. Again, it's a little bit boring probably to just see me copy
paste some of these codes. I'm going to quickly go through them to create two dictionaries, replacing the colors with the information from the
list. Let's do that. The invitation here
is always to bring your own sensibility
to the colors that you like to really explore which are the color themes
that are interesting, and that's up to you, but we really wanted to
have a framework for thinking of color as something
that is synergistic. Color palettes have ideas of color theory and colors that seem to resonate
with each other. When I learned
processing, I remember, always typing RGB colors, and really trying to figure out which colors would
work with one another. I think that what we're building here is using the
understanding of data structures as a way of leveraging an affinity
for color and design, but it's a little bit more
comprehensive where there is a framework of colors that seem to resonate
with one another in an interesting way.. Do
we have the Coral built. Let's just do another one.
I'm going to select here, I can press space
in this website. Let's just find
something different. I like this one somehow. I like the contrast of one red tone between these
more earthy tones as well. I'm going to just use this
one for the second one. We're going to call it Forest. Let's just do this
process once again. Another great way of
thinking of color palettes is sampling them from let's say, you have a movie or you have a piece of art that
you really like. You can always sample
colors from a screenshot. Often, movies have really careful attention to the color palettes that
are included into a film. Similarly, works of art operate with very careful calibration
of a color palette. If you start being
aware of that and start sampling some
of those things, you'll be able to
starting to learn what is the attention to
detail to color that many artists use in their work. This is a tool that
could certainly use a sampling from frames, from movies, and so forth. I think that we have
our dictionary ready. We have a dictionary
of what we're calling two themes or two
color palettes, each one of them with
their respective entries and each one of them is a list. The square brackets,
we have a list called the coral palette and another list called
the forest palette. Again, you are invited,
if you want to add more, just add a comma at the end of this and you might
be able to have 3, 4, 5, 10 color palettes.
It's up to you. It's incredibly flexible to think through these
databases of colors. How do we use that now? Let's define our
current palette. Will be, let's just make coral our
current palette because we have to define which is the palette we're
going to be using. We can use the information
of that palette. Let's just switch the
background color. Right now, the background
color is identified as red. If you remember, we can
access the information of our palette by the
following formula. We need to use color palettes.get and we use
the name of the coral. But we're going to use the
variable current palette. Go and get the current palette, which is going to be coral. Now, within that, select the first
entry of that list. What this is saying,
this line again, it's trying to rehearse and exercise that muscle
of data structures, we are accessing the dictionary, we are getting the coral
entry, which is a list, and we're saying
select the first entry of that sequence of
colors, which is this one. We cannot just put
a hexadecimal value into our background
as we also have seen. What we often do is
using the unhex command, which we will have to open parentheses and close
parentheses here. Within the unhex, we are giving the value of the first color in the
coral is a palette. We've done a lot here. We
created the dictionary. We changed the background only. Let's just see if
this is running. You see we have the first
color of that color palette is being this purple color
operating in the background. That seems to be working well. This line often could be
considered a very complex line. Not because necessarily it represents so many
complex values, but it's really asking
you to keep track of how we're deploying a relatively complex
data structure. We have a mixture between
dictionaries and lists. Just because this second
specialization course is focused on data structures, we really wanted you to
have awareness of how those data structures could be deployed within a
design environment, and one that hopefully
becomes very flexible to start sampling the
different schemes, the different palettes
that we have. What else are we
using color for? Well, we are using them for defining the color
of our characters. Let's also replace
this number 255 for a random color from
within the current palette. What we'll do here is create, let's just give a
bit of space here. Let's call this variable. Variables sometimes can
be incredibly long, but it's useful
sometimes to have a descriptive name so that we know what those
variables are doing. We could say a random
color from palette. Again, if you want
to make something shorter, that's up to you. I like using names
that are quite descriptive of what the variable is attempting to achieve. We will start with my color palette, which
is the dictionary. We're going to access. Let's do the get
command to access, in this case, the same
way we did over here, we're going to access
the current palette, so we need to make sure that this variable that we define as current palette is used every time that we
access the dictionary. Therefore, later,
we will be able to change and do the swapping as we did in some of the
previous exercises. Now we want to find an index
The index of this one, we could say one for now, but we want to do
a random index. We want to select a random
color from that palette, but we don't have a
variable for that yet, but let's see if this accesses
the color information. It works as intended just
by hardcoding the number 1, which will be the second
entry of the coral palette. Here we will replace
this fill with, let's remember to
unhex, this value. Every time that we want to
use a value from that list, we will be unhexing
it just because it comes in a hexadecimal notation. Again, we can try. I don't
know if you can see it. There's not too much contrast
to those two colors, but there seems to be a
good synergy between them. We are sampling the first
color as the background and the second color
as the characters. One final thing that
we want to do here, in order to get effectively
a random color, let's call this a new variable
called the random_index. The random_index will be similarly in the way
in which we did here, a random range between zero
and the possible characters. I think, actually, this is just realized an error
from the last class. I think that is unnecessary. That's something that
we were trying to do in the process of finding a bug, but I think that that's
unnecessary now. We can find this random index
using the random range. I'm going to copy paste that
in order to avoid typos. This operation
might seem tricky, but I think that if you are following the data structure, it shouldn't be so tricky. We're going to do a random range between zero and a number, which we want to be the
length of this list. This list might be five
elements at the moment, but it might be 10
or it might be two. If we knew the number, we
could always put a five, but that's not very good coding because we're not
associating this value. It's prone to errors
if someone comes in and changes the
number of elements. We are going to do the same
thing that we did here, which is the length
of that list. The length of that list is, basically, we have to specify
the my color palette, so that's the dictionary Actually, let's just
keep the same notation. Let's use my color palette
get the current palette. That would be the
size of the list. I think we have to just
close parenthesis. This parenthesis
is closing here, this one is closing
the next one, and this one is
closing this one. It's sometimes good to
give a bit of space. That would be the random index. We are basically
accessing the dictionary. Give me the current
palette and then give me the length of this list. Finally, we have
that random index. We wanted to use that index instead of hard coding that the color is made out
of the first entry, or basically the second
entry in the list, we're going to use
a random index. One thing that we
might want to do here, if we know that the
background is this color, we might want to
select a random color between the second
entry and the last one. If that would be the case, instead of putting a zero
here in the random index, you could put a one, making
sure that you skip the zero. I'm going to leave
the zero for now that might actually
create entities that have the same color
that the background, so you can decide
how that works, is something that
you want or not. It might be that you want
to have the background for a different color altogether. You can decide to use
a zero here or one. Hopefully, this is making sense. We are doing relatively complex
operations just to select what we want and really putting some of all the
challenges that we have together. Let's see what we have so far. We have these fonts
being printed in the screen using random
color from palette. Let's stop there. Because we're
doing it every 10 frames. I'm going to do it
every two frames now, see if we can get more of them. You can see what
we're obtaining. If you want to try it with maybe not the
randomization of characters, instead of using
random characters, and you really liked
using just one character, you can use a zero here or one. This would actually
just be this form of ASCII painting where you are using this
color palette to paint. We're bringing back typography, we are using a color palette. The final thing that we're
missing in this video is to really swap
between palettes. We're going to give
ourselves a bit of time to use one color palette. I'm going to bring back this
to the random character. All these operations
are meant to show you what can you do with
data structures. It might seem particularly
complex in a way, but we're mixing dictionaries
and lists, and again, swapping between which list are we using as a color
palette and so forth. We can actually
create a condition, which we've already done
in some videos before, in which we swap to forests
and then sweep back to coral. Let's do that. Let's just do
a very simple if statement. Something that would say, well, let's start with a counter
that is going to be zero, and if this counter
reaches a certain number, let's call that
number a swap count, let's say if you
reach 200 frames, you swap to the other
entity of the list. If you're coral, you
switch to forest. If you're forest,
you switch to coral. Something along those lines. You'll see that some of
the examples that we provide in the documentation of the class show you how to do this by pressing different
keys in the keyboard. You can actually
do that as well, where you can have multiple
palettes and you decide, hey, I wanted to see coral
or I want to see forest, and really spend a bit of time learning how the keyboard
interactivity can control that. We're going to do it
slightly different here, which is swapping using a
counter. Let's do that. We are going to bring
these variables here, so global count and swap_count. Those are two variables
that have been declared up here that we want to change
within this context. Let's go and say something
like every frame we want to do a count += 1.
If count, let's say, is equals to 200, which is the variable that
we created, swap_count. Instead of 200, we're going
to use this variable 200. If we reach that number, we're going to execute a
change of the palette. We're going to say again, a second if statement would be, let's just bring
all this back here, we're going to write
this as an if, saying if the
current_palette is Coral, then the current
palette becomes Forest. What else needs to
happen in this swap? We will return the
count to zero, so we reset the count. We are going to do an elif. We don't want this to be
just another if statement because at this point we
have swapped the palette. We want to pick either or. So if the current
palette is forest, let's do the same thing, but
it's reverted back to Coral. This might be a small thing, but if we execute
two if statements, we will end up always in Coral. We will swap it to forest. Then the next if statement we'll check is the current palette, Forest, yes, it's going
to go back to Coral. We want to make sure that this if statement only executes
one of those conditions. That's why we're doing
this elif statement, which is an else if. At this point, I
believe that we will be counting with our count
variable up to 200. Switch from palette to a
different color palette. The other thing, let's just
see what we have here and then see if there's
one final modification that I think we will need to do. We're running into
an error here. Let's just revise our code. I spent a little bit
of time trying to find out this small
error we were having. One of the things that we identify is that,
for some reason, I forgot to add this
current palette variable, which if you remember this
current palette variable, we have declared all the way up here in our global variables. If we want to start manipulating this line, as we do here, by changing it to Forest, we cannot do that
in this context unless we define it as a global. We did include count and swap_count as global
variables that we could swap. Technically,
swap_count, we don't really need to modify it, we're just using it
as a fixed amount, but we definitely want to
modify the current palette. We are going to
have to include it into our global variables. This is a variable that
we will be changing, so just adding that line should fix the error
here. Let's see. We have our first color palette being displayed, and you see, now we swapped to the second one and then going back
to the previous one, but it's a bit of a mess because we're
transitioning between these color palettes and we're
not resetting the canvas. Let's just do one final line, which is a line that we already have, which is this background. This current background line, which is basically picking up the background of
the current palette,. Before we actually
swap the palette here, we will redraw the background. That would actually clean
the canvas completely and it will start drawing
with the new palette. Because this is associated
to the current palette, is the first value of
that color palette. It should totally work fine
or at least theoretically. Let's see if this is the case. We're drawing with
this first palette. It's swapping, but there's still an error here
because it's swapping the background and not giving
us the right color palette. So let's check
what's wrong here. This line, it seems at this point we're
swapping to forest. I think that what
we should be doing is doing that line
after the swap. Once we swap to forest, we want to paint the background
with that new color. That's the beginning of
that new palette style. Let's see if that is
in fact the problem. In both cases, we are
switching to the new pallet, so we're creating a background not with the current pallet, but with the new one. Let's see if that fixes
things. That works. Maybe there's not enough time to paint in each one of those; that 200 swap count value. You could do it something like 800 if you want to spend a bit more time in
each one of those palettes. It will give us time
to really paint around and start creating
a composition, and then we swap
to the next one. We have a bit more time. The final thing,
as we did before, the frame count here, I think that we
could also do a 10. Here's where you actually
have a lot of flexibility. This is a tool
that is attempting to create this in a
more automatic way. But you could also say, hey, I want to just
print when I click, so when I'm clicking. The most important
thing would be also I would say to start considering how to avoid
any intersections. How do we get rid of units that paint on
top of each other? That's going to really take
us to the second week. The Week 2 where we're going
to learn data structures, how a grid could be thought
as a data structure, and how we can actually add information to that
grid so that instead of painting on top of things, we're just telling a cell
entity to contain a piece of information like a font and then swapping
to something else. Right, we're going to be
learning about grids. I think that this
exercise is certainly giving you the entry point. Let's just do one thing here. Let's just do small
modifications. We can actually change
this font size. Let's do something like
text size, let's do a 20. I think that the current size might create sometimes overlaps. That's one thing that
could help us here. The second one is the index. We said let's not redraw with
the same background color. Let's just use a one here, so we skip the background color. Then here let's do
a five. Let's see. We're trying to calibrate
a little bit more this, see if what we can actually
do as a painting system. Let me see. We're
starting to get something that it's a painting tool
for creating these graphics. But it's trying to
invite you to think about the multiple layers
of data structures that could be used to format
that drawing in a way that is not incredibly generic. Or just moving the mouse around, but rather having
some rule system. This is going to be the
conclusion of this first week. It was an invitation
to start thinking about ASCII character drawings. We're really looking
forward to see what you can do with
something like this, calibrating it to your
own color palettes, to your own understanding of the code so that you can
take it away further. We're going to show some
of the examples that we've created with it
within the documentation. But the invitation to really think of these
open-end systems as forms of creative coding that you could use for design
in many different ways, and along the way, learn about data structures and the different forms that
we have to manipulate data within a script in Python. I'll see you in the next week. We're going to continue understanding grid
structures then.