《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()以外で表現できないか模索中です。





