こんにちは！この記事では、Processingを使ってルービックキューブの上層を回転させる簡単なアニメーションを作ります。
初めての方でも安心して取り組めるように、すべてのステップを丁寧に説明しています!
この記事は少し長く見えるかもしれませんが、実際の操作はとてもシンプルです！画像を準備して、少しコードを入力するだけで、あっという間にルービックキューブが回転するインタラクティブなアニメーションが完成します。プログラミング初心者でも全く問題ありませんので、ぜひ最後まで一緒に進めていきましょう！
Processingとは？
まずは簡単にProcessingについて説明します。Processingは、アートやデザイン、アニメーションを簡単に作れるプログラム開発環境です。プログラミングを全く知らない方でも直感的に使いやすく、インタラクティブな作品をすぐに作り始めることができます。今回は、このProcessingを使ってルービックキューブの回転アニメーションを作ります。
記事の概要
この記事では、マウスを押しながらドラッグすることで、ルービックキューブの上層を回転させるアニメーションを作成します。キューブの回転をシミュレートするために、14枚の画像を使い、マウスの動きに応じて画像を切り替えます。
作業の流れはとてもシンプルです：
- Processingをインストール
- プログラムを作成・保存
- 画像ファイルを準備
- 簡単なコードを書いて実行
必要なもの
-
Processing：ビジュアルプログラム開発環境。公式サイトから無料でダウンロードできます。
-
ルービックキューブの画像14枚：キューブの各回転状態を表す画像を用意します。これらの画像は後でプログラムに使いますので、
0.jpgから13.jpgという名前で保存しておきます。
Step 1: Processingのダウンロードとインストール
-
Processing公式サイトにアクセスして、お使いのOSに合ったバージョンをダウンロードしてください。
-
ダウンロードが完了したら、インストールを行います。画面の指示に従って簡単にインストールできるので心配いりません！
インストールが終わったら、Processingを起動して次のステップに進みましょう。
Step 2: プロジェクトの作成と保存
-
Processingを起動したら、まず「新規ファイル」を作成します。上部メニューから「ファイル」→「新規」で新しいウィンドウが開きます。
-
コードを書く前に、ファイルを保存しましょう。メニューの「ファイル」→「名前を付けて保存（Save As）」を選び、ファイル名を「cube」にして保存します。この操作によって、
cubeという名前のフォルダが自動的に作成され、その中にプログラムが保存されます。
Step 3: 画像ファイルの準備
次に、ルービックキューブの画像を用意してプログラムに使えるようにします。
-
先ほど保存した
cubeフォルダを開きます。 -
このフォルダ内に、
「data」という名前のフォルダを新しく作成します。このフォルダは、Processingで画像ファイルを扱うための専用フォルダです。
-
用意しておいた14枚のルービックキューブの画像を、「data」フォルダの中に保存します。画像のファイル名は
「0.jpg」から「13.jpg」までにします。
フォルダ構造の確認
この時点でフォルダ構造は以下のようになります：
cube/ <-- プログラムフォルダ
└── data/ <-- 画像ファイルフォルダ
├── 0.jpg
├── 1.jpg
├── 2.jpg
├── ...
└── 13.jpg
重要なポイント：画像ファイルを必ず「data」フォルダに入れる必要があります。Processingはこの「data」フォルダにあるファイルを自動的に読み込みますので、正しく配置してください。
Step 4: コードを書く
ここからはProcessingに戻り、実際にコードを書いていきます。このコードでは、マウスを押しながらドラッグすることで、ルービックキューブの上層が回転するように見えるアニメーションを実現します。
以下のコードをProcessingに入力してください：
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;
}
コードの説明
-
PImage[] image：14枚の画像を格納するための配列です。この配列にルービックキューブの各回転状態の画像が保存されます。 -
frame：現在表示している画像の番号を表す変数です。マウスの位置に応じて切り替わります。 -
setup()：-
size(960, 640)：ウィンドウのサイズを指定しています。この例では、幅960ピクセル、高さ640ピクセルのウィンドウを作成します。 -
loadImage()：dataフォルダ内の0.jpgから13.jpgまでの画像を読み込み、それぞれの画像を配列に保存します。
-
-
draw()：-
image()関数を使って、現在のフレームに対応する画像を描画します。 - マウスが押されている間（
mousePressedがtrueのとき）、マウスのX座標に応じて表示する画像が変わります。
-
Step 5: 実行
すべての準備ができたら、Processingの「再生」ボタンを押してプログラムを実行してみましょう！
- マウスを押しながら左右にドラッグすると、ルービックキューブの上層が回転するアニメーションが動作するはずです。
- マウスの動きに応じて、キューブの回転角度が変わるように見える効果が得られます。
注意点
ファイル名と配置場所に注意！
-
画像ファイルは必ず
「0.jpg」から「13.jpg」までの名前で保存し、「data」フォルダに配置してください。ファイル名やフォルダの場所が異なると、画像が正しく読み込まれない可能性があります！
まとめ
お疲れさまでした！この記事では、Processingを使ってルービックキューブの上層をマウスを押しながらドラッグして回転させるアニメーションを作成しました。Processingはとても柔軟で初心者に優しい環境なので、これを機にさらに多くのインタラクティブなアートやアニメーションに挑戦してみてください！