title
2.2: RGB Color - Processing Tutorial

description
This video covers the basics of RGB color in Processing and the functions background(), stroke() and fill(). Support this channel on Patreon: https://patreon.com/codingtrain Contact: https://twitter.com/shiffman Send me your questions and coding challenges!: https://github.com/CodingTrain/Rainbow-Topics Link to code on Github: https://github.com/CodingTrain/Rainbow-Code Processing: http://processing.org Processing Foundation: https://processingfoundation.org/ Learning Processing Book: http://learningprocessing.com/ For More Processing Tutorials: https://www.youtube.com/user/shiffman/playlists?view=50&sort=dd&shelf_id=2 📄 Code of Conduct: https://github.com/CodingTrain/Code-of-Conduct

detail
{'title': '2.2: RGB Color - Processing Tutorial', 'heatmap': [{'end': 433.454, 'start': 416.879, 'weight': 0.794}, {'end': 1183.597, 'start': 1136.618, 'weight': 0.716}, {'end': 1242.375, 'start': 1206.214, 'weight': 0.758}, {'end': 1325.934, 'start': 1304.918, 'weight': 1}, {'end': 1383.916, 'start': 1366.708, 'weight': 0.779}], 'summary': 'Tutorial covers exploring processing tips, understanding text and graphics colors, rgb color mixing, processing sketch basics, and code comments, emphasizing the importance of examples, color concepts, and productivity enhancement.', 'chapters': [{'end': 82.949, 'segs': [{'end': 52.134, 'src': 'embed', 'start': 21.315, 'weight': 0, 'content': [{'end': 25.22, 'text': 'One is and I think I showed you this in one of the introductory videos about processing,', 'start': 21.315, 'duration': 3.905}, {'end': 30.588, 'text': 'but you should take a note of the fact that processing comes with a huge amount of examples.', 'start': 25.22, 'duration': 5.368}, {'end': 39.071, 'text': "I also encourage you, when you're beginning, to just go through some of these basic examples, particularly form here.", 'start': 32.59, 'duration': 6.481}, {'end': 43.332, 'text': "You might kind of like, well, this actually has a lot of stuff that we haven't learned yet.", 'start': 39.151, 'duration': 4.181}, {'end': 46.653, 'text': "But you can kind of get a sense of what's possible to draw in processing.", 'start': 43.572, 'duration': 3.081}, {'end': 52.134, 'text': 'You might find that useful just to kind of poke through a bunch of examples and kind of see what they do.', 'start': 46.873, 'duration': 5.261}], 'summary': 'Processing offers a large amount of examples for learning, encouraging beginners to explore basic ones to understand drawing possibilities.', 'duration': 30.819, 'max_score': 21.315, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc21315.jpg'}, {'end': 94.877, 'src': 'embed', 'start': 68.12, 'weight': 1, 'content': [{'end': 71.462, 'text': "you can actually, if you're not online, you can actually get the reference.", 'start': 68.12, 'duration': 3.342}, {'end': 73.923, 'text': "like, if I just click this, it's going to open the reference.", 'start': 71.462, 'duration': 2.461}, {'end': 76.165, 'text': 'The processing downloads with the reference as well.', 'start': 74.083, 'duration': 2.082}, {'end': 82.949, 'text': 'So you can actually, from the development environment itself, from the processing application, you can look up stuff in the reference as well.', 'start': 76.445, 'duration': 6.504}, {'end': 94.877, 'text': 'the last thing that I want to just mention, which is, is that you might have noticed that text is turning different colors,', 'start': 83.809, 'duration': 11.068}], 'summary': 'Offline access to reference in processing app, text colors change', 'duration': 26.757, 'max_score': 68.12, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc68120.jpg'}], 'start': 1.095, 'title': 'Exploring processing tips', 'summary': 'Introduces the importance of exploring processing examples and accessing the reference within the application, emphasizing the abundance of examples and the availability of the reference within the processing environment.', 'chapters': [{'end': 82.949, 'start': 1.095, 'title': 'Introduction to processing: tips and resources', 'summary': 'Discusses the importance of exploring processing examples and accessing the reference within the application, highlighting the abundance of examples and the availability of the reference within the processing environment.', 'duration': 81.854, 'highlights': ["Processing comes with a huge amount of examples, encouraging beginners to explore basic examples to understand what's possible to draw, providing valuable learning resources. (quantifiable data: abundance of examples)", 'Accessing the reference within the processing application is mentioned, indicating the availability of the reference directly from the development environment. (quantifiable data: availability of reference within the application)']}], 'duration': 81.854, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1095.jpg', 'highlights': ['Processing provides a wealth of examples for beginners to explore, aiding in understanding drawing possibilities. (abundance of examples)', 'The reference is accessible within the processing application, offering direct access from the development environment. (availability of reference within the application)']}, {'end': 381.799, 'segs': [{'end': 129.817, 'src': 'embed', 'start': 106.925, 'weight': 3, 'content': [{'end': 114.53, 'text': "So the processing development environment will color the text that you're writing different colors just as a little way of helping you along.", 'start': 106.925, 'duration': 7.605}, {'end': 123.032, 'text': "to see that you're kind of spelling things right and what's a known word and what's an unknown word.", 'start': 117.228, 'duration': 5.804}, {'end': 126.354, 'text': 'But those colors have nothing to do with how your program executes.', 'start': 123.612, 'duration': 2.742}, {'end': 129.817, 'text': "It's just a visual help to see that you've spelled things wrong.", 'start': 126.594, 'duration': 3.223}], 'summary': "Processing development environment uses color-coded text to aid in spelling and word recognition, but it doesn't affect program execution.", 'duration': 22.892, 'max_score': 106.925, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc106925.jpg'}, {'end': 231.587, 'src': 'embed', 'start': 200.417, 'weight': 2, 'content': [{'end': 207.338, 'text': "We didn't say draw a rectangle with a blue filling, a delicious blueberry filling, and a red outline.", 'start': 200.417, 'duration': 6.921}, {'end': 213.559, 'text': "Processing just decided to use default colors, which you can see are just black and white because we didn't specify.", 'start': 208.678, 'duration': 4.881}, {'end': 217.961, 'text': 'but now is the moment where we can start to look at how to specify color.', 'start': 213.999, 'duration': 3.962}, {'end': 222.283, 'text': 'Okay, so how do we do that?', 'start': 220.262, 'duration': 2.021}, {'end': 231.587, 'text': 'So one thing we should be aware of is any shape in processing take a rectangle, for example.', 'start': 222.343, 'duration': 9.244}], 'summary': 'In processing, shapes default to black and white colors, prompting the need to specify colors in code.', 'duration': 31.17, 'max_score': 200.417, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc200417.jpg'}, {'end': 274.981, 'src': 'embed', 'start': 250.721, 'weight': 1, 'content': [{'end': 259.005, 'text': 'So fill and stroke are the key words, the function names that set color in processing for the outline and the interior of a shape.', 'start': 250.721, 'duration': 8.284}, {'end': 263.229, 'text': 'Now a line has no fill, because a line only has a stroke.', 'start': 259.547, 'duration': 3.682}, {'end': 268.514, 'text': 'But an ellipse or a rectangle has both a stroke, the outline, and the filling.', 'start': 263.669, 'duration': 4.845}, {'end': 270.176, 'text': 'I just decided to say it now.', 'start': 268.694, 'duration': 1.482}, {'end': 271.417, 'text': 'The creamy filling.', 'start': 270.216, 'duration': 1.201}, {'end': 272.098, 'text': 'I have cream.', 'start': 271.477, 'duration': 0.621}, {'end': 272.798, 'text': "That's my stomach.", 'start': 272.118, 'duration': 0.68}, {'end': 273.219, 'text': 'So fruit.', 'start': 272.818, 'duration': 0.401}, {'end': 274.981, 'text': 'I like fruit fillings.', 'start': 273.259, 'duration': 1.722}], 'summary': 'Processing uses fill and stroke to set color for shapes and lines, with shapes having both stroke and fill while lines only have a stroke.', 'duration': 24.26, 'max_score': 250.721, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc250721.jpg'}, {'end': 327.733, 'src': 'embed', 'start': 298.582, 'weight': 0, 'content': [{'end': 301.064, 'text': "how do we set that rectangle's color?", 'start': 298.582, 'duration': 2.482}, {'end': 310.083, 'text': "the way we set a shape's color is by setting the fill or stroke with the lines of code in advance of saying rectangle.", 'start': 301.064, 'duration': 9.019}, {'end': 312.384, 'text': 'So order of operations really matters.', 'start': 310.103, 'duration': 2.281}, {'end': 315.226, 'text': "What we're doing is we're almost like the process.", 'start': 312.725, 'duration': 2.501}, {'end': 321.369, 'text': "program is running and there's like a thing with a pen there, and it's like it reads oh stroke blue.", 'start': 315.226, 'duration': 6.143}, {'end': 324.431, 'text': 'Oh, quick, let me go get a blue pen, red.', 'start': 321.57, 'duration': 2.861}, {'end': 327.733, 'text': "I got the red pen, and whenever I get to rectangle, I'll draw it with red.", 'start': 324.451, 'duration': 3.282}], 'summary': "Setting a shape's color involves setting the fill or stroke in advance, with order of operations being crucial.", 'duration': 29.151, 'max_score': 298.582, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc298582.jpg'}], 'start': 83.809, 'title': 'Understanding text and graphics colors in programming', 'summary': 'Explores the use of different colors in programming development environment for identifying spellings and understanding color concepts in processing, covering default colors, setting functions, and order of operations.', 'chapters': [{'end': 129.817, 'start': 83.809, 'title': 'Text color in programming', 'summary': "Explains how the programming development environment uses different colors to help the user identify correct and incorrect spellings, with no impact on the program's execution.", 'duration': 46.008, 'highlights': ["The programming development environment uses different colors to help users identify correct and incorrect spellings, with no impact on the program's execution.", 'The text colors serve as a visual aid to indicate correct and incorrect spellings, providing assistance in identifying known and unknown words.']}, {'end': 381.799, 'start': 129.836, 'title': 'Processing: understanding color in graphics', 'summary': 'Introduces the concept of color in processing, covering the default colors used, the functions for setting colors, and the order of operations for applying color to shapes.', 'duration': 251.963, 'highlights': ['The default colors used by processing are black and white, as the specific colors are not specified in the program. Processing uses default colors (black and white) when specific colors are not specified in the program.', "The key functions for setting color in processing are 'fill' and 'stroke', which are used to define the interior and outline of a shape, respectively. The functions 'fill' and 'stroke' are used in processing to define the interior and outline colors of a shape, such as a rectangle.", 'The order of operations for setting color in processing is crucial, as the color settings for a shape should be defined before drawing the shape in the program. In processing, the order of operations for setting color is crucial, as color settings for a shape should be defined before drawing the shape in the program.']}], 'duration': 297.99, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc83809.jpg', 'highlights': ['The order of operations for setting color in processing is crucial, as the color settings for a shape should be defined before drawing the shape in the program.', "The key functions for setting color in processing are 'fill' and 'stroke', which are used to define the interior and outline of a shape, respectively.", 'The default colors used by processing are black and white, as the specific colors are not specified in the program.', "The programming development environment uses different colors to help users identify correct and incorrect spellings, with no impact on the program's execution.", 'The text colors serve as a visual aid to indicate correct and incorrect spellings, providing assistance in identifying known and unknown words.']}, {'end': 779.233, 'segs': [{'end': 446.057, 'src': 'heatmap', 'start': 416.879, 'weight': 0.794, 'content': [{'end': 417.84, 'text': "We're going to mix colors.", 'start': 416.879, 'duration': 0.961}, {'end': 419.821, 'text': "But we're going to mix digital color.", 'start': 418.26, 'duration': 1.561}, {'end': 422.523, 'text': 'And digital color follows the properties of light.', 'start': 420.221, 'duration': 2.302}, {'end': 429.511, 'text': 'So we need a little bit of red, some amount of red, some amount of green, and some amount of blue.', 'start': 423.467, 'duration': 6.044}, {'end': 433.454, 'text': 'And all of those together will give us a color.', 'start': 430.012, 'duration': 3.442}, {'end': 434.995, 'text': "So that's what we're going to do.", 'start': 433.995, 'duration': 1}, {'end': 437.977, 'text': 'So we need three arguments.', 'start': 435.396, 'duration': 2.581}, {'end': 440.819, 'text': "This is what's known as RGB color.", 'start': 438.518, 'duration': 2.301}, {'end': 446.057, 'text': 'RGB color.', 'start': 444.435, 'duration': 1.622}], 'summary': 'Mix digital colors using rgb model for light properties.', 'duration': 29.178, 'max_score': 416.879, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc416879.jpg'}, {'end': 509.808, 'src': 'embed', 'start': 473.161, 'weight': 0, 'content': [{'end': 475.924, 'text': "It's the best way to get started and kind of just try stuff out.", 'start': 473.161, 'duration': 2.763}, {'end': 479.308, 'text': 'Although I think looking at hue, saturation, brightness is kind of important.', 'start': 475.944, 'duration': 3.364}, {'end': 481.49, 'text': "That's probably its own video though.", 'start': 480.209, 'duration': 1.281}, {'end': 485.274, 'text': 'So the default way is, again, Red, green, and blue.', 'start': 481.751, 'duration': 3.523}, {'end': 490.637, 'text': 'So the ranges for each one of these values is 0 to 255.', 'start': 485.554, 'duration': 5.083}, {'end': 495.279, 'text': "So if we say 0 red, then that's no red.", 'start': 490.637, 'duration': 4.642}, {'end': 499.202, 'text': "If we say 255 red, that's a lot of red.", 'start': 495.62, 'duration': 3.582}, {'end': 509.808, 'text': "So you could imagine what is this color, 0, 255, 0, if this is again RGB color and we're saying the film.", 'start': 500.703, 'duration': 9.105}], 'summary': 'Introduction to rgb color model, with values ranging from 0 to 255.', 'duration': 36.647, 'max_score': 473.161, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc473161.jpg'}, {'end': 621.349, 'src': 'embed', 'start': 591.576, 'weight': 1, 'content': [{'end': 597.385, 'text': "You might have experience using Photoshop or designing websites, and you've done a lot of stuff with color already.", 'start': 591.576, 'duration': 5.809}, {'end': 606.237, 'text': 'Processing actually, by the way, also allows you this is a bit of a digression, but to write your colors this way.', 'start': 597.445, 'duration': 8.792}, {'end': 612.542, 'text': "so if you've ever done color for the web with this hexadecimal notation, you can also do that directly in processing.", 'start': 606.237, 'duration': 6.305}, {'end': 621.349, 'text': 'but I think I want to focus really primarily on this idea of numbers red, comma, green, comma, blue.', 'start': 612.542, 'duration': 8.807}], 'summary': 'The transcript discusses using processing for color, including hexadecimal notation and focusing on red, green, and blue numbers.', 'duration': 29.773, 'max_score': 591.576, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc591576.jpg'}, {'end': 685.194, 'src': 'embed', 'start': 642.199, 'weight': 2, 'content': [{'end': 642.799, 'text': 'You can run it.', 'start': 642.199, 'duration': 0.6}, {'end': 643.88, 'text': 'We are going to see.', 'start': 642.879, 'duration': 1.001}, {'end': 646.341, 'text': 'We have a white rectangle.', 'start': 644.58, 'duration': 1.761}, {'end': 649.382, 'text': 'Again, remember, this is the properties of light.', 'start': 646.921, 'duration': 2.461}, {'end': 655.525, 'text': 'So if we take all of red, all of green, and all of blue, mix them together, we have white light.', 'start': 649.683, 'duration': 5.842}, {'end': 662.029, 'text': 'If we turn all the lights off, if every one of these values is zero, zero comma zero comma zero, then we have black.', 'start': 655.585, 'duration': 6.444}, {'end': 664.57, 'text': 'So we only have color.', 'start': 662.429, 'duration': 2.141}, {'end': 668.367, 'text': 'in all those sort of areas in between, so to speak.', 'start': 665.945, 'duration': 2.422}, {'end': 685.194, 'text': "So one thing that I should say, I lost my eraser, here it is, is that if you want to do white, we said it's fill 255, 255, 255.", 'start': 668.767, 'duration': 16.427}], 'summary': 'Mixing red, green, and blue at max values creates white light.', 'duration': 42.995, 'max_score': 642.199, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc642199.jpg'}, {'end': 779.233, 'src': 'embed', 'start': 747.223, 'weight': 3, 'content': [{'end': 756.186, 'text': 'It turns out that grayscale color, by the way, any grayscale color is a color where red equals green equals blue.', 'start': 747.223, 'duration': 8.963}, {'end': 765.289, 'text': 'So 100 comma 100 comma 100 is a slightly dark gray that we could give shorthand as just the argument 100.', 'start': 756.606, 'duration': 8.683}, {'end': 775.232, 'text': 'So we can both specify color as single value for a grayscale color or three values for red, green and blue.', 'start': 765.289, 'duration': 9.943}, {'end': 779.233, 'text': 'Two more things I want to touch on in this video.', 'start': 775.232, 'duration': 4.001}], 'summary': 'Grayscale color is defined by equal values of red, green, and blue. it can be represented as a single value or three separate values.', 'duration': 32.01, 'max_score': 747.223, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc747223.jpg'}], 'start': 382.432, 'title': 'Rgb color mixing', 'summary': 'Covers the concept of mixing digital colors using the rgb model, with color value ranges of 0 to 255, allowing for a wide spectrum of color combinations. it also demonstrates creating various colors and specifying colors using shorthand in processing.', 'chapters': [{'end': 612.542, 'start': 382.432, 'title': 'Understanding rgb color mixing', 'summary': 'Explains the concept of mixing digital colors using the rgb model, where the ranges for each color value is 0 to 255, allowing for a wide spectrum of color combinations and demonstrations through code.', 'duration': 230.11, 'highlights': ['RGB color model: Red, green, and blue values ranging from 0 to 255 are used to create a spectrum of colors. The RGB color model is explained, with the range for each color value specified as 0 to 255, demonstrating the wide spectrum of colors that can be created.', 'Demonstration through code: The chapter includes a practical demonstration of mixing colors using the RGB model in Processing. A practical demonstration of mixing colors using the RGB model in Processing is mentioned, showcasing the application of the concept through code.', 'Encouragement to experiment: The audience is encouraged to play around with colors and explore different combinations, leveraging prior experience in design and web development. The audience is encouraged to experiment with colors and explore various combinations, especially if they have experience in design and web development.']}, {'end': 779.233, 'start': 612.542, 'title': 'Understanding rgb color model', 'summary': 'Explains the rgb color model, demonstrating how mixing red, green, and blue in different proportions creates various colors, and also how to specify colors using shorthand in processing.', 'duration': 166.691, 'highlights': ['Mixing red, green, and blue in different proportions creates various colors, with 255, 255, 255 resulting in white and 0, 0, 0 resulting in black. When all three values of red, green, and blue are mixed together, it creates white light, while all lights off results in black. This demonstrates the properties of light using the RGB color model.', 'Using shorthand in processing allows for specifying color with a single value for grayscale or three values for red, green, and blue. Processing allows for specifying color using shorthand, such as using a single value for a grayscale color or three values for red, green, and blue. This shorthand technique offers convenience in specifying colors.']}], 'duration': 396.801, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc382432.jpg', 'highlights': ['The RGB color model is explained, with the range for each color value specified as 0 to 255, demonstrating the wide spectrum of colors that can be created.', 'A practical demonstration of mixing colors using the RGB model in Processing is mentioned, showcasing the application of the concept through code.', 'Mixing red, green, and blue in different proportions creates various colors, with 255, 255, 255 resulting in white and 0, 0, 0 resulting in black.', 'Using shorthand in processing allows for specifying color with a single value for grayscale or three values for red, green, and blue.']}, {'end': 990.78, 'segs': [{'end': 829.467, 'src': 'embed', 'start': 803.476, 'weight': 0, 'content': [{'end': 813.042, 'text': 'so there is a black background, which I did using a single argument for grayscale, or I could say 0, comma, 255, comma, 0,', 'start': 803.476, 'duration': 9.566}, {'end': 815.583, 'text': 'and here is a green background with that color.', 'start': 813.042, 'duration': 2.541}, {'end': 822.705, 'text': 'so the background function fills in the background of your processing sketch window with a color.', 'start': 815.583, 'duration': 7.122}, {'end': 829.467, 'text': "Now, the other thing I should just mention, by the way, is I've been kind of using the word program, your application, the processing window, sketch.", 'start': 822.745, 'duration': 6.722}], 'summary': 'Demonstrated using background function to set color for sketch window.', 'duration': 25.991, 'max_score': 803.476, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc803476.jpg'}, {'end': 865.048, 'src': 'embed', 'start': 840.351, 'weight': 2, 'content': [{'end': 845.853, 'text': 'as your sketchbook for this idea that you processing one of the things it allows you to do is very quickly sketch out ideas through code.', 'start': 840.351, 'duration': 5.502}, {'end': 849.134, 'text': "So I'm going to say your processing sketch now has a green background.", 'start': 846.113, 'duration': 3.021}, {'end': 851.015, 'text': "However, here's something really important.", 'start': 849.474, 'duration': 1.541}, {'end': 858.903, 'text': 'Order of operations is key, right? Just because, what does background actually do? It fills the screen with a single color.', 'start': 851.476, 'duration': 7.427}, {'end': 865.048, 'text': 'Even though we think of the term background as it should put it behind everything, the order that this code executes is quite important.', 'start': 859.443, 'duration': 5.605}], 'summary': 'Processing allows quick idea sketching through code, order of operations is crucial.', 'duration': 24.697, 'max_score': 840.351, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc840351.jpg'}, {'end': 921.389, 'src': 'embed', 'start': 898.085, 'weight': 3, 'content': [{'end': 905.597, 'text': 'of course I have background at the end, The stroke from the line would carry over, which is very hard for you to see.', 'start': 898.085, 'duration': 7.512}, {'end': 907.679, 'text': 'but I can zoom in.', 'start': 905.597, 'duration': 2.082}, {'end': 912.002, 'text': 'You can see that the both the line and the rectangle are are blue.', 'start': 907.679, 'duration': 4.323}, {'end': 918.347, 'text': "That's because, remember, when you set the stroke, It's the stroke value for all shapes that are drawn afterwards,", 'start': 912.002, 'duration': 6.345}, {'end': 921.389, 'text': 'unless you override that stroke with a new value.', 'start': 918.347, 'duration': 3.042}], 'summary': 'The stroke sets the value for all shapes drawn afterwards, unless overridden.', 'duration': 23.304, 'max_score': 898.085, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc898085.jpg'}, {'end': 990.78, 'src': 'embed', 'start': 967.672, 'weight': 4, 'content': [{'end': 974.634, 'text': "so what's important to realize is that the syntax? Spaces and line breaks tend to not really matter.", 'start': 967.672, 'duration': 6.962}, {'end': 977.655, 'text': "right? I can put a lot of spaces here and it's actually oops.", 'start': 974.634, 'duration': 3.021}, {'end': 979.036, 'text': 'I put this extra stuff.', 'start': 977.735, 'duration': 1.301}, {'end': 990.34, 'text': "It's actually going to run exactly the same way, But there often is a way of writing code that feels a little bit more human, readable.", 'start': 979.036, 'duration': 11.304}, {'end': 990.78, 'text': 'This should be.', 'start': 990.34, 'duration': 0.44}], 'summary': "Syntax, spaces, and line breaks don't matter. code can run the same way with extra spaces.", 'duration': 23.108, 'max_score': 967.672, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc967672.jpg'}], 'start': 779.233, 'title': 'Processing sketch basics', 'summary': 'Covers processing sketch basics including background color setting and the importance of order of operations and stroke values, while highlighting that syntax, spaces, and line breaks do not significantly affect code execution.', 'chapters': [{'end': 822.705, 'start': 779.233, 'title': 'Processing sketch background colors', 'summary': 'Discusses the background function in a processing sketch, which allows setting colors for the background, such as black using grayscale arguments or green with specific rgb values.', 'duration': 43.472, 'highlights': ['The background function in a processing sketch allows setting the color for the background, such as using grayscale arguments to create a black background or specifying RGB values for a green background.', 'The function provides flexibility in filling the background of a processing sketch window with different colors, enhancing the visual appearance and customization.']}, {'end': 990.78, 'start': 822.745, 'title': 'Understanding processing sketches', 'summary': "Explains the concept of a processing sketch as a quick way to sketch out ideas through code, highlighting the importance of the order of operations and the impact of stroke values on shapes, while emphasizing that syntax, spaces, and line breaks do not significantly affect the code's execution.", 'duration': 168.035, 'highlights': ['The concept of a processing sketch allows for quickly sketching out ideas through code, emphasizing the importance of the order of operations, demonstrated by the impact of background placement on shapes and the stroke values for shapes drawn subsequently.', 'The stroke value for all shapes drawn afterwards remains the same unless overridden, as demonstrated by the effect of setting a stroke for a rectangle after a line, resulting in both shapes having the same stroke color.', "The chapter also emphasizes that syntax, spaces, and line breaks do not significantly affect the code's execution, although writing code in a more human-readable way is often preferred."]}], 'duration': 211.547, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc779233.jpg', 'highlights': ['The background function in a processing sketch allows setting the color for the background, such as using grayscale arguments to create a black background or specifying RGB values for a green background.', 'The function provides flexibility in filling the background of a processing sketch window with different colors, enhancing the visual appearance and customization.', 'The concept of a processing sketch allows for quickly sketching out ideas through code, emphasizing the importance of the order of operations, demonstrated by the impact of background placement on shapes and the stroke values for shapes drawn subsequently.', 'The stroke value for all shapes drawn afterwards remains the same unless overridden, as demonstrated by the effect of setting a stroke for a rectangle after a line, resulting in both shapes having the same stroke color.', "The chapter also emphasizes that syntax, spaces, and line breaks do not significantly affect the code's execution, although writing code in a more human-readable way is often preferred."]}, {'end': 1439.069, 'segs': [{'end': 1090.222, 'src': 'embed', 'start': 1057.883, 'weight': 0, 'content': [{'end': 1060.246, 'text': 'You could add comments to yourself in the code.', 'start': 1057.883, 'duration': 2.363}, {'end': 1062.529, 'text': 'Something that you might want to do later.', 'start': 1060.726, 'duration': 1.803}, {'end': 1065.854, 'text': 'just explanations of what different sections of the code are doing right now.', 'start': 1062.529, 'duration': 3.325}, {'end': 1070.642, 'text': "It might feel somewhat silly to be doing this, because it's so short and in a way kind of like obvious.", 'start': 1065.854, 'duration': 4.788}, {'end': 1075.069, 'text': "what's happening, although you know just these functions and numbers, is somewhat cryptic.", 'start': 1070.642, 'duration': 4.427}, {'end': 1083.376, 'text': 'but Your future self will thank your present self later if you get into the habit of writing comments into your code now.', 'start': 1075.069, 'duration': 8.307}, {'end': 1090.222, 'text': 'Because it inevitably will happen that you will work on a program for quite a while,', 'start': 1083.797, 'duration': 6.425}], 'summary': 'Adding comments to code now will benefit the future, aiding in understanding and maintenance.', 'duration': 32.339, 'max_score': 1057.883, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1057883.jpg'}, {'end': 1161.273, 'src': 'embed', 'start': 1136.618, 'weight': 3, 'content': [{'end': 1143.06, 'text': 'There is a function called color mode that I would encourage you to look up in the reference.', 'start': 1136.618, 'duration': 6.442}, {'end': 1144.821, 'text': "It's like an exercise.", 'start': 1143.801, 'duration': 1.02}, {'end': 1146.442, 'text': 'Look up color mode in the reference.', 'start': 1144.881, 'duration': 1.561}, {'end': 1147.922, 'text': 'What are some examples?', 'start': 1147.102, 'duration': 0.82}, {'end': 1151.644, 'text': 'Can you change the color mode and define colors differently?', 'start': 1147.962, 'duration': 3.682}, {'end': 1157.729, 'text': "One color mode that you can do in processing, I believe it's HSB.", 'start': 1152.204, 'duration': 5.525}, {'end': 1159.371, 'text': "Boy, I don't have this memorized.", 'start': 1157.769, 'duration': 1.602}, {'end': 1161.273, 'text': 'For hue, saturation, brightness.', 'start': 1159.711, 'duration': 1.562}], 'summary': 'Encouraging to explore color mode in processing, such as hsb for hue, saturation, brightness.', 'duration': 24.655, 'max_score': 1136.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1136618.jpg'}, {'end': 1183.597, 'src': 'heatmap', 'start': 1136.618, 'weight': 0.716, 'content': [{'end': 1143.06, 'text': 'There is a function called color mode that I would encourage you to look up in the reference.', 'start': 1136.618, 'duration': 6.442}, {'end': 1144.821, 'text': "It's like an exercise.", 'start': 1143.801, 'duration': 1.02}, {'end': 1146.442, 'text': 'Look up color mode in the reference.', 'start': 1144.881, 'duration': 1.561}, {'end': 1147.922, 'text': 'What are some examples?', 'start': 1147.102, 'duration': 0.82}, {'end': 1151.644, 'text': 'Can you change the color mode and define colors differently?', 'start': 1147.962, 'duration': 3.682}, {'end': 1157.729, 'text': "One color mode that you can do in processing, I believe it's HSB.", 'start': 1152.204, 'duration': 5.525}, {'end': 1159.371, 'text': "Boy, I don't have this memorized.", 'start': 1157.769, 'duration': 1.602}, {'end': 1161.273, 'text': 'For hue, saturation, brightness.', 'start': 1159.711, 'duration': 1.562}, {'end': 1164.457, 'text': 'Sometimes this is written as HSV, hue, saturation, value.', 'start': 1161.293, 'duration': 3.164}, {'end': 1168.882, 'text': "But this is another way of defining color that's different than RGB.", 'start': 1164.857, 'duration': 4.025}, {'end': 1171.505, 'text': 'Hue being the color on the color wheel.', 'start': 1169.303, 'duration': 2.202}, {'end': 1172.947, 'text': 'What is the hue of the color??', 'start': 1171.665, 'duration': 1.282}, {'end': 1174.55, 'text': 'Is it greenish? Blue?', 'start': 1172.987, 'duration': 1.563}, {'end': 1175.591, 'text': 'is it really blue??', 'start': 1174.55, 'duration': 1.041}, {'end': 1176.792, 'text': 'Is it really red??', 'start': 1175.691, 'duration': 1.101}, {'end': 1179.414, 'text': 'Saturation being how vibrant is the color??', 'start': 1177.172, 'duration': 2.242}, {'end': 1181.935, 'text': 'And brightness being how bright is that color??', 'start': 1179.794, 'duration': 2.141}, {'end': 1183.597, 'text': 'Is it very dark blue or very bright blue??', 'start': 1181.975, 'duration': 1.622}], 'summary': 'Color mode in processing includes hsb defining hue, saturation, brightness.', 'duration': 46.979, 'max_score': 1136.618, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1136618.jpg'}, {'end': 1242.375, 'src': 'heatmap', 'start': 1206.214, 'weight': 0.758, 'content': [{'end': 1211.175, 'text': "Well, here's two other amounts of arguments that Phil could have.", 'start': 1206.214, 'duration': 4.961}, {'end': 1218.277, 'text': 'Phil could have two arguments, which is grayscale plus transparency.', 'start': 1211.916, 'duration': 6.361}, {'end': 1230.348, 'text': 'It could also have four arguments, which is RGB plus transparency, often written as alpha, the alpha value.', 'start': 1220.638, 'duration': 9.71}, {'end': 1234.114, 'text': 'An alpha of zero means completely transparent.', 'start': 1230.849, 'duration': 3.265}, {'end': 1237.26, 'text': 'An alpha of 255 means completely opaque.', 'start': 1234.515, 'duration': 2.745}, {'end': 1242.375, 'text': 'Now, of course, there is no such thing as real transparency.', 'start': 1239.011, 'duration': 3.364}], 'summary': 'Phil could have two or four arguments- grayscale plus transparency, or rgb plus transparency (alpha), with alpha of 0 being completely transparent and 255 completely opaque.', 'duration': 36.161, 'max_score': 1206.214, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1206214.jpg'}, {'end': 1269.561, 'src': 'embed', 'start': 1242.415, 'weight': 4, 'content': [{'end': 1245.338, 'text': "It's not that suddenly your physical screen will be see-through.", 'start': 1242.415, 'duration': 2.923}, {'end': 1248.381, 'text': "It's this idea of creating the illusion of transparency.", 'start': 1245.358, 'duration': 3.023}, {'end': 1253.546, 'text': 'So if you draw a color with no transparency, you will see that color literally on the screen.', 'start': 1248.601, 'duration': 4.945}, {'end': 1258.231, 'text': 'If you draw a color with some transparency, it will look like it blends through.', 'start': 1253.847, 'duration': 4.384}, {'end': 1260.113, 'text': "And I know I said I wasn't really going to..", 'start': 1258.271, 'duration': 1.842}, {'end': 1265.5, 'text': "go through this in great detail, but let's actually just look at this for a second.", 'start': 1261.718, 'duration': 3.782}, {'end': 1269.561, 'text': "let's make this rectangle much, much wider, so we can see it.", 'start': 1265.5, 'duration': 4.061}], 'summary': 'Creating illusion of transparency on screen using color with varying transparency levels.', 'duration': 27.146, 'max_score': 1242.415, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1242415.jpg'}, {'end': 1332.321, 'src': 'heatmap', 'start': 1304.918, 'weight': 1, 'content': [{'end': 1311.446, 'text': 'But what if we give it a little bit of transparency, right? Zero is completely transparent.', 'start': 1304.918, 'duration': 6.528}, {'end': 1313.148, 'text': '255 is completely opaque.', 'start': 1311.466, 'duration': 1.682}, {'end': 1317.053, 'text': 'So 127 will be right in the middle there, like 50%.', 'start': 1313.348, 'duration': 3.705}, {'end': 1321.038, 'text': 'If we do this, look, we can see, ah, the camera shut off again.', 'start': 1317.053, 'duration': 3.985}, {'end': 1325.934, 'text': 'Because this is a little bit of a disaster of a day.', 'start': 1322.25, 'duration': 3.684}, {'end': 1328.156, 'text': "But I'm doing the best that I can.", 'start': 1325.974, 'duration': 2.182}, {'end': 1332.321, 'text': 'You can see now that this red here is blending with the black behind it.', 'start': 1328.196, 'duration': 4.125}], 'summary': 'Discussing transparency levels in images, with examples and tech challenges.', 'duration': 27.403, 'max_score': 1304.918, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1304918.jpg'}, {'end': 1363.006, 'src': 'embed', 'start': 1335.264, 'weight': 5, 'content': [{'end': 1339.549, 'text': "It's almost as if it's like a tinted lens that we put on top there.", 'start': 1335.264, 'duration': 4.285}, {'end': 1342.85, 'text': 'So of course this opens up another can of worms.', 'start': 1340.009, 'duration': 2.841}, {'end': 1345.291, 'text': 'There are many different ways of blending colors.', 'start': 1342.89, 'duration': 2.401}, {'end': 1348.693, 'text': 'This is an infinite world of stuff you can look at and do.', 'start': 1345.952, 'duration': 2.741}, {'end': 1353.295, 'text': 'And all of this contained in the reference and all the different examples and through trial and error.', 'start': 1348.793, 'duration': 4.502}, {'end': 1363.006, 'text': 'But this should give you some beginning steps So I think you in a way have all the tools now.', 'start': 1353.315, 'duration': 9.691}], 'summary': 'Exploring infinite color blending possibilities through reference and trial and error.', 'duration': 27.742, 'max_score': 1335.264, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1335264.jpg'}, {'end': 1397.763, 'src': 'heatmap', 'start': 1366.708, 'weight': 0.779, 'content': [{'end': 1370.73, 'text': 'You know about the coordinate system, you know about basic shapes, and you know about color.', 'start': 1366.708, 'duration': 4.022}, {'end': 1373.251, 'text': 'So make yourself an alien.', 'start': 1370.99, 'duration': 2.261}, {'end': 1383.916, 'text': "My little example that I always use is this like tiny little Thing person, alien, whatever called zoog you can see there's some ellipses,", 'start': 1374.972, 'duration': 8.944}, {'end': 1385.837, 'text': 'a rectangle and some lines.', 'start': 1383.916, 'duration': 1.921}, {'end': 1390.219, 'text': 'but you design something, Share it, send it to me.', 'start': 1385.837, 'duration': 4.382}, {'end': 1397.763, 'text': "You're gonna start to want to use arcs and curves and try doing this will sort of force you to dig into the processing reference a bit more.", 'start': 1390.219, 'duration': 7.544}], 'summary': 'Create an alien using basic shapes and share your design to learn about using arcs and curves.', 'duration': 31.055, 'max_score': 1366.708, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc1366708.jpg'}], 'start': 990.78, 'title': 'Code comments and processing basics', 'summary': 'Emphasizes the importance of code comments, reducing video length by five minutes, and increasing productivity. it also covers color modes, definitions, transparency, and blending for creating designs in processing.', 'chapters': [{'end': 1116.015, 'start': 990.78, 'title': 'Importance of code comments', 'summary': 'Emphasizes the importance of adding code comments for future understanding, as it can reduce video length by five minutes and increase future productivity by providing clarity and guidance for programmers.', 'duration': 125.235, 'highlights': ['Adding code comments can reduce video length by five minutes and improve future understanding of the code.', 'Emphasizes the importance of adding comments for future understanding and productivity.', 'Code comments serve as annotations and explanations for different sections of the code, benefiting future productivity.']}, {'end': 1439.069, 'start': 1116.015, 'title': 'Processing basics: color and transparency', 'summary': 'Covers color modes, color definitions using hsb and rgb, transparency levels using alpha values, and blending colors to create the illusion of transparency, providing a foundation for creating designs in processing.', 'duration': 323.054, 'highlights': ['The chapter discusses color modes such as HSB and RGB for defining colors in processing. It introduces the color mode function and explains the concept of hue, saturation, and brightness as well as the difference between RGB and HSB color models.', 'The chapter explains transparency levels using alpha values in processing, demonstrating the concept of blending colors to create the illusion of transparency. It provides examples of how alpha values control transparency and illustrates how colors blend to create the effect of transparency in processing.', 'The chapter encourages experimentation with color and design in processing, providing a foundation for creating designs and artworks. It motivates the audience to explore color combinations, transparency effects, and different ways of blending colors, ultimately fostering creativity in design and art within processing.']}], 'duration': 448.289, 'thumbnail': 'https://coursnap.oss-ap-southeast-1.aliyuncs.com/video-capture/n2oHuKG_BQc/pics/n2oHuKG_BQc990780.jpg', 'highlights': ['Adding code comments can reduce video length by five minutes and improve future understanding of the code.', 'Emphasizes the importance of adding comments for future understanding and productivity.', 'Code comments serve as annotations and explanations for different sections of the code, benefiting future productivity.', 'The chapter discusses color modes such as HSB and RGB for defining colors in processing.', 'The chapter explains transparency levels using alpha values in processing, demonstrating the concept of blending colors to create the illusion of transparency.', 'The chapter encourages experimentation with color and design in processing, providing a foundation for creating designs and artworks.']}], 'highlights': ['Processing provides a wealth of examples for beginners to explore, aiding in understanding drawing possibilities. (abundance of examples)', 'The reference is accessible within the processing application, offering direct access from the development environment. (availability of reference within the application)', 'The order of operations for setting color in processing is crucial, as the color settings for a shape should be defined before drawing the shape in the program.', "The key functions for setting color in processing are 'fill' and 'stroke', which are used to define the interior and outline of a shape, respectively.", 'The default colors used by processing are black and white, as the specific colors are not specified in the program.', 'The RGB color model is explained, with the range for each color value specified as 0 to 255, demonstrating the wide spectrum of colors that can be created.', 'A practical demonstration of mixing colors using the RGB model in Processing is mentioned, showcasing the application of the concept through code.', 'The background function in a processing sketch allows setting the color for the background, such as using grayscale arguments to create a black background or specifying RGB values for a green background.', 'The function provides flexibility in filling the background of a processing sketch window with different colors, enhancing the visual appearance and customization.', 'Adding code comments can reduce video length by five minutes and improve future understanding of the code.', 'Emphasizes the importance of adding comments for future understanding and productivity.', 'Code comments serve as annotations and explanations for different sections of the code, benefiting future productivity.', 'The chapter discusses color modes such as HSB and RGB for defining colors in processing.', 'The chapter explains transparency levels using alpha values in processing, demonstrating the concept of blending colors to create the illusion of transparency.', 'The chapter encourages experimentation with color and design in processing, providing a foundation for creating designs and artworks.']}