空間に文字を書く

空間に文字を書けるとしたら、あなたはどんな言葉を書いてみたいですか?
お世話になっている方への感謝の言葉。好きな小説の一節。座右の銘。
S2AR を使えば、その夢が実現します。Scartch プログラミングで空間に文章を書くことができるのです。

空間に文字を1つ書いてみる

早速、プログラミングに入っていきます。

図2-2-1

文字ブロックを Scratch のスクリプトエリアに移動します。
図2-2-1を参照に「文字を一つ書く」プログラムを完成させてください。

図2-2-2

パソコンの上に原点ブロックを置いてから、プログラムをクリックして実行してください。図2-2-2のように「あ」が空間に現れたら成功です。

上手く文字が表示できたら、座標値や文字を別のものに変えて、何度も試してみてください。軸方向(x, y, z)を変えると、どのように表示されるか、確認しておきましょう。

空間に文章を書く

図2-2-3

次に文章を書いてみましょう。S2AR に収録されているフォント(美咲フォント)は幅、高さともに7になっています。よって文字間隔は8、行間隔は10にすると、きれいに表示させることができます。

図2-2-4

図2-2-4を参照に、プログラムを完成させてください。X座標は文字間隔に合わせて 8 ずつ大きくします。Y座標は行間に合わせて 10 ずつ小さくします。

図2-2-5

プログラムを実行して、空間に文章を表示させることができました。

プログラムの改造

次はプログラムを改造していきます。改造するポイントは
①X座標、Y座標の数値を自動で変更させたい
②文字を1文字ずつではなく、文章で入力したい

①については、前節で学んだ「繰り返し処理」「変数」を使えば簡単にプログラムできます。
②については、「文字列」を学ばなければなりません。

文字列操作

文字列は「文字の集まり」を表すプログラミング用語です。文字の集まりは「単語」「文章」と考えてかまいませんが、「5%TY7mliag9dn」などの意味不明なものも文字列と呼びます。

ScratchX では、文字列を扱うのに便利なブロックが用意されています。

図2-2-6

2つの文字列を連結します。文字列の間に「スペース」が入ることに注意してください。(今回のプログラムでは使いません)

図2-2-7

文字列から「文字」を抜き出します。このブロックを使えば、文章から「文字」を一つずつ抜き出して、空間に表示させることができます。

図2-2-8

文字列の長さを調べることができます。文章から「文字数」を調べることで、何回繰り返すべきか、プログラムに教えることができるのです。

変数の設定

今回のプログラムで使用する変数は x0, y0, z0, string, i の5つです。カテゴリー「データ」→「新しい変数」から作成してください。

図2-2-9

上の図を参照に、変数の初期値を設定してください。文字列は「いつも^ありがとう^お母さん」にしました。「^(カレット)」についてはあとで説明します。

1行で文字列を表示させる

図2-2-10

「繰り返し処理」を使って、文字列を表示させます。

繰り返し回数は((String)の長さ)になります。「文字ブロック」で表示させる文字は(((i)+(1))番目(String)の文字)となり、((i)+(1))番目であることに注意が必要です。x0 は文字間隔の「8」 ずつ大きくしていきます。

図2-2-11

1行で文字列を表示できました。

改行させるには

文字列を改行して表示させてみましょう。
「^(カレット)」は今回のプログラムで設定した改行の印です。著者が勝手に決めた規則なので別の文字にしてもかまいませんが、表示する文字列に含まれない文字にしてください。

図2-2-12

図2-2-12を参照にプログラムを改造してください。条件分岐を使って、文字列を改行させる機能を追加します。
条件式「文字が[^]であるか?」、条件式1「x0 を「-8」にする。y0 を「-10」ずつ変える」、条件式2「文字を書く」にしてください。

図2-2-13

うまく改行して表示させることができました。

英語の表示

図2-2-14

もちろん英語でも表示できます。
文字列を「Thank_you_every_much^for_everything^with_love,Mom」に変更してください。S2AR では、スペースは「_(アンダースコア)」で表します。

図2-2-15

プログラムを一度作ってしまえば、あとは文字列を変更するだけで、自由に文章を表示させることができるようになります。プログラミングの便利さを感じていただけたでしょうか?

図2-2-16

今回作成したプログラムは、「ファイル」→「プロジェクトを保存?」から、名前「space_display.sbx」をつけて保存しておきましょう。

このプログラム(space_display.sbx)はダウンロードして、自分で確かめることがきます。
ここからダウンロード
(Kindle for Windows / Mac の場合は、このリンクをクリックするとファイルがダウンロードできます)

宿題

自分で文章を決めて、文字が表示される様子を1人以上の人に見せてください。
そして「これは俺が(私が)作ったプログラムだ」とその人に自慢してください。(きっと尊敬の目でみられると思いますよ)

円錐(コーン)を作る

Scartch プログラミングで複雑な仮想オブジェクトを作っていきます。まず初めに「円錐(コーン)」をクラフトします。「円錐」は丸い塔の屋根などに使用します。「円錐」は「S2AR 拡張ブロック」には含まれていませんから、「円柱ブロック」を使って、自分でクラフトしなければなりません。

円柱ブロックを重ねて「円錐」を作る

図2-1-1

図2-1-1を参考に「色指定ブロック」と「円柱ブロック」を積み重ねてください。円柱の半径については、0.5 間隔でだんだん小さくなるように数値を設定します(赤丸)。y座標の位置を一つずつ上げていくことを忘れないようにしましょう(青丸)。ブロックの色を「黒 ⇄ 白」と変えることで、奇数段が「黒」、偶数段 が「白」を表すようにしました。

図2-1-2

パソコンの上に「原点ブロック」を置いて、プログラムを実行しました。目的通りに0.5 刻みの円柱が積み上げられて、円錐をクラフトできました。

Scratch プログラミング入門

図2-1-3

先程、円柱を12段積み重ねて円錐をクラフトしました。もしこの円錐を100段にするとしたら、どうでしょう。半径や Y座標など数値を間違えないように注意しながら、何とか手動でプログラムできそうです。
では1000段にするとしたら、どうでしょう。Scratch のスクリプトエリアに1000段のブロックを置くだけでも大変です。数値(半径や Y座標)を間違いなく設定していくのも手間がかかります。できれば誰かに助けてもらいたいと思うはずです。

こういったときこそ、プログラミングの出番です。プログラミングは、あなたの最高のアシスタントです。
今回の円錐のように、同じような作業が繰り返されるときは、「繰り返し処理」という仕組みを使えば、プログラムを短くして、読みやすくすることができます(可読性が上がるという)。また半径や積み重ねる段数なども簡単に変更できて、様々な場合を試すことができるようになります。
円柱の半径や Y座標のように、同じ間隔で数値が変わっていくときは、「変数」という仕組みを使うと便利です。
「黒 ⇄ 白」と設置するブロックが変わるときは「条件分岐」という仕組みを使います。今回の円錐の場合は、条件分岐で「奇数段は黒、偶数段は白」と指定してやることで、毎回色を指定する手間が省けます。

プログラミングの基礎である「繰り返し処理」、「変数」、「条件分岐」を一つずつ学んでいきます。

変数とは

ここから本格的はプログラミングに入っていきます。本格的と言っても難しいことをするわけではないので安心してください。一つずつゆっくりとプログラミングに慣れていってください。よく理解できなくても、手順通りに進めていくことで、仕組みがわかってくることは多いです。プログラミングも「習うより慣れろ」です。

図2-1-4

図2-1-4は「変数の例」を示した図です。今回は、x0, y0, z0, r0, loop, interval, i の7つの変数を使用します。

図2-1-5

変数とはデータ(数値や文字列)を入れておく箱のようなものです。変数は、コンピュータにデータ(数値や文字列)を渡して仕事をさせるときに使います。

コラム 文字列とは

文字列とは、単語や文章のように文字が複数個つながったものです。例えば英単語や日本語の単語はすべて文字列になります。意味のない文字の連なり「;1+djo;na」も文字列と呼ばれます。数値は文字列ではありません(決められた計算式で計算できるので)。一文字のときは厳密には「文字」と呼ぶべきですが、Scratch プログラミングでは文字列としても問題ありません。

変数の設定

実際に変数を使えるようにしてみましょう。

図2-1-6

Scratch の「カテゴリー」から「データ」を選びます。「新しい変数」をクリックします。変数の名前を「x0」と入力して「OK」を押してください。変数「x0」が作成されました。
同様にy0, z0, r0, loop, interval, i の変数を作成します。今回使用する変数は、この7つです。

各変数について説明します。

x0 は「ブロックを設置する X座標」を表す変数です。
y0 は「ブロックを設置する Y座標」を表す変数です。
z0 は「ブロックを設置する Z座標」を表す変数です。
r0 は「円柱の半径」を表す変数です。(r は radius の略)
loop は「プログラムの繰り返し回数」を表す変数です。
interval は「間隔(数値の差)」を表す変数です。円錐の例では、円柱の半径が減少していく間隔(0.5)を指定します。

i は特殊な変数で、「プログラム上で数を数える(カウントする)」ために使用します。カウンター変数とも呼ばれ、慣習的にアルファベットの i(アイ)が使われます。(i の他に j, k などがカウンター変数として使用されます)

コラム 変数の名前

プログラミングでは、変数の名前のつけ方に特別な決まりがあります(これを「命名規則」という)。Scartch は初心者が迷わないように配慮されているので、難しい命名規則はなく、好きな名前をつけることが可能です。日本語の名前を使うこともできるのです。
しかし今後、本格的なプログラミング言語に進んでいくことを考えると、日本語の名前は使わない方がよいと考えました。変数の名前には、一般的に「半角英数字」が使われます。変数の名前を見て、用途がイメージできるように名前を付けることが重要です。

変数の初期値を設定

変数は variable(変わることができるもの)の日本語訳です。その名前の通り、プログラムを実行中に「中身のデータ(数値や文字列など)」はどんどん変わっていくのですが、変わる元となる初期値は必ず設定しなければなりません。

スクリプトエリアに

図2-1-7

図2-1-7のブロックを7つ移動します。

図2-1-8

▼を押して、変数名をx0, y0,, z0, r0, loop, interval, i になるように設定します。

図2-1-9

次に変数の初期値を
x0 = 0
y0 = 3
z0 = 0
r0 = 6
loop = 12
interval = 0.5
i = 0
になるように設定します。図2-1-9のプログラムをクリックして実行すると、各変数に初期値が設定されます。左上のステージを見て確認してください。
以上で、変数の初期値の設定は終了です。

繰り返し処理

図2-1-10

今回の円錐では、色の指定、円柱を置く、色の指定、円柱を置く…のように同じ作業の繰り返しが何度も登場しました。一般のプログラム上でも、こういった繰り返しがたくさん出てきます。そんなときに使うと便利な仕組みが「繰り返し処理」なのです。

繰り返し処理をプログラミングしてみましょう。

変数の初期設定の下に

図2-1-11

図2-1-11のブロックを合体させます。繰り返しブロックの間に

図2-1-12

図2-1-13

図2-1-14

図2-1-12/ 13/ 14の3つのブロックを挿入します。

図2-1-15

図2-1-15を参照に、繰り返し処理を完成させてください。「loop」の回数、円柱ブロックを重ねるプログラムができました。
(「(1)秒待つ」ブロックは必須ではないのですが、プログラムがクラッシュ(停止)してしまうのを防ぐために挿入してあります。クラッシュしないようなら、停止する秒数をもっと減らしてもかまいません)

図2-1-16

プログラムを実行してみると、真っ黒な円錐が現れました(作業手順によっては真っ白な円錐になるかもしれません)。成功です。次に、交互に色を変える方法を考えていきます。

条件分岐

図2-1-17

条件分岐とは、プログラム自身に判断させて、処理を分ける仕組みのことです。
あらかじめ与えられた「条件式」をプログラムは読み込みます。条件に合致している(YES)のときは「処理1」を実行します。合致しない(N0)のときは「処理2」を実行します。
今回の円錐の場合は、条件式は、「繰り返し回数が偶数かどうか?」です。偶数のとき(YES)は処理1「ブロックの色を黒に設定」が実行されます。奇数のとき(NO)のときは処理2「ブロックの色を白に設定」が実行されます。

条件分岐で白と黒を分ける

実際に「条件分岐」をプログラミングしてみましょう。

図2-1-18

図2-1-18が条件分岐を表すブロックです。「もし< >なら」の部分に「条件式」を挿入します。その下に「処理1」と「処理2」を挿入することで、処理を分岐させることができます。

図2-1-19

条件式は「繰り返し回数が偶数かどうか」です。繰り返し回数は「i」なので、それを2で割った余りを見て、「0」なら「偶数」、「1」なら「奇数」ということになります。(プログラムで回数を数えるときは、「0」から数えることが多いです。一般の感覚とは違いますが、「0」から数えた方が何かと都合が良いからです。今回の円錐でも「0」から数えていますから、「0 = 偶数は黒」となります)

図2-1-20

図2-1-21

この2つが「処理1=ブロックを黒(r, g, b)=(0, 0, 0)に設定」「処理2=ブロックを白(r, g, b)=(255, 255, 255)に設定」を表します。

図2-1-22

以上の4つのパーツを合体させて、条件分岐ブロックが完成します。「i 」の数が 0, 1, 2, 3, 4, … と一つずつ増えていく度に、「処理1」「処理2」が交互に呼び出されるプログラムが完成しました。

図2-1-23

図2-1-22の条件分岐ブロックを「円柱ブロック」の上に合体して、今回のプログラムは完成です。実行して、白と黒が交互に変わる円柱ができることを確認してください。

プログラムの改造

今回のプログラムを改造してみましょう。

図2-1-24

円柱の半径を「20」、繰り返し回数を「100」、間隔を「0.2」に設定して見ます。これで100段積みの円錐ができるはずです。

図2-1-25

実行結果が図2-1-25です。目的通り「100段積みの円錐」が完成しました。高さは約1 メートル(100 cm)の円錐です。

図2-1-26

今回作成したプログラムは、「ファイル」→「プロジェクトを保存?」から、名前「ar_corn.sbx」をつけて保存しておきましょう。

図2-1-27

ファイルを保存する場所は自由に決めてよいのですが、オススメは「書類」フォルダの中に「ScratchX_project」フォルダを作って、その中にファイルを入れていくことです。(もっと簡単な方法は「デスクトップ」にそのままファイルを入れていくことです)

このプログラム(ar_corn.sbx)はダウンロードして、自分で確かめることがきます。
ここからダウンロード
(Kindle for Windows / Mac の場合は、このリンクをクリックするとファイルがダウンロードできます)

(宿題)

色を変更したり、半径、間隔、段数を変えたり、色々な円錐を作ってみましょう。

仮想オブジェクトを設置する

ARKit では現実世界に重ねて「3Dオブジェクト」を、iPhone の画面上に表示させることができます。この物体を「仮想オブジェクト」と名付けます。 S2AR で仮想オブジェクトを設置する方法を学んでいきます。

S2AR の基本操作

S2AR では、「Scratch 基本ブロック」の他に、「S2AR 拡張ブロック」を Extension(拡張機能)として追加できます。実際に「仮想オブジェクト」を空間に設置しながら、「S2AR 拡張ブロック」を一つずつ説明していきます。

接続ブロック

図1-6-1

すべての操作の初めに、「iPhone とパソコンを接続する」ために使います。 S2AR の画面上に表示される IP Address を入力してクリックしてください(環境によって数字は変わります)。 S2AR の画面上に「connect」と表示されれば接続成功です。

リセットブロック

図1-6-2

仮想オブジェクト消去するためのブロックです。このブロックをクリックすると、設置した仮想オブジェクトをすべて消すことができます。

色指定ブロック

図1-6-3

設置するブロックの色を指定します。ブロックの色は RGB の数値によって変化させることができます 。赤(Red)、緑(Green)、青(Blue)の三つの原色を混ぜて、16,777,216(256 x 256 x 256)種類の色を表現できます。

図1-6-4

ウィキペディア RGB の項目より

R、G、B は、0 〜 255 の整数で指定します。例えば、
(R, G, B)=(0, 0, 0) は「黒」を表します。
(R, G, B)=(255, 0, 0) は「赤」を表します。
(R, G, B)=(0, 255, 0) は「緑」を表します(正確には「ライム」という)。
(R, G, B)=(0, 0, 255) は「青」を表します。
(R, G, B)=(0, 255, 255) は「シアン(別名 アクア)」を表します。
(R, G, B)=(255, 0, 255) は「マゼンダ(別名 フクシア)」を表します。
(R, G, B)=(255, 255, 0) は「黄色」を表します。
(R, G, B)=(255, 255, 255) は「白」を表します。

それ以外の色を使いたいときは、「rgb 色見本」などで Web検索してください。

コラム RGB 値と16進数

図1-6-5

「原色大辞典」サイトへのリンク

RGB で色を表現する方法を説明します。

例えば「原色大辞典」サイトより使いたい色を選びます。

図1-6-6

orange(オレンジ)の値は「#ffa500」となっています。図1-6-6に示すように、数字を2つずつ切り離して、R, G, B の値は
R = 【ff】
G = 【a5】
B = 【00】
となっています。ここで注意が必要なのは、この数字が【16進数】で表されていることです。

一般に使う「10進数」は「10」を基数としており、「1, 2, 3, 4, 5, 6, 7, 8, 9, 0」の10個の文字で整数を表します。
【16進数】は、「16」を基数とした整数の表示方法です(プログラミングでよく使用される)。【1, 2, 3, 4, 5, 6, 7, 8, 9, 0】【a(= 10進数の「10」)】【b(= 10進数の「11」)】【c(= 10進数の「12」)】【d(= 10進数の「13」)】【e(= 10進数の「14」)】【f(= 10進数の「15」)】の全部で16個の文字で整数を表します。
S2AR の「色指定ブロック」は10進数で入力しますから、「16進数を10進数に変換」しなければなりません。

図1-6-7

図1-6-7を参照して、G の値【a5】を10進数に変換すると「165」になります。計算方法は、1桁目の 【5】はそのまま10進数の「5」に変換できます。2桁目の【a(= 10進数の「10」)】は16倍して10進数の「16 x 10 = 160」に変換できます。この2つを足して「165」に変換できました。
同じように、R の値【ff】を10進数に変換すると「255」になります。計算方法は、1桁目の 【f(= 10進数の「15」)】は10進数の「15」に変換できます。2桁目の【f(= 10進数の「15」)】は16倍して10進数の「16 x15 = 240」に変換できます。この2つを足して「255」に変換できました。
最後に、B の値【00】を10進数に変換すると「0」になります。計算方法は、1桁目の 【0】はそのまま10進数の「0」に変換できます。2桁目の【0)】は16倍して10進数の「16 x 0 = 0」に変換できます。この2つを足して「0」に変換できました。

図1-6-8

したがって、「オレンジ」のブロックを設置したいときは図1-6-8のように「r=255, g=165, b=0」と色を指定してやります。
(16進数は一見難しいですが、これも慣れです。プログラミングの必須の知識なので、頑張ってマスターしてください)

点ブロック

図1-6-9

X座標、Y座標、Z座標を指定して、ブロックを1つ設置します。このブロックは、すべてのクラフトの基本となるものです。X座標、Y座標、Z座標の数値を変化させて、たくさんのブロックを設置してみましょう。例えば(X, Y, Z)=(5, 10, 15)にブロックを設置してみましょう。

図1-6-10

図1-6-11

図1-6-11のプログラムを実行して、3次元直交座標系を表示させると、図1-6-10に示すように、X方向に「5」、Y方向に「10」、そして Z方向に「15」に進んだ位置にブロックが一つ設置できていることが確認できます。

なお座標値(X, Y, Z)については、-1.2 や10.46 など小数点以下まで細かく指定できます。マインクラフトは整数値(-9, 0, 234 など)しか設置できないので、S2AR の方がより細かくクラフトが行えるのです。

直方体ブロック

図1-6-12

X座標、Y座標、Z座標、幅、奥行、高さを指定して、直方体(箱形)を設置します。

図1-6-13

例えば(X, Y, Z, 幅, 奥行, 高さ)=(2, 0, 2, 2.5, 3.5, 4.5)に直方体を設置してみました。ブロックのサイズ(幅、奥行、高さ)も 1 以上の数値で小数点以下まで指定できますので、より細かいクラフトが可能です。
サイズ(幅、奥行、高さ)のマイナスの値にも対応しています。基準点(X, Y, Z)からマイナス方向に直方体を設置できます。(マイナスの値の利用方法は、「自動車を作る 方向転換①」で説明します)

円柱ブロック

図1-6-14

X座標、Y座標、Z座標、半径、高さ、軸方向を指定して、円柱を設置します。軸方向は「x」「y」「z」のいずれかの値を取ります。円柱の半径については、0.5 以上の数値を指定してください。高さはマイナス値を取ることも可能です。

以下に例を3つ示します。

図1-6-15

例えば(X, Y, Z, 半径、高さ、軸方向)=(10, 10, 10, 4, 10, y)に円柱を設置してみました。軸方向を「y」としたので、Y軸方向(上方向)に向かって円柱が伸びていきます。色は(0, 255, 0)の緑を指定しました。

図1-6-16

次に、軸方向を「x」にしてみます。

図1-6-17

(X, Y, Z, 半径、高さ、軸方向)=(10, 10, 10, 4, 10, x)に円柱を設置してみました。軸方向を「x」としたので、X軸方向(右方向)に向かって円柱が伸びていきます。色は(255, 0, 0)の赤を指定しました。

図1-6-18

最後に、軸方向を「z」にしてみます。

図1-6-19

(X, Y, Z, 半径、高さ、軸方向)=(10, 10, 10, 4, 10, z)に円柱を設置してみました。軸方向を「z」としたので、Z軸方向(奥行き方向)に向かって円柱が伸びていきます。色は(0, 0, 255)の青を指定しました。

六角柱ブロック

図1-6-20

X座標、Y座標、Z座標、半径、高さ、軸方向を指定して、六角柱を設置します。円柱と同じように軸方向は「x」「y」「z」のいずれかの値を取ります。

図1-6-21

例えば(X, Y, Z, 半径、高さ、軸方向)=(10, 10, 10, 8, 10, y)に六角柱を設置してみました。軸方向を「y」としたので、Y軸方向(上方向)に向かって六角柱が伸びていきます。色は(0, 255, 0)の緑を指定しました。

円柱の場合と同じように、軸方向は「x」「z」の値を取ることも可能です。どのように設置されるか、自分で確かめてみてください。

球体ブロック

図1-6-22

X座標、Y座標、Z座標、半径を指定して、球体を設置します。

図1-6-23

例えば(X, Y, Z, 半径)=(8, 8, 8, 8,)に球体を設置してみました。簡単に球体を設置することができました。

文字ブロック

図1-6-24

S2AR のウリの一つが「空間に文字を書くことができる」ことです。X座標、Y座標、Z座標、文字、軸方向を指定して、文字を描きます。円柱と同じように軸方向は「x」「y」「z」のいずれかの値を取ります。

図1-6-25

例えば(X, Y, Z, 文字, 軸方向)=(0, 10, 0, A, z)に文字を描いてみました。文字のサイズは「7 x 7」のため、文字間隔を「8」、行間を「10」にすれば綺麗に文字を配置することができます。

図1-6-26

S2AR はアルファベットだけでなく、日本語の文字にも対応しています。空間に「漢字」を描いてみましょう。

図1-6-27

S2ARは、JIS第1・第2水準の漢字に対応しています。(X, Y, Z, 文字, 軸方向)=(0, 10, 0, 漢, z)、(X, Y, Z, 文字, 軸方向)=(8, 10, 0, 字, z)にして文字を描いてみました。ドットが荒いので少し読みにくいのですが、「漢字」を描くことができました。

約6,000文字の漢字のデータが内蔵していますから、ほとんどの場合、自分の名前を漢字で表示することができるはずです。挑戦してみましょう。(フォントは「美咲フォント」を利用させていただいています。ありがとうございます)

文字ブロックに「日本語の文字(ひらがな、漢字)」を入力しずらい場合は、メモ帳などに入力してから一文字ずつコピペすると簡単です。

線ブロック

図1-6-28

2つの点を指定して、その間に直線を引くことができます。始点(x1, y1, z1)、終点(x2, y2, z2)の6つの数値をしてしてやります。この節の最初の写真(5種類の正多面体)はこの線ブロックで作成されています。

図1-6-29

始点(0, 0, 0)から終点(10, 10, 10)まで線を引いてみました(下に伸びる線は影です)。線ブロックに慣れるため、始点と終点を変えながら、たくさんの線を引いてみてください。

屋根ブロック

図1-6-30

家を建築するために屋根を作るブロックです。(X, Y, Z, 幅, 奥行, 高さ, 軸方向)の7つの値を指定します。

図1-6-31

(X, Y, Z, 幅, 奥行, 高さ, 軸方向)=(0, 3, 0, 14, 7, 10, z)で、一般的な45度の屋根を建築してみました。この写真のように、幅を偶数にしたときは最上段が2つのブロックになります。それ以外の場合は最上段が1つのブロックになるのでやってみましょう。

以上で、「S2AR 拡張ブロック」の説明を終わります。これらのブロックを組み合わせて、複雑な仮想オブジェクトを作ることができます。次の章では、Scratch のプログラミングを学びながら、様々なクラフトに挑戦していきます。

原点(Origin)を置く

S2AR で拡張現実をプログラミングするためには、操作の基準となる点(原点)を設定する必要があります。原点は、サイズが 「1 x 1 x 1」のシルバーの円柱で表されます。

S2AR に現実世界を認識させる

図1-5-1

S2AR は iPhone のカメラを使って、現実世界を認識します。「ここに床があり、ここは壁で、ここにテーブルがある」など、現実世界の構造をカメラで撮影して ARKit に教えてあげなくてはならないのです。そのため、iPhone を前後左右にゆっくり傾けながら、S2AR の画面に多くの黄色の点が現れるようにします。この黄色の点が、ARKit で現実を認識した印です。

原点を設定する

図1-5-2

S2AR の画面上で「原点を置きたい場所」を指でタップすると、原点が設置できました。原点を置き直すときは「Set Origin」をタップしてから、「原点を置きたい場所」を再度タッップしてください。

S2AR の座標系

S2AR に座標系を表示させてみましょう。座標系とは、空間の位置を正確に指定するために考えられた数学上の取り決めのことです。

図1-5-3

図1-5-3のプログラムを、ScratchX サイトの「スクリプトエリア」に置いてください。これが S2AR で初めてのプログラミングになります。詳しい説明は、次の章で行いますので、図をよく見て、同じようにブロックをつなげてみてください。「色指定ブロック」と「直方体ブロック」を3セットつなげます。
プログラムが完成したら、クリックして実行します。

図1-5-4

図1-5-4のように、S2AR 画面に3本の線が表示されます。
S2AR の座標系は、3次元直交座標系です。慣習にのっとり、X 座標は赤(Red)、Y 座標は緑(Green)、Z 座標は青(Blue)で表現しました。

S2AR はこの座標を基準として、カラフルな立方体のブロックを置くことで、自由な形の「仮想オブジェクト」を現実世界に重ねて表示させることができるアプリなのです。

コラム 座標系について

空間上の点を正確に指定するには「3次元直交座標系」を使うと便利です。原点で交差する互いに直角な3本の直線で表される、もっともポピュラーな座標系です。

図1-5-5

点の位置を表すためには、X軸の値 a(Y-Z平面からの距離)、
Y軸の値 b(Z-X平面からの距離)、Z軸の値 c(X-Y平面からの距離)の3つの数値で表されます。
(この図は「右手系」の座標です。次のコラム参照)

座標系については難しいかもしれませんが、S2AR を使っていく中で少しずつ感覚として身についていきます。心配しないで作業を進めていきましょう。

次の節で、「S2AR 拡張ブロック」の詳しい説明を行います。

コラム 左手系の座標

図1-5-6

より高度な知識となりますが、3次元直交座標系には「右手系」と「左手系」があります。図1-5-6の左が「左手系」、右が「右手系」を表します。標準は「右手系」とされており、マインクラフトなどでも採用されていますが、S2AR は「左手系」を採用しています。マイクラに慣れている人には違和感があるかもしれませんが、Z 座標の向きに注意しながらプログラミングを行ってください。

iPhone とパソコンを接続する

S2AR アプリで拡張現実をプログラミングするためには、iPhone と パソコンをつながなければなりません。その方法を詳しく説明していきます。

無線 LAN(Wi-Fi)接続する

最も一般的な方法は、家庭の Wi-Fi の同じ回線に、iPhone とパソコンを接続することです。回線速度が速ければ、安定した接続を持続できます。

iPhone が接続中の Wi-Fi 回線の調べ方

図1-4-1

iPhone のホーム画面より「設定」→「Wi-Fi」をタップすることで、現在接続中の Wi-Fi を調べられます。

パソコン が接続中の Wi-Fi 回線を調べる方法

図1-4-2

タスクトレイの「Wi-Fi」アイコンをクリックします。現在接続中の Wi-Fi 回線が表示されます。S2AR を使うためには iPhone とパソコンが同じ Wi-Fi回線に接続している必要があります。もし iPhone とは別の回線につながっている場合は、同じ回線名をクリックして接続し直してください。

S2AR の IP Address を入力する

図1-4-3

iPhone の S2AR アプリを起動します。画面左下に、S2AR アプリの「IP Address」が表示されるので確認してください。著者の環境では、IP アドレスは「192.168.10.102」であることが表示されています。この数字は読者の環境では別の数字が示されているはずです。

図1-4-4

図1-4-4を参照してください。ScratchX サイトのカテゴリー「その他」を選びます。「スクリプトエリア」に「接続ブロック」を移動します。「接続ブロック」の入力欄に、 S2AR アプリの「IP Address」の数字「192.168.10.102(環境によって違います)」を入力します。「接続ブロック」をクリックして、S2AR とパソコンを接続するプログラムを実行します。

図1-4-5

S2AR アプリに「connect」と表示されたら、iPhone とパソコンの接続は完成です。これで拡張現実をプログラミングできるようになりました。

接続できないときは

図1-4-6

接続できないときは、まず S2AR アプリの再起動をしてみてください。それだけで接続できる場合が多いです。再起動の直後は比較的、接続しやすくなります。
iPhone のホームボタンを「ダブルクリック」してください。図1-4-6のように起動しているアプリがすべて表示されるので、S2AR を選んで、上(または横)にスワイプしてください。この操作で S2AR を終了させることができます。その後、 S2AR を再起動してみましょう。

それでも接続できないときは、「IP Address の入力ミス」「同じ Wi-Fi に接続できていない」「Wi-Fi の電波が弱い」などの理由が考えられます。この章のはじめから、もう一度慎重に作業を進めてください。

「Wi -Fi 接続」以外の方法

iPhone とパソコンを接続する方法は、Wi-Fi だけではありません。お使いの iPhone がテザリングが可能であれば、以下の方法を使うこともできます。テザリングなら Wi-Fi 接続が使えない外出先でも S2AR を使うことができるようになります。(テザリングとは、スマートフォンを Wi-Fi ルーターのように使い、パソコン・ゲーム機等をインターネット接続できるようにする機能のことです。本書では「テザリングする方法」自体は説明しないので、ネット等で各自調べてください)

①USB テザリング
②Wi-Fi テザリング
③Bluetooth テザリング

いずれの方法でも、手順は「Wi-Fi 接続」の場合と共通です。パソコンで ScratchX サイトを開いて、Extension URL を入力します。S2AR アプリに表示される IP Address を「接続ブロック」に入力します。「接続ブロック」をクリックして実行します。S2AR に「connect」と表示されたら成功です。

上記の3つの方法のうち 「①USB テザリング」は充電しながらアプリを使うことができ、接続が安定するなど利点があるのでおすすめです。

次の節では、仮想オブジェクトをクラフトするための基準となる「原点(Origin)」を設置する方法を学びます。