【インストール不要】JavaScript + p5.js まるわかり講座、後編。【ゲーム・プログラミング】【初心者向け入門】

Поделиться
HTML-код
  • Опубликовано: 20 янв 2025

Комментарии • 41

  • @heron-no-suugaku
    @heron-no-suugaku  4 года назад +9

    10:35 ごめんなさいここ逆です。正しくは、
    「d > r1+r2 重なっていない」
    「d ≦ r1+r2 重なっている」

  • @髙橋雅史-v4g
    @髙橋雅史-v4g 3 года назад +2

    半日かけてできました!!めっちゃ楽しいです!ありがとうございます。

  • @user-RaahNeko
    @user-RaahNeko 4 года назад +2

    すげー!classの説明が画期的。ずっとthisの意味がわからなくて、本を読んでもなんとなくしかわからない状態が続いていたのです。理解のきっかけになりました。ありがとうございます!

  • @sakamiyari
    @sakamiyari 4 года назад +4

    25:57 どうしてもdraw関数で扱いたい場合、Math.floor ()と打てば使えます。
    これはJavaScriptの中で定義されている物なのでp5.jsのタグには載っていないのですが、JavaScriptのタグには掲載されている関数です。数学関数はMath.とp5.jsの数学関数を組み合わせると混同して扱えます。ご存知でしたらすみません。

  • @kawa8230
    @kawa8230 4 года назад +3

    解説がわかりやすくて良いですね!頑張って下さい!

  • @yu-qx3wp
    @yu-qx3wp 4 года назад +8

    現役プログラマーです。(ゲーム系ではなく業務システム系ですが)
    プログラミングが楽しいものだと再確認できました、素晴らしい動画だと思いました。

  • @sio-salt8979
    @sio-salt8979 2 года назад

    質問です!
    7:47 などで add(b) と書いていますが、この書き方でbは this の空間?の中で作られた
    ベクトルだとコンピューターに伝わっているのでしょうか?
    bを this で定義していないのに、b.x や b.y などと書けるのが不思議です。

    • @heron-no-suugaku
      @heron-no-suugaku  2 года назад +2

      実は、伝わっていません(!!)
      b.xやb.yが実行時に存在すれば計算でき、存在しなければ計算できない、という感じです。
      class Vec2 {
      constructor(_x,_y) {
      this.x = _x; //成分
      this.y = _y; //成分
      }
      add(b) {
      let a = this;
      return new Vec2(a.x+b.x, a.y+b.y);
      }
      }
      class Complex {
      constructor(_x,_y) {
      this.x = _x; //実部
      this.y = _y; //虚部
      }
      }
      let v = new Vec2(5, 3);
      let c = new Complex(-11, 7);
      let n = 2;
      let r = v.add(c); //計算できる
      let s = v.add(n); //n.xやn.yが存在しないので計算不可能
      console.log(r);
      console.log(s);

  • @たつ-y7t
    @たつ-y7t 4 года назад +4

    1:32 114,514にもしかしてみんなきずいていない、、、?

    • @moroha10085
      @moroha10085 3 года назад

      自分の場合は、気づいたけど、それ以上にプログラムの勉強教材として濃いから114,514が薄く感じてコメントする事を忘れてたみたいな感じ。

  • @lkousin7156
    @lkousin7156 4 года назад +3

    見様見真似で出来ました!w
    これからもう一度動画を見直して、一つづつ理解できるようにしていきたいと思います!
    作っていてとても面白かったです!
    これからも応援しています!

  • @taoo482
    @taoo482 4 года назад

    この動画ではjavascriptですが、基本的な概念は同じだったので
    javaでも同様なプログラムを実装できました
    いつもフィールドがごちゃごちゃになっていたので目から鱗です

  • @ぐぐる佐藤
    @ぐぐる佐藤 3 года назад

    挫折しました。出来れば、Umityでのゲーム制作動画をお願いします。

  • @ジョンドゥ-y2u
    @ジョンドゥ-y2u 4 года назад +1

    「setup」関数を「セ↑タップ」関数
    って読むのが、ネイティブっぽい感出ててすこ🤠

  • @健-t8i
    @健-t8i 3 года назад +1

    ビリヤードのような複数の玉が衝突するようなプログラムを説明してもらえれば嬉しいです。

  • @ほるるん-m6o
    @ほるるん-m6o 4 года назад +13

    とりあえず中3の俺には早すぎたってことは分かった
    数年後にまた来よ
    チャンネル登録しました!
    高三になって帰ってきた!
    classで頭パンクしてたけどベクトル理解してからだとすんなり理解出来た
    またリベンジしてみようかな…

    • @moroha10085
      @moroha10085 3 года назад

      @Nolocal Protiuceus BASICは全く触ったことないけど、ぱっと今調べた感じforとかifとか配列とかそこらへんの基本的なところはあったから多分、C言語でつまづいたのは、ポインタとか関数の概念とかかな?あの辺りはどうしても理解しにくいと思う。ポインタの参照するって概念と関数の処理を一つの命令としてひとかたまりとして見るってをめっちゃくちゃ利用して進化させたのがクラスとかオブジェクトだと思う。
      P.S. プログラムは分からん!ってずっと頭を悩ませてパンクしかけて「もう無理!」ってなった後、何日か後にモチベーションが戻ってきたらあれ?分かるゾってなることがよくある(経験談)。だから、諦めずにやろうと思えば意外と出来るから頑張って!

  • @moroha10085
    @moroha10085 4 года назад +1

    自分用に混乱したところをメモ
    ・constructorはc sharpで言うクラス初期化の構文のこと。
    ・classはオブジェクトごと(ボール、パドル等)に作る。posベクトルとvelocityベクトルをまとめて他のパドルなどで使う為という考え方ではない。
    ・vec2クラスはベクトルがないので作られたクラス。
    ・thisキーワードはクラス自身をあらわすもの。
    追記
    constructorは変数宣言の場所くらいで考えて良さそう

  • @尊師の兵法
    @尊師の兵法 3 года назад

    濃すぎる動画。

  • @sugarbip7884
    @sugarbip7884 3 года назад

    質問があります。
    動画の通りベクトルのスカラー倍を求めるのにclassの外で
    function mul(a, s) {
    return new Vec2(a.x * s, a.y * s);
    }
    と書いたところ、TypeError: Cannot read properties of undefined (reading 'x')というエラーが出ました。他のfunctionでは読み込まれるのですが。調べて試行錯誤したのですが、お手上げです。aにベクトルを与えているはずなのですがundefinedとなってしまいます…原因はどこにあるでしょうか?

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад

      関数の書き方は問題ありませんが、それ以外のところで何か間違えてるかもですね。
      プログラム全体をシェアしてもらえれば何か原因がわかるかもです。
      お使いのp5.js web editorの左上の「File」から「Share」を押して、出てきた4つのURLのうち一番下のURLをコピペしてください🐤

    • @sugarbip7884
      @sugarbip7884 3 года назад

      @@heron-no-suugaku
      editor.p5js.org/bippa58s2bippa/sketches/thObnrHpy
      お手を煩わせてしまい、申し訳ありません。こちらです。
      万有引力のシミュレーションをしようとしていました。

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад +1

      76行目が direction.norm となっていますが、 norm(direction) が正解かと思います。
      direction.norm は「変数directionの中にあるnormという変数」を指すのですが、変数directionの中身にnormが無いのでエラーになる・・という感じです。
      先に補足編の「デバッグのやり方」を見ていただき、プログラム実行中の変数の中身を見ていただくと、より深い理解に繋がると思います。🐤
      ruclips.net/video/iBY2Pwun0xk/видео.html

    • @sugarbip7884
      @sugarbip7884 3 года назад +1

      @@heron-no-suugaku 本当ですね… ご対応いただきありがとうございました!ご誘導いただいた動画を見て精進します。

  • @sun9420
    @sun9420 3 года назад

    let d = block.p.sub(ball.p).mag()がわかりません。pの集合の中にあるsubの集合の中にmagがあると言う認識で合ってますか?

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад +1

      正確には、「blockの中にあるpの中にあるsub関数の計算結果の中にあるmag関数」ですね。
      式をこう分割すると分かりやすいです↓
      let w = block.p.sub(ball.p);
      let d = w.mag();

    • @sun9420
      @sun9420 3 года назад

      なるほど!理解できました!!ありがとうございます!

  • @conbu1084
    @conbu1084 4 года назад

    これはおもろい

  • @増井俊貴-t9q
    @増井俊貴-t9q 3 года назад

    6:45辺りからやっていることが付いて行けないっす_(:З」∠)_
    例えば、6:48辺りで書いた「ベクトルの和を計算する〜(a.x+b.x , a.y+b.y)」とかで、どうやって和を計算しているのか、とかですね

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад +1

      ボトムアップで考えると分かりやすいかもですね。
      例えばベクトルc,dがあり、この2つの和をとりたいとします。
      let c = new Vec2(3,4);
      let d = new Vec2(5,6);
      このときcにはxとyという中身(ベクトルの成分)があり、それぞれ c.x と c.y という名前になります。dも同様です。(なぜそうなるのかは、2:47 )
      このとき、ベクトルc,dの和はどうすれば計算できるでしょうか。
      c.x + d.x をX成分、c.y + d.y をY成分とするベクトルを作れば良いですね。
      ですから、このような式になります。
      new Vec2(c.x+d.x, c.y+d.y)
      ↑を毎回書くのはだるいので、より一般的に考えて、「2つのベクトルの和をとる関数」を定義してみましょう。
      関数の定義の基本形である↓を穴埋めしていきます。
      function 関数の名前(引数0, 引数1, 引数2...) {
      return 計算結果の式;
      }
      関数の名前はなんでも構いませんが、「2つのVec2クラスの変数の和をとる」という意味で Vec2Add が簡潔で分かりやすいでしょう。
      引数は2つ必要なので、適当に連続したアルファベットを用いて a,b としましょう。
      計算結果の式は、↑の式を参考に new Vec2(a.x+b.x, a.y+b.y) としましょう。
      function Vec2Add(a,b) {
      return new Vec2(a.x+b.x, a.y+b.y);
      }
      すると、動画に登場した関数と同じものができます。

  • @sun9420
    @sun9420 3 года назад

    ブロッククラスのところで質問があるのですが,ball.p = ball.p.add(ball.v.mul(1/60))のball.v.mul(1/60)を計算し返す値がnew Vec2(s * a.x, s * a.y)であると思うのですが,これのthisは何を指すのでしょうか?

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад +1

      式全体を見ると複雑に感じますが……
      ball.p = ball.p.add(ball.v.mul(1/60))
      JavaScriptの式は基本的にカッコの内側から計算されるので(JavaScriptに限りませんが)、まず
      ball.v.mul(1/60)
      が計算されます。
      ですから、ball.vがthisとなります。🐤

  • @rock8477
    @rock8477 3 года назад

    先日こちらの動画に返信した者です。
    返信いただきありがとうございました。
    返信内容にあるようにコードを共有したいのですがURLをどうやってヘロンさんにお伝えすれば良いでしょうか?
    ここのコメント欄では問題があるようで再返信分のコメントが消されていますので。

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад +1

      一時期コメント欄でのURLスパムが流行っていたので、RUclips側がスパム対策で勝手に消してるかもですね🤔
      TwitterへリプかDMください。 @aosagiheron
      ※ブロック扱いになってしまっている場合があるので、その場合はチャンネルの「概要」タブにあるフォームからサムライさんのtwitterIDを送ってください

    • @rock8477
      @rock8477 3 года назад

      @@heron-no-suugaku さん。
      おはようございます。SNS嫌いでtwitterはほとんどした事がないので正しく出来てるか分かりませんがreplyさせて頂きました。よろしくお願い致します。
      ヘロンさんの動画を見てやはりプログラミングでモノを作ろうとすると数学が大事だという事を痛感しております。

    • @heron-no-suugaku
      @heron-no-suugaku  3 года назад

      Twitterのリプがうまく送れていない?ようなので、同じ内容をコピペしておきます↓
      最初のエラーは、60行目の行末のカンマが抜けている点ですね。
      // 引数が多い関数を実行(計算)したいとき……
      let 変数 = new クラス(引数1, 引数2, 引数3);
      // 引数ごとに改行できます
      let 変数 = new クラス(
      引数1,
      引数2,
      引数3
      );
      ↑を直すとまたエラーが出ますが、ブロックを1つから複数に増やす工程がまだ終わっていないからかと思います。動画の18:42~を見直してみてください。
      昔作った動画ということもあり不親切な部分もあるかと思うので、その場合はまた連絡ください。

    • @rock8477
      @rock8477 3 года назад

      @@heron-no-suugaku さん
      ありがとうございました!!!正常に動作しました。これからもヘロンさんの動画を見ながら精進していきます。

  • @styx9305
    @styx9305 4 года назад

    数学少しでもちゃんとやっておけば良かった.....

  • @mipr9232
    @mipr9232 4 года назад

    Que verga