【作品125】他の人の作品を真似してみましょう【minacoding2025 day27】

2025年6月27日2025年12月17日

URLをコピーしました！

この記事を書いた人

クリエイティブコーダー Watataku のプロフィール写真 — ワタタク(Watataku)

上達の研究家 / アーティスト

「才能」ではなく「発見」で描く。文系・36歳からの上達ハック。

ゼロから独学でクリエイティブコーディングに挑戦し、以下の実績を達成
- 開始1年8ヶ月目までに公募6つに挑戦し、3つ入選（勝率50%）
- 開始1年9ヶ月目に、虎ノ門ヒルズ49階、地上250mのインフィニティプールへ作品提供・展示
【上達の秘密】
- 起源の物語：未経験から虎ノ門ヒルズ展示までの全記録（Genesis）
- 思考の技術：「上達」をシステム化する、モレスキン6冊の運用設計図
  - ※虎ノ門ヒルズでの実績を出した「思考」と「経験」を、再現可能な形に体系化

【作品125】画像とコード

画像

#125@20250627#minacoding Day27

他の人の作品を真似してみましょう

codeと参考サイト様はブログにhttps://t.co/IuZxYvfTAe

ピクセルソーティング。
表現技法の名前を知るって重要。#creativecoding #dailycoding #processing pic.twitter.com/jo6oxDHJC0
— Watataku@Creative Coding (@Watataku_Art) June 26, 2025

使用画像とコード

使用画像

//参考サイト様：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); // 垂直な線
}

Copy

//参考サイト様：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); // 垂直な線
}