Week 03: Computational Color and Export

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 PDF

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
Color Variable
Export Image
Export SVG

In Class
Add color to your posters you designed for this week. Play around with different color schemes.

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

ModescolorMode(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);

SVG Library