Silverback9

오늘은 좀더 발랄한 동그라미 군단을 표현해 보겠습니다~~^^* 흠…좀더 발랄한 군단이라니…그~~게 뭘~~까요~~? 궁~~금하~~시죠~~^^*

아래 동영상 강의를 클릭하시면 오늘 공부내용 바로 시작(3:18)할 수 있어요~~^^* 4:18까지 보시면 오늘 공부 끝~~^^*

네~~, 동그라미들이 각각 다른 속도로 움직인다면 좀더 발랄하게 보이겠네요!!

그래서!!!

동그라미들의 각각의 속도를 저장하는 배열을 만들어 사용해 보겠습니다!!

먼저~~, 각 동그라미들이 자신의 좌우에 있는 동그라미들의 속도와 전혀 관계가 없는 속도를 가지고 움직이도록 만들어 봅시다~~^^*

음…그럴려면….그렇죠!!!

우리에겐 함수 Radom()이 있습니다~~~!!!

무작위적인 크기의 값을 동그라미들의 속도 값으로 설~~정해 주면 어~~떨까요~~^^*

실험~~~시작~~~!!! Le~~t’s Go~~~!!

민트초코에 대한 사람들의 반응은 참~~~제각각이죠~~~^^* 민초파와 반미초파가 함께 어울려 살아가는 아름다운 세상을 표현해 보았습니다~~함께 보시죠~~^^*

let angles = [];
//동그라미들 각각의 회전각 크기 값을 담을 배열입니다~

let angleV = [];
//동그라미들 각각의 회전각 속도 값을 담을 배열입니다~~

let r = 16;

function setup() {
  createCanvas(400, 400);
  
  let total = floor(width/(r*2));

  for( let i = 0; i < total; i++){
    angles[i] = 0;
    
    angleV[i] = random(-0.1, 0.1);
    // -0.1에서 0.1 사이의 값을 무작위적으로 추출하여 각각의 동그라미 회전각속도로 저장하겠습니다~~ 
  }
}

function draw() {
  background(220);
  translate(200, 200);
  stroke(200, 125, 125);
  //초코색으로 선을 그려보겠습니다~
  fill(0,255, 255);
  //민트색으로 동그라미를 색칠해 보겠습니다. 
  for( let i = 0; i < angles.length; i++){
    let x = map(i,0, angles.length, -200+r, 200+r);  
    let y = map(sin(angles[i]), -1, 1, -200, 200);
    line(x,0,x,y,);
    circle(x, y, r*2);
    
    angles[i] += angleV[i];
    //동그라미 회전각 크기 값을 동그라미 각각 설정된 회전각 속도 값만큼 증가시킵니다~     
  }
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~~^^* 삼각형을 눌러 프로그램을 실행시키고 민트초코에 대한 사람들의 반응을 관찰해 보셔요~~^^* 참 제각각이죠~~^^* 넵! 종료는 사각형~~^^*

이번엔, 동그라미들이 자신의 좌우에 있는 동그라미들과 조화롭게 움직이는 모습을 표현해 볼게요~~^^*

음….서로의 회전각속도가 어떤 상관관계를 가지고 있으면 어떨까요?

왼편에서 오른편으로 갈 수록 속도가 증가하도록 만들어 보겠습니다!

let angles = [];
let angleV = [];
let r = 16;

function setup() {
  createCanvas(400, 400);
  
  let total = floor(width/(r*2));

  for( let i = 0; i < total; i++){
    angles[i] = 0;
    
    angleV[i] = 0.01 + i/100;
    //angleV[0] = 0.01 + 0 = 0.01
    //angleV[1] = 0.01 + 0.01 = 0.02
    //angleV[2] = 0.01 + 0.02 = 0.03
    //angleV[3] = 0.01 + 0.03 = 0.04
    //angleV[4] = 0.01 + 0.04 = 0.05
    //angleV[5] = 0.01 + 0.05 = 0.06
    //점점 큰 값이 angleV[] 배열에 차례로 저장되네요~^^*
  }
}

function draw() {
  background(255);
  translate(200, 200);
  stroke(0, 255, 125);
  //풀잎을 그려볼게요~~
  fill(0,125, 255);
  //시원한 바람을 그려볼게요~~
  for( let i = 0; i < angles.length; i++){
    let x = map(i,0, angles.length, -200+r, 200+r);  
    let y = map(sin(angles[i]), -1, 1, -200, 200);
    line(x,0,x,y,);
    circle(x, y, r*2);
    
    angles[i] += angleV[i];
  }
  //네~~, 바닷바람보다 먼저 눕고 바닷바람보다 먼저 일어나, 파락파락 몸을 서로 흔들며 지지배배 노래를 함께 부르다, 산바람보다 먼저 눕고 산바람보다 먼저 일어나는 풀잎이예요~~ 시원~~하지요~~? 여름맞이 대선물~~^^* 드려요~~^^*
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~~^^* 삼각형을 눌러 프로그램을 실행시켜 여름 풀잎의 싱그러운 모습을 바라 보셔요~~^^* 사각형을 눌러서 종료하시구요~~^^*

오늘은 때론 개성있게! 때론 조화롭게!

Vertical Oscillation을 하는 동그라미 군단을 만들어 보았습니다!

어머! 갑자기! 어느 멋진 소녀군단이 떠오르는데요!!!

네~~^^* 오늘도 저와 함께 코딩공부 해주셔서 감사합니다~^^* 멋진 하루 보내시고요~^^*

우리 내일 또 만나서, 함께 코딩공부 해요~~~^^*

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