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

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

<iframe width="560" height="315" src="https://www.youtube.com/embed/YBcTesyewHg?si=9ncnawwnucX2S8Wt" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>

スクリーンショット
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1226429/3c5f0e4d-61cd-4001-aec9-845e806bbbb7.png" width="60%"><br>

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

## プログラム

まず、スピンの配列(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クラスを作ります。
アルゴリズムは以下の通りです。
<ol>
<li>初期のポジション(マウスクリックした場所)を設定し、さらに中心のボールの周囲に10個のボールが散らばるようにランダムに平行移動をさせる
</ol>

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

```
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);
    }
  }
  
}
```

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

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