오늘은 동그라미를 두 개를 만들어 볼게요. 먼저 질량 1인 동그라미 두 개를 만들어 보겠습니다. 질량이 1이면, Acceleration = Net Force인 것 기억하시죠? 그래서 동그라미 질량값을 저장하는 변수를 만들지 않고, 이제껏 한 것처럼 힘의 총합을 바로 가속도로 사용할게요~. 동그라미 두 개를 생성하는 것을 제외하면, 어제의 코드와 구성이 같다고 보시면 될 것 같아요~^^*
아래 동영상을 클릭하셔서 1:40까지 보시면 되어요~^^*
class Mover{
constructor(x,y){
this.pos = createVector(x,y);
this.vel = createVector(0,0);
this.acc = createVector(0,0);
this.r = 16;
}
applyForce(force){
this.acc.add(force);
}
edges(){
if(this.pos.y >= height - this.r){
this.pos.y = height - this.r;
this.vel.y *= -1;
}
if(this.pos.x >= width - this.r){
this.pos.x = width - this.r;
this.vel.x *= -1;
} else if(this.pos.x <= this.r){
this.pos.x = this.r;
this.vel.x *= -1;
}
}
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 moverA;
let moverB;
//동그라미를 두 개 만들어 봅시다.
function setup() {
createCanvas(400, 400);
moverA = new Mover(100,200);
moverB = new Mover(300,200);
//동그라미가 캔버스 왼쪽과 오른쪽에 나란히 위치합니다.
}
function draw() {
background(0);
if(mouseIsPressed){
let wind = createVector(0.1, 0);
moverA.applyForce(wind);
moverB.applyForce(wind);
// 동그라미들에게 바람을 후~ 불어 봅시다.
}
let gravity = createVector(0,0.2);
moverA.applyForce(gravity);
moverA.update();
moverA.edges();
moverA.show();
moverB.applyForce(gravity);
moverB.update();
moverB.edges();
moverB.show();
// 중력의 영향을 받고 바닥과 벽에 반응하는 동그라미들의 움직임을 표현해 봅시다.
}
오늘은 월요일을 준비하는 가벼운 마음으로 짧게 공부하고 마치도록 할게요. 일요일 저녁에 무언가를 시작하면 월요일을 맞이하는 기분이 가벼워 지는 것 같아요. 그리고…앞으로는 월요일에 쉬지 않고 목요일에 쉬도록 할게요. 목요일이 좀 바쁜 날이라서 코딩공부 시간이 좀 부족한 것 같아서요. 그럼 우리 내일 또 만나요~^^* 아 참, 활기찬 월요일 아침을 준비하며, 둘이 된 동그라미들을 축하하며, 둘이 살짝 손잡고 율동 타임 한 번 가질까요~, 우리~^^*?
월요일을 기다리는 마음이 즐거워지는 밤이예요~ 넵! 꿈은 이루어 집니다!!
댓글 남기기