오늘은 만유인력의 법칙을 간단하게 프로그램으로 표현해 보겠습니다. attractor 동그라미에게 mover 동그라미가 끌어당겨지는 모습을 프로그램으로 표현해 볼게요~^^*
아래 동영상 강의를 10:13까지 보시면 되어요~^^* 노트도 함께 참고해 보셔도 좋겠죠? 코드의 자세한 설명은 주석을 참조해 보셔요~^^*
하나. attractor 동그라미 클래스를 정의하는 attractor.js 파일을 만듭니다.
(1) 벡터 뺄셈 함수 sub()을 사용하여, mover 동그라미와 attractor 동그라미 사이의 방향과 거리를 가진 벡터 force를 생성합니다.
(2) 거리값을 제곱합니다.
(3) 중력상수를 설정합니다.
(4) mover와 attractor의 질량을 곱하고, 중력상수를 곱하고, 거리값 제곱으로 나눈 결과를 벡터 force의 크기값으로 재설정합니다.
(5) 이제 mover와 attractor 사이의 인력의 방향과 크기값을 갖게 된 벡터 force를 mover에 작용하는 힘의 총합에 더합니다.
둘. attractor.js 파일을 연결하기 위해, index.html에 파일 연결문을 추가합니다.
셋. sketch.js 파일에서 mover와 attractor를 생성하고 관련 함수들을 호출합니다.
class Attractor{
constructor(x, y, m){
this.pos = createVector(x,y);
this.mass = m;
this.r = sqrt(this.mass)*10;
}
attract(mover){
let force = p5.Vector.sub(this.pos, mover.pos);
//attractor 동그라미 벡터에서 mover 동그라미 벡터를 뺀 결과를 벡터로 만들어 변수 force에 저장합니다.
//mover 벡터가 attractor 벡터로 향하는 방향을 diraction으로 가지고mover 벡터와 attractor 벡터 사이의 거리를 magnitude로 가진 벡터 force가 생성됩니다.
let distanceSq = force.magSq();
//force 벡터의 magnitude의 제곱 즉 mover 벡터와 attractor 벡터 사이의 거리의 제곱값을 distanceSq라는 변수에 저장합니다.
let G =50;
//universal gravitational constant는 50으로 임의로 설정해 봅시다.
let strength = G*(this.mass*mover.mass)/distanceSq;
// 인력의 힘의 크기 G*(m1*m2)/d*d 공식에 맞추어 atrractor 동그라미의 질량과 mover 동그라미의 질량을 곱하고, 중력상수를 곱하고, 동그라미 사이의 거리의 제곱으로 나눈 결과를 변수 strength에 저장합니다.
force.setMag(strength);
// 인력의 힘의 크기값을 나타내는 strength를 벡터 force의 크기값으로 설정합니다.
//이제 벡터 force는 mover 동그라미와 attractor 동그라미 사이의 인력의 방향(mover->attractor)과 크기(G*(m1*m1)/d*d)를 가지게 되었으므로, 두 동그라미 사이의 인력을 나타내게 됩니다.
mover.applyForce(force);
// mover 동그라미와 attractor 동그라미 사이의 인력인 force 벡터를 mover 동그라미에게 작용하는 힘의 총합에 더합니다.
}
show(){
fill(255);
ellipse(this.pos.x, this.pos.y, this.r*2);
}
}
class Mover{
constructor(x,y,m){
this.pos = createVector(x,y);
this.vel = createVector(0,0);
this.acc = createVector(0,0);
this.mass = m;
this.r = sqrt(this.mass)*10;
}
applyForce(force){
let f = p5.Vector.div(force, this.mass);
this.acc.add(f);
}
update(){
this.vel.add(this.acc);
this.pos.add(this.vel);
this.acc.set(0,0);
}
show(){
stroke(255);
strokeWeight(2);
fill(255, 100);
ellipse(this.pos.x, this.pos.y, this.r*2);
}
}let mover;
let attractor;
function setup() {
createCanvas(400, 400);
mover = new Mover(50,50,5);
attractor = new Attractor(200,200,5);
}
function draw() {
background(0);
mover.update();
mover.show();
attractor.attract(mover);
attractor.show();
}<!DOCTYPE html>
<html lang="en">
<head>
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/p5.js
https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.1/addons/p5.sound.min.js
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
http://attractor.js
//attractor.js 파일을 연결합니다.
http://mover.js
http://sketch.js
</body>
</html>Attract 끌어당기다 Attractor 끌어당기는 사람(것) Attraction 끌어당김 매력
Attraction 그룹 그리고 Attraction Junior 그룹의 공연에 Attracted 매료되어 (끌어당겨져) 볼까요?
재능을 갈고 닦아 변화를 만들어 내는 것에 참여한다는 것은 나이에 상관없이 멋진 일인 것 같아요~^^* 우리도 자신의 소중한 재능들을 발굴하고 갈고 닦아 세상의 변화에 기여할 수 있기를 함께 믿어 봐요^^*
오늘도 함께 공부해 주셔서 감사합니다~^^*
넵! 꿈은 이루어 집니다!!
Silverback9 
댓글 남기기