Silverback9

#야생으로

Creative Coding 독학 제071일 2024년06월06일(목)

2024년 6월 6일

오늘은 대관람차의 회전 모습을 옆에서 그리고 앞에서 보는 것을 프로그램으로 표현해 보겠습니다.

이틀 전 보았던 사인함수 복습 동영상에 대관람차의 모습이 나왔었지요? 네~~ 그것을 프로그램으로 표현해 보겠습니다~~~^^*

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

하나. 대관람차의 옆모습은 회전각 운동을 그대로 표현하면 될 것 같은데요~~ 음…그러면, 수평좌표와 수직좌표를 (x, y) 한 쌍으로 묶어서 그 변화를 표현하면 어떨까요?

둘. 대관람차의 앞모습은? 그렇죠~~!! 회전각 운동의 수직좌표 즉, y 좌표값의 변화를 표현하면 될 것 같습니다~~^^*

수평좌표값 x = cos(회전각)

수직좌표값 y = sin(회전각)

이었지요?

캔버스 원점을 한가운데로 바꾼 후,

대관람차의 옆모습은 왼편에

데관람차의 앞모습은 오른편에

위치시켜 보겠습니다~~~^^*

자세한 내용을 코드를 참고 하셔도 좋으실 것 같아요~~^^*

let angle = 0;
let angleV = 0.01;

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

function draw() {
  background(220, 20);
  translate(200, 200);
  //캔버스 원점을 한가운데로 옮겨 볼게요~~.
  fill(255, 55, 155);
  //대관람차 차량색은 핫!핑크입니다~ 우후~~
  
  let x = map(cos(angle), -1, 1, -150, 50);
  //대관람차 옆모습의 X좌표범위틑 [-150 ~ 50]으로 설정하겠습니다.
  let y = map(sin(angle), -1, 1, -100, 100);
  //대관참차 옆모습과 앞모습의 Y좌표범위는 [-100 ~ 100]으로 설정하겠습니다.
  
  line(150,0,150,y);
  //대관람차 앞모습 차량과 중심을 잇는 선입니다~
  //대관람차 앞모습 차량은 중점을 (150, 0)에 두고 상하 운동을 하겠습니다~
  circle(150, y, 32);
  //대관람차 앞모습 차량입니다~
  
  
  line(-50, 0, x, y);
  //대관람차 옆모습 차량과 중심을 잇는 선입니다~
  //대관참하 옆모습 차량은 중점을(-50, 0)에 두고 회전 운동을 하겠습니다~
  circle(x, y, 32);
  //대관람차 옆모습 차량입니다. 
  
  angle += angleV;
  
}

이것을 클릭하여, sketch.js 파일을 열어 코드를 살펴 보셔요~^^* 그리고 삼각형을 눌러 우리의 핫!핑크 대관람차 차량 1개의 움직임을 옆에서도 앞에서도 관찰해 보셔요~ 그 움직임이 왠지~~ 귀엽고~~깔끔하고~~우아하고~~몽환적이고~~단순하면서도~~정밀하고~~아름다와서~~ 왠지~~ 기분이 륄랙~~스 되지 않나요~~~~^^* 네~~~종료는 사각형~~~^^*

Speaking of Big Wheels!!!,

서울에 멋진 대관람차가 세워지려나 봐요! 와우!!