[p5.js]삼각함수를 이용해서 뭐든지 그려보기

개발정리·2022년 7월 15일

intro

삼각함수를 배우면서 저는 계속 생각했습니다.
솔직히 삼각함수 뿐만이 아니라 초중딩때부터 수학을배울때마다
"도대체 이걸 어디다가 써먹지?" 라는 생각을 계속했습니다
하지만 p5.js를 사용해보고 이런데 써먹는구나 라는걸알았습니다.
솔직히 그거보다 그냥 삼각함수로 뭔가 만든다는 느낌 자체가 기분이 굉장히 좋아요

늘 하던거 그대로 그려보기

Cos, Sin함수 모두 매개변수,리턴값을 호도법(라디안)을 가지기때문에
DegreetoRadian함수를 저기 위에있는거 그대로 가져와서 사용할거에요

function degreeToRadian(degree){
  return degree * (Math.PI / 180) //180 => 3.14
}

function draw() {
    translate(windowWidth/2,windowHeight/2)
  	.....

기본적으로 (0,0)이 왼쪽 상단입니다.
이런 형태겠죠?

직접만든거라 조금 못생기긴했는데 저렇게생겼습니다.
근데 보고 이상한 점을 느끼실거에요
Y축이 음수 양수 방향이 반대인거같은데

여기선 아래가 양수. => 각이 양수면 동경의 방향이 시계방향이다

어찌됐든 저렇게 되면 문제가 생기니까

function draw() {
    translate(windowWidth/2,windowHeight/2)
  	.....

이거로 정중앙이 (0,0)인 형태로 만들어줍니다.

삼각형 그려보기


function draw() {
  background('black')
  stroke(400)
  translate(windowWidth/2,windowHeight/2)

  fill("white")
  line(0,0,Math.cos(0),Math.sin(0))// 시초선
  line(0,0,Math.cos(0),Math.sin(-1))//동경(반시계 방향으로 57도)
}

실행시켜보면

뭐가 있는데 굉장히 작습니다.
기본적으로 단위원이 1인상태로 싸인 코사인 값을 구하기때문에
보이지가않습니다.

그래서 이런식으로 임의로 곱해줘야합니다

line(0,0,Math.cos(0)*Inital_Line,Math.sin(0)*Inital_Line)//시초선
line(0,0,Math.cos(0)*Inital_Line,Math.sin(-1)*Inital_Line)//동경(반시계 방향으로 57도)

드디어 뭔가 보이기 시작합니다.
원도 그려보겠습니다.

뭔가 작동시켜보기

Cos = 동경의 X좌표

Sin = 동경의 Y좌표

function setup() {
  createCanvas(windowWidth, windowHeight);
  Inital_Line = 200
  degree = 0
}

function degreeToRadian(degree){
  return degree * (Math.PI / 180)
}

function draw() {
  background('black')
  stroke(400)
  translate(windowWidth/2,windowHeight/2)
  degree += 2
  noFill()
  circle(0,0, Inital_Line * 2)
  rad = degreeToRadian(degree)
  fill("white")
  line(0,0,Math.cos(-1)*Inital_Line,Math.sin(rad)*Inital_Line)
}

cos = 동경의 X 좌표

  line(0,0,Math.cos(rad)*Inital_Line,Math.sin(0)*Inital_Line)

당연한 결과가 당연하게 나오지만 신기하지않나요?
저는 똥글뱅이 그릴때만 해도 엄청 신기했습니다.

동글뱅이

함수 그려보기...

function setup() {
    createCanvas(windowWidth, windowHeight);
    background("black")
    AddValue = 10
    A = 2
    X = -(windowWidth/2) - AddValue
    Y = 0;
  }

  function degreeToRad(degree) {
    return degree * (Math.PI/180)
  }

  function CosFunc(X){
      return Math.cos(X) * 200 // 함수(Y값) 곱한값은 시초선의 길이
  }

  function coordinate(){
    line(windowWidth/2 ,0,-windowWidth/2,0)
    line(0 ,windowHeight/2,0,-windowHeight/2)
    stroke(400)
  }

  function draw() {
    background("black")
    translate(windowWidth/2, windowHeight/2)  
    coordinate()
    
    X += AddValue
    PY = Y
    Y = -CosFunc(degreeToRad(X)) 
    
    line(X-AddValue,PY,X,Y)
    stroke(500)
    
    fill("red")
    circle(X,(-CosFunc(degreeToRad(X))),15)
  }