Silverback9

오늘은~~~^^*

여러 개의 진자가 용수철들에 의해 연결되어 움직이는 모습을 표현하는 프로그램을!!!

만들기 위한!!!

준비!!!

공부를 하도록 하겠습니다~~~^^*

여러 개의 진자를 각각 하나의 입자로 여길 수 있을 텐데요~^^*

입자 표현을 먼저 공부해서, 그 원리를 진자에 적용해 보도록 할게요~~^^*

흐음…입자라….

어떤 하나의 큰 형태를 구성하는 작은 요소들을 입자라고 한다면…

혹시 STAR WARS 좋아하시나요?

물체의 표면 위에 퍼져나가는 화염을 표현하기 위해,

입자 표현 프로그램이 개발되어 사용되었다고 해요~~

멀리서 보면 하나의 불이 살아서 움직이는 것 같은데, 가까이에서 보면 수 많은 불꽃 입자들이 함께 움직이고 있는 것이죠~~^^*.

네~~~ 예술과 기술은 항상 서로를 빛내어 주어요~~~^^*

아래 동영상을 클릭하셔서 6:50까지 보시면 오늘 공부 끝~~~^^*

새벽에 시냇가를 걷다 보면, 물 속에서 뽀글뽀글 올라오는 공기방울을 볼 때가 있어요~^^*

아마 수질 개선을 위한 장치인 것 같은데요.

신기하고도 예쁘더라구요~~~^^*.

시냇물을 건강하게 지켜주는 귀엽고 예쁜 공기 입자들을 표현해 보겠습니다~^^*

코드 안의 주석을 살펴 보셔도 좋겠지요~^^*

let particles = [];
//공기방울들이 들어갈 배열을 마련해 놓겠습니다~^^*

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

function draw() {
  background(0);

  let p = new Particle();
//클래스 Particle를 하나 만들어서 변수 p에 저장합니다.  
 
  particles.push(p);
//p를 배열 particles에 구성요소로서 넣습니다.   

  for( i = 0; i < particles.length; i++)
//배열 particles의 첫번째 구성요소인 particles[0]부터 마지막 구성요소인 particles[length-1]까지    
    {
      particles[i].update();
      particles[i].show();
      //움직임 내용을 업데이트 하여 보여 줍니다. 
    }
}

class Particle{
  constructor(){
    this.x = 200;
    this.y = 380;
    // 클래스 Particle은 x,y좌표(200, 380)에서 처음 위치합니다.
 
    this.vx = random(-1, 1);
    // 왼쪽 오른쪽 (-1, 1)범위 안에서 x축 운동속도가 무작위로 발생하고

    this.vy = random(-5, -1);
    // 위로만 쭉쭉 (-5, -1)범위 안에서 y축 운동속도가 무작위로 발생합니다.
    // y축은 위로 올라갈 수록 y값이 작아지기 때문에, 마이너스 운동속도를 가지도록 해보겠습니다.

    this.alpha = 255;
    // 시간이 흐르면서 입자가 점점 투명해 지도록 하기 위해 변수 alpha를 마련하고, 처음 값을 255로 설정하여, 처음에는 새하얀 입자로 보이도록 하겠습니다.

  }

  update(){
    this.x += this.vx;
    this.y += this.vy;
    //입자의 x,y 좌표값에 x,y축 운동속도를 더하여, 입자가 오른쪽왼쪽 움직이면서 위로 올라가는 모습을 표현하겠습니다.
 
    this.alpha -= 3;
    //draw()함수가 한 번 반복될 때마다 입자의 불투명도는 3감소하여 투명도가 3 증가하면서 점점 옅어지도록 만듭니다. alpha 값이 0보다 작거나 크면, 입자는 완전히 투명해 져서 우리 눈에 보이지 않게 될 것입니다. 
    //투명해져서 안보일 뿐이지 존재 자체가 없어지지는 않습니다. 
        
  }
  
  show(){
    noStroke();
    fill(255, this.alpha);
  // 색은 희색(255)이고 불투명도는 this.alpha 값입니다. 
    ellipse(this.x, this.y, 16);
  }
}

//새햐얀 공기방울이 시냇물 바닥에서 생겨나 왼쪽 오른쪽 살짝쿵 움직이면서 위로 올라갑니다. 
//시간이 흐르면서 공기방울 색이 점점 옅어지고, 마침내 완전히 투명해져서 우리 눈에 보이지 않게 됩니다. 
//그러나 공기방울 존재 자체가 없어지는 것은 아닙니다. 
//함수 draw()는 무한 반복 함수이기 때문에, 공기방울은 무한히 증식될 것입니다. 
//컴퓨터가 많이 버거워할 것 같군요....흠....

시냇물을 맑고 깨끗하게 지켜주는 소중한 공기방울들을 만나러, 스노클링과 고글을 착용하고 시냇물 안으로 얼굴을 넣어 볼까요~~^^*

입수준비~~~ 입~수~~!! 외치시며 클릭해 주셔요~~^^*

오늘 날씨가 제법 선선해서, 아침 산책의 시원한 기운이 계속 주위를 감싸고 있는 듯 해요~^^*

뽀로록 뽀로록 신선한 공기를 공급해 주는 고마운 공기 정화장치와 함께, 오늘도 맑고 투명한 기분으로 하루를 보내 볼까요~^^*

한 번에 한 개의 공기의 입자를 만들면서도, 그 노력을 무한 반복하여 수 많은 공기방울을 만들어 내는 기특한 함수 draw()처럼,

우리도 하루에 한 번 코딩 공부하는 것을 계속 해나가다 보면, 코딩 내공을 점차 키워나가 볼 수 있을 것 같아요~~^^*.

하루에 한 번 무언가를 계속 해서 점점 실현시켜 나가고픈 소망이 있으신가요~^^* 그 소망 무럭무럭 실현되기를 저도 함께 바랄게요~^^*

오늘도 저와 함께 코딩공부 해 주셔서 감사합니다~^^*

내일 또 우리 만나서, 점점 많아지는 공기방울에 힘겨워 할 컴퓨터를 도와 줄 방법을 함께 모색해 보도록 할까요~^^*

네!!! 꿈은 이루어 집니다~~!!!