Silverback9

상쾌한 아침입니다. 지금은 6시40분입니다. 바로 공부 시작해 볼게요~ 오늘은 서로 다른 크기의 동그라미 여러 개를 생성하여 그 각각의 동그라미들이 마찰에 반응하는 모습을 프로그램으로 만들어 볼게요. 아래 동영상을 클릭하시면 오늘 공부내용을 바로 시작(8:15)하실 수 있어요~^^*

음…여러 개의 동그라미들이라….. 배열이라고 들어보셨어요? 혹시 낯설거나 아스라한 느낌이 드시는 분은 배열에 대한 기초강의를 먼저 되짚어 살펴 보셔도 좋을 것 같아요~^^*

하나. 배열을 사용할 때 자연스럽게 함께 사용하게 되는 반복구조에 대해 복습해 보고요~^^*

둘. 배열에 대해 살펴 보고요~^^*

셋. 배열과 반복구조를 사용하는 것에 대해 살펴 보고요~^^*

넷. 클래스를 정의하여 객체를 생성하고 배열에 담는 것을 살펴 보고요~^^*

다섯. java script의 특징사항이기도 [for … of loop] 구문 사용법을 살펴 볼게요~^^*.

네, 오늘 공부는 함께 확인해 보면 좋을 기초 내용이 좀 많지요? 여유있게 살펴 보시고 오늘의 공부에 점프해 보아요~^^* 동영상 보시는 동안, 저는 코드 정리해서 다시 돌아올게요. 잠시 후에 우리 또 만나요~^^*

넵, 코드를 완성해서 돌아왔습니다~^^* 기다려 주셔서 감사합니다~^^*

하나. 여러 개의 동그라미들을 담을 배열 구조 변수 movers를 준비해 봅시다.

둘. 동그라미들이 동일한 마찰계수를 가지도록, class 안에서 마찰계수를 정의한 문장은 지우고, 메인함수 제일 위 부분에 global 변수 mu가 마찰계수를 저장하도록 해 볼게요.

셋. [for 구문]을 사용하여 열 개의 동그라미를 동일한 높이와 캔버스 범위 안 다양한 좌우 위치에서, 1~8 범위 안의 다양한 크기로 생성하여 배열 구조 변수 안에 순차적으로 담을게요.

넷. [for of 구문]을 사용하여, 배열 안의 모든 동그라미들에 대해 모든 명령문들이 적용되도록 할게요. for of 구문은 java script의 feature~ 우후~^^*

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; 
  }
  
  friction(){
    let diff = height - (this.pos.y + this.r);
    if(diff < 1){
      console.log('friction');
    let friction = this.vel.copy();  
    friction.normalize();    
    friction.mult(-1);
    
      //let mu = 0.1; 클래스 안에서 마찰계수를 정의하던 문장은 지웁니다.  
    
    let normal = this.mass;
    friction.setMag(mu * normal);
    this.applyForce(friction);    
    }
  }
  applyForce(force){  
    let f = p5.Vector.div(force, this.mass);
    this.acc.add(f); 
  }
  
  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 movers = [];
   //배열구조를 가진 movers 변수를 정의합니다.

let mu = 0.1;
   // 모든 동그라미가 동일한 마찰계수를 가지도록 mu는 global 변수로 정희합니다. 

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

  for(i = 0; i <10; i++){
    //배열 movers는 movers[0]부터 movers[9]까지 총 10개의 개체를 가지게 됩니다. 
    
    movers[i] = new Mover(random(width), 200, random(1,8)); 
    //mover[0]부터 mover[9]는 동일한 높이(y= 200)에서, 캔버스 좌우 반경 안의 다양한 수평 위치에서(x = 0 ~ x = width), 1에서 8 사이의 다양한 크기로 생성된 동그라미 객체를 저장하게 됩니다. 
  
  }
}

function draw() {
  background(0);
  
  for (let mover of movers){
    //배열 movers[] 안에 있는 모든 객체 movers[0] ~ movers[9]를 순차적으로 변수 mover에 저장해서 아래에 기술된 모든 명령어들을 그 mover에 대해 실행하도록 합니다. 결국, mover[0] ~ mover[9] 모두에 대해 아래의 명령어들이 작용됩니다. 
    //[for....of...]는 어느 집합 안의 각 개체들을 구체적으로 호칭하지 않고서도 집합내 모든 개체를 따로따로 호칭하는 효과를 가진 java.script 만의 특징적인 문법사항입니다.
    
    if(mouseIsPressed){  
      let wind = createVector(0.1, 0);
      mover.applyForce(wind);
    }
    let gravity = createVector(0,0.2); 
    let weight = p5.Vector.mult(gravity, mover.mass); 
    mover.applyForce(weight);
    mover.friction();
    mover.update();  
    mover.edges(); 
    mover.show();
 }
}

이것을 클릭하여 mover.js 파일과 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 그리고 삼각형을 눌러 프로그램을 실행시켜 보셔요~^^* 마우스를 클릭해 가며 동그라미들에게 바람을 후~후~ 불어 보시기도 하면서 10 개의 다양한 동그라미들의 움직임을 살펴 보셔요~^^* 결국은 모두 움직임을 멈추는 것이 보이나요? 마찰이 모든 동그라미에게 골고루 작용하고 있나요~?^^* 종료를 위해선, 사각형 클릭~^^*

다양한 모습을 한 동그라미들이 하루를 각자 열심히 살고 밤이 되어 휴식하는 아름다운 지구인 같기도 하네요. 아침이 되어 잠깨었으니, 활기차게 오늘 하루를 살아내 볼게요~^^* 소중한 것을 향해 용감하게 순수하게 착실하게 나아가는 하루, 우리 오늘도 만들어 봐요~YEAH!

애니메이션 좋아하시나요? 그러면, 요 버전으로~^^*

꿈은 이루어 집니다!!