この記事を書いた人

- クリエイティブコーディングで制作した作品と、上達のためにやったこと・学習過程を発信
- コンセプトは「クリエイティブコーディング1万時間の歩き方」
- 2024年にProcessingの構文のアウトプットを終え、2025年から作品制作開始(クリエイティブコーディングで作成した作品集)
目次
作品の画像とコード

PImage img;
float pixelSize = 50; // ピクセルサイズ(固定)
void setup() {
size(1080, 1080);
frameRate(60);
smooth();
// 画像をロード
img = loadImage("2.jpg"); // 使用する画像ファイル名を適切に変更してください
}
void draw() {
background(0);
// 画像を描画
drawImageWithShapes(img, pixelSize);
}
void drawImageWithShapes(PImage img, float pixelSize) {
PImage resizedImg = img.copy();
resizedImg.resize(width, height); // 画像サイズを画面サイズに合わせる
for (int y = 0; y < height; y += int(pixelSize)) {
for (int x = 0; x < width; x += int(pixelSize)) {
color c = resizedImg.get(x, y); // 画像から色を取得
fill(c);
noStroke();
// 四角形を描画
rect(x, y, pixelSize, pixelSize);
// 星を描画(四角形の中心を基準に配置)
fill(255, 255, 255, 150); // 半透明の白い星
drawStar(x + pixelSize / 2, y + pixelSize / 2, pixelSize * 0.2, pixelSize * 0.4, 5); // 星を描画
}
}
}
void drawStar(float centerX, float centerY, float innerRadius, float outerRadius, int numPoints) {
float angleStep = TWO_PI / numPoints; // 各頂点の角度
beginShape();
for (int i = 0; i < numPoints * 2; i++) {
float angle = i * angleStep / 2; // 星の内外の頂点を交互に配置
float radius = (i % 2 == 0) ? outerRadius : innerRadius; // 外側と内側を切り替え
float x = centerX + cos(angle) * radius;
float y = centerY + sin(angle) * radius;
vertex(x, y); // 頂点を設定
}
endShape(CLOSE);
}

それでは今日もレッツワクワクコーディング。