Silverback9

와우!!! 고슴도치 햇살이 따끔따끔한 오후이네요!!! 와우!!!

음…오늘은, 사인 곡선이 잘 만들어지는 지까지만 확인해 보는 것이 좋을 것 같아요~^^*

p5.js 캔버스의 특성 때문에 사인 곡선이 상하반전 된 듯 보일 것이라서, 사인 곡선의 모습에 천천히 익숙해 지는 시간을 가지도록 할게요~^^*

사인 곡선 처음 만들어 보는 시간이니까~~~^^* 아래 동영상 강의를 처음부터 한 번 더!!! 복습하면서 7:30까지 보시면 오늘 공부 끝~~^^*

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);
  wave = new Wave(200, 400, 0);
  //amplitude 200 픽셀, period 400 픽셀, phase 0 파이의 사인곡선인 wave를 만들겠습니다.
}

function draw() {
  background(0);

  translate(0, 200);
  //원점을 (0,0)에서 (0, 200)으로 옮겨, 사인곡선 전체가 캔버스 화면에 보일 수 있도록 하겠습니다. 
  //왼쪽 끝은 x = 0입니다. 
  //x축, 즉 y = 0는 캔버스 중간부분을 가로지릅니다.
  //윗부분에서 y는 마이너스 값을 가집니다. 
  //아랫부분에서 y는 플러스 값을 가집니다. 
  //일반적인 사인곡선 좌표계가 상하반전되었다고 보시면 좋겠습니다. 
  
  
  for(let x = 0; x< width; x += 10){
    
    let y = wave.calculate(x);
    //사인곡선 wave의 calculate 함수에게 x축 좌표 값에 주고 wave 사인곡선의 y축 좌표 값을 받습니다.  
    
    ellipse(x, y, 10);
  }
  //p5.js 캔버스 특성 때문에, 평소 우리에게 익숙한 사인 곡선이 상하반전된 듯 보이나요? 
}

이것을 눌러 sketch.js 파일을 열어 코드를 확인해 보셔요~ 그리고 삼각형을 눌러 사인 곡선이 잘 나오는 지 살펴봐 주시면 감사하겠습니다~~^^* 네, 사각형을 눌러 종료해 주시고요~~^^*

오늘 아이스크림 두 개 준비해 놓겠다고 말씀드렸죠~~^^*

네~~^^* 5분만 기다려 주셔요~~^^*

——5분 후——

네! 네~! ^^* 기다려 주셔서 감사합니다~~^^*

시원하고 맛있는 아이스크림 대~~~령이요~~~^^*

5분 만에 만든 아이스크림 맛이 어뗘셨어요~~^^*?

너무 맛있어서 노래가 절로 나오시죠~~~^^*

고슴도치 햇살이 산 너머 집으로 돌아갈 시간이 어느덧 가까이 왔네요~^^*

오늘 오전 오후 두 번이나 만나 함께 코딩공부 해주셔서 감사합니다~~~^^*

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

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