Silverback9

오늘은 서로다른 amplitude와 period와 phase를 가진 사인 곡선을 한 화면 안에 담아, amplitude와 period와 phase의 의미를 시각적으로 이해해 보는 시간을 한 번 더 갖도록 할게요.

아래 동영상 강의를 클릭하시면 오늘 공부 내용을 바로 시작(7:30)하실 수 있어요~^^* 8:08까지 보시면 오늘 공부 끝~^^* 공부분량이 40초네요~~^^*

p5.js 캔버스에서의 사인 곡선은 평소 우리가 접한 사인곡선과는 상하반전 관계에 있지요?

그 관계에 익숙해 지기 위해, 노트에 사인 곡선들을 그리고, 그 곡선들을 p5.js 캔버스에도 그려보겠습니다.

amplitude와 period는 픽셀을, 그리고 phase는 라디안을 단위로 가진다는 것을 한 번 더 떠올려 보고, 시작하겠습니다~~~!!!

class Wave{
  constructor(amp, period, phase){
    this.amplitude = amp;
    this.period = period;
    this.phase = phase;
  }
  calculate(x) {
    return sin(this.phase + TWO_PI*x/this.period)*this.amplitude;
    // x좌표값을 받아 사인곡선의 y좌표값을 계산해서 반환합니다. 
  }
}

let wave;

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

function draw() {
  background(0);
  translate(0, 200);
  
  for(let x = 0; x< width+1; x += 10){
    
   ellipse(x, 0, 10);
   //수평선을 그리겠습니다.
  
  }
  
  push();
  fill(255,0,0);
  wave = new Wave(100, 400, 0);
  //amplitude: 100, period: 400, phase: 0 입니다. 빨갛습니다.
  
  for(let x = 0; x< width+1; x += 5){
    let y = wave.calculate(x);
    ellipse(x, y, 5);
  }
  pop();
  
  push();
  fill(0,255,0);
  wave = new Wave(100, 200, 0);
  //amplitude: 100, period: 200, phase: 0 입니다. 초록합니다.
  
  for(let x = 0; x< width+1; x += 5){
    let y = wave.calculate(x);
    ellipse(x, y, 5);
  }
  pop();
  
  push();
  fill(0,125,255);
  wave = new Wave(50, 100, 0);
  //amplitude: 50, period: 100, phase: 0 입니다. 블루거립니다.
  
  for(let x = 0; x< width+1; x += 5){
    let y = wave.calculate(x);
    ellipse(x, y, 5);
  }
  pop();
  
  push();
  fill(225, 225, 0);
  wave = new Wave(150, 300, 3);
  //amplitude: 150, period: 300, phase: 3 라디안 (약 1파이입니다). 노~래요~
  //약 1파이 오른쪽으로 sine 시작점이 이동되어, x=0 일 때 y값이 음수가 되는 곡선 부분이 시작됩니다. 
  
  for(let x = 0; x< width+1; x += 5){
    let y = wave.calculate(x);
    ellipse(x, y, 5);
  }
  pop();
  
  
  //p5.js 캔버스 특성 때문에, 평소 우리에게 익숙한 사인 곡선이 상하반전되어 보이는 것에 우리 함께 주의해볼게요~^^*
  //p5.js 캔버스는 윗부분이 음수부분이라서, phase가 3 라디안 (약 1파이)인 노란 곡선은 볼록하게 시작됩니다. 
  //다른 사인 곡선(빨, 파, 녹)들은 phase가 0 이라서, 사인 곡선이 양수부분인 아랫부분으로 옴폭하게 시작됩니다.  
}

이 링크를 클릭하여 sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 삼각형을 눌러 프로그램을 실행시켜 사인 곡선들의 모습을 살펴 보셔요~ amplitude와 period와 phase의 의미가 시각적으로 이해되시나요~^^* 네~^^* 종료는 사각형~~^^*

오늘은 다양한 사인 곡선들을 화면에 한꺼번에 담아 보았습니다~^^*

곡선들이 한꺼번에 일렁이니, 알 듯 모를 듯, 잡힌 듯 안잡힌 듯, 신기하면서도 막연한 느낌이 들지 않으셨나요? 마치, 파도가 밀려와서 발이 바닥에서 붕 뜨게 되는 그 순간의 이상한 느낌처럼.

Wave에 대한 이 막연한 느낌을 귀에 들리는 음악으로 표현해 내신 본 조비님처럼, 우리도 내일 눈에 보이는 컴퓨터 그래픽으로 표현해 내어 볼까요~~^^*

방금 만든 따끈따끈한 신곡을 들고 파도를 타고 우리에게 도착하신 본 조비님처렁 멋진 작품을 내일 만들어 봐요~~~^^*

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

내일은 우리 해변에서 만나서~ 멋진 파도를 만듭시다~~^^*

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