見出し画像

ScratchでARプログラミング入門 ③条件分岐でボクセルアートをもっと自由に!

前回の復習

前回は、繰り返し処理を学び、たくさんのボクセルを効率的に配置する方法をマスターしました。2重ループで壁、3重ループで箱を作ることができましたね!

図1 豆腐ハウスの街づくり

前回の問題の回答例を発表します。上記の図1の街づくりを実行するスクリプトは、次のとおりです。

図2 街づくりの回答例

街づくりは5重ループで作成できます。i, j, kの3つの変数で豆腐ハウスを作ります。変数 l, m で豆腐ハウスを平面上で複製します。

  • l は16ずつ3回増やします。これで、x方向に3軒の家を作成します。

  • m は20ずつ2回増やします。これで、z方向に2列の家並みを作成します。

5重ループで6軒の豆腐ハウスを作成しました。ボクセルの数は 1軒につき1000個なので、全部で6000個になります。

大量にブロックを配置するときは

ボクセラミングでは、大量のボクセルを設置するとアプリが停止したりクラッシュします。設置できる個数は、デバイスの性能によりますが、概ね10000個以下を目安にしてください。

読み始める前に

この記事では、私たちが開発した無料ARプログラミング学習アプリ「ボクセラミング(Voxelamming)」の使い方を、Scratchのサンプルコードと共に詳しく解説していきます。

iPhone/iPad/Vision Proをお持ちの方は、App StoreからVoxelammingアプリをダウンロードして、ぜひ一緒にプログラミングに挑戦してみましょう!

条件分岐に挑戦!

今回は、条件分岐を使って、ボクセルアートをさらに自由に表現する方法を学びます。

条件分岐とは、「もし〇〇だったら、△△をする。そうでなければ□□をする。」というように、条件によってプログラムの動作を変えることです。
条件分岐と繰り返し処理を組み合わせることで、コンピューターにさらに複雑な仕事を自動でさせることができます。

図3 条件分岐の例

図3は、条件分岐の例を示しています。ここでは、「y座標が奇数かどうか」を条件式として考えます。その結果がYESのときは、黒のボクセルを配置します。NOの場合は白のボクセルを配置しています。

この条件式を、Scratchの条件分岐ブロックを使って表現してみましょう。

条件分岐ブロック

Scratchでは、「もし~なら」ブロックを使って条件分岐を表現します。

図4 条件分岐ブロックの例

「もし~なら」ブロックの中に、条件を満たすかどうかを判定するブロックを組み合わせます。条件が満たされた場合は「もし~なら」ブロック内のブロックが実行され、満たされない場合は「でなければ」内のブロックが実行されます。

条件分岐で縞模様を作ろう!

条件分岐を使って、白と黒のボクセルを交互に並べて、縞模様の壁を作ってみましょう。

挑戦してみよう!

  • 10x10の壁を作り、ボクセルのy座標が奇数なら黒、偶数なら白のボクセルを配置してみましょう。

  • ヒント:割り算の余りを計算する「〇を△で割った余り」ブロックを使うと、奇数か偶数かを判定することができます。

Scratchのサンプルプロジェクトを開く

パソコンのWebブラウザで次のリンクからScratchのサンプルプロジェクトを開きます。このプロジェクトを改造していきます。

回答例

図5 縞模様のスクリプト

図5のスクリプトは、y座標が奇数であるかを判定して、黒と白を塗り分けます。y座標の値は、変数 i と同じなので、i を2で割った余りが 1のときは白で、そうでないときは黒で塗り分けています。

図6 縞模様の壁

スクリプトを実行すると、縞模様の壁が建築されます。条件分岐ブロックのお陰で塗り分けが自動で行えます。繰り返しブロックと条件分岐ブロックの組み合わせで自動作業が実行できるのです。

条件分岐で市松模様を作ろう!

条件分岐を使って、白と黒のボクセルを交互に並べて、市松模様の壁を作ってみましょう。市松模様とは、白と黒のチェック模様のことです。

挑戦してみよう!

  • 10x10の壁を作り、市松模様塗り分けます。

  • ヒント:y座標とz座標の合計を条件分岐ブロックで判定してみよう。

回答例

図7 市松模様のスクリプト

図7のスクリプトは、「y座標とz座標の合計」が奇数であるかを判定して、黒と白を塗り分けます。つまり、「i と j の合計」 を2で割った余りが 1のときは奇数、そうでないときは 黒で塗り分けています。

図8 市松模様の壁

スクリプトを実行すると、市松模様の壁が建築されます。「i と j の合計」を条件式に使うと、市松模様が現れるのは面白い発見ですね。

3色の市松模様に挑戦!

白と黒の市松模様ができたら、次は、白、黒、赤の3色のボクセルを並べて、より複雑な市松模様を作ってみましょう。

挑戦してみよう!

  • 10x10の壁を作り、横方向と縦方向のボクセルの位置を足し合わせた数が3で割り切れる場合は白、余りが1の場合は黒、余りが2の場合は赤のボクセルを配置してみてください。

回答例

図9 3色の市松模様スクリプト

図9のスクリプトは、「y座標とz座標の合計」が3で割った余りで、赤、黒、白で塗り分けています。条件分岐ブロックを2重にすることで、3つの分岐を実現しています。

図10 3色の市松模様の壁

スクリプトを実行すると、3色の市松模様の壁が建築されます。このような複雑な模様でも、条件分岐ブロックで自動化できます。

ここまでの作業を保存しておきましょう。

  • まずは、プロジェクト名を決めます。ここでは「連載第3回」と名前をつけました。

  • 「ファイル」メニューから「コンピューターに保存する」を選びます。

  • ダウンロードフォルダーに「連載第3回.sb3」という名前のファイルが作成されます。

これまでのプログラムを改造して、図形描画に挑戦します。ここでも繰り返しブロックが活躍します。

問題:円を描いてみよう

図11 円を描く

図9のプログラムを改造して、円形を描きます(図11)。半径は20です。円の方程式は $${x^2 + y^2 = r^2}$$ で表されます。この方程式を、どのように条件分岐ブロックに組み入れたらいいでしょうか。

回答例は、連載第4回の冒頭で行います。皆さんの力で挑戦してみてください。

次回予告

次回は、乱数と条件分岐を組み合わせて、クリエイティブコーディングに挑戦します。クリエイティブコーディングとは、プログラミングを使って、芸術的な作品を作ることです。

乱数を使うことで、予想もつかない、個性的な作品を生み出すことができます。お楽しみに!

ScratchでAR プログラミング入門シリーズ

ScratchでARプログラミング入門シリーズの一覧です。

第1回 プログラミングでARボクセルアートを作ろう!
第2回 繰り返しでボクセルの街を作ろう!
第3回 条件分岐でボクセルアートをもっと自由に!
第4回 ランダムでボクセルアートをもっと楽しく!
第5回 線を描いて、AR空間に立体図形を作ろう!
第6回 ボクセルで文字を描いて、AR空間に情報をプラス!
第7回 再帰処理でフラクタル図形に挑戦!
第8回 最終回 自分だけのARワールドをつくろう!


いいなと思ったら応援しよう!