1
00:00:00,000 --> 00:00:06,065
[MUSIC]

2
00:00:06,065 --> 00:00:07,578
Hi, welcome to this new video.

3
00:00:07,578 --> 00:00:11,503
In this video, we're going to continue
working with images, not only one,

4
00:00:11,503 --> 00:00:12,074
but a few.

5
00:00:12,074 --> 00:00:15,870
And we're going to really
practice of what kind of designs,

6
00:00:15,870 --> 00:00:20,603
what kind of compositions can we make
by using images together, right?

7
00:00:20,603 --> 00:00:23,498
So let's jump directly into processing.

8
00:00:23,498 --> 00:00:25,369
As you can see here we have.

9
00:00:25,369 --> 00:00:31,354
I'm starting from what we had
last us class or last session.

10
00:00:31,354 --> 00:00:32,461
We can remove this.

11
00:00:32,461 --> 00:00:34,312
Basically, this is our template, right?

12
00:00:34,312 --> 00:00:37,522
So there's a few things that I would
like to bring to your attention.

13
00:00:37,522 --> 00:00:39,952
I'm going to be working
with a few new images.

14
00:00:39,952 --> 00:00:43,611
Those images are going to be available
to you in the reference files,

15
00:00:43,611 --> 00:00:44,862
in the example files.

16
00:00:44,862 --> 00:00:49,699
So if you want to follow along,
go and find the video or, sorry,

17
00:00:49,699 --> 00:00:52,357
the code that refers to this week.

18
00:00:52,357 --> 00:00:55,919
And you're going to find the images
that I'm going to be using, right?

19
00:00:55,919 --> 00:00:58,846
I'm going to be using three
images that I put in this folder,

20
00:00:58,846 --> 00:01:01,734
which is again the same folder
where we saved the script.

21
00:01:01,734 --> 00:01:06,733
I'm basically using the same script,
but I'm modifying it so

22
00:01:06,733 --> 00:01:09,387
it's going to be called image one.

23
00:01:09,387 --> 00:01:13,830
I'm going to be using this retro PNG or
JPEG, actually,

24
00:01:13,830 --> 00:01:19,773
I need to be careful with the extension
and then this cursor images, right?

25
00:01:19,773 --> 00:01:23,838
So let's go ahead and
see a little bit what we want to do here.

26
00:01:23,838 --> 00:01:27,069
So the first thing I want to do
is create a background, right?

27
00:01:27,069 --> 00:01:34,030
I'm going to change the canvas size this
time for something that matches our image.

28
00:01:34,030 --> 00:01:40,422
I know that this image is 500 by
750 pixels in width and height.

29
00:01:40,422 --> 00:01:48,328
And the first thing we're going to
do is just as we did before,

30
00:01:48,328 --> 00:01:55,615
let's do a global where we
can say something like img.

31
00:01:55,615 --> 00:01:58,835
We will bring more images later,
but for now, let's just do one.

32
00:01:58,835 --> 00:02:04,259
So img = LoadiMAGE.

33
00:02:04,259 --> 00:02:11,908
And I'm going to bring the retro.jpeg.

34
00:02:11,908 --> 00:02:14,545
Okay, sorry about the caps lock.

35
00:02:20,840 --> 00:02:26,418
Right, so we have the, here's the.

36
00:02:26,418 --> 00:02:27,741
There we go.

37
00:02:27,741 --> 00:02:30,959
So we have the retro.jpeg.

38
00:02:30,959 --> 00:02:37,340
This image is going to work
as our background, right?

39
00:02:37,340 --> 00:02:40,626
So we could already draw
it into the canvas.

40
00:02:40,626 --> 00:02:47,737
So let's say image(img,0,0).

41
00:02:47,737 --> 00:02:52,897
If we want to make sure
that it's the same size,

42
00:02:52,897 --> 00:02:59,752
we can specify the size of seven,
of 500 by 750, right?

43
00:02:59,752 --> 00:03:03,306
That's the canvas width and the height.

44
00:03:03,306 --> 00:03:08,449
And we can test.

45
00:03:08,449 --> 00:03:12,096
Processing doesn't like when we
don't have anything in our draw.

46
00:03:12,096 --> 00:03:13,926
Let's just do it as is.

47
00:03:13,926 --> 00:03:16,060
Okay, we're running into an error here.

48
00:03:16,060 --> 00:03:20,555
Is it possible that we don't
have the right resource.

49
00:03:20,555 --> 00:03:21,055
Here we go.

50
00:03:23,621 --> 00:03:25,358
That should have been a comma.

51
00:03:25,358 --> 00:03:25,860
There we go.

52
00:03:25,860 --> 00:03:29,920
So we load the image that
is our background, right?

53
00:03:29,920 --> 00:03:33,326
So this starts to open the door to think,
well,

54
00:03:33,326 --> 00:03:37,170
I don't have to do everything
through code, right?

55
00:03:37,170 --> 00:03:41,568
I'm kind of starting to think, well,
maybe I could use code to create a form

56
00:03:41,568 --> 00:03:45,448
of collage or a form of composition
that includes several images.

57
00:03:45,448 --> 00:03:49,991
If you use images that have a PNG,
let's say a transparency or a cutout

58
00:03:49,991 --> 00:03:55,153
information, you can use them without
necessarily showing their rectangle.

59
00:03:55,153 --> 00:04:00,377
The alpha channel of an image
represents its transparency, right?

60
00:04:00,377 --> 00:04:07,208
So formats like PNG are capable to
carry that transparency information.

61
00:04:07,208 --> 00:04:13,175
So I'm going to bring an image
that has some transparency and

62
00:04:13,175 --> 00:04:18,065
that would be brought on
top of our first image.

63
00:04:18,065 --> 00:04:22,627
And you'll see that this
is a composition that is

64
00:04:22,627 --> 00:04:27,643
inspired by a music video
called Kilo by Light Light.

65
00:04:27,643 --> 00:04:31,991
So I think that we're going to be using
something like a cursor that kind of

66
00:04:31,991 --> 00:04:36,934
operates by registering where a user has
been positioned in the screen, right?

67
00:04:36,934 --> 00:04:38,573
So let's see how that would work.

68
00:04:38,573 --> 00:04:41,755
We're going to load a second image.

69
00:04:41,755 --> 00:04:48,173
So I want to hear in global,
we can use comma to define a second image.

70
00:04:48,173 --> 00:04:55,376
And we could say Img2 = LoadImage.

71
00:04:55,376 --> 00:05:02,604
And here the name of the image will

72
00:05:02,604 --> 00:05:08,032
be cursor_icon.png.

73
00:05:08,032 --> 00:05:10,406
Sometimes it's good to
just copy paste the name.

74
00:05:10,406 --> 00:05:15,281
If you have an image that has a long name,
you can copy paste it from the file itself

75
00:05:15,281 --> 00:05:20,101
just to make sure that you don't have
any spelling errors within that, right?

76
00:05:20,101 --> 00:05:25,327
So now that we do have our cursor loaded,

77
00:05:25,327 --> 00:05:31,940
we could say something like,
if(frameCount),

78
00:05:31,940 --> 00:05:35,955
this is a technique that I use.

79
00:05:35,955 --> 00:05:40,824
FrameCount is a variable that is inbuilt
into processing that allows us to

80
00:05:40,824 --> 00:05:44,996
kind of check which is the current
frame of the screen, right?

81
00:05:44,996 --> 00:05:49,566
And if we use the modular function and
a number, and

82
00:05:49,566 --> 00:05:52,869
we ask the questions, is that = 0?

83
00:05:52,869 --> 00:05:57,154
If you remember, this modulo
calculates the remainder, right?

84
00:05:57,154 --> 00:06:03,125
Basically what this sequence is asking,
if we divide 5 into the frame count,

85
00:06:03,125 --> 00:06:06,748
does the result of this operation,
is it = 0?

86
00:06:06,748 --> 00:06:09,407
Basically, does it have no remainder?

87
00:06:09,407 --> 00:06:12,710
That means that every 5
frames the answer will be 0.

88
00:06:12,710 --> 00:06:16,951
So this is a way of saying do this every
5 frames and you can change this number,

89
00:06:16,951 --> 00:06:19,844
if you want to do it every
other frame you would put a 2,

90
00:06:19,844 --> 00:06:21,739
every 3 frames you would put a 5.

91
00:06:21,739 --> 00:06:25,307
3, sorry,
every 5 frames you would do a 5, right?

92
00:06:25,307 --> 00:06:31,606
So is this calculation resulting in 0,
right?

93
00:06:31,606 --> 00:06:37,361
If so, this is something that we
don't want to do every frame, right?

94
00:06:37,361 --> 00:06:42,216
We are going to say,

95
00:06:42,216 --> 00:06:51,615
translate(mouseX,mousey).

96
00:06:51,615 --> 00:06:55,339
Let's move the canvas to
the position of the mouse.

97
00:06:55,339 --> 00:06:58,382
And then we could say

98
00:06:58,382 --> 00:07:06,088
image(img2,0,0,20,20), right?

99
00:07:06,088 --> 00:07:10,900
So what we're saying here is like every
frame, we're making sure that the image

100
00:07:10,900 --> 00:07:14,952
will be placed wherever the mouse
is in the mouseX and Y coordinate.

101
00:07:14,952 --> 00:07:17,726
And let's draw that second image,

102
00:07:17,726 --> 00:07:23,280
which is something like a cursor icon,
wherever the mouse is, right?

103
00:07:23,280 --> 00:07:28,363
So you can see we have
this kind of painting

104
00:07:28,363 --> 00:07:37,090
tool where we can paint these cursors
on top of our background, right?

105
00:07:37,090 --> 00:07:41,995
And if you want to densify or
kind of reduce the density of painting,

106
00:07:41,995 --> 00:07:44,984
there's a few things that you could do.

107
00:07:44,984 --> 00:07:48,416
Like if you don't like it to
be exactly where the mouse is,

108
00:07:48,416 --> 00:07:52,338
you could add here a bit of randomness
in X and Y with two variables so

109
00:07:52,338 --> 00:07:56,142
that you have a bit of a scatter
around the position of the mouse.

110
00:07:56,142 --> 00:07:57,997
You can make it less frequent, or

111
00:07:57,997 --> 00:08:01,527
you could actually do it whenever
you're pressing the mouse.

112
00:08:01,527 --> 00:08:04,724
So it really becomes like a pain tool.

113
00:08:04,724 --> 00:08:09,234
Just to conclude, I would like to add
a little bit of randomness by bringing

114
00:08:09,234 --> 00:08:10,749
a third image to the mix.

115
00:08:10,749 --> 00:08:13,811
So img3, it's going to be,

116
00:08:13,811 --> 00:08:19,267
let's copy paste that img3,
and in this case,

117
00:08:19,267 --> 00:08:24,458
the name of the image
will be cursor_icon2,

118
00:08:24,458 --> 00:08:30,446
I would like to mix that some
of the cursor are white and

119
00:08:30,446 --> 00:08:33,129
some others are black.

120
00:08:33,129 --> 00:08:39,461
So we have a bit of a variance between
the images that we're stamping, right?

121
00:08:39,461 --> 00:08:40,381
And as we have seen,

122
00:08:40,381 --> 00:08:43,361
we're kind of starting to use
some of the different techniques,

123
00:08:43,361 --> 00:08:46,792
different kind of concepts that we've
developed throughout the course.

124
00:08:46,792 --> 00:08:51,882
So we're going to use rand_number,
a random number,

125
00:08:51,882 --> 00:08:58,789
which is going to be random, but I want
to make sure that I import it up here.

126
00:09:02,536 --> 00:09:04,747
The random module,
otherwise we're not going to.

127
00:09:04,747 --> 00:09:06,609
So I'm importing the random.

128
00:09:06,609 --> 00:09:09,757
Therefore I can use

129
00:09:09,757 --> 00:09:17,241
random.uniform(0,1.0), right?

130
00:09:17,241 --> 00:09:22,312
want to make sure that that's a decimal
place value between 0 and 1.0.

131
00:09:22,312 --> 00:09:27,226
Because now instead of drawing

132
00:09:27,226 --> 00:09:32,329
the image all the time, we could

133
00:09:32,329 --> 00:09:38,568
say if(rand_number < 0.15).

134
00:09:38,568 --> 00:09:42,532
This means that there's a 15%
chance of drawing this image.

135
00:09:45,043 --> 00:09:45,889
Else.

136
00:09:51,740 --> 00:09:55,158
We are going to do the same thing,
but draw the other image, right?

137
00:09:55,158 --> 00:09:56,384
So there's a 50% chance.

138
00:09:56,384 --> 00:09:58,551
I don't like the distribution of 50, 50,

139
00:09:58,551 --> 00:10:01,918
because it would just become very
symmetrical in terms of distribution.

140
00:10:01,918 --> 00:10:07,876
But if I'm giving 15% of one type of
icon and maybe 85% to the other type,

141
00:10:07,876 --> 00:10:13,673
I'm going to create a little bit of
a variance that it might look interesting.

142
00:10:13,673 --> 00:10:19,189
So let's see if this is working,
if we're missing anything.

143
00:10:19,189 --> 00:10:25,118
So you see, we made the black icon
kind of the most dominant one.

144
00:10:25,118 --> 00:10:28,375
Every so often we get the white one.

145
00:10:28,375 --> 00:10:33,017
It's not exactly 85%.

146
00:10:33,017 --> 00:10:34,607
There's a random chance for
this to happen, right?

147
00:10:34,607 --> 00:10:40,625
If you like it, if you would rather
have it the other way around,

148
00:10:40,625 --> 00:10:45,085
you just couldn't burn this number to 85,
so

149
00:10:45,085 --> 00:10:48,777
you would get more of the white cursor.

150
00:10:48,777 --> 00:10:53,455
And, yeah, again, this is kind of
a simple composition position.

151
00:10:53,455 --> 00:10:58,297
A little painting tool that we created,
combining one image in the background and

152
00:10:58,297 --> 00:11:02,085
a second image that we could use and
create this kind of bit of like

153
00:11:02,085 --> 00:11:06,811
a random brush, if you want, with some
of the tools that we've been covering.

154
00:11:06,811 --> 00:11:11,101
So I'm going to be showing you how to save
this material, how to export material

155
00:11:11,101 --> 00:11:15,458
out of processing, and then how do we
create an animation out of this content?

156
00:11:15,458 --> 00:11:17,860
So I'll see you in the next video.