Javascript로 간단한 물리 엔진을 만드는 방법 - 제1부분

우리는 물리를 사용한다. 우리는 물리가 작용하는 것을 보고 일상생활에서 하는 모든 일에서 물리를 체험한다.당신은 어떻게 물리를 당신의 코드에 추가하여 당신의 코드도 대자연의 힘을 체험할 수 있습니까?이것이 바로 내가 물리 엔진에 관한 글에서 너희들에게 설명할 내용이다.

무엇이 물리 엔진입니까?

복잡하지 않아요.이것은 모든 물리적 관련 기능을 포함하는 집합이다.

물리 엔진은 무엇을 합니까?

물리 엔진은 모든 코드의 대상의 물리를 시뮬레이션합니다.

물리 엔진을 작성하려면 무엇이 필요합니까?

정답은 수학입니다.

그래, 기본적인 수학과 간단한 물리 용어만 알면 첫 번째 물리 엔진을 만들 수 있어.
기초부터 시작합시다.상상해 보세요. 당신이 장면을 만들고 있습니다. 당신의 대상이 [공을 상상하라] 다른 대상과 [벽을 상상하라] 반응을 일으키기를 바랍니다.
응, 이 점을 실현하는 가장 뚜렷한 방법은 그것을 하드코딩하는 것이다.그런데 그중의 즐거움은 어디에 있을까요?D
우리는 우리의 요소와 우리가 그들에게 던진 모든 상호작용이 필요하다.
그것은 깃털 하나, 돌 하나, 코끼리 한 마리가 될 수 있다. 기본적으로 어떤 물체든지... 그래, 나는 이 모든 것에 약간 혼란스러워하는 것 같아.그러면 계속해서 자신의 물리 엔진을 구축하는 방법을 보여 드리겠습니다.
당신이 시작해야 할 일:

코드 편집기

물리 방정식

1. 코드 편집기

우리는javascript를 사용하여 인코딩을 할 것입니다. 만약에 우리가 JS를 사용한다면 이 모든 애니메이션들은 캔버스를 사용하는 것이 더 좋습니다.따라서 이를 위한 가장 좋은 라이브러리는 p5입니다.js.
p5는 간단하고 신기한javascript 라이브러리로 모든 함수를 가지고 있으며, 가장 간단한 방식으로 코드 요소로 하고 싶은 일을 그리거나 이동하거나 할 수 있습니다.Here는 아주 좋은 자원입니다. p5를 사용하기 시작할 수 있습니다.
다음은 코드 편집기의 설정부터 시작합니다.
단계 1: https://editor.p5js.org/ (등록 또는 로그인, 계정이 있는 경우) 로 이동하여 작업공간에서 인코딩을 시작합니다.
두 번째 단계:aa, 우리는 완성했다.그렇습니다.

2. 물리 방정식

너희 학교의 물리책이 아직 남아 있기를 바란다.우리도 위키백과에서 우리가 원하는 어떤 물리 공식도 찾을 수 있다.이 부분에서 우리는 운동과 같은 간단한 개념을 토론할 것이다.웹 편집기를 사용하기 때문에 어떤 내용도 설정할 필요가 없습니다.p5.js 웹 편집기는 모든 일을 처리합니다.
p5.js도 같은javascript 인코딩 약속을 따릅니다.그러니 인터넷 개념에 익숙해지면 환호하라!곧 도착할 거야.
초보자에 대해 내가 너를 데리고 편집자를 빨리 훑어보게 할게.

편집자입니다.그것은 반으로 나뉜다.작업 영역과 미리 보기 영역을 인코딩합니다.(화면이 달라 보이면 걱정하지 마세요. 방금 주제를 바꿨어요.)
편집기에서 볼 수 있는 요소부터 시작합니다.

Menubar

부팅 및 중지

자동 새로 고침

이름

설정

프로젝트 폴더

인코딩 공간

미리보기

메뉴 모음:
다른 편집기에서 볼 수 있는 표준 메뉴 모음입니다.지금 우리는 파일을 알아야 합니다. -> 새로 만들기.이것은 새 프로젝트를 만들 것입니다.
시작 및 중지:
시작 버튼은 코드를 컴파일하고 실행하며 미리 보기 탭에서 코드를 미리 봅니다.중지하면 컴파일이 중지됩니다.
자동 새로 고침: [권장하지 않음]
비록 나는 자동 리셋을 사용하지 않지만, 그것은 다른 사람들에게 매우 편리할 것이다.코드를 실행할 때 코드를 변경하면 자동으로 새로 고치면 미리보기가 새로 고쳐집니다.
이름:
항목의 이름입니다.p5 편집기는 재미있는 랜덤 이름을 제공합니다. 보존하거나 필요에 따라 변경할 수 있습니다.
설치:
모든 작은 조정은 설정에서 사용할 수 있습니다. 편집기를 자신의 편집기로 만들 수 있습니다.
프로젝트 폴더:
모든 프로젝트 파일은 프로젝트 폴더 아래에 있습니다.필요하면 다른 폴더를 추가할 수 있지만, 이제 파일 하나만 간단하게 추가합시다.
인코딩 공간:
이곳은 모든 마술이 일어나는 곳이다.당신의 모든 코드와 논리가 함께 휘저어 걸작을 형성할 것입니다.
미리 보기:
이곳에서 너는 너의 걸작이 마치 살아 있는 것처럼 생생하게 보이는 것을 볼 수 있다.
계속하기 전에 프로젝트 폴더 아래의 기본 파일 3개를 토론합시다
지수html-이것은 웹앱의 시작이다.스크립트(JS) 파일과 스타일(CSS) 파일을 연결하는 곳입니다.

풍격css - 이것은 스타일시트라고 합니다. html 파일이나 js 파일에 사용되는 모든 요소의 모든 스타일 속성을 수정합니다.

스케치js-이것은 우리가 흥미를 느끼는 하나이다. 우리는 그 중에서 더 많은 프로그래밍을 진행할 것이다. 이것은 기본적으로 우리가 캔버스를 그리는 출발점이다.

기본적으로 그립니다.js는 입문을 돕는 템플릿을 제공합니다.
우리 하나하나의 뜻을 복호화하자.

1. 설정()

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

setup 함수는 코드 컴파일이 시작될 때 한 번 호출됩니다.
createCanvas는 미리 보기에서 지정한 너비와 높이에 따라 캔버스를 만듭니다.

2, 그리기 ()

function draw() {
  background(220);
}

캔버스나 원소 주체의 시간 스탬프에draw 함수를 호출합니다.드로잉 함수는 객체에 대한 변경 사항을 업데이트할 때 특히 유용합니다.
첫 번째 예부터 시작합시다.

신규 프로젝트 시작

스케치 -> 파일 추가를 선택합니다.파일 이름을 알려 줍니다.파일 이름으로 Ball을 입력하면 해당 파일이 프로젝트 폴더 아래에 나열됩니다.

공에 코드를 추가합시다.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);
}

우리는 구조 함수를 사용하여 두 개의 벡터만 만들었다.수학의 벡터는 x와 y 값(또는 정의된 크기와 방향)을 가진 대상에 불과하다.당신이 도형에 그리는 점처럼 우리는 좌표계에 관한 대상을 그릴 것입니다.
이런 상황에서 우리는 위치 벡터를 만들 것이다. 추적 대상을 화포의 위치와 비교하고, 우리는 또 다른 속도 벡터를 만들 것이다. 이것은 대상이 이동하는 속도를 추적할 것이다. 왜냐하면 속도는 당신이 이동하는 속도이기 때문이다. 그렇지?

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

캔버스에 공 대상을 표시합시다.디스플레이라는 사용자 정의 함수를 만들고 타원을 그릴 것입니다.타원은 p5의 미리 정의된 형태입니다.js.우리는 원을 원하기 때문에 타원에 대해 같은 반경을 전달한다.구조 함수에 생성된 위치 벡터를 사용하여 타원을 표시합니다.

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

속도를 기준으로 공 객체를 이동합니다.따라서 어느 위치가 x1, y1인 물체는 다른 위치x2, y2에 도달하려면 일정한 속도로 이동해야 x2, y2에 도달할 수 있다.따라서 우리는 위치 벡터에 고정 속도를 추가할 것이다.따라서 매 시간 스탬프에 대해 우리는 새로운 위치, 즉 마지막 위치와 속도의 총계를 얻을 수 있다.

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;
  }
}

이 반등 함수를 추가해서 일을 더욱 재미있게 합시다.그것이 한 것은 단지 화포의 경계를 찾고 공을 화포 안에 유지하는 것이다.
현실 생활에서 공이 벽에 부딪혔을 때 벽은 공에 동등한 힘을 가하지만 공이 벽보다 훨씬 가볍기 때문에 이동하거나 반등하며 벽은 변하지 않는다.
코드에서 우리는 경계로 공을 움직일 수 없기 때문에 반대로 우리는 공의 속도를 상쇄하여 그 어떠한 경계에 접촉할 때 반대 방향으로 이동시킬 것이다.간단해요. 맞아요.
이제 초도에 코드를 추가합시다.회사 명

let ball;

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

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

setup 함수에서 ball 클래스의 실례를 만드는 ball 변수를 만듭니다.현재 볼 변수는 볼 클래스가 가지고 있는 모든 함수에 접근할 수 있습니다.
각 드로잉 사이클의 경우 공이 이동되고 볼 객체가 반동을 확인하고 위치를 변경한 다음 루프 타임 스탬프에 볼 객체의 위치를 표시합니다.
모든 것이 끝났지, 그렇지?Run 버튼을 누르면 모든 것이 시작됩니까?정당하다
아니!!!여기는 모든 프로그래머들이 범하는 흔한 실수입니다.심지어 나도 그것이 왜 작동하지 않는지 찾는 데 몇 시간을 썼다.원인은 다음과 같다.

색인에 있는 스크립트에 js 파일을 추가하는 것을 영원히 잊지 마십시오.html.
이제 준비 다 됐어!!!계속해서 Run 단추를 누르면 첫 번째 물리 시뮬레이션 프로그램이 있습니다.
다음과 같은 내용을 볼 수 있습니다.

이것이 바로 너의 첫 번째 물리 엔진이다.다음 단계에서, 우리는 어떻게 그것을 더욱 현실적으로 보이게 할 것인가에 대해 토론할 것이다.계속해, 이런 가치관을 가지고 놀아봐.

이 시리즈의 두 번째 부분에서 우리는 다음과 같이 토론할 것이다.

1. 가속도

2. 힘

3. 품질