Week 03: Computational Color and Export

We are meeting over Slack this week.

Please watch the update videos:

• after class begins
• middle of class
• end of class

Lecture

This week, 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 an image and an SVG from p5js.

By the end of the week, please cover these color coding examples and functions:

Coding Examples

• Color Mode RGB
• Color Mode HSB
• Opacity
• Monochromatic
• Analogous
• Complimentary
• Triadic
• Quadratic
• Grayscale
• Color Variable
• Export Image
• Export SVG

Functions related to color

• colorMode(RGB)
• colorMode(HSB)
• colorMode(HSB, 100)
• colorMode(HSB, 360, 100, 100)
• Monochromatic
• Analogous
• Complementary
• Triadic
• Quadratic
• modulo %
• colorMode(HSB, 100, 100)
• colorMode(HSB, 360, 100, 100, 100)
• fill(360, 100, 100, 50)
• color(360, 100, 50)

Suggested reading and links

• Interaction of Color App
• Color Theory Game
• Coding Train Modulo Explanation
• p5 SVG Library

Links to Artists who draw with code

• Emily Xie
• James Merrill
• Francoise Gamma

In Class

1. We will review the posters you designed for this week as homework and give each other feedback.
2. Duplicate your sketch and add color to your posters. Play around with different color schemes.
3. Share your new creation to the class.

In Class Rubric

• 80/100 - Student shared links to their p5js sketches and is present during class to explain their process and ask / answer questions
• 20/100 - Student offered feedback to fellow students publicly in the Slack

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.

Homework Rubric

• 80 / 100 - Student used p5js to design a poster to represent themselves with color.
• 20 / 100 - Student submits the link to their p5js sketch to Slack on time before the next class.
• back