這種效果用processing怎麼做？

12-28

如題:

觀察原圖，可以看到這隻鹿完全由規則排列的六邊形色塊拼成，顏色淺的地方六邊形會小一些，因此假如能找到一張背景是純白的的動物肖像圖，就可以完全根據圖片像素的顏色和亮度用相應顏色和一定大小的六邊形色塊填充畫板，從而得到一張顆粒化的動物肖像圖，然後再添加合適的背景就可以了。下面這個是我用Processing嘗試得到的一個和原圖比較接近的圖。

具體的處理過程是這樣的：
1. 首先用谷歌圖片搜索找到原圖，它的背景正好就是純白的：

2. 在Processing里載入上面這張圖片，讀取像素數組。
3. 設定六邊形色塊的內切圓半徑的最大值（Rmax）和色塊之間間距的大小（gap），根據這兩個值可以確定整個畫板六邊形柵格化後所有柵格中心的位置。
4. 遍歷每個柵格，讀取在第2步讀入的圖片的相應位置處的顏色。取一個小範圍求出該範圍內所有像素的顏色的平均值，這個平均顏色值將作為在該位置的六邊形色塊的顏色，而它的亮度值將會決定六邊形色塊的實際大小（也就是設定當亮度超過一個閾值後，六邊形將會隨亮度升高而減小，亮度最大時六邊形大小將會是0）。遍歷每個柵格並在畫板上畫出柵格內的所有六邊形色塊，經過這個過程後得到的結果應該是這樣的：

5. 然後還要再添加一個合適的背景，我開頭給出的那張圖是加了一個用Perlin Noise處理過的黃褐色背景（感覺還沒不加好看呢(『A`)）。

試了一下處理別的圖片，發現果然只適合處理背景純白的肖像照片：

赫本

李小龍

我列出程序了，求改進 (#^.^#) (^ ^;)：

PImage img; float Rmax = 8; float gap = 3; float dx = (2*Rmax+gap)*cos(PI/6); float dy = (2*Rmax+gap)/2; void setup(){ img = loadImage("BL2.jpg"); size(img.width,img.height); img.loadPixels();


  smooth(8);
  colorMode(RGB);

  background(255);

  int x,y;

  color c;

  float r;
  for(int xi=0; xi&<=width/dx; xi++){
    for(int yi=0; yi&<=height/dy; yi++){

      x = int(xi*dx);
      y = int(yi*dy);
      if (int(xi+yi)%2!=0){
        int loc = x+y*img.width;
        loc = constrain(loc,0,img.pixels.length-1);
        c = convolution(x,y,3,img);
        if (brightness(c)&>200)

          r = map(brightness(c),200,255,Rmax,0);

        else

          r = Rmax;
        draw_hex(x,y,r,c);

      }

    }

  }

}
void draw(){}
void draw_hex(float x, float y, float r, color c){

  float Sr = r/cos(PI/6);

  noStroke();

  fill(c);

  pushMatrix();

  translate(x,y);

  beginShape();

  vertex(Sr,0);

  vertex(Sr*cos(PI/3), Sr*sin(PI/3));

  vertex(Sr*cos(PI/3*2), Sr*sin(PI/3*2));

  vertex(Sr*cos(PI), Sr*sin(PI));

  vertex(Sr*cos(PI/3*4),Sr*sin(PI/3*4));

  vertex(Sr*cos(PI/3*5),Sr*sin(PI/3*5));

  endShape(CLOSE);

  popMatrix();

}

color convolution(int x, int y, int matrixsize, PImage img) { float rtotal = 0.0; float gtotal = 0.0; float btotal = 0.0; int offset = matrixsize / 2; // Loop through convolution matrix for (int i = 0; i &< matrixsize; i++){ for (int j= 0; j &< matrixsize; j++){ // What pixel are we testing int xloc = x+i-offset; int yloc = y+j-offset; int loc = xloc + img.width*yloc; // Make sure we have not walked off the edge of the pixel array loc = constrain(loc,0,img.pixels.length-1); // Calculate the convolution // We sum all the neighboring pixels multiplied by the values in the convolution matrix. rtotal += (red(img.pixels[loc]) / pow(matrixsize,2)); gtotal += (green(img.pixels[loc]) / pow(matrixsize,2)); btotal += (blue(img.pixels[loc]) / pow(matrixsize,2)); } } // Make sure RGB is within range rtotal = constrain(rtotal,0,255); gtotal = constrain(gtotal,0,255); btotal = constrain(btotal,0,255); // Return the resulting color return color(rtotal,gtotal,btotal); } void keyPressed(){ save("hexagon.png"); }

size(img.width,img.height);

這句提示尺寸無效啊