1
00:00:05,160 --> 00:00:08,260
Hi, welcome to this new video.

2
00:00:08,260 --> 00:00:11,300
We're going to do two
final sessions for

3
00:00:11,300 --> 00:00:13,220
this week showing how we could

4
00:00:13,220 --> 00:00:15,740
save both images and animations,

5
00:00:15,740 --> 00:00:17,535
but let's start with images.

6
00:00:17,535 --> 00:00:19,740
We're going to start
by jumping straight

7
00:00:19,740 --> 00:00:21,840
into our work from last week.

8
00:00:21,840 --> 00:00:23,360
Just as a quick reminder,

9
00:00:23,360 --> 00:00:26,700
if you haven't done
this past video,

10
00:00:26,700 --> 00:00:31,340
I invite you to do this first.

11
00:00:31,340 --> 00:00:34,060
I think it's going
to be a good example

12
00:00:34,060 --> 00:00:35,875
of how we could use images,

13
00:00:35,875 --> 00:00:39,215
but we want to add
to this sketch.

14
00:00:39,215 --> 00:00:41,900
Let's imagine that
we have achieved

15
00:00:41,900 --> 00:00:43,665
a composition that
we really like.

16
00:00:43,665 --> 00:00:46,170
We're using the paintbrush tool,

17
00:00:46,170 --> 00:00:48,090
and we really like this moment.

18
00:00:48,090 --> 00:00:51,280
At the moment, there's
no simple way for

19
00:00:51,280 --> 00:00:54,230
us to really take a screenshot.

20
00:00:54,230 --> 00:00:56,790
Maybe you could do a
screenshot from your computer,

21
00:00:56,790 --> 00:00:58,270
but we could certainly
build some of

22
00:00:58,270 --> 00:01:01,215
those functionalities
into our system.

23
00:01:01,215 --> 00:01:04,250
Let's continue working
with this file.

24
00:01:04,250 --> 00:01:05,830
If you don't have
it, you can download

25
00:01:05,830 --> 00:01:09,105
the exercise file
that is provided.

26
00:01:09,105 --> 00:01:15,010
Let's just go down here
and create a function.

27
00:01:15,890 --> 00:01:18,250
It's one of the
inbuilt functions

28
00:01:18,250 --> 00:01:20,700
that processing gives us.

29
00:01:21,170 --> 00:01:23,850
We're going to say keyPressed.

30
00:01:23,850 --> 00:01:31,030
This function will trigger

31
00:01:31,030 --> 00:01:35,065
automatically once
any key is pressed.

32
00:01:35,065 --> 00:01:37,850
If you want to try
it, you can print

33
00:01:37,850 --> 00:01:43,090
something like
print("Key Pressed!").

34
00:01:44,600 --> 00:01:54,340
Let's just do a bit of space
there. We can test that.

35
00:01:54,450 --> 00:01:56,890
Let's just make
sure that we close

36
00:01:56,890 --> 00:02:00,790
the quotation marks for
the string. There we go.

37
00:02:00,790 --> 00:02:03,810
If we press any key
in the keyboard,

38
00:02:03,810 --> 00:02:06,030
you can sit down here
in our console that we

39
00:02:06,030 --> 00:02:09,580
are in fact pressing a key.

40
00:02:09,580 --> 00:02:11,870
That's a very useful function to

41
00:02:11,870 --> 00:02:14,370
have and we can
parse a little bit.

42
00:02:14,370 --> 00:02:18,995
Well, maybe we don't want
to use any key for saving.

43
00:02:18,995 --> 00:02:21,030
Maybe you want to
have several keys

44
00:02:21,030 --> 00:02:23,060
associated with
different things.

45
00:02:23,060 --> 00:02:24,990
This is something that
will start making

46
00:02:24,990 --> 00:02:29,090
your software
applications a little bit

47
00:02:29,090 --> 00:02:32,030
more interactive with the way
that you want to use them.

48
00:02:32,030 --> 00:02:34,570
Let's see how we can
access a specific key.

49
00:02:34,570 --> 00:02:37,170
We can use an if statement
and say if the key

50
00:02:37,170 --> 00:02:44,805
is s for save,

51
00:02:44,805 --> 00:02:48,225
s.. We could say
that that's fine,

52
00:02:48,225 --> 00:02:53,355
s, and we can associate that
with the save function.

53
00:02:53,355 --> 00:02:57,340
But I would like to add
an or statement here.

54
00:02:57,410 --> 00:03:02,040
Because this is a one condition
that we want to satisfy.

55
00:03:02,040 --> 00:03:11,790
We want to check is s pressed
or the key == 'S' pressed.

56
00:03:11,790 --> 00:03:15,100
We're checking for those
of two conditions.

57
00:03:16,070 --> 00:03:22,005
We will print our key.
That will check that.

58
00:03:22,005 --> 00:03:23,760
Right now we're painting.

59
00:03:23,760 --> 00:03:27,690
If we press any key,
nothing happens.

60
00:03:27,690 --> 00:03:29,940
If we press S,

61
00:03:29,940 --> 00:03:32,910
we are triggering
these conditions.

62
00:03:32,910 --> 00:03:34,410
We are able to detect

63
00:03:34,410 --> 00:03:38,750
specifically the key
that we are pressing,

64
00:03:38,750 --> 00:03:40,630
and that's very useful.

65
00:03:40,630 --> 00:03:42,870
The thing that we do want to do

66
00:03:42,870 --> 00:03:46,610
here is actually a
function called saveFrame.

67
00:03:47,000 --> 00:03:51,810
As we have been importing
images into processing,

68
00:03:51,810 --> 00:03:55,670
we are also able to export
images out of processing using

69
00:03:55,670 --> 00:03:58,350
the saveFrame function
that will actually

70
00:03:58,350 --> 00:04:01,290
save this image
to this location.

71
00:04:01,290 --> 00:04:08,100
We could say "img-01.png".

72
00:04:11,600 --> 00:04:15,330
Same problem here. Let's
just make sure we close.

73
00:04:15,330 --> 00:04:19,605
Then instead of printing
out keyPressed,

74
00:04:19,605 --> 00:04:25,140
we could say Image Saved.

75
00:04:26,440 --> 00:04:31,725
There we go. This
should work. Let's see.

76
00:04:31,725 --> 00:04:35,165
We have our saving condition.

77
00:04:35,165 --> 00:04:37,235
We press S, image saved.

78
00:04:37,235 --> 00:04:38,405
That's an indication that,

79
00:04:38,405 --> 00:04:39,850
in fact, the image was saved.

80
00:04:39,850 --> 00:04:41,895
Let's go and check
in the Canvas.

81
00:04:41,895 --> 00:04:45,010
In the same folder
that we created

82
00:04:45,010 --> 00:04:49,035
where we have the images that
we're using as resources,

83
00:04:49,035 --> 00:04:55,210
we have now this img-01.png
saved, and that's good.

84
00:04:55,210 --> 00:04:56,370
But the problem is that let's

85
00:04:56,370 --> 00:04:58,650
say I want to run this again.

86
00:04:59,010 --> 00:05:01,470
I like this composition better,

87
00:05:01,470 --> 00:05:03,740
and I press S again,

88
00:05:03,960 --> 00:05:06,360
suddenly what happens
is that we are

89
00:05:06,360 --> 00:05:08,580
overwriting the image,

90
00:05:08,580 --> 00:05:12,140
and this folder
might start becoming

91
00:05:12,140 --> 00:05:15,060
real packed of lots

92
00:05:15,060 --> 00:05:17,680
of images if we decide
to save a lot of frames.

93
00:05:17,680 --> 00:05:20,080
Let's do a few small changes.

94
00:05:20,080 --> 00:05:23,640
The first thing I want to
do here is that if I use

95
00:05:23,640 --> 00:05:30,860
the hash tag or the hash
key here instead of the 01,

96
00:05:30,860 --> 00:05:33,655
and I could prove
as many as I want,

97
00:05:33,655 --> 00:05:36,100
this would actually
automatically convert

98
00:05:36,100 --> 00:05:40,850
this sequence as a number
based on the frame.

99
00:05:41,060 --> 00:05:43,335
Let's see how that works.

100
00:05:43,335 --> 00:05:47,660
If we press S, we
can press S again,

101
00:05:47,700 --> 00:05:50,000
and you'll see that we've

102
00:05:50,000 --> 00:05:54,100
created this image and
this image, both of them.

103
00:05:54,100 --> 00:05:59,430
They didn't override each other.

104
00:05:59,430 --> 00:06:00,540
That's interesting. We could

105
00:06:00,540 --> 00:06:04,540
actually save different frames.

106
00:06:04,540 --> 00:06:06,400
I would say we also want

107
00:06:06,400 --> 00:06:08,320
to keep things a
bit more organized.

108
00:06:08,320 --> 00:06:12,930
Let's say images/.

109
00:06:13,010 --> 00:06:15,510
We're going to save
all of them into

110
00:06:15,510 --> 00:06:17,060
a folder called images.

111
00:06:17,060 --> 00:06:19,930
Notice that we don't
have that folder yet,

112
00:06:19,930 --> 00:06:21,870
and I think that
processing should be

113
00:06:21,870 --> 00:06:23,960
able to create that
folder for us.

114
00:06:23,960 --> 00:06:27,735
Let's say we press S here,

115
00:06:27,735 --> 00:06:29,570
then we press S here,

116
00:06:29,570 --> 00:06:30,890
then we paint a bit more,

117
00:06:30,890 --> 00:06:33,610
and we press S once more.

118
00:06:33,610 --> 00:06:35,530
We did it three times.

119
00:06:35,530 --> 00:06:37,290
If we go into the folder,

120
00:06:37,290 --> 00:06:39,430
now we have these images

121
00:06:39,430 --> 00:06:44,790
folder with the three
images that we saved.

122
00:06:44,790 --> 00:06:47,190
That's a little bit
of a cleaner way

123
00:06:47,190 --> 00:06:50,370
to making sure that you're
not overwriting images.

124
00:06:50,370 --> 00:06:54,765
There could still be an
override if you are, in fact,

125
00:06:54,765 --> 00:06:59,210
let's say recording every
frame and you run it twice,

126
00:06:59,210 --> 00:07:00,710
you might be
starting overwriting

127
00:07:00,710 --> 00:07:02,670
the images that
you've saved before.

128
00:07:02,670 --> 00:07:04,750
In those cases, we'll see.

129
00:07:04,750 --> 00:07:07,930
I invite you to change
the name of the folder.

130
00:07:07,930 --> 00:07:12,675
The folder could
also have images 01,

131
00:07:12,675 --> 00:07:15,510
images 02, sequence 1.

132
00:07:15,510 --> 00:07:17,180
You could decide how
you name your files,

133
00:07:17,180 --> 00:07:19,280
but you could actually
start creating

134
00:07:19,280 --> 00:07:22,640
several folders for different
versions of a sketch.

135
00:07:22,640 --> 00:07:24,620
Alternatively, you
could also create

136
00:07:24,620 --> 00:07:26,420
a very complex random number

137
00:07:26,420 --> 00:07:28,300
so that every time
you save a frame,

138
00:07:28,300 --> 00:07:32,210
you actually execute a random
function and therefore,

139
00:07:32,210 --> 00:07:34,720
creating a very unlikely chance

140
00:07:34,720 --> 00:07:36,880
for files to be overwritten.

141
00:07:36,880 --> 00:07:40,260
Again, many possibilities
for you to decide with.

142
00:07:40,260 --> 00:07:41,840
We're going to move
on to the next

143
00:07:41,840 --> 00:07:43,040
and final video of this week,

144
00:07:43,040 --> 00:07:44,820
where we're going to be
discussing how do you create

145
00:07:44,820 --> 00:07:49,330
an image sequence or
animation. See you then.