Silverback9

오늘은 동그라미들이 옆으로 나란히 서서 각자 상하운동을 반복하는 것을 표현해 보려고 합니다~~~^^*

아래의 동영상 강의를 클릭하셔서 3:10까지 보시면 오늘 공부 끝~~^^*

어제 만들어 본 대관람차의 옆모습 기억하시나요? 그리고 그 앞모습도요?

대관람차의 옆모습은 회전운동을 보여주고 대관람차의 앞모습은 상하운동을 보여 주었지요?

그런데요…

앞으로는 대관람차의 옆모습 같은 완전한 원의 형태의 회전운동을 표현할 공부는 더이상 없을 것 같아요.

그래서, 완전한 원의 형태의 회전운동 이미지를 우리의 장기기억으로 저장하기 위하여, 복습 한 번 하고 가실게요~^^*

[ Oscillate ]라는 어려워 보이는 영어 단어는 A라는 곳과 B라는 곳을 왔다갔다 반복하는 것을 의미하네요. 그리고, 모든 것은 Oscillate한다고 노래 부르는 음유시인도 있네요.

그리고 오늘 우리는 동그라미들이 자신의 자리에서 위로 아래로 왔다갔다 반복하는 Vertical Oscillation을 표현해 보는 것이죠!!! 와우!!! Are U Ready? Say, YES!!!

위아래 반복운동 Vertical Oscillation을 하는 우리의 핫!핑크 동그라미를 다시 살펴 볼게요!

let angle = 0;
let angleV = 0.01;

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

function draw() {
  background(220);
  translate(200, 200);
  fill(255, 55, 155);

  let y = map(sin(angle), -1, 1, -200, 200);
  //y 좌표 [-200 ~ 200] 구간을 위아래 반복하게 되겠네요~
  
  line(0,0,0,y);
  circle(0, y, 32);
  angle += angleV;
}

이것을 클릭하여 핫! 핑크 동그라미의 Vertical Oscillation을 잠시 감상해 보셔요~^^*

let angles = [];
//여러 개의 동그라미들을 만들려고 해요~ 그래서 그 동그라미들 각각의 회전각 크기 값을 담을 배열을 준비해 보겠습니다!

let angleV = 0.01;
let r = 16;

function setup() {
  createCanvas(400, 400);
  
  let total = floor(width/(r*2));
  //캔버스의 넓이 값을 동그라미의 지름 값으로 나누어, 정수값 부분만 변수 total에 저장하겠습니다. 동그라미가 캔버스 안에 가로로 나란히 설 수 있는 최대 갯수가 되겠네요~^^*

  for( let i = 0; i < total; i++){
    angles[i] = 0;
    // 모든 동그라미들의 회전각 크기를 0으로 초기화 해놓겠습니다~
  }
}

function draw() {
  background(220);
  translate(200, 200);
  fill(255, 55, 155);
  for( let i = 0; i < angles.length; i++){
   
  let x = map(i, 0, angles.length, -200+r, 200+r);  
  //첫번째 동그라미의 중점은 캔버스 왼쪽끝(-200)에서 반지름 r 만큼 떨어져 있기 때문에, x좌표를 (-200+r)로 옮기기 위해, x의 최소최대 값을 -200+r, 200+r로 조정해 보겠습니다. 그러면, 변수 total에 반영되지 않았던 소수점 이하 값 때문에 오른쪽 끝부분에 생기는 여백도 메울 수 있을 것 같아요!!
  
  let y = map(sin(angles[i]), -1, 1, -200, 200);
 
  line(x, 0, x, y);
  circle(x, y, r*2);
  
  angles[i] += angleV;
  //모든 동그라미들의 회전각 크기를 0으로 초기화 한 상태에서, 동일한 크기의 회전각속도를 더하게 되니, 모든 동그라미들의 y좌표 위치는 항상 같게 될 것 같아요!
  }
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 핫!핑크 동그라미 대군단의 멋진 Vertical Oscillation을 감상해 보셔요~^^* 네, 종료는 사각형~~^^*

우리 핫!핑크 동그라미 대군단처럼 아주 멋진 장관을 연출하는 분들이 계시네요~^^* 작은 북을 두드리는 북채의 끝을 따라가보면, 상하반복운동 즉 Vertical Oscillation이 보이는 것 같아요!!! 어머머!!! 신기하지요~~~~^^*

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

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

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