《Processing 番外編》制作例3

May 17, 2021

Processing 制作例/ドット絵

点描」ができるなら「ドット絵」にも変換させられるかと、安易に考えたのですが、結果はこちらです。

元画像

PImage img; 

void setup() {
  size(500, 500); 
  img = loadImage("kokeshi.png");
  img.resize(500, 500);
  
}

void draw() {
  noStroke();
  float ratio = float(height)/float(width);
  float tilesX = map(mouseX, 0, width, 50, 50);
  float tilesY = ratio * tilesX;
  float tileSize = width / tilesX;
  for (int y = 0; y < img.height; y += tileSize) {
   for (int x = 0; x < img.width; x += tileSize) {
      color c = img.get(x, y);
      pushMatrix();
      translate(x, y);
      rect(0, 0, tileSize, tileSize);
      stroke(red(c), green(c), blue(c));
      fill(red(c),green(c),blue(c));
      popMatrix();
    }
  }
  }

各タイルの幅と高さを計算し、正方形で表現できるようにしました。
map()以外で表現できないか模索中です。

#animation

#いったところmemo

#読書きろく