Silverback9

오늘은 사인곡선을 직접 만들어 보겠습니다! 심지어 그 곡선을 움직여 보겠습니다! 와!!!!

회전각 크기가 0에서 2파이까지 순차적으로 점점 증가하게되면 완전한 형태의 사인곡선이 만들어지겠네요?

그럼, 우리~, 동그라미의 회전각 크기를 담는 배열에 [0 ~ 2파이] 범위의 회전각 크기를 순차적으로 담아 볼까요~^^*

범위 값을 정하여 저장할 때는…….

그렇죠!!!!

함수 map()을 오늘 또 만나네요!!!

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(5:05)하실 수 있어요~~^^*

let angles = [];
let r = 1;

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

  for( let i = 0; i < total; i++){
    //for 반복문은, 반복조건이 만족 될 동안만 반복합니다. 
    //i가 total보다 작을 동안만 명령어 수행을 반복합니다. 
    //i가 total과 같은 값이 되면 명령어 수행을 하지 않습니다.
    
    angles[i] = map(i, 0, total-1, 0, TWO_PI);
    //angles[]는 angles[0]부터 angles[total - 1]까지가 생성됩니다. 
    //[0, 1, 2, 3]는 총 4개의 숫자가 있습니다. 
    //[0, 1, ..., n-1]은 총 n개입니다.  
    //angles[0] ~ angle[total-1]는 총 total개입니다.
    //angles[0]에는 0, angles[total - 1]에는 TWO_PI가 저장됩니다. 
  }
}

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);
  }
  //시원하고 맑은 여름 산입니다~~
}

이것을 클릭하여, sketch.js 파일을 열어 코드를 확인해 보셔요~^^* 그리고 삼각형을 눌러 프로그램을 실행시켜 시원한 여름 산을 구경해 보셔요~^^* 네, 종료는 사각형~^^*

이번에는 사인곡선을 움직여 보겠습니다!!!

각 동그라미의 회전각이 점점 커진다면 동그라미는 [-200~ 200]범위로 Vertical Oscillation을 하게 되겠지요?

전체 모양이 수평이동하는 것 같이 보여도, 사실은 동그라미들이 제자리에서 상하운동을 반복하는 것이겠네요!

let angles = [];
let r = 8;

function setup() {
  createCanvas(400, 400);
  let total = floor(width/(r*2));
  for( let i = 0; i < total; i++){
    angles[i] = map(i, 0, total-1, 0, TWO_PI); 
  }
}

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] += 0.02;
    //회전각이 점점 커집니다. 
    //동그라미의 y좌표 값이 [-200, 200] 사이를 왔다갔다 하게 되겠네요. 
  }
  //전체적으로 보면, 곡선이 움직이는 것 같이 보입니다. 
  //그러나!!!
  //동그라미 하나만 정해서 그 움직임을 따라가 보시면, Vertical Oscillation을 하고 있음을 느끼실 수 있습니다!!
}

이것을 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜, 곡선의 전체적인 모습을 관찰해 보셔요. 그리고, 동그라미 딱 하나를 정해서 움직임을 관찰해 보셔요~ 신기하지요~~^^* 넵, 사각형을 눌러 종료하시구요~~^^*

와~~~ 우리가 사인곡선을 그려내고, 심지어 움직임도 표현할 수 있게 되었네요!!!

흐르는 강은 한 방울 한 방울 통통 튀어 오르는 물방울들로 이루어 진 것처럼,

이 밤까지 무사히 흘러온 이번 한 주는

부지런히 통통 튀어 오르는 월.화.수.목.금.토.일이 이루어 준 것이네요…..!!!

감사하고 뿌듯한 밤이예요~~~^^*

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

내일은 우리 만나서 음악 같이 들어요~~~^^*

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