오늘은 어제 만든 프로그램을 간단하게 디벨롭~^^* 해보겠습니다~^^*
어제 코드 내용이 많아서, 공부 내용이 좀 많았었는데요.
오늘은 아주 살짝만 디벨롭해서 멋진 아이스댄스 공연을 펼쳐 보이도록 하겠습니다~^^*
금요일이니까 댄스댄스~~~여름이니까 아이스아이스~~~^^*
어제 스프링으로 연결된 두 입자를 만들어 보았는데요.
오늘은 우리가 그 두 입자 중 하나의 위치를 마우스/손가락으로 조절하여, 멋진 커플댄스를 만들어 보는 거예요~~~^^* 재미있겠지요~~~^^*
아래의 동영상 강의를 클릭하시면 오늘 공부내용을 바로 시작(23:40)할 수 있어요~~^^* 24:15까지 보시면 오늘 공부 끝~~^^*
아래의 간단한 코드를 어제 만든 프로그램에 더해 보도록 하겠습니다~^^*.
if (mouseIsPressed) {
bob.position.set(mouseX, mouseY);
bob.velocity.set(0,0);
}
//마우스/손가락을 화면 위에 클릭/터치하면, 그 위치의 x,y좌표값이 입자 bob의 위치 좌표가 됩니다.
//입자 bob의 운동속도는 0으로 재세팅됩니다. 그리고, 빙판 위의 마찰력을 반영하여, 입자의 운동속도를 점차 줄여나가겠습니다~^^*.
this.velocity.mult(0.99);그럼, 코드를 한 번 살펴 보시죠~~^^* 어제 코딩 내용의 복습을 겸해서, 어제 주석 내용을 그대로 남겨 보았습니다~~~^^*
<!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 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.mult(0.99);
//빙판 위의 마찰력을 반영하여, 입자의 운동속도를 점차 줄여나가겠습니다.
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, 12);
//피겨 스케이트 선수들은 날씬하니까, 입자 크기를 작게 만들어 보겠습니다.
}
}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);
}
}let bob;
let anchor;
let spring;
let restLength = 50;
//친밀한 커플 댄스를 표현하기 위해, 스프링의 원래 길이를 50으로 짧게 설정해 보았습니다~~^^*.
let k = 0.005;
//빙판 위를 시원하게 미끄러지는 아이스댄스를 표현하기 위해, 스프링의 탄성계수를 0.005로 작게 잡아 보았습니다~~^^*.
let gravity;
function setup() {
createCanvas(400, 400);
bob = new Particle(100, 200);
anchor = new Particle(200, 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 파일을 열어 살펴 보셔도 좋겠지요~~^^*
if (mouseIsPressed) {
bob.position.set(mouseX, mouseY);
bob.velocity.set(0,0);
}
//마우스/손가락을 화면 위에 클릭/터치하면, 그 위치의 x,y좌표값이 입자 bob의 위치 좌표가 됩니다.
//입자 bob의 운동속도는 0으로 재세팅됩니다.
}은반 위 두 천사의 아름다운 날개짓을 그려내는 안무가의 손끝이 되어 멋진 공연을 탄생시켜 보셔요~~~^^*
점심 맛있게 드셔요~~^^*
라벤더 향기 품은 얼음을 입안에 하나 머금어 보셔도 좋을 여름입니다~^^*
오늘도 저와 함께 코딩공부 해 주셔서 감사합니다~^^*
내일도 우리 재미난 코드 함께 만들어 볼까요~~^^*
네!! 꿈은 이루어 집니다!!!
Silverback9 
댓글 남기기