Processing入門：マウスを押しながらドラッグしてルービックキューブの上層を回転させるアニメーションを作ろう

**こんにちは！この記事では、Processingを使ってルービックキューブの上層を回転させる簡単なアニメーションを作ります。**
<iframe width="560" height="315" src="https://www.youtube.com/embed/1YcbB-wm-c0?si=dKz4Na2lC_3cwaUD" 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>

初めての方でも安心して取り組めるように、すべてのステップを丁寧に説明しています!

この記事は少し長く見えるかもしれませんが、実際の操作はとてもシンプルです！画像を準備して、少しコードを入力するだけで、あっという間にルービックキューブが回転するインタラクティブなアニメーションが完成します。**プログラミング初心者でも全く問題ありません**ので、ぜひ最後まで一緒に進めていきましょう！

## Processingとは？

まずは簡単にProcessingについて説明します。**Processing**は、アートやデザイン、アニメーションを簡単に作れるプログラム開発環境です。プログラミングを全く知らない方でも直感的に使いやすく、インタラクティブな作品をすぐに作り始めることができます。今回は、このProcessingを使ってルービックキューブの回転アニメーションを作ります。
![Processing-Logo.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/89c281b4-0ae4-839a-708f-48b2d5cfa8e6.jpeg)

## 記事の概要

この記事では、**マウスを押しながらドラッグする**ことで、**ルービックキューブの上層を回転させるアニメーション**を作成します。キューブの回転をシミュレートするために、14枚の画像を使い、マウスの動きに応じて画像を切り替えます。

**作業の流れはとてもシンプルです**：

1. Processingをインストール
2. プログラムを作成・保存
3. 画像ファイルを準備
4. 簡単なコードを書いて実行

## 必要なもの

- **Processing**：ビジュアルプログラム開発環境。[公式サイト](https://processing.org/download/)から無料でダウンロードできます。
![スクリーンショット 2024-10-25 141714.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/25aec438-22a3-287b-2c70-2dd22b307903.png)

- **ルービックキューブの画像14枚**：キューブの各回転状態を表す画像を用意します。これらの画像は後でプログラムに使いますので、`0.jpg`から`13.jpg`という名前で保存しておきます。
![data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/06978014-cc75-c1d9-e01e-e6105e683ab4.jpeg)


## Step 1: Processingのダウンロードとインストール

1. [Processing公式サイト](https://processing.org/download/)にアクセスして、お使いのOSに合ったバージョンをダウンロードしてください。
   
2. ダウンロードが完了したら、インストールを行います。画面の指示に従って簡単にインストールできるので心配いりません！

**インストールが終わったら、Processingを起動**して次のステップに進みましょう。

## Step 2: プロジェクトの作成と保存

1. Processingを起動したら、まず「新規ファイル」を作成します。上部メニューから「ファイル」→「新規」で新しいウィンドウが開きます。
![new.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/bde2e138-e936-566b-5a72-def218240880.jpeg)


2. **コードを書く前に、ファイルを保存しましょう**。メニューの「ファイル」→「名前を付けて保存（Save As）」を選び、ファイル名を「**cube**」にして保存します。この操作によって、`cube`という名前のフォルダが自動的に作成され、その中にプログラムが保存されます。
![newcube.JPG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/0413cf8a-a34f-6aa4-2800-5d789779ac36.jpeg)


## Step 3: 画像ファイルの準備

次に、ルービックキューブの画像を用意してプログラムに使えるようにします。

1. 先ほど保存した`cube`フォルダを開きます。

2. このフォルダ内に、`「data」`という名前のフォルダを新しく作成します。このフォルダは、Processingで画像ファイルを扱うための専用フォルダです。
![folder.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/ba77d14e-cefe-fbc5-304e-b227888f887f.jpeg)


3. 用意しておいた14枚のルービックキューブの画像を、「data」フォルダの中に保存します。画像のファイル名は`「0.jpg」`から`「13.jpg」`までにします。
![data.jpg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/a3357da3-c934-cfdd-d38f-6b84ecaa6822.jpeg)


### フォルダ構造の確認

この時点でフォルダ構造は以下のようになります：

```
cube/  <-- プログラムフォルダ
  └── data/  <-- 画像ファイルフォルダ
       ├── 0.jpg
       ├── 1.jpg
       ├── 2.jpg
       ├── ...
       └── 13.jpg
```

**重要なポイント**：画像ファイルを必ず`「data」`フォルダに入れる必要があります。Processingはこの`「data」`フォルダにあるファイルを自動的に読み込みますので、正しく配置してください。

## Step 4: コードを書く

ここからはProcessingに戻り、実際にコードを書いていきます。このコードでは、マウスを押しながらドラッグすることで、ルービックキューブの上層が回転するように見えるアニメーションを実現します。

以下のコードをProcessingに入力してください：

```java
PImage[] image;  // 画像を格納する配列
int frame = 0;   // 現在表示しているフレーム（画像）の番号

void setup(){
  size(960, 640);  // ウィンドウのサイズを設定（幅960ピクセル、高さ640ピクセル）
  image = new PImage[14];  // 14枚の画像を格納する配列を初期化
  
  // 0.jpgから13.jpgまでの画像をロードして配列に保存
  for(int i = 0; i < 14; i++){
    image[i] = loadImage("data/" + i + ".jpg");  // 画像ファイルの読み込み
  }
}

void draw(){
  image(image[frame], 0, 0, 960, 640);  // 現在のフレームに対応する画像を描画
  if(mousePressed){  // マウスが押されたとき
    frame = (int)((float)mouseX / (float)width * 20);  // マウスの横位置に基づいてフレームを計算
  }
  
  // フレームの範囲を制御（0〜13の範囲内に限定）
  if(frame < 0)
    frame = 0;
  if(frame > 13)
    frame = 13;
}
```

### コードの説明

1. **`PImage[] image`**：14枚の画像を格納するための配列です。この配列にルービックキューブの各回転状態の画像が保存されます。
   
2. **`frame`**：現在表示している画像の番号を表す変数です。マウスの位置に応じて切り替わります。

3. **`setup()`**：
   - **`size(960, 640)`**：ウィンドウのサイズを指定しています。この例では、幅960ピクセル、高さ640ピクセルのウィンドウを作成します。
   - **`loadImage()`**：`data`フォルダ内の`0.jpg`から`13.jpg`までの画像を読み込み、それぞれの画像を配列に保存します。

4. **`draw()`**：
   - `image()`関数を使って、現在のフレームに対応する画像を描画します。
   - マウスが押されている間（`mousePressed`が`true`のとき）、マウスのX座標に応じて表示する画像が変わります。

## Step 5: 実行

すべての準備ができたら、**Processingの「再生」ボタン**を押してプログラムを実行してみましょう！
![fd0978296c5247ec8037cf74cf53a8e0.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3918923/9eca7b9b-edcd-2e7f-1d3a-67ad074a5502.jpeg)


- マウスを押しながら左右にドラッグすると、ルービックキューブの上層が回転するアニメーションが動作するはずです。
- マウスの動きに応じて、キューブの回転角度が変わるように見える効果が得られます。
<iframe width="560" height="315" src="https://www.youtube.com/embed/1YcbB-wm-c0?si=dKz4Na2lC_3cwaUD" 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>

## 注意点

### ファイル名と配置場所に注意！

- **画像ファイルは必ず`「0.jpg」`から`「13.jpg」`までの名前で保存し、「`data」`フォルダに配置してください**。ファイル名やフォルダの場所が異なると、画像が正しく読み込まれない可能性があります！

## まとめ

お疲れさまでした！この記事では、Processingを使ってルービックキューブの上層をマウスを押しながらドラッグして回転させるアニメーションを作成しました。Processingはとても柔軟で初心者に優しい環境なので、これを機にさらに多くのインタラクティブなアートやアニメーションに挑戦してみてください！