Interactive Designer

(No) Preferential Other: Book


(No) Preferential Other

Creative Circus Project

(No) Preferential Other is a study on the relationship between color preferences and emotional responses. I crafted ten questions for people to answer using only color, then used Processing to generate a "painting" of the opposite of those color preferences. My hypothesis was that when a person is confronted with the colors they don't prefer, their emotion would be changed. I surveyed 50 people for this project.


The Profiles

The lefthand side of the page shows the answers to the ten questions. The color of the name is the dominant color on the right page. On the righthand side is the generated piece of art, using the opposite of the colors chosen. The opposite was defined as the original color's compliment with a change in chroma. The border around the art is the color the user chose as their reaction to the generated art. 


The Code

The code uses Processing and the Processing library HYPE to generate the images for the book. Each color in the survey has a corresponding opposite color. These opposites are input into a color pool where they are selected to be used in the image based on the weight the user gave the answer during the survey. Below is an example of the code used as well as the image that came from it.

import processing.pdf.*;

HDrawablePool pool;
HColorPool colors;

//random layout and color, shapes weighted

void setup(){
    H.init(this).background(#D6DF24); //question 1 color

    colors = new HColorPool()
        .add(#ffffff, 8) //question 2 color, weight
        .add(#F89521, 9) //question 3 color, weight
        .add(#71C6A4, 10) //question 4 color,weight
        .add(#927A53, 10) //question 5 color, weight
        .add(#632913, 2) //question 6 color, weight
        .add(#FDEE0D, 10) //question 7 color, weight
        .add(#0A0B0D, 5) //question 8 color, weight
        .add(#3E5D58, 10) //question 9 color, weight
        .add(#EE2C24, 9) //question 10 color, weight

    pool = new HDrawablePool(100);
        .add(new HShape("svg1.svg"),8) //svg 2, q2 weight
        .add(new HShape("svg2.svg"),9) //svg 3, q3 weight
        .add(new HShape("svg3.svg"),10) //svg 4, q4 weight
        .add(new HShape("svg4.svg"),10) //svg 5, q5 weight
        .add(new HShape("svg5.svg"),2) //svg 6, q6 weight
        .add(new HShape("svg6.svg"),10) //svg 7, q7 weight
        .add(new HShape("svg7.svg"),5) //svg 8, q8 weight
        .add(new HShape("svg8.svg"),10) //svg 9, q9 weight
        .add(new HShape("svg9.svg"),9) //svg 10, q10 weight
            new HCallback() {
                public void run(Object obj) {
                    HShape d = (HShape) obj;
                        .size( (int)random(200,600) ) //randomize svg scale
                        .rotate( (int)random(360) ) //randomive rotation of svg
                        .loc( (int)random(width), (int)random(height) ) //randomize location
                    d.randomColors(colors.fillOnly()); //randomize fill color based on weight or color


void draw () {



void SaveVector(){ //save img as pdf
    PGraphics tmp=null;
    tmp = beginRecord(PDF, "elisat.pdf");

    if (tmp==null) {
    } else {

        H.stage().paintAll(tmp, false, 1); //PGraphics, uses3d, alpha