メディアアート~サークルスピン~

作品名: インクスロー

この作品は画面をクリックすると、大きなボールが出て、さらに小さなボールが周囲をスピンします

スクリーンショット

実はいうと、インクスローを作る時の没作品だったが、面白味あって作品を仕上げました。

プログラム

まず、スピンの配列(Splash)と色の準備をします。
もともとインクスロー用のプログラムだったため、Splashとしています笑

int MaxColor;

float Hue = 0; // 色相
float Saturation = 500; // 彩度
float Value = 1000; // 明度

ArrayList<Splash> splashes = new ArrayList<Splash>();

次、初期設定を行います。
backgroundを白にするため、MaxColor-1と設定し、スクリーンサイズは大きくします。

void setup() {
  size(1600, 1200);
  MaxColor = 400;
  colorMode(HSB, MaxColor, 255, 255); // HSB + 透明度対応
  background(MaxColor-1);
}

ボール(インク)を定義するため、Splashクラスを作ります。
アルゴリズムは以下の通りです。

1. 初期のポジション(マウスクリックした場所)を設定し、さらに中心のボールの周囲に10個のボールが散らばるようにランダムに平行移動をさせる

実際動かすと猛スピードなので回っているかのように感じました。

class Splash {
    float x, y;
    float Size;
    float splash_hue;
    float diff_x, diff_y;
    float size; 
    Splash(float startX, float startY, float hue) {
        x = startX;
        y = startY;
        splash_hue = hue;
    }
    
    void display() {
        noStroke();
        fill(splash_hue, Saturation, Value); // アルファ値を適用
        ellipse(x, y, 400, 400);
        for (int i = 0; i<10; i++){
            diff_x = random(-100, 100);
            diff_y = random(-100, 100);
            size = random(100, 300);
            ellipse(x+diff_x, y+diff_y, size, size);
        }
    }
}

ここでの失敗はボールごとの座標を配列に格納してなかった点です。

最後、描画時の処理とマウス処理を行います。
マウスがクリックされたら、クリックした位置でインクスローを行い、インクをばらまきます。
また、draw()と言われる継続的に行う関数でfor文を使ってインクスローのアニメーションを行います。

void draw() {
  background(MaxColor-1); // 背景を描画してリフレッシュ
  
  // 全ての粒子を更新・描画
  for (int i = 0; i <= splashes.size() - 1; i++) {
    Splash s = splashes.get(i);
    s.display();
    
  }
  
}

void mousePressed() {
  Hue = random(0, 400);     
  splashes.add(new Splash(mouseX, mouseY, Hue));
}

コード全体は以下の通りです。

int MaxColor;

float Hue = 0; // 色相
float Saturation = 500; // 彩度
float Value = 1000; // 明度

ArrayList<Splash> splashes = new ArrayList<Splash>();

void setup() {
  size(1600, 1200);
  MaxColor = 400;
  colorMode(HSB, MaxColor, 255, 255); // HSB + 透明度対応
  background(MaxColor-1);
}

void draw() {
  background(MaxColor-1); // 背景を描画してリフレッシュ
  
  // 全ての粒子を更新・描画
  for (int i = 0; i <= splashes.size() - 1; i++) {
    Splash s = splashes.get(i);
    s.display();
    
  }
    
}

void mousePressed() {
  Hue = random(0, 400);     
  splashes.add(new Splash(mouseX, mouseY, Hue));
}

class Splash {
    float x, y;
    float Size;
    float splash_hue;
    float diff_x, diff_y;
    float size; 
    Splash(float startX, float startY, float hue) {
        x = startX;
        y = startY;
        splash_hue = hue;
    }
    
    void display() {
    noStroke();
    fill(splash_hue, Saturation, Value); // アルファ値を適用
    ellipse(x, y, 400, 400);
    for (int i = 0; i<10; i++){
        diff_x = random(-100, 100);
        diff_y = random(-100, 100);
        size = random(100, 300);
        ellipse(x+diff_x, y+diff_y, size, size);
    }
  }
  
}

マウスでクリックするとボールを面白い形で表示ができます。
さらに失敗から面白いインタラクティブアートの派生します！

まとめ

今回の作品では、画面をクリックしてボールスピンをするかのようにチート技になったと考えられます。