レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

BLOCKVROCKリファレンス目次はこちら

クォータニオン(Quaternion)をAframeで基礎から学ぶ

クォータニオン(Quaternion)は3次元空間の回転を表現するものです。 回転軸(3次元のベクトル)と回転角で成り立っているので、4要素があるので四元数(Quaternion)といいます。 A-frameでのrotationはオイラー角という方法で表現されています。これはxyzの…

44歳にもなってプログラミングが楽しくてしょうがない

あと10日ほどで44歳になります。 で、いまはプログラミングが楽しくって、いやーどうしよう。ここ1−2年は人生で一番プログラムを書いたかもしれない。 あたらしいことをやるのも楽しい、VR/ARとかAIとか、ひと昔前ならSFだったことが実現できるのはとっても…

a-frame raycasterを使って壁との衝突判定を実装する

a-frame raycasterを使って高低差のある地形に沿って移動する - レベルエンター山本大のブログの続き 目的 a-frameではWASDキーおよび矢印キーでカメラの位置を移動させることができるものの、壁や物体への衝突判定は自分で作り込む必要があります。 以下の…

a-frame raycasterを使って高低差のある地形に沿って移動する

目的 AframeのカメラはデフォルトでWASDキーや矢印キーによる操作ができますが、高低差のある地形に沿って移動はしてくれません。 また、階段のようなモデルも登っていきたいところですね。 Aframeで地面に指定したモデルの地形に添って移動できるようにしま…

2000年代オブジェクト指向は絶対の正義だった。つまり僕は洗脳を経験している

私がIT業界の片隅に所属をし始めた2000年ごろ、Javaエンジニアはスーパースターだった。Javaエンジニアを名乗るということは、秘奥義オブジェクト指向を習得していることに他ならないからだ。 「オブジェクト指向こそ正義」だった。 Javaとオブジェクト指向…

ビジョナリーカンパニー弾み車の法則

「ビジョナリーカンパニー弾み車の法則」(TURNING THE FLYWHEEL)は90ページほどしかない書籍だけれど、重要な指針を書いてくれている良い本だと思います。90ページなので紹介もしやすいですね。 ビジョナリー・カンパニー 弾み車の法則 作者:ジム・コリン…

プログラマ育成者に知っておいて欲しい初心者の5段階

プログラミングスクールといえばグレーなビジネスモデルというようなイメージが蔓延ってしまって悲しいですが、プログラミングのスキルを多くの人が手にすることはとても有用なことではあるので今後も頑張っていきたいと思います。 プログラミングを習得しよ…

VSCode「デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です」を消す

VSCodeでtypescriptを書いていてデコレーターを使うと、 デコレーターの実験的なサポートは将来のリリースで変更になる可能性がある機能です。'experimentalDecorators' オプションを設定してこの警告を削除します というワーニングがでる。 tsconfig.jsonで…

視線の方向に常に直進する

VRの視点を操作してVR空間を自由に動き回りたい時は、カメラに「常に直進」属性ブロックを設定します。 カメラを常に直進する スマートフォンVRでは、コントローラーやタッチなどで操作できない場合が多いため、スマートフォンの向きを変えることでスマート…

カメラを操作する

VR空間では、カメラという物体でユーザの視点を決めます。 カメラはシーンに1つだけ登録できます。 [公式]カメラ このプログラムでは、カメラブロックを表示してYの位置を10にセットしています。 これによって上空に視点が移動して空を飛んでいるような表現…

殴れる物体を作る

「動きのある物体」で重力の影響を受ける物体を作ることができます。 また「動きのある物体」に「クリックした時〜のチカラでなぐる」ブロックを設定することで、注視点カーソルでクリックした時に力を発生させることができるようになります。 土台ブロック…

クリックしたときに物体を移動させる

クリックした時に反応する処理を作るには、「ブロック〜をパラメータ〜を受け付けるように定義」のブロックでクリックされた時に行うべき処理を先に定義しておいて、「クリックした時に〜を処理する」ブロックに、その名前を記述します。 物体を注目点カーソ…

物体をアニメーションさせる

物体をアニメーションさせるためには、「アニメーション用のコマ送り」ブロックと、「〜づつ〜する」というブロックを組み合わせます。 このサンプルは、物体を回転させます。 [公式]アニメーションループ アニメーション用のコマ送りブロックは、「繰り返し…

チェックポイントによる移動

Aframe が先日2019年12月16日に晴れてVersion1.0リリースとなりました。 早速BLOCKVROCKもAframe Version1.0に対応しています。 チェックポイントによる移動という機能によって、「常に直進」とは異なるやり方でカメラを移動させることができます。 以下のプ…

JavaScriptコードモードを使って物体をアニメーションさせる

BLOCKVROCKには、コードモードという機能があります。 コードモードでは、JavaScriptを使ったプログラミングが可能です。 BLOCKVROCKで作った物体や世界は、Webで使われるHTMLとJavaScriptで出来上がっているためJavaScriptを使うことで自由に操作することが…

NodeからRDSの接続で SSL/TLSの証明書を rds-ca-2019に更新する

RDS のCA証明書が2019になるとアナウンスがあって、最終警告っぽいメールがきてたので慌てて対応。 そのメールのタイトルはこちら。 重要なお知らせ:2020年2月5日までにお客様のAmazon RDS SSL/TLS証明書の更新を行ってください | Important Reminder: Upda…

物体の位置

物体の位置は、3つの軸で決定します(X軸、Y軸、Z軸) Xは左右(プラスになるほど 右) Yは上下(プラスになるほど 上) Zは奥行き(プラスになるほど 手前) を表します。 以下のサンプルプログラムでは 赤い物体を左右に 青い物体を上下に 黄色い物体は、…

物体を受け止める土台を作る

動きのあるブロックは、重力を受けるようになるのでそのままでは落下していきます。 「静止した物体」属性をつけたブロックは、動きのある物体に対して衝突判定があります。 静止した物体の大きさのXとZ方向を広くすれば、重力のある物体を受け止める土台と…

物理エンジンで物体に重さをつける

BLOCKVROCKでは、物理法則をコンピュータで計算再現して、物体に重さや衝突の判定を設定することができます。 ブロックに「動きのある物体」の属性を繋げましょう。 Y座標を少し上にセットしておくと分かりやすいです。 物理エンジンで重力をつける 実行する…

物体の回転(Z軸)

Z軸は奥行きを表しますので、物体の中心を手前から奥に向かって通る軸を中心に回転します。 Z軸による回転は、カメラの目線が回転軸と平行になるため、時計回りであることがわかりやすいですね。 物体の回転(Z軸) [公式]z軸60,90,135回転

物体の回転(Y軸)

Y軸での回転は、物体の中心に縦の軸を通してそれを中心に回転するということです。 やはり+になるほど時計回りに回転し、マイナスになるほど反時計回りに回ります。 今回は、マイナスの回転もやってみます。 y軸90,45,-45回転 [公式]y軸90,45,-45回転

物体の回転(X軸)

物体を回転させる回転属性については、初期段階で最も混乱するポイントのようです。 軸を中心にして+であれば時計回りに回転するというルールさえ理解できれば、あとはトライアンドエラーで作りたい角度を確認しながら進めていくのが良いです。 このサンプ…

番号を指定して配列からデータを取り出す

配列は、データを複数まとめて扱う仕組みであり「繰り返し」という構造をとても相性がいいのですが、繰り返しのためだけのデータ構造ではありません。 データが順番に並んでいるので、番号を指定して配列のデータを使うこともできます。 この時注意が必要な…

配列を使った繰り返し

繰り返しは大変便利なのですが、数字を規則的にカウンターとして取り出しながら繰り返すことが中心です。 規則的でない繰り返しや、微妙な微調整をするには配列を使った繰り返しを使うと良いでしょう。 配列とは変数とよく似た要素で「違いは複数のデータを…

繰り返しブロックの内側に複数のブロックを書く

繰り返しブロックの内側にも物体などを組み合わせて配置することができます。 繰り返しブロックの内側を1回の仕事として実行して、次の繰り返しに移るという動作のしかたをします。 「= counter」が入っている箇所をよく確認してみてください。 繰り返しブ…

繰り返しブロックのカウンタ変数

繰り返しのブロックには、「変数 xを カウントして」という記載があります。 繰り返しブロックを作ると、同時に変数xが作られて0(min)から10(max)までの繰り返しの数字が入る状態になります。 繰り返しブロックの内側で、この変数xを使うことができます。 繰…

BLOCKVROCKリファレンス 目次

だれでも簡単にVRやARが作れるサービスBLOCKVROCKについてリファレンスを書いていっています。記事を投稿したら、この目次を更新していきます。 【紹介】1−1 BLOCKVROCKというWebVRサービスhttps://daiyamamoto.hatenablog.com/entry/2019/11/26/144231 【BL…

繰り返しを使った複数の物体作成

コンピューターが得意なことの1つは、同じ作業を苦もなく繰り返すことです。 プログラミングはコンピューターへの命令なので、やはり繰り返し同じことを実行してもらう命令が重要です。 BLOCKVROCKでは、こういった繰り返しに使える「変数xをカウントして0か…

掛け算(乗算)の演算

四則演算と呼ばれる演算には、足し算(加算)引き算(減算)掛け算(乗算)割り算(除算)があります。 特に掛け算は、数学で使う記号(x)とは異なり、アスタリスク(*)を使うので注意が必要です。乗算に*を使うのはBLOCKVROCKだけではなく、ほとんどの言…

変数と演算

変数を使うのと同じように入力項目を=から書き始めることで、計算式を作ることができます。 「= 1 + 1」のように数値だけで計算もできますし、「= x - 2」のようにあらかじめデータをいれた変数を使った式にすることもできます。 以下のプログラムは、「段…