スポンサーリンク

Processing

Farbpalettenを試してみる。

更新日:

手にいれました。『Generative Design ―Processingで切り拓く、デザインの新たな地平』実にいい本だと思います。Processingを始める際に参考にして行けばクリエイティブなアイデアが身についていくんだろうなと感じています。
試したコードを記載してみます。

全体のコード

boolean savePDF = false;

int tileCountX = 2;
int tileCountY = 10;

color[] colorsLeft = new color[tileCountY];
color[] colorsRight = new color[tileCountY];
color[] colors;

boolean interpolateShortest = true;


void setup() { 
  size(960, 540);
  colorMode(HSB,360,100,100,100); 
  noStroke();
  shakeColors();
} 


void draw() { 
  tileCountX = (int) map(mouseX,0,width,2,100);
  tileCountY = (int) map(mouseY,0,height,2,10);
  float tileWidth = width / (float)tileCountX;
  float tileHeight = height / (float)tileCountY;
  color interCol;
  
  // just for ase export
  colors = new color[tileCountX*tileCountY];
  int i = 0;
  
  for (int gridY=0; gridY< tileCountY; gridY++) {
    color col1 = colorsLeft[gridY];
    color col2 = colorsRight[gridY];

    for (int gridX=0; gridX< tileCountX ; gridX++) { 
      float amount = map(gridX,0,tileCountX-1,0,1);
      
      if (interpolateShortest) {
        // switch to rgb
        colorMode(RGB,255,255,255,255);
        interCol = lerpColor(col1,col2, amount); 
        // switch back
        colorMode(HSB,360,100,100,100);
      } 
      else {
        interCol = lerpColor(col1,col2, amount); 
      }
      fill(interCol);
      
      float posX = tileWidth*gridX;
      float posY = tileHeight*gridY;      
      rect(posX, posY, tileWidth, tileHeight); 
    
      // just for ase export
      colors[i] = interCol;
      i++;
    }
  }

  saveFrame("frames/######.tif");
} 


void shakeColors() {
  for (int i=0; i<tileCountY; i++) {
    colorsLeft[i] = color(random(0,60), random(0,100), 100);
    colorsRight[i] = color(random(160,190), 100, random(0,100));
  }
}


void mouseReleased() {
  shakeColors();
}


void keyReleased() {
  if (key == '1') interpolateShortest = true;
  if (key == '2') interpolateShortest = false;
}

本当はコードを読み解いていこうと思うんですが、書籍にコードのひも解きが掲載されているので割愛します。

実行結果

実行結果ですが、こちらはマウスの移動、クリックで色が変化していきます。こんな内容が多数、掲載されていて今後の参考として使用できるとわくわくしてきます。
GENERATIVE GESTALTUNG:http://www.generative-gestaltung.de/code

Originally posted 2016-03-08 11:50:18.

スポンサーリンク

-Processing
-,

Copyright© office606 , 2017 All Rights Reserved Powered by STINGER.