画像を分割して入れ替え！オリジナルのジグソーパズルを作ろう！クミタテ式プログラミングドリル(JavaScript / p5js)

この教材は期間限定で無料公開している教材です。

- オリジナルパズルを作ろう

今回作るのは、お気に入りの画像を使ったジグソーパズルです。1枚の画像を複数枚にカットしてバラバラにします。画像処理の応用が学べる教材です。

デモアプリはこちらから。https://openprocessing.org/sketch/1334633

- クミタテ式プログラミングドリルとは？

クミタテ式は一言で言えば、Scratchの設計図を使ってProcessingフレームワークのプログラムコーディングを学ぶ学習方法です。
初めてクミタテ式を学習する方は、はじめの一歩をご覧ください。チュートリアルや導入方法を紹介しています。

- 動画を見ながら学習する

動画で実況プログラミングしながら解説しています。このテキストを見ながら動画と一緒に学ぶのがおすすめです。

■[ここからスタート！]setupで画面を表示する

再生時に最初の1回だけ実行するsetupの枠組みを使って、画面の大きさを決める初期設定をしてあげましょう。

■drawで背景の色を変える

drawの枠組みを使って、1秒間に60回、停止するまでずっと実行されるようにしましょう。

■サンプルとなる画像を、とりあえず表示する

背景の色はつけられましたか？
続けて、サンプル画像を1つ表示します。
サンプル画像は以下の画像をダウンロードか、URLは直接使うと良いでしょう。​
なお、このゴッホの自画像はパブリックドメインとして利用させていただいています。

https://assets.st-note.com/production/uploads/images/64793464/picture_pc_668a4313605597543a215d711ff610a5.png

- preload -
JavaScriptの場合、画像の読み込みに時間がかかり、うまく表示されない場合があります。その場合は、setupより先に実行される特殊な関数、preloadを使ってあげましょう。
function preload(){
　// 画像のロード用。preloadの中はsetupより先に実行される。
}

■画像の左端を切り取って表示する

画像の表示はできましたか？
続けて、画像の左上100x100の範囲を切り取って表示してみましょう。

- 注意 -
OpenProcessingでJava言語でのプログラミングをしている場合（pjsを選択している場合）、特殊な制限により画像の切り出しができません。
ダウンロード版のProcessingを使うようにしましょう。

■[難易度アップ]24枚の画像に切り出して配列化する

画像のカットと表示はできましたか？
続けて、先程のカットを24回実行して、24枚の画像に切り出します。切り出した画像は配列cutListに格納していきます。
drawの中では、配列cutListに格納した24枚の画像を繰り返し処理で1枚ずつ表示してあげます。

JavaScriptの場合、綺麗に並ばない場合があります。
i / 6が小数点になってしまうことが原因です。以下のようにして整数に変換して回避しましょう。
_y = int(i / 6) * 100;

■指定された番号のカット画像をマウスで動かす

24枚の画像を敷き詰められましたか？
続いて、カット画像を1枚だけマウスで動かせるようにしましょう。
変数bangoを用意し、bango番目の画像はマウスの位置に表示させることでマウスで動かすことができます。
プログラムができたら、bangoを1にしたり、24にしたりして動作を確認してください。

■クリックした画像をマウスで動かす

bango番目の画像を動かせるようになりましたか？
続いて、クリックした画像をマウスで動かせるようにします。クリックした画像を座標から特定して、変数bangoを操作することで実現させます。

■画像と画像を入れ替えるオリジナル命令、エクスチェンジを作る

マウスクリックで画像を動かせるようになりましたか？
番号を2つ指定して、2つの画像を入れ替えるオリジナル命令を作ります。
cache（キャッシュ）とは、一時保存しておく変数の意味です。

Javaの場合、変数_cacheの型はPImageとなることに注意してください。
PImage _cache = cutList[from];

■画像をクリックしたら、エクスチェンジで画像を入れ替える

オリジナル命令エクスチェンジは作れましたか？
作ったエクスチェンジ命令を使って、画像と画像を入れ替えます。
変数bangoはマイナス1にしておくことで、「どの画像も動かしていない」を実現しています。

クミタテ式の設計図はここまでです。以下の応用課題は自分で考えてプログラミングしてみましょう。

■応用課題1. カット画像をシャッフルしよう

cutListの中身をシャッフルさせることでバラバラのジグソーパズルになります。
ランダム番目とランダム番目の画像をエクスチェンジする、を数回行うことでシャッフルできますね。

■応用課題2. パズルが完成したらクリアを表示しよう

パズルが完成しているか、どうやって判定したら良いでしょうか？
cutListだけではクリア判定ができません。
numberListなど別の配列を用意し、画像を入れ替えるのではなく、画像番号の並び順を管理しないといけません。

これはちょっと難しいので、冒頭の解説動画をご覧になると良いでしょう。