Hi, welcome to this
final video of Week 2. We have been covering
a series of topics. We're going to try to put those together in a way in which we really start designing with
maybe an abstract painting, an abstract drawing with
some of those principles. Again, we have been covering
things like randomness, iteration, loops, nested loops. We're going to continue
from last session. If you have the code from the previous session, that's going to be very useful. We're going to take
it up from there and see where we
could actually start infusing a little bit of
the different concepts that we've learned to actually
make a composition. Again, this is an invitation for you to start making
this code your own and start deriving
what would you do with it, what would you do
differently, and so on. Let's jump into the code. Let's do a quick recap
of what we have. If we press "Play" here, we have a grid that is being produced by a
series of ellipses, and the grid is achieved by a nested loop where we're
actually controlling the x and y variable and we have some variables like
the columns and rows that determines how much we iterate and we
have the ellipse size. Let's change this concept. Let's just move
into a rectangle. That's the first
thing or you can try different geometries,
by all means, playing with
different primitives, it's certainly one of the first things that you
might want to evaluate. I'm going to go with the
theme of a rectangle here. I'm just going to try to
create something that will look a little
bit like a DNA or a sequence of information that when you actually try to
sort your hard drive, sometimes there's
visualizations that can show scattered information
within a computer, perhaps something
along those lines. We have this rectangle, we know the position
in which they will be, but let's just give this rectangle a size of
maybe 20 to start and also 20 or so in x 20 and in y 20. Let's just do the feel
here of that rectangle. Let's start with a solid white. We don't really need
this line here anymore. We're going to be putting the feel for this
rectangle down here because we're going
to be changing the color of each one
of those rectangles. If we wanted to change
the stroke type, perhaps we would do
that down here as well and this variable here it's not going to be needed anymore. Let's see what we have
and where we're at. We have a solid canvas made out of a series
of rectangles. How can we start revealing
a little bit of a gap? Let's do a little gap
between the rectangles in this direction and
you can see if I actually do a little
bit short of 20 pixels, I can actually create a small
gap in this orientation. If I would do that 18
also here we would have a grid more regularly. What we're seeing is these are not black lines in
a white background but rather white rectangles
in a black background. Let's play with this
variable x first of all. What are we going to be doing is importing all the
way to the top here, I'm going to import
random because with that we can actually start
playing with some of the random functions
that we can introduce. Maybe we start with creating a little bit of a random color to just create a variable called random_blue just to play with one channel at the moment
and we're going to say that to be random.uniform. Technically we could
use just an integer. Actually, yeah, let's do a random range
because colors don't have a decimal value
but for coordinates, we might want to use a
uniform which will give us a floating point. We have a random color which
is going to be our blue. Let's use 0,255, blue. Here I know that the red
channel is going to be zero, the green channel is going
to be all the way max out to 255 and the blue is going to be oscillating
in randomness, and finally, I'm going to give it a little bit
of transparency, 150 just to see. One of the things
that we see here, it's a little bit of movement. This is changing because it's being calculated every frame. Let's just make sure that we
actually do it as a static. You might really
like the animation that we're achieving there. But let's just remove the
draw function for now just to get sure that we are
controlling the effect. That means that everything
will be executed within the setup
meaning like once. We can actually see the
result that we're obtaining. We do have some variability
of color right now. Again, the invitation is to
play with these parameters. If you put a zero here, you would see more clearly that the values of blue are
going all the way. Some of them very close to 255, some of them closer to zero. That's what the
randomness is giving us. Maybe you want to give it
somewhere in between something a little bit of green.
That's up to you. I'm going to leave it in your
hands. I do want to have a little bit more brightness here so I'm going
to put a 255 here. We have this environment but it's very rigid at the moment. It's quite rigid. I would like to
start playing with the positioning of
these rectangles and also the size
that they have. Maybe we play a little
bit with the size first, so let's just change
the x size to be, x size right now it's an 18. Let's do a random.uniform between something
like 10 and maybe 50. I'm thinking of something
that is slightly smaller, sometimes smaller
than the amount that we currently have 18
to be the rectangle. Sometimes bigger,
there's sometimes the possibility for an overlap. Maybe that overlap is a
bit too high right now. But let's just see
what we start getting. We're going to put that excise
variable replacing the 18. We're going to keep the
rows as we have them here. Here you see we're starting to get some of these rectangles shifting
around, overlapping. The fact that we added
some transparency ahead of time is giving us that we're able to read that interference that some of those rectangles are
giving to one another. If you didn't have
this transparency here, it would look a
little bit different. It would be more solid. It would feel more flat. Maybe that's what
you're going for. But consider that sometimes
blending transparencies might be a way to register
some of this variability. Again, we're playing
with randomness in the x-axis of this rectangle. Let's finally add a little
bit more randomness. I feel like it still
looks relatively rigid in terms of
columns and rows. I want to maintain a lot
of rigidity in one axis, but the other one, I wanted to feel like there's a
bit more playfulness. Let's add some to the x coordinate and like
sometimes whenever I do up, this might not be necessary. But just to be clear, this is the coordinate
that we have identified. Let's add a little
bit of wiggle room. A little bit of plus and
minus movement to the left or the right, so
random.uniform again. Here we could do something like -10.0, 10.0. If you want all the movement
to happen towards one side, you would say 0-20, and that you would actually be shifting from the
base point that we have all the rectangles to the
right to a certain degree. But in this case, we're
actually creating wiggle from the left
and to the right. If we actually get a
range between -10 and 10. Let's see what we're getting. You can see that we're
starting to break a little bit the notion of
a grid in one of the axes. In the other axis, it's
very readable as such, but we're starting to play and starting to
create a composition. There's so much more that
you can really do by really playing with some of
the ingredients that we have covered so far. The only final thing that I want to add to this, and again, I'm not going to go much further into this
because I really want to see what you
bring to the table. We will talk about
this a bit further, but once we start
using transparencies, there's different ways
of blending color. If you are familiar
with Photoshop, Photoshop has things
like blending modes that not all transparencies
need to be added to each other
and basically, the color arithmetic that
you have when you're overlaying filters or layers of color could be
done differently. I want to use blend mode. That is going to be an addition. This is going to be an optional, something to read about it, just to expose that there are different blending modes
also in programming. There's a small variation here but what you
should be starting to see is that when
there is overlap, you should start reading a little bit more
brightness into the image. Again, there's an invitation to start considering color schemes, different forms of using
randomness in conjunction to structures like a grid to determine what is a composition that
you're interested in. Again, we're going to
continue learning how to use programming
for designers. I'll see you in the next week.