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