p5.jsで文字の雨を降らせる-プログラミングはYouTubeで学ぶ-

そう、マトリックスのあのシーンです！（っていう表現で最近の中学生に通じるのか分からないけど）

実際の映画のトレーラーはこんな感じでした。カタカナが使われていたなんて知らなかったな....

マトリックス２が2003年って、そんな昔になってしまったとは。中学生に伝わらなくても当然ですね。

最近の子のために説明すると、

マトリックスは従来のCGにはない、ワイヤーアクションやバレットタイム（被写体の動きはスローモーションで見えるが、カメラワークは高速で移動する映像を撮影する技術）などのビジュアルエフェクトを融合した斬新な映像表現は「映像革命」として話題となった。

マトリックス (映画) - Wikipedia

私が初めて見たSF映画だと思います。黒いグラサンかけたおっさんたちがイナバウアーで弾よけるみたいな展開があったことしか覚えてないけど....今度見てみようかな

重くなったら</>を押して再生を止めてください。実行環境によっては文字が爆速で降りていきます(笑)

....これ横に流せばニコニコ動画のコメントっぽい機能が作れるよな......

文字はSynbol().valueにランダムに与えられた文字で決めています。String.fromCharCode()が文字コードを文字に変換します。

Unicodeという文字コードの規格を使っています。Unicodeにおけるカタカナの範囲にランダムな数が与えられるようにしています。（0xというのは16進数の意）

こちらがUnicodeのカタカナにあたる表です。

f:id:yosinex:20170228235257j:plain

カタカナは「ァ」が30A0の1　～　「ヶ」が30F0の3でほぼ終わっています。そのあとにも「ヴ」とかありますが、今回はきっちり範囲を決める必要もないので、適当に範囲を決めます。自分で作ってみるときには、他言語の範囲を使ってみると面白いかもしれません。

おなじみTheCodingTrainの動画が教材です。今回はゲスト講師の方が出られています。random()の整数化に "floor()" を使うか "round()" を使うか、for文の条件式が "<=" か "-1<" かは人によって違いがあるんだなと感じました。

よかった記事には❤️をいただけると励みになりますhttps://t.co/4s4Bpm1gCS
— ikepon (@ikepon_com) 2017年2月28日

広告は消しゴムで消すべし