1
00:00:05,919 --> 00:00:08,134
Hi, welcome to this new video.

2
00:00:08,134 --> 00:00:11,055
We're going to continue
talking about random and

3
00:00:11,055 --> 00:00:15,218
how we actually start using it in
our compositions, in our design,

4
00:00:15,218 --> 00:00:19,600
especially how we start using it to
kind of alter some of the properties of

5
00:00:19,600 --> 00:00:23,344
our geometry and
our primitives within our canvas, right?

6
00:00:23,344 --> 00:00:25,183
So let's start jumping right in.

7
00:00:25,183 --> 00:00:31,405
Let's imagine that we have our canvas and
we want to draw a rectangle,

8
00:00:31,405 --> 00:00:36,361
but perhaps we want to not know
exactly what is the size of

9
00:00:36,361 --> 00:00:40,803
this rectangle or
even the coordinates, right?

10
00:00:40,803 --> 00:00:46,336
So you can see that in this case we
can specify a random integer for

11
00:00:46,336 --> 00:00:51,256
the x variable, the y variable,
and basically this will

12
00:00:51,256 --> 00:00:56,302
make this rectangle be in
a random location in the screen.

13
00:00:56,302 --> 00:01:03,664
But similarly we can actually
affect its width and height, right?

14
00:01:03,664 --> 00:01:07,438
So we could actually do random integers
specifically with different domains here

15
00:01:07,438 --> 00:01:08,537
between one and three.

16
00:01:08,537 --> 00:01:17,167
And just to kind of control the size of
the rectangle, we can do that as well.

17
00:01:17,167 --> 00:01:22,151
So you can see that even the four
variables that defines a primitive

18
00:01:22,151 --> 00:01:25,717
in the rectangle could be randomized,
right?

19
00:01:25,717 --> 00:01:31,387
We could actually think of a circle
through its random integers,

20
00:01:31,387 --> 00:01:35,726
like the position, but
also its radius, right?

21
00:01:35,726 --> 00:01:40,857
So it really gives us a way of drawing
that does not necessarily need to be

22
00:01:40,857 --> 00:01:46,675
hard coded, meaning explicitly established
the variables that we care about,

23
00:01:46,675 --> 00:01:49,260
but rather more of a field, right?

24
00:01:49,260 --> 00:01:55,477
More of a feeling of a field, something
that could be multiplied multiple times.

25
00:01:55,477 --> 00:01:59,142
And that's where we're going to
start kind of opening up to creating

26
00:01:59,142 --> 00:02:04,118
compositions that start using randomness,
integrating randomness in a distribution,

27
00:02:04,118 --> 00:02:07,077
especially when we start
using loops with it as well.

28
00:02:07,077 --> 00:02:10,174
You'll see we could start getting
something interesting very quickly.

29
00:02:10,174 --> 00:02:15,618
So let's jump into processing and
see how we could actually do that in code.

30
00:02:15,618 --> 00:02:17,664
So here we are in processing.

31
00:02:17,664 --> 00:02:19,039
We're not going to do anything dynamic.

32
00:02:19,039 --> 00:02:23,682
So again, we're not going to necessarily
need to include the draw loop.

33
00:02:23,682 --> 00:02:25,639
So let's just draw.

34
00:02:25,639 --> 00:02:27,990
First of all,
we're going to do this as a loop, right?

35
00:02:27,990 --> 00:02:34,093
So I want to do a for
loop from I in range from 0 to 20,

36
00:02:34,093 --> 00:02:39,114
which is the same range
that we did before for

37
00:02:39,114 --> 00:02:44,424
the sequence of primitives
that we've done.

38
00:02:44,424 --> 00:02:47,788
And we know that we actually do
want to do maybe an ellipse, right?

39
00:02:47,788 --> 00:02:49,515
Let's do an ellipse this time.

40
00:02:49,515 --> 00:02:54,539
Let's do an ellipse that it's 100,

41
00:02:54,539 --> 00:03:00,315
100 and the size will be maybe 50, 50.

42
00:03:03,903 --> 00:03:09,607
So we have 20 ellipses
currently in the same location.

43
00:03:09,607 --> 00:03:14,148
Let's just create one random variable
first before we actually draw all these

44
00:03:14,148 --> 00:03:15,946
ellipses on top of each other.

45
00:03:15,946 --> 00:03:18,549
Notice that just based
on the previous mistake,

46
00:03:18,549 --> 00:03:22,242
we want to make sure that we're
importing the random module, right?

47
00:03:22,242 --> 00:03:23,918
If you're not using the random module,

48
00:03:23,918 --> 00:03:26,540
you're not going to be able to
access the random functionality.

49
00:03:26,540 --> 00:03:29,145
So let's do x.

50
00:03:29,145 --> 00:03:35,716
And here we do random.randomint, right?

51
00:03:35,716 --> 00:03:37,602
And we are going to specify the domain.

52
00:03:37,602 --> 00:03:38,894
We're going to say 0.

53
00:03:38,894 --> 00:03:42,422
And we know that our canvas is 1200.

54
00:03:42,422 --> 00:03:47,449
So we could type 1200 here and
say we want to create

55
00:03:47,449 --> 00:03:54,728
a random value that goes from 0 to 1200,
which is the size of our screen.

56
00:03:54,728 --> 00:03:57,522
But perhaps we could actually
just use that variable, right?

57
00:03:57,522 --> 00:04:00,866
So we're getting more and
more used to practicing a form of

58
00:04:00,866 --> 00:04:05,371
associative programming where we're
actually using a variable in different

59
00:04:05,371 --> 00:04:09,686
places in the code and not having to
type the same value over and over again.

60
00:04:09,686 --> 00:04:11,747
That's the whole point of
having variables, right?

61
00:04:11,747 --> 00:04:16,965
So hopefully you start getting
used to this idea, right?

62
00:04:16,965 --> 00:04:19,664
The variable is established up here.

63
00:04:19,664 --> 00:04:23,410
We're going to be using it
within the setup, right?

64
00:04:23,410 --> 00:04:29,017
So now that we have this x coordinate,
let's use it for the ellipse.

65
00:04:29,017 --> 00:04:33,334
Let's see what we get at this point.

66
00:04:33,334 --> 00:04:37,029
So we actually start getting
these ellipses distributed.

67
00:04:37,029 --> 00:04:41,275
All of them are in the y
coordinate of 100.

68
00:04:41,275 --> 00:04:46,641
So 100 units down, but
the position could be zero or

69
00:04:46,641 --> 00:04:51,319
it could be all the way to
the size of the screen.

70
00:04:51,319 --> 00:04:54,879
And every time that we run this program,

71
00:04:54,879 --> 00:04:59,496
we are going to be getting
a different result, right?

72
00:04:59,496 --> 00:05:02,843
So this distribution doesn't
look like the previous one.

73
00:05:02,843 --> 00:05:06,287
I mean, if you want to save
the screenshot and check, but trust me,

74
00:05:06,287 --> 00:05:08,757
that's actually what's happening, right?

75
00:05:08,757 --> 00:05:11,538
So let's also add a few
kind of styling here.

76
00:05:11,538 --> 00:05:18,348
Let's say no stroke, right?

77
00:05:18,348 --> 00:05:22,069
And maybe the feel just to kind of also
see a little bit the overlap, right?

78
00:05:22,069 --> 00:05:27,223
So we can say that the feel of this,
while we want to do it white,

79
00:05:27,223 --> 00:05:31,603
we might want to do it
slightly transparent, right?

80
00:05:31,603 --> 00:05:33,874
We can do a little bit more transparency.

81
00:05:33,874 --> 00:05:38,382
So maybe we haven't covered this,
but there's another.

82
00:05:38,382 --> 00:05:43,338
The feel function can use one color for
black and white, two colors for

83
00:05:43,338 --> 00:05:47,454
black and white and transparency,
three colors for RGB,

84
00:05:47,454 --> 00:05:50,482
four colors for RGB, plus transparency.

85
00:05:50,482 --> 00:05:55,062
So I'm going to be using the grayscale,
in this case white.

86
00:05:55,062 --> 00:05:59,049
And this 80 will represent transparency.

87
00:05:59,049 --> 00:06:03,716
And you can see that we're starting
to get this effect where we

88
00:06:03,716 --> 00:06:07,049
have a series of sphere or circles, right?

89
00:06:07,049 --> 00:06:12,514
All of them with some overlap that
every time we kind of run this kind of

90
00:06:12,514 --> 00:06:17,621
random function,
they get into a different location, right?

91
00:06:17,621 --> 00:06:18,830
So, pretty straightforward.

92
00:06:18,830 --> 00:06:22,216
We're not doing much with random, but

93
00:06:22,216 --> 00:06:26,738
let's copy that into our second variable,
right?

94
00:06:26,738 --> 00:06:30,071
So let's do x and y.

95
00:06:30,071 --> 00:06:34,186
In this case,
we can use the same random variable, but

96
00:06:34,186 --> 00:06:38,570
we do want to change the instead
of using the canvas width,

97
00:06:38,570 --> 00:06:41,626
we want to use the canvas height, right?

98
00:06:41,626 --> 00:06:46,047
Meaning that we want the values
to go between 0 and 600, right?

99
00:06:46,047 --> 00:06:49,428
So we don't want values
to go outside the canvas.

100
00:06:49,428 --> 00:06:51,414
So now that we have this variable,

101
00:06:51,414 --> 00:06:55,802
let's just replace this variable here
in the construction of the ellipse.

102
00:06:55,802 --> 00:07:00,566
And as you can see here, we could
have a composition that is, again,

103
00:07:00,566 --> 00:07:04,691
absolutely random based on
the position of those circles.

104
00:07:04,691 --> 00:07:07,210
And we can run it multiple times.

105
00:07:07,210 --> 00:07:11,890
And you'll see that we actually
distributed them using those

106
00:07:11,890 --> 00:07:13,421
random functions.

107
00:07:13,421 --> 00:07:16,639
But obviously we haven't done
too many iterations of that.

108
00:07:16,639 --> 00:07:21,252
You might think, well, why don't we
just crank that number up a little bit?

109
00:07:21,252 --> 00:07:23,721
So, as we understand, for loops, right?

110
00:07:23,721 --> 00:07:28,496
We're using all the kind of the different
elements that we've been learning

111
00:07:28,496 --> 00:07:29,749
through this week.

112
00:07:29,749 --> 00:07:33,716
We're using for loops to repeat
this operation multiple times.

113
00:07:33,716 --> 00:07:39,220
And you can have increase
the number of circles.

114
00:07:39,220 --> 00:07:43,139
Let's keep increasing that up further.

115
00:07:43,139 --> 00:07:50,538
As you can see here, we have a random
distribution of circles, right?

116
00:07:50,538 --> 00:07:52,310
So I'll let you kind of play with that.

117
00:07:52,310 --> 00:07:55,861
And you can play with more circles or
less of them.

118
00:07:55,861 --> 00:07:59,401
Maybe some of them are in some areas.

119
00:07:59,401 --> 00:08:03,693
Maybe you want your random just
to operate in half of the screen.

120
00:08:03,693 --> 00:08:05,900
It's up to you.

121
00:08:05,900 --> 00:08:10,019
Finally, let's just also randomize
the size of the circles, right?

122
00:08:10,019 --> 00:08:15,404
Because currently we have
all the circles being using

123
00:08:15,404 --> 00:08:21,516
the same hard coded value or
explicit value of 50, right?

124
00:08:21,516 --> 00:08:26,934
So we want to randomize the size.

125
00:08:26,934 --> 00:08:33,049
And here I'm going to use a slightly
different random function.

126
00:08:33,049 --> 00:08:36,917
So random.uniform,

127
00:08:36,917 --> 00:08:43,023
which is going to be between 1.0 and

128
00:08:43,023 --> 00:08:46,896
let's say 50.0.

129
00:08:46,896 --> 00:08:52,836
And what I'm trying to obtain here with
the uniform is floating point value.

130
00:08:52,836 --> 00:08:58,759
I don't want the values to be one,
two, three, like integer values,

131
00:08:58,759 --> 00:09:04,686
but rather a whole range of values
that might operate within the decimal

132
00:09:04,686 --> 00:09:10,357
space in order to use this result
as the size of the ellipse, right?

133
00:09:10,357 --> 00:09:13,765
And I'm going to duplicate it.

134
00:09:13,765 --> 00:09:15,678
I could do two variables, one for

135
00:09:15,678 --> 00:09:19,926
the x and y, so that these ellipses
kind of sometimes are more stretched.

136
00:09:19,926 --> 00:09:23,149
And I invite you to play
with that idea if you want.

137
00:09:23,149 --> 00:09:28,953
But for me, I just really wanted to
play with the size of these circles and

138
00:09:28,953 --> 00:09:31,345
the overlap of them, right?

139
00:09:31,345 --> 00:09:34,774
And sometimes maybe having areas that
are kind of a bit more empty and

140
00:09:34,774 --> 00:09:36,467
areas that are more overlapped.

141
00:09:36,467 --> 00:09:41,766
And we're playing with transparency to
kind of allow some of those moments

142
00:09:41,766 --> 00:09:46,661
to kind of really start kind of
looking slightly different, right?

143
00:09:46,661 --> 00:09:51,965
And again, it's not a very
complex composition in any way,

144
00:09:51,965 --> 00:09:58,101
but certainly we're starting to get
to a sensibility of using a code,

145
00:09:58,101 --> 00:10:04,029
repetition and randomness to
manipulate some of the primitives and

146
00:10:04,029 --> 00:10:07,461
variables that we're constructing.

147
00:10:07,461 --> 00:10:10,301
And as opposed to be
thinking that we would

148
00:10:10,301 --> 00:10:15,252
actually explicitly write the coordinate
of each one of those circles,

149
00:10:15,252 --> 00:10:19,798
we do a kind of a relatively succinct
piece of code that can actually

150
00:10:19,798 --> 00:10:23,796
create these altering
compositions every time, right?

151
00:10:23,796 --> 00:10:29,411
So we're going to leave this video here,
and I'll see you in the next one.