高校数学とJavaScriptだけ。FPSの作り方 #1【ゲームプログラミング】【ゲーム開発】

[@mmmm-lp1pz]

この仕事に就けば訳もわからない動く点Ｐが役に立つ

[@agfeecyanide2504]

実際点Pそんな動かないがち

[@ノコノコ-n4n]

@@agfeecyanide2504 なんなら、動くより増えがち

[@松岡大暉-r7r]

『教養からくる感動』、とても良い言葉だなと思いました。 もう長い間私も日常をあまり楽しんでいないのでこれから教養を深めたいなと思いました。動画投稿楽しみにしています。

[@LloydSMITH]

Welcome to another episode of "What You Tube has recommended me today"

[@LloydSMITH]

@@kirillmelnikov7530 I like your photo : )

[@miku4j]

So basically, I'm a computer science student and a weeb. That's why youtube recommends this to me

[@_Devla]

You're not the only one

[@ThatGuyDownInThe]

its so nice

[@Robocat754]

Yea nice. But I don't understand Japanese :(

[@ThatGuyDownInThe]

@@Robocat754 better start

[@michaelespinoza4562]

Bro xd

[@高駿-f3i]

教養からくる感動とか言う語彙が素晴らしい

[@evo7188]

私もプログラマやってますが、プログラミングよりも数学よりも、まずは「やりたいことをどう実現するか」のアイデアが重要ですよね。 どんな数式を使うかを導き出す手前。ここの発想力は教えられて身につくものでもないと思うので。 その辺がすごいなと思って見てました。

[@k.j8127]

イント↑ネーション↓がすごいですね

[@tgrzwdatsun]

英語的には合ってそうだけど日本英語では無いねw

[@ikoany]

英語的にもアクセント位置は異なります。

[@ペンギンコガタ]

じゃあ､もう何語話しとるんや？w

[@k.j8127]

@@ペンギンコガタ ヘロンの数学 Heron's math語じゃね？

[@吉田修樹]

パックンマックンが動画投稿してるんじゃね

[@ikirutamenomanabi]

むちゃくちゃ分かりやすくて感動しました！かつ面白い。コードも綺麗なので、とても勉強になります。

[@こやま-w4d]

ほんとに凄い。。。 数学が何の役に立つか学べるいい教材だ。。。

[@yuyuyu_cook]

じわじわ伸びてく系のニコ動の動画っぽくて私は好き 個人的には目次を先に見たい人なので、目次があるよ〜ってのを動画のOPの後に差し込むとさらに見やすそうだなって思いました。（小並感）

[@heron-no-suugaku]

たしかに目次があるの気づきにくいですね。次の動画から入れようと思いまｽｩｩｩｩ

[@ああ-w1z3d]

@@heron-no-suugaku 大物KZbinｒ！？

[@鯖煮-x1k]

@@ああ-w1z3d x＝0

[@lyndaphone]

My friend recommends this channel. I'm an Indonesian, living in Singapore, learning Japanese. And working in IT Company. Immediately love this channel.

[@heron-no-suugaku]

コメントありがとうございます🐤 you know, learning Japanese gonna be tough, so feel free to ask about Japanese in this channel 🐤

[@kkdbsr]

1:56 もうｳﾞｫｫｫｫっと涙出て、鳥になりてぇ

[@mercytoo5262]

めっちゃ面白くてためになります！ 壁の高さと距離の関係が分数関数になる理由が一瞬迷いました

[@user-u4_0051]

クソ面白そうなんで受験とか終わったら勉強しようと思います 絶対難しいけど頑張ります

[@Batman-cy7mt]

頑張れ受験生！

[@rui9078]

肩の力抜いて、無理せずね！

[@malc3497]

結局頑張ったのか気になる

[@drink9930]

小学生のワイ「数学なんて知らなくていいやろ」 中学生のワイ「数学なんて適当にやっておけばいいやろ」 高校生のワイ「文系にしよ」 今のワイ「やべー数学ってすげー！！」

[@100EIZO]

小学生のワイ「数学って大事だろうけど嫌い」 中学生のワイ「数学って大事だろうけど面倒くさい」 高校生のワイ「理系だけど数学苦手」 今のワイ「やべー数学ってやっぱわからねえ……！！」 こんなワイよりずっとマシね

[@paulo0651]

A

[@fjeje]

6:20 angle -> エンゴー とてもいい動画ですね。プログラム、数学でどうシュミレートするか楽しく勉強できます。

[@senay6864]

なんていうか独特な語り口がすごく好き。

[@Hirabar]

なるほど、壁がバグる理由そこでしたか・・・・・・。 勉強させていただきました。ありがとうございます。

[@paulo0651]

jajaja, no, re turbio era el brother. Eres japonés o algo related to that. Nah re turbio, que falaba bastantes línguas no mesmo comentário.

[@山田太郎-l7s6l]

数学はとてもわかりやすいです。　ところで、classってどのような働きをするのですか？

[@heron-no-suugaku]

例えばプログラムでベクトルv1,v2の和をとりたい時、こう書きたいですよね。 v3 = v1 + v2 しかし、JavaScriptでは実数の計算しかできないので、残念ながら↑のようには書けません。 実数の計算に落としこむ（ベクトルなら、成分ごとの計算に落としこむ）必要があります。 x3 = x1 + x2 y3 = y1 + y2 とはいえ、たかがベクトルの和をとるたびに↑を書くのは面倒です。 そこで、クラスの出番です。クラスを用いると、v3 = v1 + v2 と完璧に綺麗には書けませんが、それに近い書き方ができます。 v3 = v1.add(v2) 詳しい解説はここに書くには狭すぎるので、↓の講座の後編でどうぞ😉 kzbin.info/www/bejne/qJWqfJpsi8d5eNE kzbin.info/www/bejne/h2fch5Vjp6tsoK8

[@tsubasa_km]

そっか、数学が出来たらもっとプログラミングが楽しくなるのね、めっちゃめちゃ苦手だけど数学頑張ろ

[@gaku8708]

要所要所でにじむ実用性がすき

[@雪P]

なんかめちゃくちゃ面白そうなチャンネル見つけて歓喜

[@artificiallyintelligence4287]

思ったよりハイレベルだわ 勉強させて頂きます

[@tsubasa_km]

この人の動画は数学が楽しいと思えるから何億回も観てる

[@不知火-p9x]

教養があるから感動が生まれるという表現に感動した 直接的に役に立つ知識ばかり求められるこの頃，そうじゃない知識を学ぶことの意味をこの言葉が教えてくれている気がする

[@白猫で煽る弁護士]

全然悪いとかじゃないし変えろわけじゃないけど、プ↑ログラムがめっちゃ気になるw

[@丸めたポテトコロッケ]

ja↑vascriptも同様に気になりましたw特徴あって好きですけども

[@マイケルマイヤーズ兄貴]

数学得意ではないけど、ヘロンさんの動画見て 数学に興味持とうと思います！

[@paulo0651]

No entiendo un choto. XD

[@トールズ-r7q]

技術の根底にあるものがわかると、できるであろうこととできないであろうことがやる前から判別できる、そこが根底を知る利点だなあと思いますね。ほんといい動画です。

[@hariiniya]

ちょっと見ようと思ったら面白すぎて全部見てしまった。

[@あさげ-q9m]

話し方好き、親戚のおじさん的な

[@にんげん-d2u]

数学を本当に面白いと思える動画

[@Tikuwaaa-qwerty]

すっげえ！分かりやすい解説！(吐血)

[@ともかず-i3d]

はじめまして。 動画本編の解説の良さもさる事ながら、冒頭でおっしゃっていた「数学を学ぶきっかけ」についても、感銘を受けました！ 数学を学ばれた際に、どの様な教材を使用されたのか、ぜひ教えて頂きたいです！

[@heron-no-suugaku]

「長岡先生の授業が聞ける高校数学の教科書」愛用してます🐤オススメです 高校の範囲以外はヨビノリさんの動画見たり本買ったりしてます（「線形代数入門」とか） 全然進んでいませんが・・🤔

[@ともかず-i3d]

@@heron-no-suugaku お返事ありがとうございます！ 教えて頂いた教材には、おそらくゲームへの応用例などは載っていないと思うので、得た知識をゲームに応用する方法を自力で編み出しているのは、本当に凄いと思います！！

[@Nakamoo16]

丁寧な説明がとてもありがたいです。

[@pp5492]

もう嬉しくって感動で... 古のプログラマーの工夫の凄さにびっくりした！ パーンってなりましたね、頭が

[@heron-no-suugaku]

わずかなCPUサイクルを見つけてId Softwareの会合に参加するJohn Carmackさん、最適化の歓びが胸いっぱいに広がります

[@bluemountain05]

本当にすごい！まだまだ理解しきれない所もありますが地道に頑張ります！参考にさせてもらいますね!

[@toid1088]

本職ゲームプログラマしてます。この動画はゲームプログラマから見ても神動画です。

[@penguin-Love]

声と動画の雰囲気がすこ

[@unko928]

2:12 ﾋﾞﾝﾋﾞﾝﾋﾞﾝﾋﾞﾝ

[@heron-no-suugaku]

ﾁｸｯ

[@MSG3SD8]

@@heron-no-suugaku ホモだったのか(歓喜)

[@lv.4854]

需要には気をつけよう！ 　　　　　 　Ω 　　 Ω　　　レj　　　 Ω 　　レj　　 👖　　　レj 　　👖　　　　　　　👖

[@ojisan460]

初学者がこれ見て車輪の再発明しようとしてるのがちょっと心配。今は3Dエンジンが描画も物理演算も全部やってくれるから、自前でやらなくていいんだよ〜。いずれは理解したほうがいいけど、わからなくてもゲームは作れるよ。 この動画自体はわかり易くて素晴らしい。

[@kazutosinagai6312]

言われる事の大事な事、「知識は世界を薔薇色に変えます！」と言う事は 私も凄く感じます、数学、英語、国語の語彙、等々 まあ凄くとまで言わなくても、知識が有れば感動します、 そしてそれは学校生活で終わる訳ではありません、私など就職してからの方がずっと多い 判らない事が有る事が嫌だったから、他人に聞き（でもその道に教育を受けたのに この人何にも分かっていないんじゃあないの？）と思った事は、何度も山ほどあり 結局自分で調べ、図書館、専門書を買って調べ覚えました、 多くの人から「貴方そっちの方の学校じゃあないのに何でそんなこと知ってるの」 と良く言われました。人生毎日が勉強です、知る事は楽しい！！

[@KO-pn4nj]

面白いですね。ゲームだけでなく、AIの学習実験の視覚情報やエージェントの表現として簡単に使えそうです。非常にためになりました。

[@dos7480]

ミツバチには気をつけよう！

[@fragmentshader2878]

Even though I can't understand anything you said, It's notable you have many skills in trigonometry and linear algebra due to how well you can explain how the code you're making works. Can't wait to see this video with subtitles one day! :)

[@酒留清彦-w4n]

素晴らしすぎる。数学の勉強と併せて、動画を視聴させて頂きます🙇

[@ay-oha]

すごく感動しました。

[@paulo0651]

Why do you guys write your name in Japanese and then with the latin letters

[@Vithe-Gaming]

"見える化"...意味が違うとか云々ありますが、可視化で好いですよね。 結局、視認できるようにするわけですし、可視化で充分。 まぁ常に見える状態にあると言う事らしいんですけど、"常駐可視化"(適当)の様に組み合わせるだけで表現できる気がする。 しかし、これが一本目の動画だったとは、恐れ入る。私もそれほど勉強が出来た方ではないので、結構参考になる。プログラムを組む考え方は習い学んでいたが、今は数学的な導き方を丁度切らしてたので、たすかる。

[@bee-nf5bj]

This video is exactly what I need, if only there were english captions D:

[@tantumDicoQuodCogito]

It is easy, he basically show you the formulas and draw the graphical representation of how it works. In short, this is ray-casting tecnique, use a ray on determinate angle and in base to distance of intersection calculate the height of wall.

[@daveit1337]

Check this out (Daniel from The Coding Train channel made something very similar): kzbin.info/www/bejne/rIrKen6kbM53fpo

[@boyyutori1621]

チャンネル登録しました！ スーパー面白いです！

[@はじめ-u6r]

1通り聞くだけだとあんま頭に入らないからとりあえず0から自分で作って、この動画で答え合わせって形式で勉強した方がいいかも

[@francity]

I dont understand a word you say, but the code explains itself :) Loved the channel!

[@heron-no-suugaku]

thank you! yet sometimes I write confusing code, so I add sort of English comments in example codes for further videos 🐤 (Including today's one!)

[@ZeriAi]

I am learning Japanese and I am a systems engineer. I understand some words but not everything. ビデオはありがとうございます！ 私の日本語はがんばります！

[@zzz-fm3fo]

うわ 思想が一緒で感動！！ オイラも頑張ろ

[@FIDDLICA]

冒頭の教養の部分以外難し過ぎるの極みゾ　レ氏こんなすごいことしてたのか

[@heron-no-suugaku]

テンポ重視しすぎて、数学やプログラミングがわからなくてもOK（大嘘）になっちゃいましたねクォレハ ガチ初心者向け動画もそのうち作るからお兄さん許して

[@ckle7682]

@@heron-no-suugaku 理系ホモいいゾ（素人並の感想）

[@oyatu-j8b]

エンジニア目指してまだ数日でこの動画見てます。全く理解できませんがすごく面白そうなので理解できるように頑張りたいと思いました#教養は感動

[@ezer5983]

現状どうですか？？

[@tact2666]

実際手を動かして見て初めて座学で理解できなかったことが理解で出来るようになったりする。 わからない単元を一つ一つプログラムを書いたりUnityで作ったりしたら時間はかかるだろうし効率的では無いが、「確実に理解させ自分自身を楽しませる」っと言う意味ではそれが一番の最短ルートだと思っている 実際自分も高校時代、物理が苦手で「なんでこんなこと社会で使うこと無いのに勉強してるんだろう」とか思っていたが、いざ実際EXCELで公式に数値を入れて計算したり遊んでみると意外と面白く感じ、「何故～なんだろう」といったもう一段階先に踏み込むようになった。 「何故現実世界で救急車が近づいてくるときドップラー効果で音がすごい変化するのに学校で習うのは音が数パターンになるんだろう」 「現実世界では加速度が一定じゃないから音が変わるんだ！　じゃあ速度上げまくったらどうなるんだろ」 「なんか数値が荒ぶってる笑 音速超えちゃってソニックブームが発生したのか」みたいな 椅子にしがみついて勉強するのも大事だが、自分を楽しませればもっと勉強は楽しくなるということを今の受験生及び学生に伝えたい 勉強がんばれ、人生勉強や

[@Ozzymand]

Thank you, I always wanted to know how to build a visual engine in javascript!

[@2dapoint424]

Yutube thank you for recommending me learn japanese in 20 min video 😌

[@霧のビルヂング]

16:14は物理の凸レンズの倍率の公式を考えると理解できますね

[@成長人間タクマの投資ちゃんね]

めっちゃ分かりやすいです、ありがとうございます！

[@suittizihou]

２Dで線出して当たったとことの距離を使って３D化していく発想には脱帽する。。

[@keisuketokunaga8247]

64歳で、　今　動きのあるp5jsを習い始めました、目的は日付き太陽系シュミレーションです。 とても気にいってます、どうもありがとうございます。

[@eno2857]

マジで面白かった

[@100EIZO]

ですよねー、「可視化」でいいし、 個人的には「見える化」って"流行に乗ってます”感が強くてで嫌いです。（ここだけ完全にわかった）

[@さもあらばミュンヒハウゼン数]

中学生ですが、高校数学本当に楽しそう！ 高校生になる前に、数学が嫌いにならないようにするために、どなたかアドバイスをいただけないでしょうか？

[@一般通過オクタン-g6t]

公式暗記に頼らない。は大事だと思います！公式暗記だけだと応用効かないし、ただの作業になってマジでつまらないです(体験談)

[@user-xx2gs5cl5k]

公式の導出や仕組みを理解しておくと良いですよ。その方が難しい内容でも応用が効くし、頭の中で図形などをイメージできると、計算しやすくなります。数学を呪文のようにただ暗記する人は後々大変ですね。 あと、僕には数学好きの友達がいて数学者の話や数学の雑学、小ネタとか色んな話が聞けてへぇ〜と思わされることもあったり、数学の理解が深まったりしたので、数学トークできる友達がいると楽しいですね笑 すみません､長くなっちゃいました!

[@Jackson-er6fg]

高校数学の美しい物語ってサイトとウルフラムアルファ、クァンダ使えると捗るのでおすすめです。 授業自体のレベルも上がるんで予習と復習が大事になりますので頑張ってください。 チャートとかで何も見ずに解けるものはもう一生やらなくてもいいんで解説見て納得するけどできないものと、 見ても分からんものを何も見ないでできるまで仕上げるのがいいと思います。（そこを予習と復習と先生に確認できればかなり良し） 分からずに悩んでいる時間が結構時間食ってしまうのでそこは飛ばすっていうのも大事ですね。（こういうところを先生に聞くとよし） 今はyoutubeで予習ができる環境にあるので、二倍速で授業動画を見てからアウトプット（問題集を解く）ってのがいいと思います。 数学力向上チャンネルさんや超わかる高校数学さんがおすすめです。 個人の意見なので色んな人の意見を聞いて自分に合うものを試して頑張ってください！

[@sinistergeek]

Me no understand what You say yet i understand what You tryna teach. Thanks!!

[@AA-dj8dk]

数学ガール面白いよ！

[@mefrefgiweuhef4808]

I just found this channel and I'm instantly in love. Thank u for these videos (: I don't know any Japanese, but oh well. I will learn.

[@heron-no-suugaku]

thank you, I feel bad since there's no English subtitles (I don't have enough money or time for that..) but the newest and further videos have English comments in example codes, it gonna helps you a bit 🐤

[@hika8177]

感動しました！将来仕事で数学なんか使わねぇよって言ってる人たちに見せてあげたい

[@ノンケ一般人]

数学の使い所さん！？

[@太麺イケ麺シコシコ麺]

中学生の所しか理解できなかったけど今年、数学Iいい点取るのとこれを理解できるよう頑張ります！これ当たり前だけどやりようによってはまだまだロマンがありますね！

[@dm_99]

クラシックガチ勢なんで1:32でクラシック音楽触れてくれただけですごい嬉しいw

[@dm_99]

うわその次ABC予想

[@arkadiuszbalcerowiak5223]

Nice work, Nintendo will be proud, old games on 32cores with 60fps ;) joke, good work man. Sub.

[@ryozann]

最強に楽しい

[@kickthegeekktg9735]

Yep, cs student, " weeb " they called me, and now i got this recommended. I don't understand, but subscribe anyway.

[@とうろくしたらしかえす-そけつ]

分かりやすぇ

[@そんそん-v3t]

面白かった

[@temtem08320]

発音のクセすげーｗ

[@ia2941]

確かに全然知らない曲しか流れないライブ行ってもくそつまんないもんな

[@gsolohy]

I really wish there are some subtitles to this video. I love your contents.

[@morshlop]

You can watch this with automatically translated subtitles, but they are not as accurate as manually translated ones.

[@tatsuya4399]

初歩的な質問で大変恐縮なのですが、jsファイルに書き込んだ後実際に動作させるのってどうやるのかを教えていただきたいです。

[@heron-no-suugaku]

p5.js web editorではなくオフラインでJavaScriptを動かす場合、ひと手間かかります。（ゆーて簡単です） editor.p5js.org/AosagiHeron/sketches/whiCbrWPJ まずプログラム一式を↑からダウンロードしてください。 具体的には、左上のFileからDownloadを押して、落ちてきたzipファイルを展開してください。 chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja 次にローカルサーバーを立てます。↑を使うとクッソ簡単です。 CHOOSE FOLDERで展開したフォルダを選び、出てきたリンクをクリックしてください。 テトリスが動いたら成功です。sketch.jsを改造すれば自分の好きなプログラムを動かせます。🐤

[@KamenRingo]

数学って大事だったんだな…

[@alinco8]

声好き...

[@user-raa]

よく分からないけど楽しい！！

[@updown6783]

動画、大変参考にさせて頂いてます。 質問なのですが、touchEventをスマートフォン(safari)で実行するにはどうしたらよいのでしょうか？ いろいろ調べてみて何度試してもエラーになってしまいます; よろしければお返事いただければ幸いです。。。

[@heron-no-suugaku]

Safariでは上手く動かない場合があるようなので、他のブラウザ（GoogleChromeなど）を試していただければと思います🐤 もしくは、p5.jsのバージョンを最新にすると動く可能性があるかもです。 webエディターの再生ボタンの下にある「>」を押して、「index.html」を選択して、「1.2.0」を全て「1.3.1」に書き換えてください。 参考： cdnjs.com/libraries/p5.js

[@Ter_Box2]

すご 冒頭すき

[@木村太一-w7c]

ポートピア連続殺人事件は本当に素晴らしかったなぁ

[@曲がって左]

話し方面白い

[@park2348190]

I don't know what it is but looks amazing... liked

[@Ouchie]

This is what I love of programming. No matter which language they speak, I can still understand the code

[@typingcat]

Except for the comments.

[@tarouyamada3917]

大人になってからだったのか。 すげぇ…

[@tacoslav3758]

プログラムの仕方を知るために英語を学ぶ必要がありましたか？

[@apollogeist8513]

I don't understand a word but great video 👍

[@sage_goes1504]

日本語か英語のどっちかを喋っていただけると助かります

[@michelle8431]

すき

[@masakiwin7]

動画を模写して学ば差せていただいています。 現在エラー 　Uncaught TypeError: Cannot read properties of undefined (reading 'x') at draw (main.js:81:19) at _main.default.redraw (p5.js:72175:27) at _draw (p5.js:64314:25) と表示され 　for(let wall of walls){ 　　line(wall.begin.x, wall.begin.y, wall.end.x, wall.end.y); 　} 　.x, wall.begin.y, wall.end.x, wall.end.y);の部分でエラーで表示されないでいます。 文字入力ミスか何度も見返しましたがどうしてもわかりません。 対処方法を教えていただけませんでしょうか？

[@heron-no-suugaku]

エラーから察するに、 ・Ray2クラスかVec2クラスの定義がおかしい ・wallsにおかしな要素が入ってしまっている 辺りが原因かなと思います。クラスの定義を見直したうえで、デバッグツールを使ってwallやwallsといった変数の中身を確認してみてください。💪 ↓完成品のプログラム editor.p5js.org/AosagiHeron/sketches/w5wnTmc71 ↓デバッグツールの使い方（固定コメントの補足も見てください） kzbin.info/www/bejne/n3O8Y4OtqtNjrs0

[@masakiwin7]

お返事いただいた完成品のプログラムを模写することによって何とか完成しました 結局何故動画どおりに入力していったのにエラーになったのかはわかりませんでしたが、完成できました。 ありがとうございます。これからも動画見させていただき勉強させていただきます。

[@三日月ゼロくん]

すげえな

[@Mati2007PL]

quality content!

[@33deputat]

Nice guide, no Idea what it's about. God bless the algorithm

[@palegrass6168]

wow that's a new one, you love to see it

[@yanyan_11_2]

BGMが昔やってた宇宙兄弟ってゲームのやつだ…懐かしすぎる

[@alejandrorodriguez-ph4hd]

Impresionante, gracias amigo