CS 467 GENERATIVE ART Color Spring 2020 http://blog.canvascorpbrands.com/tattered-tangles-color-me-cards-book-tags/ RGB Cube, SharkD CRT Displays LCD / LED displays Plasma displays image from F. Hill “Computer Graphics Using OpenGL” image from http://www.laptop-lcd-screen.co.uk/ laptopparts/what-is-lcd-how-laptop-screen-works.asp image from http://electronics.howstuffworks.com/plasma-display2.htm images from E. Angel and D. Shreiner “Interactive Computer Graphics” Hue Saturation Value [or Brightness] (HSV/HSB) Hue Saturation Lightness (HSL) HSV Cone, Wikimedia Commons RGBA Blend modes D - destination pixel S - source pixel Blend Mode Behavior BLEND D’ = D * (1-alpha) + S * alpha ADD D’ = D + S * alpha DARKEST D’ = min(S * alpha, D) LIGHTEST D’ = max(S * alpha, D) DIFFERENCE D’ = max( D - S*alpha, S*alpha - D) EXCLUSION similar to DIFFERENCE but “less extreme” MULTIPLY D’ = D * S*alpha SCREEN D’ = 1 - ((1 - D) * (1 - S)) REPLACE D’ = S REMOVE remove pixels from D with alpha strength of S OVERLAY Mix of MULTIPLY and SCREEN, multiplies dark values, screens light values HARD_LIGHT SCREEN when > 50% gray, MULTIPLY when lower SOFT_LIGHT Mix of DARKEST and LIGHTEST. Woks like OVERAY, but not as harsh Red DODGE D’ = D / (1 - (S * alpha)), lightens light tones, increases contrast, ignores darks BURN D’ = 1 - ((1-D) / (S*alpha)), darkens dark tones, increases contrast, ignores lights Green Blue https://p5js.org/reference/#/p5/blendMode Alpha https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Compositing aliceblue #f0f8ff darkslategrey #2f4f4f lightpink #ffb6c1 palevioletred #db7093 Blend modes antiquewhite #faebd7 darkturquoise #00ced1 lightsalmon #ffa07a papayawhip #ffefd5 aqua #00ffff darkviolet #9400d3 lightseagreen #20b2aa peachpuff #ffdab9 aquamarine #7fffd4 deeppink #ff1493 lightskyblue #87cefa peru #cd853f azure #f0ffff deepskyblue #00bfff lightslategray #778899 pink #ffc0cb beige #f5f5dc dimgray #696969 lightslategrey #778899 plum #dda0dd bisque #ffe4c4 dimgrey #696969 lightsteelblue #b0c4de powderblue #b0e0e6 black #000000 dodgerblue #1e90ff lightyellow #ffffe0 purple #800080 blanchedalmond #ffebcd firebrick #b22222 lime #00ff00 rebeccapurple #663399 blue #0000ff floralwhite #fffaf0 limegreen #32cd32 red #ff0000 blueviolet #8a2be2 forestgreen #228b22 linen #faf0e6 rosybrown #bc8f8f brown #a52a2a fuchsia #ff00ff magenta #ff00ff royalblue #4169e1 burlywood #deb887 gainsboro #dcdcdc maroon #800000 saddlebrown #8b4513 cadetblue #5f9ea0 ghostwhite #f8f8ff mediumaquamarin #66cdaa salmon #fa8072 e chartreuse #7fff00 gold #ffd700 mediumblue #0000cd sandybrown #f4a460 chocolate #d2691e goldenrod #daa520 mediumorchid #ba55d3 seagreen #2e8b57 coral #ff7f50 gray #808080 mediumpurple #9370db seashell #fff5ee cornflowerblue #6495ed green #008000 mediumseagreen #3cb371 sienna #a0522d cornsilk #fff8dc greenyellow #adff2f mediumslateblue #7b68ee silver #c0c0c0 crimson #dc143c grey #808080 mediumspringgree #00fa9a skyblue #87ceeb n cyan #00ffff honeydew #f0fff0 mediumturquoise #48d1cc slateblue #6a5acd darkblue #00008b hotpink #ff69b4 mediumvioletred #c71585 slategray #708090 darkcyan #008b8b indianred #cd5c5c midnightblue #191970 slategrey #708090 darkgoldenrod #b8860b indigo #4b0082 mintcream #f5fffa snow #fffafa darkgray #a9a9a9 ivory #fffff0 mistyrose #ffe4e1 springgreen #00ff7f darkgreen #006400 khaki #f0e68c moccasin #ffe4b5 steelblue #4682b4 darkgrey #a9a9a9 lavender #e6e6fa navajowhite #ffdead tan #d2b48c darkkhaki #bdb76b lavenderblush #fff0f5 navy #000080 teal #008080 darkmagenta #8b008b lawngreen #7cfc00 oldlace #fdf5e6 thistle #d8bfd8 darkolivegreen #556b2f lemonchiffon #fffacd olive #808000 tomato #ff6347 darkorange #ff8c00 lightblue #add8e6 olivedrab #6b8e23 turquoise #40e0d0 darkorchid #9932cc lightcoral #f08080 orange #ffa500 violet #ee82ee darkred #8b0000 lightcyan #e0ffff orangered #ff4500 wheat #f5deb3 darksalmon #e9967a lightgoldenrodyell #fafad2 orchid #da70d6 white #ffffff ow darkseagreen #8fbc8f lightgray #d3d3d3 palegoldenrod #eee8aa whitesmoke #f5f5f5 darkslateblue #483d8b lightgreen #90ee90 palegreen #98fb98 yellow #ffff00 alpha = 0.5 darkslategray #2f4f4f lightgrey #d3d3d3 paleturquoise #afeeee yellowgreen #9acd32 https://drafts.csswg.org/css-color/ Challenge.