初歩のプログラミング講座 3D表現に触れてみよう

はじめてのプログラミング - 2 #4/4

プログラミング初心者向けに、超基礎から解説する「はじめてのプログラミング」講座の2限目。今回は、ここまでやってきた平面的な表現から少しステップアップして、3次元(3D)の表現をプログラムで行ないます。放送大学などでHTML5の講師を務める中島俊治氏のレクチャーで立体的な表現に触れてみましょう。

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

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

新井利佳氏(以下、新井):いえい!

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

新井:お願いします。

中島俊治氏(以下、中島):はい。今日は丸、三角、四角と、あと直線やりました。あとグラデーションもやりました。その中で、丸を使うともっと違うことができます。実は、先月か先々月でしたかね。円グラフをつくりましょう、ということをやったんですよ。実はこの中のデスクトップ見ますけれども、反映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回コンッてクリックしておいて、よいしょ。上手くいくかな?

みんなで実際やってみよう!

中島:ほらきた!

新井:おー!

鈴木:急にすごいんだよなこれ(笑)。こんなことできるんだと思いましたよね。

中島:これ、皆さんにもやってもらおうと思います。

鈴木:動いてるし!

中島:そうそうそう。まずはありのまま、やっていただきたい。その後余力があれば、時間があれば変えてもらえればいいと思います。

鈴木:カスタマイズしていきましょう。それでは皆さんね、みどっちと一緒に……あ、みどっちじゃない(笑)。

中島:それとごめん、『できた』ボタンポチッ。

鈴木:『できた』ボタンね、進めてる方は『できた』ボタンを押してください。じゃあ今度は、りかっちと一緒に皆さんの実習の時間でございます。それでは、実習スタート。

【実習タイム】

新井:では、『できた』ボタン押しまーす。

鈴木:そうだ『できた』ボタン。それくらい来てんだろうね。

新井:今私押しました!

鈴木:わかりました。とういことで、4つ目のテーマのシークレットも終わりました! 皆さんお疲れ様でした!

新井:お疲れ様でーす。

中島:ありがとうございます。

鈴木:ありがとうございまーす。

logo_square

スクーが提供する「かじり部」は、ちょっとだけデザインやプログラミングに興味のある人が無料で学べるオンライン動画学習サービス。パソコンとインターネットに接続できる環境があれば場所を問わず誰でも“部員”として参加することができます。プログラミングやWEBデザインなどの分野で活躍中の専門家が、難しい専門用語をなるべく使わずに指導を行い、参加者が楽しみながら成功体験を重ねることで、「学び」に対するモチベーションを高めていきます。

・週末学習 かじり部 - schoo(スクー) WEB-campus https://schoo.jp/kajiribu

Published at

schoo週末学習【かじり部】

schoo週末学習【かじり部】に関するログをまとめています。コミュニティをフォローすることで、schoo週末学習【かじり部】に関する新着ログが公開された際に、通知を受け取ることができます。

スピーカーをフォロー

関連タグ

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

ログミーTechをフォローして最新情報をチェックしよう!

人気ログ

人気スピーカー

人気コミュニティ

ピックアップ

編集部のオススメ

そのイベント、ログしないなんて
もったいない!
苦労して企画や集客したイベント「その場限り」になっていませんか?