오늘은 스프링에 달린 진자 표현 프로그램으로 돌아가 볼게요.
이번에는, 진자를 잡고 있는 지지대를 진자와 같은 성질을 가진 물체로 바꾸어 보도록 할게요.
네, 진자와 지지물체를 같은 종류의 물체로 정의할 테니, Class 개념이 필요하겠지요?
그리고, 진자와 지지물체 사이를 연결하는 스프링도 하나의 독립된 성질을 가진 Class로 정의해 보겠습니다.
어제 우리가 공부한 입자 개념을 진자와 지지물체에 적용해 보도록 하구요~^^*
아래 동영상을 클릭하시면 오늘 공부 내용을 바로 시작(13:53)하실 수 있어요~^^* 24:16까지 보시면 오늘 공부 끝~^^*
근데요~~^^*
제가 오전에 일이 좀 있어서, 공부 정리를 오후에 다시 하도록 할게요.
요 포스팅 페이지로 다시 돌아올게요~~^^*
쫌따 이 페이지에서 다시 만나요~~~^^*
즐거운 오전 보내시구요~~~^^*
See you soon~~^^*
네, 오늘 오후 즐겁게 보내셨나요~~^^*
오늘은 두 가지 종류의 클래스 정의를 각각의 파일에 담고, 이 파일들을 메인 프로그램과 연결하는 단계까지 있어서, 코드 파일이 4 개나 되어요! 와우!
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/p5.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.4/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="utf-8" />
</head>
<body>
<main>
</main>
<script src="spring.js"></script>
<script src="particle.js"></script>
<script src="sketch.js"></script>
</body>
</html>class Spring {
constructor(k, restLength, a, b){
this.k = k;
this.restLength = restLength;
this.a = a;
this.b = b;
}
update(){
let force = p5.Vector.sub(this.b.position, this.a.position);
// 벡터 b 입자에서 벡터 a 입자를 뺍니다.
// 벡터 force의 방향은 입자 a에서 입자 b으로 향합니다.
let x = force.mag() - this.restLength;
force.normalize();
force.mult(this.k*x);
this.a.applyForce(force);
// 벡터 force의 방향이 이미 입자 a에서 입자 b로 향하고 있으므로, 탄성계수 k * 거리 x를 그대로 씁니다.
// 입자 a가 입자 b로 향하는 힘입니다.
force.mult(-1);
this.b.applyForce(force);
//입자 b가 입자 a로 향하는 힘을 표현하기 위해서, 벡터 force에 -1을 곱하여, 힘의 방향을 바꿉니다.
// 두 입자 a, b가 스프링으로 연결되어 서로를 향한 힘을 가지고 있습니다.
}
show(){
strokeWeight(4);
stroke(255);
line(this.a.position.x, this.a.position.y, this.b.position.x, this.b.position.y);
}
}class Particle{
constructor(x,y){
this.acceleration = createVector(0,0);
this.velocity = createVector(0,0);
this.position = createVector(x,y);
this.mass = 1;
}
applyForce(force){
let f = force.copy();
f.div(this.mass);
this.acceleration.add(f);
// F = M * A를 적용하여, A = F / M 관계를 사용합니다.
// f = F / M 하여, f를 가속도에 더합니다.
}
update() {
this.velocity.add(this.acceleration);
this.position.add(this.velocity);
this.acceleration.mult(0);
// 가속도가 속도에 영향을 주고
// 속도가 위치에 영향을 준 뒤
// 가속도는 0로 재세팅합니다.
// 함수 draw()는 무한반복하기 때문에, 가속도가 force의 변화가 없는데도 중첩증가하지 않는 장치가 필요합니다: 가속도 재세팅!
}
show(){
stroke(255);
strokeWeight(4);
fill(127, 255, 127);
ellipse(this.position.x, this.position.y, 64, 64);
}
}let bob;
let anchor;
let spring;
let restLength = 200;
let k = 0.01;
let gravity;
function setup() {
createCanvas(400, 400);
bob = new Particle(100, 300);
anchor = new Particle(300, 100);
spring = new Spring(k, restLength, bob , anchor);
gravity = createVector(0, 0.1);
// 입자 class인 bob과 anchor를 생성하고, 스프링 class인 spring을 생성합니다.
// 아래로 향하는 벡터 중력을 생성합니다.
}
function draw() {
background(220);
spring.show();
spring.update();
bob.show();
bob.update();
anchor.show();
anchor.update();
// 스프링과 두 입자는 class 자체에 정의된 함수들에 의해 자신의 이를 합니다.
// 자세한 내용은 spring.js 파일과 particle.js 파일을 열어 살펴 보셔도 좋겠지요~~^^*
}오늘은 코드 내용이 좀 많았죠~~^^* 스프링에 달린 진자 프로그램의 내용을 진자 클래스와 스프링 클래스 안에 나누어 담은 프로그램을 만들어 본 것 같아요~~^^*
오후 시간 동안 코딩 공부 정리를 완성하도록 곁에서 기다려 주셔서 감사합니다~^^*
내일도 우리 코딩 공부 함께 해요~~^^*
네!!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기