この記事を書いた人
- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始（クリエイティブコーディングで作成した作品集）
目次
【作品125】画像とコード
画像
使用画像とコード
使用画像
//参考サイト様：p5.jsで作るピクセルソーティング
//https://bagelee.com/programming/p5js-pixelsorting/
//
PImage img;
void setup() {
size(500, 500);
img = loadImage("flower.jpg"); // 画像ファイル名を書く
img.resize(width, height);
image(img, 0, 0, width, height);
smooth();
getPixel();
}
void getPixel() {
for (int x = 0; x < width; x++) {
for (int y = 0; y < height; y++) {
int index = int(random(100));
color c = img.get(x, y);
float r = red(c);
float g = green(c);
float b = blue(c);
// 赤と紫系の色をフィルタリング
if (r > 150 && b > 150 && g < 100) {
if (index < 200) {
drawLine(x, y, r, g, b);
}
}
}
}
}
void drawLine(int x, int y, float r, float g, float b) {
int length = int(random(50, 300)); // 線の長さをランダムに調整
stroke(r, g, b, 200); // 色と透明度を設定
strokeWeight(10); // 線の太さ
line(x, y, x, y + length); // 垂直な線
}