Silverback9

#야생으로

Creative Coding 독학 제084일 2024년06월19일(수)

오늘은 어제 공부에서 궁금하셨을 부분들을 노트 정리해 보았습니다.

아래 동영상 강의를 보신 후 노트 정리를 한 번 살펴 보시면, 진자 운동에서 우리가 헷갈리기 쉬운 부분들을 바로잡아 보실 수 있을 것 같아요~^^*

내용 빼곡한 노트 살펴 보시느라 수고 많으셨어요~^^*

이제 코드를 살펴 볼까요~^^*

let angle;

let angleV = 0;
let angleA = 0;

let bob;
let length;
let origin;

let gravity = 1;

function setup() {
  createCanvas(400, 400);
  origin = createVector(200, 0);
  angle = PI / 4;
  bob = createVector();
  length = 200;
  
  //캔버스 위 쪽 가운데 부분(200, 0)에서 200 픽셀 길이의 줄 끝에 진자가 달려 있고, 수직선에서 1/4파이(45도) 떨어진 곳에서 출발할 것입니다. 
}

function draw() {
  background(0);

  let force = gravity * sin(angle);
  angleA = (-1 * force) / length;
  angleV += angleA;
  angle += angleV;
  //노트 정리를 참고해 주세요~^^*


  bob.x = length * sin(angle) + origin.x;
  bob.y = length * cos(angle) + origin.y;
  //노트 정리를 참고해 주세요~^^*
  //진자가 origin(200,0)부분에서 이어진 줄에 매달려 있는 것을 반영하여 진자의 위치 좌표를 조정하였습니다.

  stroke(255);
  strokeWeight(8);
  fill(127);
  line(origin.x, origin.y, bob.x, bob.y);
  circle(bob.x, bob.y, 64);
}

이것을 클릭하여 진자 운동을 관찰해 볼까요~^^*

코드는 비교적 단순하지만, 코드가 작성된 원리를 되짚어 보는 것이 약간 번거로우셨을 것 같아요~~^^*.

저도 노트 정리하면서 시간을 좀 많이 보내었는데요. 그래도 덕분에, 진자운동에 대해 좀더 잘 알게 된 것 같아요!

공부한 것을 함께 나눌 수 있다고 생각하니, 제 스스로 이해할 수 있을 때까지 끈기 있게 공부한 것 같아요~~^^*.

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

미세한 부분까지 잘 이해해서 표현하면 아주 멋진 장면이 탄생되는 것처럼, 간단하지만 미묘한 순간들을 정성으로 보내며 멋진 하루 보내요, 우리~^^*

밤바람을 느끼며 멋진 스윙을 춰도 좋을 여름~^^*

정성스런 하루 끝 즐겁고 편안한 밤 보내시구요~^^*

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

댓글 남기기