JavaScriptで簡単な物理エンジンをつくる方法-パート1

16819 ワード

showdev webdev tutorial javascript テキストリンク

我々は物理学を使用して、我々は行動の物理学を参照してください、私たちは私たちの日常生活の中で行うすべての物理を経験する.どのようにあなたのコードに物理学を追加し、コードも自然の力を体験するのですか?それが私が物理エンジンに関する記事についてあなたに説明することです.

物理エンジンとは何か

それはあまり複雑ではない.それはすべての物理学の関連機能のコレクションです.

物理エンジンは何をするか？

物理エンジンは、任意のコード内のオブジェクトに物理学をシミュレートします.

何が物理エンジンをコードする必要がありますか？

答えは数学だ

はい、すべてを知る必要がある基本的な数学といくつかの簡単な物理学の用語であり、あなたの最初の物理エンジンを作成するあなたの方法にしています.
その基礎から始めましょう.あなたがあなたの目的を［あなたのボールを想像しましょう］他の物(壁を想像しましょう)と反応することを望む場面をつくっていると想像してください.
さて、それを達成する最も明白な方法は、それをコーディングするのが難しいでしょう.でも、どこで楽しいのでしょう.ディー
我々は、我々が彼らに投げるすべてと対話する我々の要素を必要とします.
それは、羽、岩、象、基本的にどんなオブジェクトでもありえました.だから、ちょうどそれを取得し、どのようにあなた自身の物理エンジンを構築することができますを示しましょう.
あなたが始める必要があるもの

コードエディタ

物理方程式

1 .コードエディタ

我々はJavaScriptでコーディングされ、これらのすべてのアニメーションは、我々はJSを使用する場合は、キャンバスを使用して良いです.それで、これらのために使用する最高のライブラリはp 5です.js
P 5は、描画するためにすべての機能を持っているシンプルで驚くべきJavaScriptライブラリです、または移動するか、最も簡単な方法であなたのコード要素をしたいことは何でもします.Here はp 5から始めるために使えるリソースです.
続いて、コードエディターのセットアップを開始します.
ステップ1https://editor.p5js.org/ (既にアカウントを持っている場合はサインアップかログインしてください)、そしてワークスペースでコーディングを開始します.
ステップ2 : AAANDを行います.それです.

物理方程式

あなたたちはまだあなたの学校の物理学の本が横たわっている願っています.我々はまた、我々が欲しい任意の物理式のWikipediaを参照することができます.この部分のために、我々は運動のような単純な概念について話します.我々はWebエディタを使用しているので、我々は何も設定する必要はありません.p 5.JSのウェブエディタはすべての世話をする.
p 5.jsも同じJavaScriptコーディング規約に従います.それで、あなたがウェブ概念に慣れているならば、それから、Hurrah!あなたはほとんどそこにいる.
新しい人のために、私はエディタのクイックウォークスルーを介してあなたを取ることができます.

これが編集者です.それは2つの半分に分けられます.コーディングワークスペースとプレビュー領域.(画面が違っているか心配しないでください.
あなたのエディタで見た要素から始めましょう

メニューバー

起動と停止

オートリフレッシュ

名称

設定

プロジェクトフォルダ

コーディングスペース

プレビュー

メニューバー
あなたが他のエディタで表示されるように標準的なメニューバー.今のところ、file -> newを知る必要があります.これは新しいプロジェクトを作成します.
起動と停止:
ボタンをコンパイルし、コードを実行し、プレビュータブでプレビューします.停止はコンパイルを停止します.
自動更新
私は自動リフレッシュを使用しないが、それは他の人に便利かもしれない.オートリフレッシュは、実行中にコードを変更するとプレビューを更新します.
名前
プロジェクトの名前です.P 5のエディタでは、維持するか、お客様のニーズに応じて変更することができます変なランダムな名前を提供します.
設定
あなたはそれを推測し、すべての小さな微調整は、あなた自身のエディタを自分で作るための設定の下でご利用いただけます.
プロジェクトフォルダ:
すべてのプロジェクトファイルがプロジェクトフォルダの下に配置されます.あなたがする必要がある場合は、別のフォルダを追加することができますが、今このために簡単にしてファイルを追加するに固執しよう.
コーディングスペース
ここではすべての魔法が発生します.すべてのコードとロジック一緒に傑作を形成するために撮影されます.
プレビュー
ここでは、あなたの傑作は、生活に来て表示されます.
さらに進む前に、プロジェクトフォルダの下の3つのデフォルトファイルを議論しましょう
インデックス.HTML -これはWebAppの起動です.これはあなたのスクリプト(js)ファイルとスタイル(css)ファイルをリンクする場所です.

スタイル.CSS -これは、HTMLファイルまたはJSファイルで使用される要素のすべてのスタイルプロパティを変更するスタイルシートとして知られています.

スケッチ.これは私たちが興味を持っていると私たちがより多くのプログラミングされ、これは基本的に私たちのキャンバスの出発点です.

デフォルトでは、スケッチ.JSは、あなたを始めるために、Boilerplateテンプレートをあなたに提供します.
それぞれの意味を解読しましょう.

1 . setup ()

function setup() {
  createCanvas(400, 400);
}

セットアップ機能は、コードコンパイルの開始時に一度呼び出されます.
CreateCanvas指定した幅と高さのプレビューでキャンバスを作成します.

2 . draw ()

function draw() {
  background(220);
}

Draw関数は、キャンバスまたは要素の本体のタイムスタンプごとに呼び出されます.Draw関数は、オブジェクトへの変更を更新するときに特に便利です.
最初の例から始めましょう.

新しいプロジェクトから始める

を選択します.これによりファイル名が表示されます.ファイルとして“ボール”を入力し、ファイルをプロジェクトフォルダの下に表示されます.

我々のボールにコードを加えましょう.js

class Ball {
  constructor() {
    this.location = createVector(width / 2, height / 2);
    this.velocity = createVector(2, 3);
  }

  display() {
    fill(255);
    ellipse(this.location.x, this.location.y, 40, 40);
  }

  move() {
    this.location.add(this.velocity);
  }

  bounce() {
    if (this.location.x < 20 || this.location.x > width - 20) {
      this.velocity.x = this.velocity.x * -1;
    }
    if (this.location.y < 20 || this.location.y > height - 20) {
      this.velocity.y = this.velocity.y * -1;
    }
  }
}

何が起こっているのですか.混乱右?ここで何が起こっているのか説明しましょう.
クラスボールにいくつかの機能を持つクラスボールを作成しました.かなりシンプルな権利.そして、すべての数学と混乱しないでください.

constructor(){
  this.location = createVector(width/2,height/2);
  this.velocity = createVector(2,3);
}

我々はちょうど2ベクトルを作成するコンストラクターを使用している.数学のベクトルはXとY値(または定義に従って大きさと方向)を持つオブジェクト以外の何ものでもありません.グラフにプロットするために使用するポイントと同じように、我々は座標系に関してオブジェクトを描画します.
この場合、我々はキャンバスに関連して我々のオブジェクトの位置を追跡して、我々がオブジェクトが動いている方法を速く追跡する速度のためにもう一つのベクトルを作成する位置ベクトルをつくるでしょう、速度はあなたが右に動いている方法であるので、右?

display(){
  fill(255);
  ellipse(this.location.x,this.location.y,40,40)
}

私たちのボールオブジェクトをキャンバスに表示しましょう.ディスプレイと呼ばれるユーザ定義関数を作成し、楕円を描画します.楕円は、P 5の定義済みの形です.js我々は円が欲しいので、我々は楕円のために同じ半径を通過します.コンストラクタ関数で作成した位置ベクトルを使って楕円を表示します.

move(){
  this.location.add(this.velocity);
}

速度に関してボールオブジェクトを動かしましょう.したがって、位置X 1、Y 1の他の場所X 1、Y 2に到達したオブジェクトは、何らかの速度でX 2、Y 2に到達しなければならない.そこで位置ベクトルに一定速度を加えます.それで、あらゆるタイムスタンプのために、我々は最後の位置と速度の合計である新しい場所を得ます.

bounce(){
  if(this.location.x<20 || this.location.x>width-20){
    this.velocity.x = this.velocity.x*-1;
  }
  if(this.location.y<20 || this.location.y>height-20){
    this.velocity.y = this.velocity.y*-1;
  }
}

少しだけ面白いことを作るために、このバウンス機能を追加しましょう.すべてのキャンバスの境界線を探しているとキャンバスの中にボールを保持します.
ボールが実際の生活の壁にヒットすると、壁はボールに等しい力を発揮しますが、ボールは壁よりも軽い方法であるので、それは移動するか、バウンスバックし、壁がご利用いただけます.
コードでは、境界はボールをプッシュすることはできませんので、代わりに我々はそれが任意の境界に触れるたびに反対方向に移動するようにボールの速度を否定します.シンプル・ライト.
今すぐスケッチにいくつかのコードを追加しましょう.js

let ball;

function setup() {
  createCanvas(600, 600);
  ball = new Ball();
}

function draw() {
  background(0);
  ball.move();
  ball.bounce();
  ball.display();
}

セットアップ関数でボールクラスのインスタンスを作成するために、ボール変数を作成しましょう.今ボール変数は、ボールのクラスが持っているすべての機能にアクセスすることができます.
すべての描画ループについては、ボールが移動され、バウンスのためのボールオブジェクトのチェックと変更の場所とし、ボールオブジェクトは、ループタイムスタンプ内の場所に表示されます.
そして、それは右側ですか?ボタンをクリックし、すべてを開始?正しい?
いや!ここでは、共通の間違いはすべてのプログラマのために発生します.私はなぜそれが実行していない理由を探して私の時間の時間を費やしている.これが理由です.