Lecture
Today we will be talking about color theory for the visual arts. How colors interact with each other and traditional color schemes that have been proven to work well. What moods different colors represent. And of course how to create all of these colors using p5js. We will also be covering how to export a image and a SVG from p5js.
Lecture Video
Other Links
Interaction of Color App
Color Theory Game
Coding Train Modulo Explanation
p5 SVG Library
Coding Examples
Color Mode RGB
Color Mode HSB
Opacity
Monochromatic
Analogous
Complimentary
Triadic
Quadratic
Grayscale
Color Variable
Export Image
Export SVG
In Class
Add color to your posters you designed for this week. Play around with different color schemes.
Homework
1. Read the chapter on color on www.programmingdesignsystems.com
2. Suggested Reading: Pages 85 – 93 in Processing, by Casey Reas and Ben Fry.
3. Use p5js to design a poster that represents who you are. Pick your favorite color as a base color and play with the color schemes we went over today or use an analogous color scheme based on the month your birthday is in. This can be realistic or abstract, as long as you can explain your reasons behind the poster.
4. Be prepared to share your poster designs with the class on Slack next week.
5. Watch the lecture video for Week 4 and come to class with questions.
Functions Discussed
Modes – colorMode(RGB), colorMode(HSB)
Mapping Modes – colorMode(HSB, 100), colorMode(HSB, 360, 100, 100)
Color Schemes – Monochromatic, Analogous, Complementary, Triadic and Quadratic
Fixes – modulo %
Opacity – colorMode(HSB, 100, 100), colorMode(HSB, 360, 100, 100, 100), fill(360, 100, 100, 50)
Variable – Color colorName = color(360, 100, 50);