p5.js로 태극기 그리기

p5.js는 프로세싱의 자바스크립트 버전입니다.

HTML 캔버스를 이요하여 다양한 그래픽을 그릴 수 있습니다.

오늘은 6월 6일 현충일을 기념하여 p5.js로 태극기를 그려보았습니다.

시작하기 앞서 순국선열과 호국영령들의 희생에 감사를 표합니다.

 

실제 실행 화면

태극기가 겉보기에는 단순해보이지만, 은근 복잡하더라고요.

그래서 이곳저곳 많이 참고했습니다 ㅎ

태극기 도안은 여기서 참고했습니다.

https://www.mois.go.kr/chd/sub/a05/birth/screen.do

우리나라 국가상징> 태극기

어린이용 자료이긴 한데 아랫부분에 태극기 도안이 자세히 나와있어서 이게 가장 큰 도움이 되었습니다.

아 그리고 꼭 도안처럼 완벽히 그리진 못하더라도 대충은 그릴 줄 아시죠?

 

그리고 직각삼각형의 한 각을 구하는 방법을 알지 못하여 위키하우도 참고했습니다.

https://ko.wikihow.com/%EA%B0%81%EB%8F%84-%EA%B3%84%EC%82%B0%ED%95%98%EB%8A%94-%EB%B2%95

각도 계산하는 법 - wikiHow

제가 아직 중학생이라 삼각함수에 대해서도, 음의 지수에 대해서도 잘 모르기 때문에 그냥 공식만 복붙하듯 했습니다.

뭐 나중에 배우면 이해가 가겠죠?

이런 그래픽 프로그래밍은 수학이 필수인 것 같습니다.

 

그리고 도를 호도로 변환하는 공식은 위키하우에서, 자바스크립트에서의 sin, 제곱근은 MDN web docs에서...

그리고 이런 것들을 찾아준 곳은 당연히 덕덕고와 구글입니다.

거의 덕덕고와 구글이 만들어준 셈입니다 ㅋㅋ

 

완성된 작품은 여기 있습니다.

https://editor.p5js.org/sunwoo1524/sketches/iNU8hc5Va

p5.js Web Editor

p5.js 웹 에디터로 만들었습니다.

설치도 필요 없고 로그인도 필요 없습니다.

다만 저장하려면 로그인해야합니다!

제가 p5.js와 코딩을 잘하는게 아니라 코드가 많이 꼬여있을 수도 있습니다...

 

코드 첨부로 글 마치겠습니다.

감사합니다!

const size = 250;
 
function setup() {
  createCanvas(size * 3, size * 2);
}
 
function draw() {
  const dir = (180 - ((sin(2 / sqrt(13)) * PI / 180) ** -1)) / 2;
  
  // 중앙 태극 문양
  noStroke();
  translate(size * 1.5, size);
  
  push();
  rotate(dir * PI / 180);
  fill(255, 0, 0);
  arc(0, 0, size, size, PI, 0, PIE);
  fill(0, 0, 255);
  arc(0, 0, size, size, 0, PI, PIE);
  pop();
  
  push();
  rotate(dir * PI / 180);
  translate(-(size / 4), 0);
  fill(255, 0, 0);
  circle(0, 0, size / 2);
  translate(size / 2, 0);
  fill(0, 0, 255);
  circle(0, 0, size / 2);
  pop();
  
  // 건곤감리
  // 건
  push();
  rotate(dir * PI / 180);
  
  translate(- 0.75 * size - size / 12, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  translate(-size / 12 - size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  translate(-size / 12 - size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  pop();
  
  // 곤
  push();
  rotate(dir * PI / 180);
  
  translate(0.75 * size, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  translate(size / 12 + size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  translate(size / 12 + size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  pop();
  
  // 이
  push();
  rotate(- dir * PI / 180);
  
  translate(- 0.75 * size - size / 12, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  translate(-size / 12 - size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  translate(-size / 12 - size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  pop();
  
  // 감
  push();
  rotate(- dir * PI / 180);
  
  translate(0.75 * size, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  translate(size / 12 + size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  
  translate(size / 12 + size / 24, 0);
  fill(0);
  rect(0, - size / 4, size / 12, size / 2);
  fill(255)
  rect(-1, - size / 24 / 2, size / 12 + 2, size / 24);
  
  pop();
}