初心者向けプログラミング講座 3D表現に触れてみよう

独自関数をなくして、丸を描いてみよう

鈴木顕照氏（以下、鈴木）：続いては、こちらのコーナーに参りましょう。もっともっと！　かじり部！

新井利佳氏（以下、新井）：いえい！

鈴木：こちらのコーナーはですね、少しだけ難しいことを中島コーチに披露していただくと。だからできなくてもしょうがないですよ、ここからはですね。ということで中島コーチよろしくお願いします。

新井：お願いします。

中島俊治氏（以下、中島）：はい。今日は丸、三角、四角と、あと直線やりました。あとグラデーションもやりました。その中で、丸を使うともっと違うことができます。実は、先月か先々月でしたかね。円グラフをつくりましょう、ということをやったんですよ。実はこの中のデスクトップ見ますけれども、反映1。今日の1番最初にやったやつでしたっけね。この中にですね、myarkというのがありましたね。

中島：このark、円弧のつくり方で、円グラフができるんですよ。それを今からお話します。

鈴木：はーい。

中島：さっき上のmyline分解してね、裸にしちゃってハートつくりました。同じような感じです。じゃあ1回やってみますので見ていてください。上側は1回コンッとやって定着させておきます。念のためです。

それじゃあ下側ですね、見ていてください。お団子が食べられちゃいましたって何か懐かしい感じがしますが、いらないものは消しちゃいます。大事なものは、この2行。

中島：さっきお話しましたね。cというのは道具箱ですよ。そしてここの独自関数は全部なくしちゃいます。1からつくろうと。皆さん、将来は1からつくってもらおうと思います。独自関数とりあえずなくしちゃいます。なくしちゃって、myark。円弧になります。これ大事なんですけれども、そのfunction某っていうのもなくしちゃいます。直接つくってやれ、ということを考えています。

中島：c.beginPath、今からビギンパスを始めますよ。c.arc。これが実は、JavaScriptそれからHTML5の中で決まった円弧の書き方になっています。これは私がつくったんじゃなくて、オフィシャルに決まっているもの。c.fillStyle、これが塗る色です。c.fill、こちらのほうが塗りましょうになっています。よろしいですかね。

鈴木：はい。

中島：これを今からやっていくんですが、xとかyとかr、これをきちんとお話していなかったので、お話していきますね。

座標、半径、角度、色を指定する

中島：さっきと同じなんですよ。xとyというのは中心の座標になります。じゃあやります。150,150、これ実はその四角形の真ん中の座標になります。それから次はr、半径です。100くらいにしておきましょうか。次はstart/180*Math.PIって何か難しいこと書いてますが、ちょっとおいときます。おいときますが、startというのは開始の角度だよっていうふうに思っておいてください。ここを、例えば最初だから0にしときます。0度から始まったよ。

中島：それからendって書いてますけど、ここ例えばそうだな、90度にしときましょうか。スラッシュ180、180で割ってますけど。これまあ円周率ですけどもね、ちょっとそれは見なかったことにして。いいですか？　150,150の中心で、半径100、0から90度までの円弧を描きましょうねっていう仕組みなんですよ。後ろいろいろありますがちょっとおいときましょう。

鈴木：はーい。

中島：それからfillStyle=“color”、ここ変えちゃいましょう。何色がいいですか？

新井：うーんと、パープル！

中島：えっと、綴り？　purple、合ってるかな？

鈴木：あー、ぽいですね。

中島：ぽいですか？（笑）。もしだめだったら、黒色になるだけの話ですからね。beginPath、ark、fillStyleそれからfill。ちょっとここにclosePath入れたいので。

中島：これはあの、beginPathはパスを始める、arkは円弧。closePathっていうのは開始点に戻りましょうっていう意味です。ちょっと入れさせてもらいました。この状態でつくってみましょう。どうなるかな。毎回ぶっつけ本番なのでちょっと心配だけど、ちょっとやってみます。

0度の位置は一工夫が必要

中島：あれ？　できたんだけど何かおかしいですよね。円グラフとは言えない。普通はパイの形、ピザパイとかパイの形になるんだけど、ならない。何か違う、何がおかしいのか。中心はここなんですよ、実際ね。

中島：でも、こっから始まって。

中島：ここで終わってるってことになってる。

中島：つまり、中心から始まってないんですよ。始まってない。例えば三角形で始めるときは、movetoっていうのがありました。今回も入れてみます。beginPathの次に、c.moveTo()。ここで、中心を150と150にしてみます。

中島：moveToは開始点ね。150,150で始まって、円弧を描いて、closepathというのは開始点に戻る。つまり150,150に戻ります。はい、できた、はず（笑）。いきますよー、ぽい。

鈴木：おー、できた。これか。

新井：きれいにできました。

中島：できましたね。ところが、外人さんは時計の3時の位置が0度らしいんですが、日本人だとね、時計の12時の位置から始まるのが普通じゃないですか。

鈴木：そうですねえ。

中島：つまり90度ずれている。なのでここでもし90度ずらしたければ、0度は本当は90度引くんだよ。0から90度引いたやつを、何か処理するんだね。それから後ろもそうです。90度から90引くんだよ。こういう形でいいですかね。

中島：そうすると、開始点は90度引いた0度。それから終了点は90度なんだけど、90度から90度引いた、つまり0度に帰ってくるという。ややこしいですから、見たほうが早い。

鈴木：見たら分かるかもしれない。

中島：そう、いくよ。

新井：ああー。

暗記じゃなくて、手を動かしてみよう

中島：90度が嫌だったらば、ここを変えちゃいましょう。例えば何度が好きですか？　何度でも大丈夫です。360度以内で。

新井：部長。

鈴木：おお！　そうですね、じゃあ……120！

中島：120。こうしました。

中島：大体頭の中で想像してみてください。0から120度の円弧です。

中島：ほらできた。

鈴木：おおー。

中島：いい感じですよね、扇型になってる。要はこれが3つ揃えばいいんですよ。円グラフです。できあがりました、ということになります。

鈴木：これかあ。

中島：3つつくればいいんですけどね。それはぜひ、皆さんにお任せしたいと思います。できればこれは関数にして、簡単に描いたほうが本当はいいんですよ。さっき私消しちゃいましたからね、これでやっちゃいました。本当は関数でやったやつを使ったほうが便利だったりしています。それはお任せしますのでね。ぜひ、皆さんの何かの糧にしていただければと思います。

新井：はい。

鈴木：ありがとうございました。ちょっとやっぱり難しかったですね。

新井：はい。

中島：ああ、そうか（笑）

鈴木：でもいいんです、これ頑張ったらいけるくらいがいいんですよ。「もっともっと！　かじり部」はね。

新井：こういうのもあるんだっていうね。

中島：なるほどね、うんうん。

鈴木：関数を消しちゃって1から書いたらこうなるっていうことですよね。なるほど、分かりました。

新井：受講生の方に、りかっち大丈夫かなって心配されてますね。

鈴木：なかなか難しかったのでね（笑）。

中島：かじり部では触れることが大切だと思うので、触れていただきたい。とにかく手を動かしてもらいたい。暗記じゃなくて。手を動かしましょう、ということをお願いしたいと思います。

鈴木：ということで、頑張っていきましょう！　以上、「もっともっと！　かじり部」のコーナーでした。ありがとうございました！

4番目のテーマは……？

鈴木：それでは最後のコーナーにいきましょう。みなさんがしっかりと手を動かしてやる番でございます。4番目のテーマはこちらでございます！　じゃん！

新井：てんてんてん、シークレット。え？（笑）

中島：（笑）。

新井：私今初めてみましたが、……シークレット？　テーマですよねこれって、コーチ？

中島：はい（笑）。

新井：シークレットとは？

新井：一体どいいうことですか？

中島：かなり、毛色の違うことをします。私たちは、2次元の世界の描画をしてましたよね。縦と横の世界です。グラデーションができてるけども、そうはいっても平面の世界。そうじゃなくて、やっぱり3次元の世界、覗きたくないですか？

鈴木：3次元の世界？

中島：4次元の世界はちょっと無理ですけどね。トワイライトゾーンじゃないですけどね。

鈴木：立体的な感じですよね。ずうっと今まで、のっぺりしたものつくってきましたから。

中島：のっぺり？（笑）　正解です。今回ちょっとシークレットって書いたのは、3次元を皆さんに触れてもらいたい。それできたらね、3次元のゲームとかもつくれるようになるかもしれない。ということで、触れていただきます。ところが、問題が結構あるんですよ。何かというと、3次元というのは2次元だけでもこんだけあったのに、3次元になると、縦横高さ……何だっけね？　xyz軸っていうふうになっちゃうと。

鈴木：奥があるんですね。

中島：それだけ計算が難しくなって、パソコンが対応しきれないとか。それからまだ仕様がかたまってないところがあります。ということで、さっきからライブラリって話をしてました。実は3次元の表示を助けてくれるライブラリというのがあります。これは、スリードットジェイエスというのを使わせてもらいます。

鈴木：スリードットジェイエス？

中島：スリーってこれね。

中島：私やっぱり発音下手なんで。

鈴木：はい、僕がやりましょう。three！

中島：はい、オッケーです（笑）。そういうライブラリを使いますよ。皆さんにもぜひカスタマイズで、3次元の世界を楽しんでもらいたい。これはChromeでやっていきましょうね。よろしくお願いします。

3Dの表現もやっぱり「JSくん」を使います

鈴木：はい、見ていきましょう。

中島：誰か4次元いっちゃったって書いてる人いたけど（笑）。

新井：4次元は戻ってきてください。

中島：そうだ、これはちょっと雑談ですけども。丸だけでドラえもんとかね。皆さんつくれるかもしれないからやってみてください。

鈴木：Fさんが見本4の動きを見てびびってます、って来てますね。見本ソース4ですね。

中島：びびびびびびび。もう見ちゃってるんですね、いいです。じゃあ、見ていてください。やっぱり、JSくんエディタです。この中の反映の4番目になります。ぽい。

中島：大分毛色が変わってきてます。

、これはね、JavaScriptでのそういう書き方だと思ってください。今までキャンバス使ってましたけど、今日はちょっと違うものを。ちょっと違うものを使っていきます。

新井：はい。

中島：それで下側を見てください。

中島：なるべく皆さんの扱いやすいように変えときました。特に皆さんがパラメーター変更できるような形にしておきました。

鈴木：分かりやすいですねえ。

中島：そうそう。難しいことまずはおいといて、楽しみましょう。その後中身調べたらいいと思う。一応簡単に説明つけといたし。だからね、もし知りたければ、私のほうにおいでください。いつでもオッケー。それではいきましょう。var bgColor、バックグラウンドカラーです。

鈴木：なるほど、背景色っていうことですね。

中島：そうです、メモしておいてくださいね。

鈴木：皆さん、メモしておいてください。

中島：頭の中に、灰色の背景色を思い浮かべておいてください。

鈴木：bgColorは背景色ですよ。

中島：だから、grayを変えてあげれば背景色変わります。

奥行きや光源の色、文体の質も変えられる

中島：okuyuki、3次元ですからね。物体と目の位置、奥ゆき感が大事になります。本当はこれokuyukiじゃなくてもうちょっといいのにしたかったんですけど、まあ分かりやすく横文字なくせってことなので。okuyukiで書きました。3番目、lightcolor、光源の色です。白色にしときました。普通白色ですからね、こうしておきました。

でも赤色の光源がいい人がいるかもしれない、緑色がいいかもしれない。変えてみてください。明かりの元の色です。普通は白色ですね。それからterikaeshiとありますが、これは光が当たったときの反対側の照り返しの色です。これはあんまり気にしないようにしましょう。ちょっと扱いにくいものになっています。

新井：はい。

中島：でも、これだけでも何かできそうですよね。色変えちゃえばいいから。奥ゆき感変えたら大きく見えたり小さく見えたりしてきます。遠くにある、近くにある。それからその下、colorは物体の色です。これはこのままにしておきましょうか。ちょっと難しい。8888ff、これは何かっていうと、16進数の色カラーになっています。xとか抜かさないようにしてくださいね。それから次、ffffff。ここはちょっとこのままにしておきましょうか。これは何かっていうと、material1Valueと書きました。

中島：マテリアル、1つ目の物体の色とか。それから影の色、ハイライト色、ハイライトの大きさ、金属の質感なんてのが実現できるんですね。それはまた、休憩時間とかにやってください。そして実は、マテリアル1と2と、2つ物体をつくりました。それぞれに、形をつくりました。あとは、プログラムいろいろありますからね。時間があれば見てみてください。一応全部説明付けときました。難しいですけどね。それで1回コンッてクリックしておいて、よいしょ。上手くいくかな？