Hi, welcome to this new video. We're going to do two
final sessions for this week showing how we could save both images and animations, but let's start with images. We're going to start
by jumping straight into our work from last week. Just as a quick reminder, if you haven't done
this past video, I invite you to do this first. I think it's going
to be a good example of how we could use images, but we want to add
to this sketch. Let's imagine that
we have achieved a composition that
we really like. We're using the paintbrush tool, and we really like this moment. At the moment, there's
no simple way for us to really take a screenshot. Maybe you could do a
screenshot from your computer, but we could certainly
build some of those functionalities
into our system. Let's continue working
with this file. If you don't have
it, you can download the exercise file
that is provided. Let's just go down here
and create a function. It's one of the
inbuilt functions that processing gives us. We're going to say keyPressed. This function will trigger automatically once
any key is pressed. If you want to try
it, you can print something like
print("Key Pressed!"). Let's just do a bit of space
there. We can test that. Let's just make
sure that we close the quotation marks for
the string. There we go. If we press any key
in the keyboard, you can sit down here
in our console that we are in fact pressing a key. That's a very useful function to have and we can
parse a little bit. Well, maybe we don't want
to use any key for saving. Maybe you want to
have several keys associated with
different things. This is something that
will start making your software
applications a little bit more interactive with the way
that you want to use them. Let's see how we can
access a specific key. We can use an if statement
and say if the key is s for save, s.. We could say
that that's fine, s, and we can associate that
with the save function. But I would like to add
an or statement here. Because this is a one condition
that we want to satisfy. We want to check is s pressed
or the key == 'S' pressed. We're checking for those
of two conditions. We will print our key.
That will check that. Right now we're painting. If we press any key,
nothing happens. If we press S, we are triggering
these conditions. We are able to detect specifically the key
that we are pressing, and that's very useful. The thing that we do want to do here is actually a
function called saveFrame. As we have been importing
images into processing, we are also able to export
images out of processing using the saveFrame function
that will actually save this image
to this location. We could say "img-01.png". Same problem here. Let's
just make sure we close. Then instead of printing
out keyPressed, we could say Image Saved. There we go. This
should work. Let's see. We have our saving condition. We press S, image saved. That's an indication that, in fact, the image was saved. Let's go and check
in the Canvas. In the same folder
that we created where we have the images that
we're using as resources, we have now this img-01.png
saved, and that's good. But the problem is that let's say I want to run this again. I like this composition better, and I press S again, suddenly what happens
is that we are overwriting the image, and this folder
might start becoming real packed of lots of images if we decide
to save a lot of frames. Let's do a few small changes. The first thing I want to
do here is that if I use the hash tag or the hash
key here instead of the 01, and I could prove
as many as I want, this would actually
automatically convert this sequence as a number
based on the frame. Let's see how that works. If we press S, we
can press S again, and you'll see that we've created this image and
this image, both of them. They didn't override each other. That's interesting. We could actually save different frames. I would say we also want to keep things a
bit more organized. Let's say images/. We're going to save
all of them into a folder called images. Notice that we don't
have that folder yet, and I think that
processing should be able to create that
folder for us. Let's say we press S here, then we press S here, then we paint a bit more, and we press S once more. We did it three times. If we go into the folder, now we have these images folder with the three
images that we saved. That's a little bit
of a cleaner way to making sure that you're
not overwriting images. There could still be an
override if you are, in fact, let's say recording every
frame and you run it twice, you might be
starting overwriting the images that
you've saved before. In those cases, we'll see. I invite you to change
the name of the folder. The folder could
also have images 01, images 02, sequence 1. You could decide how
you name your files, but you could actually
start creating several folders for different
versions of a sketch. Alternatively, you
could also create a very complex random number so that every time
you save a frame, you actually execute a random
function and therefore, creating a very unlikely chance for files to be overwritten. Again, many possibilities
for you to decide with. We're going to move
on to the next and final video of this week, where we're going to be
discussing how do you create an image sequence or
animation. See you then.