1 00:00:05,290 --> 00:00:08,010 Welcome to the second part 2 00:00:08,010 --> 00:00:12,785 of creating a final composition for this Week 1. 3 00:00:12,785 --> 00:00:17,630 We are halfway of completing our typographic drawing. 4 00:00:17,630 --> 00:00:19,430 If you haven't seen the first part, 5 00:00:19,430 --> 00:00:22,210 please start in that one because we 6 00:00:22,210 --> 00:00:25,170 are going to continue from the code that we left off. 7 00:00:25,170 --> 00:00:27,375 Let's look at what we have so far. 8 00:00:27,375 --> 00:00:31,110 We have a arbitrary color background 9 00:00:31,110 --> 00:00:32,850 and we have a way of drawing with 10 00:00:32,850 --> 00:00:36,995 the mouse using these arbitrary characters 11 00:00:36,995 --> 00:00:39,140 that come from typography, 12 00:00:39,140 --> 00:00:46,140 so we are able to decide which characters we're using 13 00:00:46,140 --> 00:00:49,630 and you can change those characters here and 14 00:00:49,630 --> 00:00:54,535 how you can display them in an invisible grid format. 15 00:00:54,535 --> 00:00:57,750 What I wanted to in the second part is really 16 00:00:57,750 --> 00:01:00,910 try to reintegrate the ideas of lists, 17 00:01:00,910 --> 00:01:02,710 color palettes, and dictionaries that we've 18 00:01:02,710 --> 00:01:05,030 been learning all throughout this first week. 19 00:01:05,030 --> 00:01:09,770 Let's create the possible palettes 20 00:01:09,770 --> 00:01:10,770 because we want to be able to 21 00:01:10,770 --> 00:01:12,550 switch between colors as well. 22 00:01:12,550 --> 00:01:16,610 I'm going to go and say, my color palettes, 23 00:01:19,510 --> 00:01:23,270 that's going to be a dictionary. 24 00:01:23,270 --> 00:01:25,010 I'm going to start with a dictionary. 25 00:01:25,010 --> 00:01:28,580 I think this is going to be the most concise version 26 00:01:28,580 --> 00:01:31,900 of this, as we've discussed. 27 00:01:31,900 --> 00:01:34,300 The dictionary I want to 28 00:01:34,300 --> 00:01:37,920 create is identifying with a name, 29 00:01:37,920 --> 00:01:41,250 a particular color palette. 30 00:01:41,250 --> 00:01:43,500 Let's just write something. 31 00:01:43,500 --> 00:01:46,630 Let's go to the website that we've been using. 32 00:01:46,630 --> 00:01:51,125 We have here coolors.co. 33 00:01:51,125 --> 00:01:53,565 I'm going to use this first palette. 34 00:01:53,565 --> 00:01:59,835 I'm going to select the font and go back to processing. 35 00:01:59,835 --> 00:02:02,710 Let's just call this Coral. 36 00:02:05,420 --> 00:02:08,745 That's going to be our key name, 37 00:02:08,745 --> 00:02:11,860 and now that key name is going to be associated to 38 00:02:11,860 --> 00:02:16,410 a list The list is going to be a list of color values. 39 00:02:16,410 --> 00:02:20,940 We're going to do this color value, 40 00:02:20,940 --> 00:02:24,645 and we're replacing that with FF. 41 00:02:24,645 --> 00:02:29,260 That has been our pattern for bringing colors. 42 00:02:29,260 --> 00:02:31,760 I'm going to copy paste this first. 43 00:02:31,760 --> 00:02:34,060 Just for the structure, we want to do 44 00:02:34,060 --> 00:02:38,175 five colors and close the list. 45 00:02:38,175 --> 00:02:40,530 This is basically what we're trying to do. 46 00:02:40,530 --> 00:02:43,110 This is the first entry of our dictionary. 47 00:02:43,110 --> 00:02:48,530 We use a coma. We can copy paste this once more. 48 00:02:49,620 --> 00:02:57,215 I'm going to do two color palettes. 49 00:02:57,215 --> 00:02:59,490 Again, it's a little bit boring 50 00:02:59,490 --> 00:03:02,390 probably to just see me copy paste some of these codes. 51 00:03:02,390 --> 00:03:03,910 I'm going to quickly go through 52 00:03:03,910 --> 00:03:07,065 them to create two dictionaries, 53 00:03:07,065 --> 00:03:09,950 replacing the colors with 54 00:03:09,950 --> 00:03:13,740 the information from the list. Let's do that. 55 00:03:31,360 --> 00:03:35,440 The invitation here is always to bring 56 00:03:35,440 --> 00:03:40,705 your own sensibility to the colors that you 57 00:03:40,705 --> 00:03:46,125 like to really explore which 58 00:03:46,125 --> 00:03:51,975 are the color themes that are interesting, 59 00:03:51,975 --> 00:03:55,270 and that's up to you, 60 00:04:01,880 --> 00:04:05,110 but we really wanted to have a framework for 61 00:04:05,110 --> 00:04:08,490 thinking of color as something that is synergistic. 62 00:04:08,490 --> 00:04:11,310 Color palettes have ideas of 63 00:04:11,310 --> 00:04:13,110 color theory and colors 64 00:04:13,110 --> 00:04:14,550 that seem to resonate with each other. 65 00:04:14,550 --> 00:04:16,595 When I learned processing, I remember, 66 00:04:16,595 --> 00:04:18,745 always typing RGB colors, 67 00:04:18,745 --> 00:04:20,070 and really trying to figure out 68 00:04:20,070 --> 00:04:21,750 which colors would work with one another. 69 00:04:21,750 --> 00:04:23,470 I think that what we're building 70 00:04:23,470 --> 00:04:25,490 here is using the understanding of 71 00:04:25,490 --> 00:04:27,610 data structures as a way of 72 00:04:27,610 --> 00:04:32,115 leveraging an affinity for color and design, 73 00:04:32,115 --> 00:04:34,290 but it's a little bit more comprehensive where there is 74 00:04:34,290 --> 00:04:36,810 a framework of colors that 75 00:04:36,810 --> 00:04:38,790 seem to resonate with one another in 76 00:04:38,790 --> 00:04:44,100 an interesting way.. Do we have the Coral built. 77 00:04:44,100 --> 00:04:50,605 Let's just do another one. I'm going to select here, 78 00:04:50,605 --> 00:04:53,470 I can press space in this website. 79 00:04:53,470 --> 00:04:56,730 Let's just find something different. 80 00:04:56,780 --> 00:04:59,090 I like this one somehow. 81 00:04:59,090 --> 00:05:00,560 I like the contrast of 82 00:05:00,560 --> 00:05:05,690 one red tone between these more earthy tones as well. 83 00:05:05,690 --> 00:05:09,950 I'm going to just use this one for the second one. 84 00:05:10,220 --> 00:05:13,840 We're going to call it Forest. 85 00:05:15,170 --> 00:05:20,050 Let's just do this process once again. 86 00:05:39,260 --> 00:05:43,155 Another great way of thinking of color palettes 87 00:05:43,155 --> 00:05:46,965 is sampling them from let's say, 88 00:05:46,965 --> 00:05:48,285 you have a movie or you have 89 00:05:48,285 --> 00:05:50,355 a piece of art that you really like. 90 00:05:50,355 --> 00:05:56,580 You can always sample colors from a screenshot. 91 00:05:56,580 --> 00:05:58,740 Often, movies have 92 00:05:58,740 --> 00:06:00,660 really careful attention to 93 00:06:00,660 --> 00:06:04,320 the color palettes that are included into a film. 94 00:06:04,320 --> 00:06:06,780 Similarly, works of art operate 95 00:06:06,780 --> 00:06:11,670 with very careful calibration of a color palette. 96 00:06:11,670 --> 00:06:14,070 If you start being aware of that and 97 00:06:14,070 --> 00:06:16,815 start sampling some of those things, 98 00:06:16,815 --> 00:06:21,630 you'll be able to starting to learn what is 99 00:06:21,630 --> 00:06:23,640 the attention to detail to color that 100 00:06:23,640 --> 00:06:27,220 many artists use in their work. 101 00:06:27,680 --> 00:06:30,720 This is a tool that could certainly use 102 00:06:30,720 --> 00:06:33,270 a sampling from frames, 103 00:06:33,270 --> 00:06:34,725 from movies, and so forth. 104 00:06:34,725 --> 00:06:38,955 I think that we have our dictionary ready. 105 00:06:38,955 --> 00:06:40,725 We have a dictionary of what we're calling 106 00:06:40,725 --> 00:06:43,995 two themes or two color palettes, 107 00:06:43,995 --> 00:06:46,770 each one of them with their respective entries 108 00:06:46,770 --> 00:06:48,465 and each one of them is a list. 109 00:06:48,465 --> 00:06:51,810 The square brackets, we have a list called 110 00:06:51,810 --> 00:06:54,105 the coral palette and 111 00:06:54,105 --> 00:06:57,195 another list called the forest palette. 112 00:06:57,195 --> 00:06:59,580 Again, you are invited, if you want to add more, 113 00:06:59,580 --> 00:07:00,900 just add a comma at the end of 114 00:07:00,900 --> 00:07:02,970 this and you might be able to have 3, 115 00:07:02,970 --> 00:07:05,085 4, 5, 10 color palettes. It's up to you. 116 00:07:05,085 --> 00:07:07,500 It's incredibly flexible to 117 00:07:07,500 --> 00:07:11,250 think through these databases of colors. 118 00:07:11,250 --> 00:07:13,545 How do we use that now? 119 00:07:13,545 --> 00:07:19,305 Let's define our current palette. 120 00:07:19,305 --> 00:07:26,100 Will be, let's 121 00:07:26,100 --> 00:07:29,160 just make coral our current palette because we 122 00:07:29,160 --> 00:07:30,690 have to define which is 123 00:07:30,690 --> 00:07:33,250 the palette we're going to be using. 124 00:07:34,460 --> 00:07:38,850 We can use the information of that palette. 125 00:07:38,850 --> 00:07:41,160 Let's just switch the background color. 126 00:07:41,160 --> 00:07:44,445 Right now, the background color is identified as red. 127 00:07:44,445 --> 00:07:48,255 If you remember, we can access the information of 128 00:07:48,255 --> 00:07:52,800 our palette by the following formula. 129 00:07:52,800 --> 00:07:54,930 We need to use color 130 00:07:54,930 --> 00:08:04,410 palettes.get and we use the name of the coral. 131 00:08:04,410 --> 00:08:08,400 But we're going to use the variable current palette. 132 00:08:08,400 --> 00:08:13,470 Go and get the current palette, 133 00:08:13,470 --> 00:08:14,955 which is going to be coral. 134 00:08:14,955 --> 00:08:16,905 Now, within that, 135 00:08:16,905 --> 00:08:22,830 select the first entry of that list. 136 00:08:22,830 --> 00:08:25,680 What this is saying, this line again, 137 00:08:25,680 --> 00:08:27,390 it's trying to rehearse and 138 00:08:27,390 --> 00:08:30,045 exercise that muscle of data structures, 139 00:08:30,045 --> 00:08:32,520 we are accessing the dictionary, 140 00:08:32,520 --> 00:08:37,920 we are getting the coral entry, which is a list, 141 00:08:37,920 --> 00:08:40,590 and we're saying select the first entry 142 00:08:40,590 --> 00:08:46,365 of that sequence of colors, which is this one. 143 00:08:46,365 --> 00:08:49,620 We cannot just put a hexadecimal value 144 00:08:49,620 --> 00:08:52,935 into our background as we also have seen. 145 00:08:52,935 --> 00:08:59,700 What we often do is using the unhex command, 146 00:08:59,700 --> 00:09:01,560 which we will have to open 147 00:09:01,560 --> 00:09:04,095 parentheses and close parentheses here. 148 00:09:04,095 --> 00:09:06,210 Within the unhex, 149 00:09:06,210 --> 00:09:08,970 we are giving the value of 150 00:09:08,970 --> 00:09:14,490 the first color in the coral is a palette. 151 00:09:14,490 --> 00:09:17,415 We've done a lot here. We created the dictionary. 152 00:09:17,415 --> 00:09:19,065 We changed the background only. 153 00:09:19,065 --> 00:09:21,405 Let's just see if this is running. 154 00:09:21,405 --> 00:09:25,950 You see we have the first color of that color palette is 155 00:09:25,950 --> 00:09:30,090 being this purple color operating in the background. 156 00:09:30,090 --> 00:09:32,440 That seems to be working well. 157 00:09:34,510 --> 00:09:39,920 This line often could be considered a very complex line. 158 00:09:39,920 --> 00:09:43,790 Not because necessarily it 159 00:09:43,790 --> 00:09:46,040 represents so many complex values, 160 00:09:46,040 --> 00:09:49,150 but it's really asking you to keep track 161 00:09:49,150 --> 00:09:51,960 of how we're deploying 162 00:09:51,960 --> 00:09:54,465 a relatively complex data structure. 163 00:09:54,465 --> 00:09:57,690 We have a mixture between dictionaries and lists. 164 00:09:57,690 --> 00:10:02,925 Just because this second specialization course 165 00:10:02,925 --> 00:10:05,190 is focused on data structures, 166 00:10:05,190 --> 00:10:07,980 we really wanted you to have awareness of how 167 00:10:07,980 --> 00:10:09,420 those data structures could be 168 00:10:09,420 --> 00:10:13,065 deployed within a design environment, 169 00:10:13,065 --> 00:10:16,020 and one that hopefully becomes very flexible to 170 00:10:16,020 --> 00:10:19,560 start sampling the different schemes, 171 00:10:19,560 --> 00:10:21,300 the different palettes that we have. 172 00:10:21,300 --> 00:10:23,550 What else are we using color for? 173 00:10:23,550 --> 00:10:25,815 Well, we are using them for 174 00:10:25,815 --> 00:10:29,110 defining the color of our characters. 175 00:10:30,380 --> 00:10:34,500 Let's also replace this number 255 176 00:10:34,500 --> 00:10:43,090 for a random color from within the current palette. 177 00:10:47,450 --> 00:10:50,280 What we'll do here is create, 178 00:10:50,280 --> 00:10:53,380 let's just give a bit of space here. 179 00:10:54,530 --> 00:10:56,895 Let's call this variable. 180 00:10:56,895 --> 00:10:59,640 Variables sometimes can be incredibly long, 181 00:10:59,640 --> 00:11:02,040 but it's useful sometimes to have 182 00:11:02,040 --> 00:11:03,810 a descriptive name so that we 183 00:11:03,810 --> 00:11:05,895 know what those variables are doing. 184 00:11:05,895 --> 00:11:15,700 We could say a random color from palette. 185 00:11:17,540 --> 00:11:19,920 Again, if you want to make something 186 00:11:19,920 --> 00:11:22,545 shorter, that's up to you. 187 00:11:22,545 --> 00:11:24,870 I like using names that are quite 188 00:11:24,870 --> 00:11:26,520 descriptive of what the variable 189 00:11:26,520 --> 00:11:28,560 is attempting to achieve. 190 00:11:28,560 --> 00:11:31,690 We will start with 191 00:11:34,520 --> 00:11:39,090 my color palette, which is the dictionary. 192 00:11:39,090 --> 00:11:40,575 We're going to access. 193 00:11:40,575 --> 00:11:44,490 Let's do the get command to access, 194 00:11:44,490 --> 00:11:49,140 in this case, the same way we did over here, 195 00:11:49,140 --> 00:11:50,700 we're going to access the current palette, 196 00:11:50,700 --> 00:11:51,750 so we need to make sure that 197 00:11:51,750 --> 00:11:53,250 this variable that we define as 198 00:11:53,250 --> 00:12:03,765 current palette is used 199 00:12:03,765 --> 00:12:07,470 every time that we access the dictionary. 200 00:12:07,470 --> 00:12:10,230 Therefore, later, we will be able to 201 00:12:10,230 --> 00:12:11,970 change and do the swapping as 202 00:12:11,970 --> 00:12:14,535 we did in some of the previous exercises. 203 00:12:14,535 --> 00:12:20,430 Now we want to find an index The index of this one, 204 00:12:20,430 --> 00:12:22,305 we could say one for now, 205 00:12:22,305 --> 00:12:24,780 but we want to do a random index. 206 00:12:24,780 --> 00:12:27,570 We want to select a random color from that palette, 207 00:12:27,570 --> 00:12:30,390 but we don't have a variable for that yet, 208 00:12:30,390 --> 00:12:34,050 but let's see if this accesses the color information. 209 00:12:34,050 --> 00:12:39,855 It works as intended just by hardcoding the number 1, 210 00:12:39,855 --> 00:12:47,410 which will be the second entry of the coral palette. 211 00:12:47,780 --> 00:12:53,760 Here we will replace this fill with, 212 00:12:53,760 --> 00:12:59,805 let's remember to unhex, this value. 213 00:12:59,805 --> 00:13:06,420 Every time that we want to use a value from that list, 214 00:13:06,420 --> 00:13:08,820 we will be unhexing it just because it 215 00:13:08,820 --> 00:13:11,710 comes in a hexadecimal notation. 216 00:13:12,200 --> 00:13:19,335 Again, we can try. I don't know if you can see it. 217 00:13:19,335 --> 00:13:22,050 There's not too much contrast to those two colors, 218 00:13:22,050 --> 00:13:25,065 but there seems to be a good synergy between them. 219 00:13:25,065 --> 00:13:29,430 We are sampling the first color as the background and 220 00:13:29,430 --> 00:13:37,230 the second color as the characters. 221 00:13:37,230 --> 00:13:40,335 One final thing that we want to do here, 222 00:13:40,335 --> 00:13:44,325 in order to get effectively a random color, 223 00:13:44,325 --> 00:13:48,730 let's call this a new variable called the random_index. 224 00:13:49,790 --> 00:13:54,060 The random_index will be 225 00:13:54,060 --> 00:13:56,985 similarly in the way in which we did here, 226 00:13:56,985 --> 00:14:01,420 a random range between zero and the possible characters. 227 00:14:02,300 --> 00:14:05,145 I think, actually, this is 228 00:14:05,145 --> 00:14:07,350 just realized an error from the last class. 229 00:14:07,350 --> 00:14:10,600 I think that is unnecessary. 230 00:14:10,910 --> 00:14:13,605 That's something that we were trying to do 231 00:14:13,605 --> 00:14:15,390 in the process of finding a bug, 232 00:14:15,390 --> 00:14:17,745 but I think that that's unnecessary now. 233 00:14:17,745 --> 00:14:23,550 We can find this random index using the random range. 234 00:14:23,550 --> 00:14:27,400 I'm going to copy paste that in order to avoid typos. 235 00:14:29,420 --> 00:14:31,800 This operation might seem tricky, 236 00:14:31,800 --> 00:14:33,105 but I think that if you are 237 00:14:33,105 --> 00:14:35,190 following the data structure, 238 00:14:35,190 --> 00:14:36,900 it shouldn't be so tricky. 239 00:14:36,900 --> 00:14:38,550 We're going to do a random range 240 00:14:38,550 --> 00:14:42,270 between zero and a number, 241 00:14:42,270 --> 00:14:47,620 which we want to be the length of this list. 242 00:14:47,720 --> 00:14:51,960 This list might be five elements at the moment, 243 00:14:51,960 --> 00:14:54,790 but it might be 10 or it might be two. 244 00:14:56,900 --> 00:14:59,925 If we knew the number, we could always put a five, 245 00:14:59,925 --> 00:15:01,710 but that's not very good coding 246 00:15:01,710 --> 00:15:03,735 because we're not associating this value. 247 00:15:03,735 --> 00:15:06,090 It's prone to errors if someone comes in 248 00:15:06,090 --> 00:15:09,405 and changes the number of elements. 249 00:15:09,405 --> 00:15:12,420 We are going to do the same thing that we did here, 250 00:15:12,420 --> 00:15:15,510 which is the length of that list. 251 00:15:15,510 --> 00:15:20,880 The length of that list is, 252 00:15:20,880 --> 00:15:25,080 basically, we have to specify the my color palette, 253 00:15:25,080 --> 00:15:27,280 so that's the dictionary 254 00:15:37,870 --> 00:15:41,900 Actually, let's just keep the same notation. 255 00:15:41,900 --> 00:15:47,405 Let's use my color palette get the current palette. 256 00:15:47,405 --> 00:15:53,390 That would be the size of the list. 257 00:15:53,390 --> 00:15:56,030 I think we have to just close parenthesis. 258 00:15:56,030 --> 00:15:58,340 This parenthesis is closing here, 259 00:15:58,340 --> 00:16:00,245 this one is closing the next one, 260 00:16:00,245 --> 00:16:02,210 and this one is closing this one. 261 00:16:02,210 --> 00:16:06,750 It's sometimes good to give a bit of space. 262 00:16:07,150 --> 00:16:10,550 That would be the random index. 263 00:16:10,550 --> 00:16:15,905 We are basically accessing the dictionary. 264 00:16:15,905 --> 00:16:18,530 Give me the current palette and then give 265 00:16:18,530 --> 00:16:21,960 me the length of this list. 266 00:16:23,950 --> 00:16:26,930 Finally, we have that random index. 267 00:16:26,930 --> 00:16:29,960 We wanted to use that index 268 00:16:29,960 --> 00:16:32,360 instead of hard coding that 269 00:16:32,360 --> 00:16:34,850 the color is made out of the first entry, 270 00:16:34,850 --> 00:16:36,755 or basically the second entry in the list, 271 00:16:36,755 --> 00:16:39,600 we're going to use a random index. 272 00:16:41,650 --> 00:16:44,435 One thing that we might want to do here, 273 00:16:44,435 --> 00:16:50,240 if we know that the background is this color, 274 00:16:50,240 --> 00:16:52,670 we might want to select a random color 275 00:16:52,670 --> 00:16:57,935 between the second entry and the last one. 276 00:16:57,935 --> 00:16:59,675 If that would be the case, 277 00:16:59,675 --> 00:17:02,330 instead of putting a zero here in the random index, 278 00:17:02,330 --> 00:17:05,195 you could put a one, making sure that you skip the zero. 279 00:17:05,195 --> 00:17:07,470 I'm going to leave the zero for now 280 00:17:08,800 --> 00:17:11,420 that might actually create entities 281 00:17:11,420 --> 00:17:13,625 that have the same color that the background, 282 00:17:13,625 --> 00:17:15,905 so you can decide how that works, 283 00:17:15,905 --> 00:17:18,785 is something that you want or not. 284 00:17:18,785 --> 00:17:21,740 It might be that you want to have the background for 285 00:17:21,740 --> 00:17:24,410 a different color altogether. 286 00:17:24,410 --> 00:17:28,050 You can decide to use a zero here or one. 287 00:17:29,080 --> 00:17:31,520 Hopefully, this is making sense. 288 00:17:31,520 --> 00:17:36,200 We are doing relatively complex operations just to select 289 00:17:36,200 --> 00:17:38,585 what we want and really 290 00:17:38,585 --> 00:17:41,540 putting some of all the challenges that we have together. 291 00:17:41,540 --> 00:17:43,460 Let's see what we have so far. 292 00:17:43,460 --> 00:17:47,090 We have these fonts being printed in 293 00:17:47,090 --> 00:17:54,410 the screen using random color from palette. 294 00:17:54,410 --> 00:17:58,955 Let's stop there. Because we're doing it every 10 frames. 295 00:17:58,955 --> 00:18:00,890 I'm going to do it every two frames now, 296 00:18:00,890 --> 00:18:03,575 see if we can get more of them. 297 00:18:03,575 --> 00:18:07,560 You can see what we're obtaining. 298 00:18:07,560 --> 00:18:10,905 If you want to try it 299 00:18:10,905 --> 00:18:16,460 with maybe not the randomization of characters, 300 00:18:16,460 --> 00:18:18,860 instead of using random characters, 301 00:18:18,860 --> 00:18:21,470 and you really liked using just one character, 302 00:18:21,470 --> 00:18:24,810 you can use a zero here or one. 303 00:18:25,840 --> 00:18:29,750 This would actually just be this form 304 00:18:29,750 --> 00:18:33,545 of ASCII painting where 305 00:18:33,545 --> 00:18:40,640 you are using this color palette to paint. 306 00:18:40,640 --> 00:18:43,415 We're bringing back typography, 307 00:18:43,415 --> 00:18:45,800 we are using a color palette. 308 00:18:45,800 --> 00:18:48,245 The final thing that we're missing in this video 309 00:18:48,245 --> 00:18:50,045 is to really swap between palettes. 310 00:18:50,045 --> 00:18:51,530 We're going to give ourselves a bit of 311 00:18:51,530 --> 00:18:55,355 time to use one color palette. 312 00:18:55,355 --> 00:18:57,920 I'm going to bring back this to the random character. 313 00:18:57,920 --> 00:19:00,710 All these operations are meant to show you 314 00:19:00,710 --> 00:19:04,220 what can you do with data structures. 315 00:19:04,220 --> 00:19:10,205 It might seem particularly complex in a way, 316 00:19:10,205 --> 00:19:14,990 but we're mixing dictionaries and lists, and again, 317 00:19:14,990 --> 00:19:18,440 swapping between which list 318 00:19:18,440 --> 00:19:20,840 are we using as a color palette and so forth. 319 00:19:20,840 --> 00:19:23,435 We can actually create a condition, 320 00:19:23,435 --> 00:19:25,625 which we've already done in some videos before, 321 00:19:25,625 --> 00:19:30,180 in which we swap to forests and then sweep back to coral. 322 00:19:31,450 --> 00:19:35,675 Let's do that. Let's just do a very simple if statement. 323 00:19:35,675 --> 00:19:37,265 Something that would say, well, 324 00:19:37,265 --> 00:19:43,085 let's start with a counter that is going to be zero, 325 00:19:43,085 --> 00:19:48,125 and if this counter reaches a certain number, 326 00:19:48,125 --> 00:19:52,340 let's call that number a swap count, 327 00:19:52,340 --> 00:19:55,310 let's say if you reach 200 frames, 328 00:19:55,310 --> 00:20:03,380 you swap to the other entity of the list. 329 00:20:03,380 --> 00:20:05,510 If you're coral, you switch to forest. 330 00:20:05,510 --> 00:20:07,010 If you're forest, you switch to coral. 331 00:20:07,010 --> 00:20:08,945 Something along those lines. 332 00:20:08,945 --> 00:20:11,300 You'll see that some of the examples that we 333 00:20:11,300 --> 00:20:13,310 provide in the documentation of 334 00:20:13,310 --> 00:20:15,500 the class show you how to do 335 00:20:15,500 --> 00:20:18,395 this by pressing different keys in the keyboard. 336 00:20:18,395 --> 00:20:20,420 You can actually do that as well, 337 00:20:20,420 --> 00:20:23,300 where you can have multiple palettes and you decide, 338 00:20:23,300 --> 00:20:25,745 hey, I wanted to see coral or I want to see forest, 339 00:20:25,745 --> 00:20:29,630 and really spend a bit of time 340 00:20:29,630 --> 00:20:33,785 learning how the keyboard interactivity can control that. 341 00:20:33,785 --> 00:20:35,840 We're going to do it slightly different here, 342 00:20:35,840 --> 00:20:41,730 which is swapping using a counter. Let's do that. 343 00:20:43,900 --> 00:20:49,400 We are going to bring these variables here, 344 00:20:49,400 --> 00:20:58,200 so global count and swap_count. 345 00:20:58,990 --> 00:21:01,640 Those are two variables that have been declared 346 00:21:01,640 --> 00:21:04,145 up here that we 347 00:21:04,145 --> 00:21:09,555 want to change within this context. 348 00:21:09,555 --> 00:21:14,080 Let's go and say something like every frame we want 349 00:21:14,080 --> 00:21:33,020 to do a count += 1. If count, let's say, 350 00:21:33,020 --> 00:21:35,330 is equals to 200, 351 00:21:35,330 --> 00:21:38,135 which is the variable that we created, swap_count. 352 00:21:38,135 --> 00:21:41,975 Instead of 200, we're going to use this variable 200. 353 00:21:41,975 --> 00:21:43,820 If we reach that number, 354 00:21:43,820 --> 00:21:48,305 we're going to execute a change of the palette. 355 00:21:48,305 --> 00:21:50,120 We're going to say again, 356 00:21:50,120 --> 00:21:52,530 a second if statement would be, 357 00:21:52,720 --> 00:21:56,670 let's just bring all this back here, 358 00:21:59,740 --> 00:22:02,210 we're going to write this as an if, 359 00:22:02,210 --> 00:22:05,340 saying if the current_palette is Coral, 360 00:22:06,520 --> 00:22:12,660 then the current palette becomes Forest. 361 00:22:13,750 --> 00:22:16,850 What else needs to happen in this swap? 362 00:22:16,850 --> 00:22:26,940 We will return the count to zero, 363 00:22:27,340 --> 00:22:30,840 so we reset the count. 364 00:22:30,850 --> 00:22:35,010 We are going to do an elif. 365 00:22:36,070 --> 00:22:40,010 We don't want this to be just another if statement 366 00:22:40,010 --> 00:22:43,790 because at this point we have swapped the palette. 367 00:22:43,790 --> 00:22:46,835 We want to pick either or. 368 00:22:46,835 --> 00:22:57,000 So if the current palette is forest, 369 00:22:57,700 --> 00:23:02,910 let's do the same thing, but it's reverted back to Coral. 370 00:23:07,270 --> 00:23:09,890 This might be a small thing, 371 00:23:09,890 --> 00:23:12,515 but if we execute two if statements, 372 00:23:12,515 --> 00:23:14,375 we will end up always in Coral. 373 00:23:14,375 --> 00:23:15,710 We will swap it to forest. 374 00:23:15,710 --> 00:23:16,940 Then the next if statement we'll 375 00:23:16,940 --> 00:23:18,980 check is the current palette, 376 00:23:18,980 --> 00:23:21,815 Forest, yes, it's going to go back to Coral. 377 00:23:21,815 --> 00:23:23,735 We want to make sure that this 378 00:23:23,735 --> 00:23:26,540 if statement only executes one of those conditions. 379 00:23:26,540 --> 00:23:29,760 That's why we're doing this elif statement, 380 00:23:29,800 --> 00:23:33,335 which is an else if. 381 00:23:33,335 --> 00:23:35,750 At this point, I believe that we will be 382 00:23:35,750 --> 00:23:41,270 counting with our count variable up to 200. 383 00:23:41,270 --> 00:23:45,290 Switch from palette to a different color palette. 384 00:23:45,290 --> 00:23:48,620 The other thing, let's just see what we have here and 385 00:23:48,620 --> 00:23:50,570 then see if there's one final modification 386 00:23:50,570 --> 00:23:52,800 that I think we will need to do. 387 00:23:54,550 --> 00:23:58,020 We're running into an error here. 388 00:23:58,120 --> 00:24:02,015 Let's just revise our code. 389 00:24:02,015 --> 00:24:05,090 I spent a little bit of time trying to 390 00:24:05,090 --> 00:24:08,435 find out this small error we were having. 391 00:24:08,435 --> 00:24:11,330 One of the things that we 392 00:24:11,330 --> 00:24:14,285 identify is that, for some reason, 393 00:24:14,285 --> 00:24:18,935 I forgot to add this current palette variable, 394 00:24:18,935 --> 00:24:21,650 which if you remember this current palette variable, 395 00:24:21,650 --> 00:24:23,750 we have declared all the way up 396 00:24:23,750 --> 00:24:27,425 here in our global variables. 397 00:24:27,425 --> 00:24:29,780 If we want to start manipulating 398 00:24:29,780 --> 00:24:32,315 this line, as we do here, 399 00:24:32,315 --> 00:24:34,745 by changing it to Forest, 400 00:24:34,745 --> 00:24:37,055 we cannot do that in this context 401 00:24:37,055 --> 00:24:39,545 unless we define it as a global. 402 00:24:39,545 --> 00:24:43,385 We did include count 403 00:24:43,385 --> 00:24:46,535 and swap_count as global variables that we could swap. 404 00:24:46,535 --> 00:24:48,380 Technically, swap_count, we don't 405 00:24:48,380 --> 00:24:50,795 really need to modify it, 406 00:24:50,795 --> 00:24:54,560 we're just using it as a fixed amount, 407 00:24:54,560 --> 00:24:58,340 but we definitely want to modify the current palette. 408 00:24:58,340 --> 00:25:00,230 We are going to have to include it 409 00:25:00,230 --> 00:25:03,320 into our global variables. 410 00:25:03,320 --> 00:25:06,230 This is a variable that we will be changing, 411 00:25:06,230 --> 00:25:09,890 so just adding that line 412 00:25:09,890 --> 00:25:13,860 should fix the error here. Let's see. 413 00:25:14,470 --> 00:25:16,940 We have our first color palette 414 00:25:16,940 --> 00:25:18,140 being displayed, and you see, 415 00:25:18,140 --> 00:25:20,480 now we swapped to the second one 416 00:25:20,480 --> 00:25:22,835 and then going back to the previous one, 417 00:25:22,835 --> 00:25:24,080 but it's a bit of a mess 418 00:25:24,080 --> 00:25:25,790 because we're transitioning between 419 00:25:25,790 --> 00:25:31,175 these color palettes and we're not resetting the canvas. 420 00:25:31,175 --> 00:25:33,800 Let's just do one final line, 421 00:25:33,800 --> 00:25:35,480 which is a line that we already 422 00:25:35,480 --> 00:25:37,070 have, which is this background. 423 00:25:37,070 --> 00:25:39,275 This current background line, 424 00:25:39,275 --> 00:25:40,520 which is basically picking 425 00:25:40,520 --> 00:25:44,370 up the background of the current palette,. 426 00:25:48,340 --> 00:25:52,685 Before we actually swap the palette here, 427 00:25:52,685 --> 00:25:55,190 we will redraw the background. 428 00:25:55,190 --> 00:25:59,770 That would actually clean the canvas completely 429 00:25:59,770 --> 00:26:04,515 and it will start drawing with the new palette. 430 00:26:04,515 --> 00:26:07,340 Because this is associated to the current palette, 431 00:26:07,340 --> 00:26:10,385 is the first value of that color palette. 432 00:26:10,385 --> 00:26:13,940 It should totally work fine or at least theoretically. 433 00:26:13,940 --> 00:26:17,870 Let's see if this is the case. 434 00:26:17,870 --> 00:26:22,770 We're drawing with this first palette. 435 00:26:27,860 --> 00:26:30,840 It's swapping, but there's 436 00:26:30,840 --> 00:26:32,910 still an error here because it's swapping 437 00:26:32,910 --> 00:26:40,800 the background and not giving us the right color palette. 438 00:26:40,800 --> 00:26:44,320 So let's check what's wrong here. 439 00:26:45,080 --> 00:26:48,780 This line, it seems 440 00:26:48,780 --> 00:26:51,510 at this point we're swapping to forest. 441 00:26:51,510 --> 00:26:53,460 I think that what we should be doing 442 00:26:53,460 --> 00:26:56,610 is doing that line after the swap. 443 00:26:56,610 --> 00:26:58,545 Once we swap to forest, 444 00:26:58,545 --> 00:27:04,470 we want to paint the background with that new color. 445 00:27:04,470 --> 00:27:08,325 That's the beginning of that new palette style. 446 00:27:08,325 --> 00:27:12,180 Let's see if that is in fact the problem. 447 00:27:12,180 --> 00:27:17,355 In both cases, we are switching to the new pallet, 448 00:27:17,355 --> 00:27:18,780 so we're creating a background 449 00:27:18,780 --> 00:27:19,980 not with the current pallet, 450 00:27:19,980 --> 00:27:21,900 but with the new one. 451 00:27:21,900 --> 00:27:29,650 Let's see if that fixes things. That works. 452 00:27:30,170 --> 00:27:32,910 Maybe there's not enough time 453 00:27:32,910 --> 00:27:34,650 to paint in each one of those; 454 00:27:34,650 --> 00:27:39,555 that 200 swap count value. 455 00:27:39,555 --> 00:27:42,135 You could do it something like 456 00:27:42,135 --> 00:27:43,860 800 if you want to 457 00:27:43,860 --> 00:27:46,590 spend a bit more time in each one of those palettes. 458 00:27:46,590 --> 00:27:50,720 It will give us time to really paint around 459 00:27:50,720 --> 00:27:56,385 and start creating a composition, 460 00:27:56,385 --> 00:28:01,815 and then we swap to the next one. 461 00:28:01,815 --> 00:28:03,810 We have a bit more time. 462 00:28:03,810 --> 00:28:07,260 The final thing, as we did before, 463 00:28:07,260 --> 00:28:09,255 the frame count here, 464 00:28:09,255 --> 00:28:16,290 I think that we could also do a 10. 465 00:28:16,290 --> 00:28:19,485 Here's where you actually have a lot of flexibility. 466 00:28:19,485 --> 00:28:22,410 This is a tool that is attempting 467 00:28:22,410 --> 00:28:24,810 to create this in a more automatic way. 468 00:28:24,810 --> 00:28:26,280 But you could also say, hey, 469 00:28:26,280 --> 00:28:28,440 I want to just print when I click, 470 00:28:28,440 --> 00:28:30,420 so when I'm clicking. 471 00:28:30,420 --> 00:28:32,340 The most important thing would be 472 00:28:32,340 --> 00:28:33,660 also I would say to start 473 00:28:33,660 --> 00:28:39,510 considering how to avoid any intersections. 474 00:28:39,510 --> 00:28:41,220 How do we get rid of 475 00:28:41,220 --> 00:28:46,225 units that paint on top of each other? 476 00:28:46,225 --> 00:28:50,000 That's going to really take us to the second week. 477 00:28:50,000 --> 00:28:52,520 The Week 2 where we're going to learn data structures, 478 00:28:52,520 --> 00:28:55,190 how a grid could be thought as a data structure, 479 00:28:55,190 --> 00:28:56,480 and how we can actually add 480 00:28:56,480 --> 00:28:58,160 information to that grid so that instead 481 00:28:58,160 --> 00:29:01,395 of painting on top of things, 482 00:29:01,395 --> 00:29:04,890 we're just telling a cell entity to contain a piece of 483 00:29:04,890 --> 00:29:06,570 information like a font 484 00:29:06,570 --> 00:29:08,670 and then swapping to something else. 485 00:29:08,670 --> 00:29:12,600 Right, we're going to be learning about grids. 486 00:29:12,600 --> 00:29:15,360 I think that this exercise is certainly 487 00:29:15,360 --> 00:29:18,600 giving you the entry point. 488 00:29:18,600 --> 00:29:21,075 Let's just do one thing here. 489 00:29:21,075 --> 00:29:23,895 Let's just do small modifications. 490 00:29:23,895 --> 00:29:29,500 We can actually change this font size. 491 00:29:29,510 --> 00:29:37,470 Let's do something like text size, let's do a 20. 492 00:29:37,470 --> 00:29:39,735 I think that the current size 493 00:29:39,735 --> 00:29:43,090 might create sometimes overlaps. 494 00:29:44,600 --> 00:29:47,595 That's one thing that could help us here. 495 00:29:47,595 --> 00:29:49,110 The second one is the index. 496 00:29:49,110 --> 00:29:53,100 We said let's not redraw with the same background color. 497 00:29:53,100 --> 00:29:54,270 Let's just use a one here, 498 00:29:54,270 --> 00:29:56,770 so we skip the background color. 499 00:29:58,070 --> 00:30:01,605 Then here let's do a five. Let's see. 500 00:30:01,605 --> 00:30:04,065 We're trying to calibrate a little bit more this, 501 00:30:04,065 --> 00:30:08,830 see if what we can actually do as a painting system. 502 00:30:16,700 --> 00:30:20,010 Let me see. We're starting to get something 503 00:30:20,010 --> 00:30:27,370 that it's a painting tool for creating these graphics. 504 00:30:27,920 --> 00:30:30,510 But it's trying to invite you to think 505 00:30:30,510 --> 00:30:33,390 about the multiple layers of data structures that 506 00:30:33,390 --> 00:30:36,930 could be used to format that drawing in a way that 507 00:30:36,930 --> 00:30:42,585 is not incredibly generic. 508 00:30:42,585 --> 00:30:45,120 Or just moving the mouse around, 509 00:30:45,120 --> 00:30:48,135 but rather having some rule system. 510 00:30:48,135 --> 00:30:52,570 This is going to be the conclusion of this first week. 511 00:30:53,060 --> 00:30:55,560 It was an invitation to start thinking 512 00:30:55,560 --> 00:30:58,905 about ASCII character drawings. 513 00:30:58,905 --> 00:31:00,300 We're really looking forward to see 514 00:31:00,300 --> 00:31:01,560 what you can do with something like this, 515 00:31:01,560 --> 00:31:03,810 calibrating it to your own color palettes, 516 00:31:03,810 --> 00:31:06,570 to your own understanding of 517 00:31:06,570 --> 00:31:09,495 the code so that you can take it away further. 518 00:31:09,495 --> 00:31:11,820 We're going to show some of the examples that 519 00:31:11,820 --> 00:31:14,640 we've created with it within the documentation. 520 00:31:14,640 --> 00:31:16,785 But the invitation to 521 00:31:16,785 --> 00:31:18,510 really think of these open-end systems 522 00:31:18,510 --> 00:31:21,495 as forms of creative coding that 523 00:31:21,495 --> 00:31:24,660 you could use for design in many different ways, 524 00:31:24,660 --> 00:31:26,010 and along the way, 525 00:31:26,010 --> 00:31:28,555 learn about data structures and 526 00:31:28,555 --> 00:31:31,925 the different forms that we have to manipulate data 527 00:31:31,925 --> 00:31:35,195 within a script in Python. 528 00:31:35,195 --> 00:31:37,055 I'll see you in the next week. 529 00:31:37,055 --> 00:31:38,150 We're going to continue 530 00:31:38,150 --> 00:31:40,560 understanding grid structures then.