ワタタク目的はピクセルの大きさによる見え方の違いを確認すること、感じること。
ピクセルサイズの入力を楽にすること。
この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
作品の画像とコード
拡大前の画像
拡大後の画像
アニメーション。
PImage img;
int pixelSize = 10; // 初期ピクセルサイズ
boolean growing = true; // サイズが増加中か減少中かを記録
void setup() {
size(1080, 1080); // インスタグラム向けの正方形サイズ
img = loadImage("21, Painting, Sevilla, Spain.jpg"); // 画像ファイルの名前を指定
img.resize(width, height); // 画像を正方形にリサイズ
frameRate(30); // アニメーション速度を設定
}
void draw() {
background(0); // 背景をクリア
for (int y = 0; y < height; y += pixelSize) {
for (int x = 0; x < width; x += pixelSize) {
color c = img.get(x, y); // 画像のピクセル色を取得
fill(c); // 色を設定
noStroke(); // 枠線を消す
rect(x, y, pixelSize, pixelSize); // 四角形を描画
}
}
// ピクセルサイズを変更
if (growing) {
pixelSize++;
if (pixelSize >= 300) growing = false; // 最大サイズに達したら減少へ
} else {
pixelSize--;
if (pixelSize <= 10) growing = true; // 最小サイズに達したら増加へ
}
}つぶやきProcessing
PImage img; int s=10,g=1; void setup(){size(1080,1080);img=loadImage("21.jpg");img.resize(width,height);}void draw(){background(0);for(int y=0;y<height;y+=s){for(int x=0;x<width;x+=s){fill(img.get(x,y));rect(x,y,s,s);}}s+=g;if(s>=200||s<=10)g*=-1;}作った感想
キラキラ光っていてキレイ。
キラキラ光るのは視覚の錯覚だったり、フレームレートによるものっぽい。要検証。
ワタタクそれでは今日もレッツワクワクコーディング。