1
00:00:06,030 --> 00:00:08,946
Hi, welcome to this new video.

2
00:00:08,946 --> 00:00:12,865
We have been talking a little bit
about using probability, introduction

3
00:00:12,865 --> 00:00:16,989
to probability, and we introduced
the idea of designing with probability.

4
00:00:16,989 --> 00:00:20,891
So we want to maybe double down
a little bit further into this notion,

5
00:00:20,891 --> 00:00:24,115
explain a bit more how we can
actually use probability.

6
00:00:24,115 --> 00:00:28,779
So we're going to do another example, not
necessarily introducing nothing new new,

7
00:00:28,779 --> 00:00:31,354
but perhaps using this
concept a bit further.

8
00:00:31,354 --> 00:00:34,610
So let's dive into the code and
see what we can create.

9
00:00:34,610 --> 00:00:37,359
So here we are back again in processing.

10
00:00:37,359 --> 00:00:41,279
I've already have my template code.

11
00:00:41,279 --> 00:00:46,672
I also have our import random
function already loaded up.

12
00:00:46,672 --> 00:00:52,209
So if any of those pieces are missing,
by all means include them into your code.

13
00:00:52,209 --> 00:00:57,089
And what we're going to try to do is use
or revisit the idea of nested loops,

14
00:00:57,089 --> 00:01:00,374
which we've covered before,
to create a grid.

15
00:01:00,374 --> 00:01:05,240
So let's just do for

16
00:01:05,240 --> 00:01:10,678
i in range, let's say

17
00:01:10,678 --> 00:01:15,830
0 to 100, and for

18
00:01:15,830 --> 00:01:22,138
i in range, 0 to 100.

19
00:01:22,138 --> 00:01:25,460
There we go.

20
00:01:25,460 --> 00:01:30,185
And what we're going to try to do here is,
we're going to go

21
00:01:30,185 --> 00:01:35,116
back to this notion of designing
variations to a matrix,

22
00:01:35,116 --> 00:01:39,328
a grid,
something that starts being rigid, but

23
00:01:39,328 --> 00:01:44,796
then we can playfully break
the rigidity of that grid, right?

24
00:01:44,796 --> 00:01:49,997
We've done exercises like this, creating
something like an abstract painting,

25
00:01:49,997 --> 00:01:53,119
but we're going to introduce
new layer of control,

26
00:01:53,119 --> 00:01:56,781
in this case using if statements and
randomness, right?

27
00:01:56,781 --> 00:02:00,333
So let's just create the x and
y coordinates.

28
00:02:00,333 --> 00:02:06,171
So x = i x 20 and

29
00:02:06,171 --> 00:02:13,682
y = j x 20, right?

30
00:02:13,682 --> 00:02:18,891
And this will be driving the rectangle.

31
00:02:18,891 --> 00:02:23,063
It's going to be x,

32
00:02:23,063 --> 00:02:27,238
y, 15, 15.

33
00:02:27,238 --> 00:02:33,768
A lot of really great kind of generative
artists, algorithmic artists, have series.

34
00:02:33,768 --> 00:02:39,537
So you'll see a series of pieces that
kind of play on a similar theme, right?

35
00:02:39,537 --> 00:02:44,049
So you will be seeing this a little bit
here where we're actually revisiting

36
00:02:44,049 --> 00:02:48,418
the notion of this nested grid, like
how variations to a grid and how we can

37
00:02:48,418 --> 00:02:53,590
actually exercise different logics to
actually achieve different results, right?

38
00:02:53,590 --> 00:02:58,345
So let's see what we have at the moment.

39
00:02:58,345 --> 00:03:00,953
We have an error.

40
00:03:00,953 --> 00:03:06,237
Let's see, what are we doing wrong here?

41
00:03:06,237 --> 00:03:08,417
It's here, right?

42
00:03:08,417 --> 00:03:09,460
In the rectangle.

43
00:03:09,460 --> 00:03:10,317
There we go.

44
00:03:10,317 --> 00:03:15,834
So we have the grid that we've

45
00:03:15,834 --> 00:03:20,916
been discussing, right?

46
00:03:20,916 --> 00:03:26,232
Let's just start before we
actually start creating

47
00:03:26,232 --> 00:03:30,819
variation with some if statements and
so on,

48
00:03:30,819 --> 00:03:38,564
let's include this random number that
is going to be a value between 0 and 1.

49
00:03:44,963 --> 00:03:46,434
Right?

50
00:03:46,434 --> 00:03:51,403
You could do a 0 and 100 if you want to
be more specific about percentages and

51
00:03:51,403 --> 00:03:53,785
you don't want to be using decimals.

52
00:03:53,785 --> 00:03:57,857
You could by all means say, hey,
I want to do a value between 0 and 100,

53
00:03:57,857 --> 00:03:59,382
and then it's above 20.

54
00:03:59,382 --> 00:04:00,598
That would also work, right?

55
00:04:00,598 --> 00:04:04,238
But you'll see that in computing and
in programming,

56
00:04:04,238 --> 00:04:07,573
you will see a lot of
domains that are normalized.

57
00:04:07,573 --> 00:04:12,734
The idea of a domain that is normalized
is that behaves between 0 and 1, right?

58
00:04:12,734 --> 00:04:14,853
So being able to evaluate
something between 0 and

59
00:04:14,853 --> 00:04:16,523
1 is something that you would do a lot.

60
00:04:16,523 --> 00:04:19,720
And we eventually will start
talking about remapping, right?

61
00:04:19,720 --> 00:04:23,587
Domains that maybe exist
in a different range and

62
00:04:23,587 --> 00:04:26,990
then bringing them down to a 0 to 1 range.

63
00:04:26,990 --> 00:04:30,703
There's a lot of kind of mathematical
transformations that we could do to data.

64
00:04:30,703 --> 00:04:35,273
But for now, let's just make sure that we
are operating within a very simple domain

65
00:04:35,273 --> 00:04:40,055
between 0 and 1, one that we understand,
and it's behaving predictably, right?

66
00:04:40,055 --> 00:04:43,436
So if this random value,

67
00:04:43,436 --> 00:04:48,266
this random number is bigger than,

68
00:04:48,266 --> 00:04:56,655
let's say something like what
we did before 0.2, right?

69
00:04:56,655 --> 00:05:00,843
We could execute one part of the code,
right?

70
00:05:00,843 --> 00:05:04,200
So let's just do some code here.

71
00:05:04,200 --> 00:05:08,475
I like building a structure first,

72
00:05:08,475 --> 00:05:14,040
else we can have some other code here,
right?

73
00:05:17,773 --> 00:05:23,529
So what if we would include this rectangle

74
00:05:23,529 --> 00:05:30,772
geometry within maybe only this area here,
right?

75
00:05:30,772 --> 00:05:33,165
Let's see what happens.

76
00:05:33,165 --> 00:05:39,654
Well, let's just What are we missing here?

77
00:05:39,654 --> 00:05:44,483
Let's just make sure that we
include some code here, print.

78
00:05:53,151 --> 00:05:59,416
And let's just make sure that we

79
00:05:59,416 --> 00:06:05,224
are including the fill here.

80
00:06:13,000 --> 00:06:14,651
It's going to be white.

81
00:06:20,419 --> 00:06:25,049
And this shouldn't be needed,

82
00:06:25,049 --> 00:06:29,850
in all honesty, but we're going to

83
00:06:29,850 --> 00:06:35,003
remove it and put a different fill.

84
00:06:35,003 --> 00:06:36,963
Like a black fill, right?

85
00:06:36,963 --> 00:06:38,767
A zero.

86
00:06:38,767 --> 00:06:40,553
Let's see what we get here.

87
00:06:40,553 --> 00:06:43,544
Okay, so what do we have here?

88
00:06:50,000 --> 00:06:58,030
What we should be expecting to see is
that only 20% of the values are white.

89
00:06:58,030 --> 00:07:04,783
So this is the 80% of
the values are kind of empty.

90
00:07:04,783 --> 00:07:07,987
We're not drawing a rectangle
at all in those areas.

91
00:07:07,987 --> 00:07:12,904
For now, we're just leaving
a placeholder piece of code saying that

92
00:07:12,904 --> 00:07:15,463
fill equals to 0, but otherwise.

93
00:07:15,463 --> 00:07:18,800
So if we are within that 20%,

94
00:07:18,800 --> 00:07:24,371
we are drawing a rectangle
in this location, right?

95
00:07:24,371 --> 00:07:29,362
We could include a geometry

96
00:07:29,362 --> 00:07:33,273
as well in this area.

97
00:07:33,273 --> 00:07:36,129
So x, y.

98
00:07:36,129 --> 00:07:43,239
Let's do something like a small ellipse,
right?

99
00:07:48,501 --> 00:07:50,922
And we're going to draw
that white as well, right?

100
00:07:50,922 --> 00:07:58,485
So we're changing graphically
between rectangles and ellipses.

101
00:07:58,485 --> 00:08:01,822
But as you can see, the ellipses,

102
00:08:01,822 --> 00:08:07,924
which are very small are drawn
from the center, but in order for

103
00:08:07,924 --> 00:08:13,222
them to feel like they belong
to the rectangle series,

104
00:08:13,222 --> 00:08:17,393
we would actually have to change the mode.

105
00:08:17,393 --> 00:08:24,139
So, let's do something
called ellipse mode.

106
00:08:24,139 --> 00:08:28,378
So, we could say corner.

107
00:08:28,378 --> 00:08:32,699
And in order to see them a little bit
further, let's just do a 15 x 15,

108
00:08:32,699 --> 00:08:36,147
the same size of the rectangles,
and see what we get here.

109
00:08:36,147 --> 00:08:37,562
So, here we go.

110
00:08:37,562 --> 00:08:41,511
So, what you could see here, and

111
00:08:41,511 --> 00:08:46,741
hopefully you can see the difference here.

112
00:08:46,741 --> 00:08:51,185
But we have, in some cases, rectangles,
in some cases, circles, right?

113
00:08:51,185 --> 00:08:55,709
So the geometry is swapping.

114
00:08:55,709 --> 00:09:00,951
We could actually say that whenever

115
00:09:00,951 --> 00:09:05,667
we see ellipses, we could say,

116
00:09:05,667 --> 00:09:10,908
noStroke, or basically, sorry,

117
00:09:10,908 --> 00:09:15,642
noFill and stroke being white.

118
00:09:15,642 --> 00:09:20,283
And then the other one,
we could say, noStroke.

119
00:09:20,283 --> 00:09:24,793
So, we're just playing with graphical
variance between those two conditions.

120
00:09:24,793 --> 00:09:27,772
The example code that we
are providing is slightly different.

121
00:09:27,772 --> 00:09:32,200
You can definitely play with
a color variation, right?

122
00:09:32,200 --> 00:09:36,694
But there's so many interesting things
that you can do when you're working with

123
00:09:36,694 --> 00:09:38,621
certain probabilities, right?

124
00:09:38,621 --> 00:09:44,184
Again, you could actually make that
probability being a lot smaller,

125
00:09:44,184 --> 00:09:46,232
let's say 5%, right?

126
00:09:46,232 --> 00:09:49,850
And there's a certain kind of aesthetic
that emerges out of this kind of

127
00:09:49,850 --> 00:09:52,685
randomization of some cells
being different, again,

128
00:09:52,685 --> 00:09:54,995
graphically different, color different.

129
00:09:54,995 --> 00:09:57,035
There's so
many things that you can do, right?

130
00:09:57,035 --> 00:10:00,154
Especially adding some
kind of accentuation.

131
00:10:00,154 --> 00:10:03,457
As we move along, we're going to be
learning more interesting distributions,

132
00:10:03,457 --> 00:10:04,415
not just randomness.

133
00:10:04,415 --> 00:10:09,119
But what if we would use a pearly noise or
even an image as a driver for

134
00:10:09,119 --> 00:10:14,839
where do we maybe draw a different shape,
change the color of something in a way?

135
00:10:14,839 --> 00:10:17,461
How do we kind of use
the information from one domain and

136
00:10:17,461 --> 00:10:19,399
transferring into a different domain?

137
00:10:19,399 --> 00:10:24,560
But we're going one step at a time,
and hopefully, these ideas kind of

138
00:10:24,560 --> 00:10:30,600
start kind of giving you ideas of how you
would go about designing your own artwork.

139
00:10:30,600 --> 00:10:32,472
Perhaps graphic design, or

140
00:10:32,472 --> 00:10:37,550
any kind of computational design project
that might include some code in it?

141
00:10:37,550 --> 00:10:41,294
So, yeah, we're going to leave this one
here, and I'll see you in the next video.