Week 6: Interface

Thursday, February 11th Overview


  • Reading Discussion: 3:30-4:20

As a group, we will share our reactions and responses to this week's readings.

Individually, spend 3 minutes thinking about the following prompts.

How do the ideas presented in the readings add to or change your conception of what makes a tool expressive?

What are the tradeoffs between direct manipulation (GUIs) and representational tools (programming languages)?

How do the approaches to usability, expressiveness, and power presented in the readings connect with our use of Processing? From a creative standpoint, how is Processing expressive? How is it restrictive?

Follow with a joint discussion.

  • Break: 4:20-4:30

  • Computational Interfaces for Creative Expression -- Color Selection: 4:30-5:10


Programing Design Systems, Rune Madsen

Color Models and Color Spaces

Color Schemes


Standard HTML Color Pickers

Resembles the approach in many paint, drawing, and design tools


Kimiko Ryokai's I/O Brush (2004) :

CHI paper on ACM Digital Library


Tauba Aurerbach's RGB Colorspace Atlas (2011)


Adobe Kuler

Enables constraining colors across different rule sets- i.e triad, monochromatic, complementary etc.


The Color Project at IFP Media Center by MPC New York

Created by MPC New York in collaboration with artist Thompson Harrell, ‘The Color Project’ explores narratives through colour, line, and form found in geographic satellite imagery. Utilizing Google Earth together with custom software, the install spans over 27 HD screens pointing locations of the films that have been produced by IFP.

Ghita Jalal, Nolwenn Maudet and Wendy E. Mackay's Color Portraits (2015) CHI paper on ACM Digital Library
Video Demonstration on Vimeo

  • Examples from Code as a Creative Medium and Color Portraits recreated in Processing: 4:30-5:10


Color constraints and juxtaposition

Accented Palette

Palette from Photo


Color Relativity

Palette Explorer

Color Partner


  • Introduce week 5 assignment: 5:10-5:20


Assignment

  • Create a color picker

Using Processing, create a simple user interface that enables a person to create a simple color palette. Your only restriction is that it cannot resemble an existing color picker UI (i.e. the ones found in Photoshop etc.)

You may incorporate conventional UI elements from the controlP5 library including buttons, drop-downs, and sliders. You may also create your own interface elements and interactions as demonstrated in the code examples shown in class.

Choose a form of input for determining the color. You can sample based on the mouse position, generate random variations by incorporating noise, or map external data from sound or video to color values.

You might also consider the ways in which the color picker enables a person to compare or organize colors. You can also choose to constrain the range of colors a person can select from.


  • Once you've created your color picker, write a brief description the design principles behind it.

What audience is it intended for? What practices are you trying to support? (e.g. exploration? fine-grained control? comparison between alternatives?) How did you approach balancing ease of use with control and expressiveness?

  • Upload your Processing code and screenshots to your GitHub repository in the week6 directory. Also upload a text or markdown document with your 1 paragraph description. Please upload this material by 6:00 PM Monday evening.