Random Color Pixel Blend

R_pixel2

R_pixel1

Really excited to get started on an installation for Behance’s new office’s in NYC! It will be a very three dimensional piece and we are thinking of a way to tile it with both a defined palette and a random color blend that is made of pixels instead of a smooth gradient. A kind of three dimensional version of Gerhard Richetr’s stained glass window for the cathedral in Cologne. We created this quick sketch to test variations. Its pretty straight forward but there are a couple of tweaks so the random colors don’t constantly update. There is a copy of the code after the jump…

import controlP5.*;
ControlP5 cp5;

int pixelsize;
int randomzone;

IntList R = new IntList();
IntList G = new IntList();
IntList B = new IntList();

int R1;
int G1;
int B1;
int R2;
int G2;
int B2;

int xstart = 100;
int ystart = 200;

int oldps;
int oldr;
int oldc;
boolean olda = true;

float r1;
float r2;

boolean stroke;
boolean additive; 

void setup(){
  size(displayWidth, displayHeight);
  
   cp5 = new ControlP5(this);
  
  cp5.addSlider("pixelsize")
     .setPosition(100,20)
     .setRange(5,200)
     .setSize(240,20)
     .setValue(10)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("randomzone")
     .setPosition(100,50)
     .setRange(0,1000)
     .setSize(240,20)
     .setValue(255)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
     
   cp5.addToggle("stroke")
     .setPosition(100,80)
     .setSize(20,20)
     .setValue(true)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addToggle("additive")
     .setPosition(160,80)
     .setSize(20,20)
     .setValue(true)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("R1")
     .setPosition(450,20)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(0)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("G1")
     .setPosition(450,80)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(0)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("B1")
     .setPosition(450,50)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(255)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
     
  cp5.addSlider("R2")
     .setPosition(800,20)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(255)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("G2")
     .setPosition(800,80)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(0)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  cp5.addSlider("B2")
     .setPosition(800,50)
     .setRange(0,255)
     .setSize(240,20)
     .setValue(0)
     .setColorForeground(color(150,150,150))
     .setColorLabel(color(255))
     .setColorBackground(color(70,70,70))
     .setColorValue(color(0,0,0))
     .setColorActive(color(200,200,200))
     ;
  oldps = 0;
  oldr = 0;
  oldc = 0;
}

void draw(){
  background(0);
  int xsize = width-(xstart*2);
  int ysize = height-(ystart*2);
  int newc = R1+G1+B1+R2+G2+B2;
  float psx = xsize/pixelsize;
  float nsx = pixelsize + (xsize%pixelsize)/psx;
  float psy = ysize/pixelsize;
  float nsy = pixelsize + (ysize%pixelsize)/psy;
  
  if((oldps != pixelsize) || (oldr != randomzone) || (oldc != newc) || (olda != additive)){
   R = new IntList();
   G = new IntList();
   B = new IntList();
   int i = 0;
   for(int xc = 0; xc < psx; xc++){
    for(int yc = 0; yc < psy; yc++){
      float d = abs((xc*nsx+xstart) - (width/2));
      float rth = 255 - (255 * d/randomzone);
      if(rth < 0){
        rth = 0;
      }
      if(additive == true){
        r1 = 0;
        r2 = rth;
      }else{
        r1 = rth * -1;
        r2 = rth;
      }
      int radd = int(random(r1,r2));
      R.append(int(((R2-R1)/(psx * 1.0) * xc) + R1)+radd);
      radd = int(random(r1,r2));
      G.append(int(((G2-G1)/(psx * 1.0) * xc) + G1)+radd);
      radd = int(random(r1,r2));
      B.append(int(((B2-B1)/(psx * 1.0) * xc) + B1)+radd);
      i++;
    }
   }
  }
  int i = 0;
  for(int xc = 0; xc < psx; xc++){
    for(int yc = 0; yc < psy; yc++){
      fill(R.get(i),G.get(i),B.get(i));
      if(stroke == true){
        stroke(1);
      }else{
        noStroke();
      }
      rect(xc*nsx+xstart,yc*nsy+ystart,nsx,nsy);
      i++;
    }
  }
  noStroke();
  fill(R1,G1,B1);
  rect(720,20,50,80);
  fill(R2,G2,B2);
  rect(1070,20,50,80);
  oldps = pixelsize;
  oldr = randomzone;
  oldc = R1+G1+B1+R2+G2+B2;
  olda = additive;
}