Thursday, December 29, 2011

Boring fashion colors

Fashion color software
I looked around me and I wondered ... are fashion colors really so boring nowadays or am I imagining it? To check my intuitive impression I wrote two simple Processing sketches:
  •  Color picker - you point your mouse at the clothes of people. The colors are stored as a list of RGB values.
  • Color plotter - you combine the RGB lists from several photographs into one long list. Then this program plots the color values. One row is the original sequence. One row is a sorted sequence.
This is a follow-up on the fashion outliers observation experiment. The results are consistent.

Results
In 2011 there are not many outspoken fashion colors at all.
Summer colors are brighter and more outspoken than winter colors.
Colors in the Netherlands are different from colors in Germany. There are more browns in Germany no tasteless pun intended). There are more blacks and blues in The Netherlands.

Critique
There is no color correction. Light color should be calibrated before using the program. It is possible that the camera makes the colors more bluish and less outspoken. This is something for future development.

Rotterdam July 2011 

Amsterdam October 2011 

Rotterdam August 2011 

Monchengladbach December 2011 

Rotterdam December 2011 

Processing code - Color picker

This code is based on the following program:
Color Picker by Andres Sanchez, licensed under Creative Commons Attribution-Share Alike 3.0 and GNU GPL license.  Work: http://openprocessing.org/visuals/?visualID=5092

PImage myImage;
PFont myFont;
color mouseColorS;
String colorPick;
String[] colorList = new String[0];
color blackCorr = color(0,0,0);
color whiteCorr = color(255,255,255);

void setup() {
  myImage = loadImage("r8.JPG");
  size(min(1000, myImage.width),min(700, myImage.height));
  background(180);
  smooth();
  myFont = createFont ("Helvetica",24);
};

void draw() {
  float rS;
  float gS;
  float bS;
  float rC;
  float gC;
  float bC;
 
  background(180);

  // drawthe image to the stage
  image(myImage, 100, 100, min(900, myImage.width), min(600, myImage.height));

  // find the color under the mouse
  color mouseColor0 = get(mouseX-1, mouseY-1);
  color mouseColor1 = get(mouseX,   mouseY);
  color mouseColor2 = get(mouseX+1, mouseY+1);
  color mouseColor3 = get(mouseX+1, mouseY-1);
  color mouseColor4 = get(mouseX-1, mouseY+1);
 
  rS = red(mouseColor0)/5 + red(mouseColor1)/5 + red(mouseColor2)/5 + red(mouseColor3)/5 + red(mouseColor4)/5;
  gS = green(mouseColor0)/5 + green(mouseColor1)/5 + green(mouseColor2)/5 + green(mouseColor3)/5 + green(mouseColor4)/5;
  bS = blue(mouseColor0)/5 + blue(mouseColor1)/5 + blue(mouseColor2)/5 + blue(mouseColor3)/5 + blue(mouseColor4)/5;
 
  mouseColorS = color(rS,gS,bS);

  //draw a rectangle filled with that color;
  fill(mouseColorS);
  noStroke();
  rect(0,0,100,100);

  // ad3d the text labels
  //red
  fill(255,0,0);
  textFont(myFont);
  textSize(16);

  //red
  text(round(red(mouseColorS)), 100,15);

  //green
  fill(0,255,0);
  text(round(green(mouseColorS)), 100, 35);

  //blue
  fill(0,0,255);
  text(round(blue(mouseColorS)), 100, 55);

  //hex value
  fill(255);

  text(hex(mouseColorS), 100, 75);
   
  colorPick = Integer.toString(round(red(mouseColorS))) + " " + Integer.toString(round(green(mouseColorS))) + " " + Integer.toString(round(blue(mouseColorS)));
};

void mousePressed() {
 
  if (mouseButton == LEFT) {
    fill(255,255,255);
    noStroke();
    rect(0,0,100,100);
    fill(255,255,255);
    text(colorPick, 100, 95);
    colorList = append (colorList, colorPick);
  }
  else if (mouseButton == RIGHT) {
    fill(0,0,255);
    noStroke();
    rect(0,0,100,100);
    saveStrings("colorList.txt", colorList);
  }
  else {
  }
}

Processing code - Color plotter

String[] textLines;
int nr;

void setup() {
  int i;
 
  textLines = loadStrings("colorList.txt");
 
  nr = round(900/textLines.length);
  size(textLines.length*nr, 600);
 
  for (i = 0; i < textLines.length; i = i+1) {
  fill(color((i%2)*155+50,(i%2)*155+50,(i%2)*155+50));
  rect(i*nr, 0, (i+1)*nr, 600);
  }
}

void draw() {
String[] pieces;
color[] colArray = new color[textLines.length];
color pick;
int i;
int j;

  colorMode(RGB);
  background(255); 
  noStroke();
  smooth();
 
  for (i = 0; i < textLines.length; i = i+1) {
    pieces = split(textLines[i], ' ');

    pick = color(int(pieces[0]), int(pieces[1]), int(pieces[2]));
    colArray[i] = pick;
    fill(pick);
    rect(i*nr, 0, (i+1)*nr, 300);
  }
 
  colArray = sort(colArray);
  for (i = 0; i < colArray.length; i = i+1) {
    fill(colArray[i]);
    rect(i*nr, 300, (i+1)*nr, 600);
  }
 
  save("color_plotter.jpg");
}


No comments:

Post a Comment