-
[P5.js] 함수 그려주는 사이트 만들어주기(삼각함수,일-이차함수)Javscript 2022. 8. 29. 02:49728x90
P5.js + 삼각함수로 여러가지 만들기
[p5.js]삼각함수를 이용해서 뭐든지 그려보기
intro 삼각함수를 배우면서 저는 계속 생각했습니다. 솔직히 삼각함수 뿐만이 아니라 초중딩때부터 수학을배울때마다 "도대체 이걸 어디다가 써먹지?" 라는 생각을 계속했습니다 하지만 p5.js를
velog.io
제가 예전에 썻던 글인데 여기서 기본적인 것들 설명합니다. 저 글에서 대부분 다 녹여냈다고 생각하지만
이번에 동아리에서 프로젝트 하나 아무거나 내라고하길래 함수 그리는 사이트를 만들어보겠습니다.
만들거
함그
함수 그려지는 모습 애니메이션으로 보기
draw-function.netlify.app
여기 접속이 안된다면
GitHub - leejw05/P5.js-Draw-Function
Contribute to leejw05/P5.js-Draw-Function development by creating an account on GitHub.
github.com
소스코드
소개
사실 이미 함수그려주는 사이트는 굉장히 많습니다.
대표적으로 Desmos가 있구요 이거 말고도 많이 있죠
P5.js를 할줄안다면 함수 그리는건 아무것도아니지만
이미 있는걸 그대로 만들면 심심하기도 해서
나는 실시간으로 그려주는걸 만들면 경쟁력을 가질수있겠다 싶어서
이런걸 만들게 됐습니다.
HTML에 P5.js삽입하기
https://p5js.org/ko/examples/instance-mode-instance-container.html
examples | p5.js
< 돌아가기 example name placeholder example description placeholder toggle text output run reset copy
p5js.org
<!DOCTYPE html> <head> <script src='p5.js'></script> </head> <body> <div id='container'>여기에 Canvas생성</div> <script> let sketch = function(p) { p.setup = function(){ p.createCanvas(100, 100); p.background(0); } }; new p5(sketch, 'container'); //<div id=아이디>여기에 Canvas생성</div> </script> </body> </html>P5.js Editor에서 쓰는 Metohd들이 p객체에 담아져있습니다
import App from "./app.js"; // 일차 document.querySelectorAll("button")[0].addEventListener("click", () => { new p5(new App().Liner_Function, "container") }); // 이차 document.querySelectorAll("button")[1].addEventListener("click", () => { new p5(new App().quadratic_Function, "container") }); //Sin함수 document.querySelectorAll("button")[2].addEventListener("click", () => { new p5(new App().Sin_Function, "container") }); //Cos함수 document.querySelectorAll("button")[3].addEventListener("click", () => { new p5(new App().Cos_Function, "container") }); //다시하기 document.querySelector("body > button").addEventListener("click", () => { location.reload(); });App에서 무슨 함수를 실행할 setup을 해줘라고 하면
export default class App { quadratic_Function = function (p) { p.setup = () => { let speed = Number(document.querySelector("#speed").value); let A = 0.01 * Number(document.querySelector("#A-value").value); let B = Number(document.querySelector("#B-value").value) * 10; let C = Number(document.querySelector("#C-value").value) * 10; new DrawFuncntion(p, speed, A, B, C).quadraticFunction(); }; }; }App에서 함수를 그릴 A B C 값을 가져와서 함수를 그려줍니다.
Draw함수는 DrawFunction에서 처리합니다.
quadraticFunction() { this.p.draw = () => { this.SetBackground() this.X += this.speed; this.setY(-this.A * this.X ** 2,-(this.A * (this.X - this.B) ** 2) - this.C) //Y값 증가 //a(x-b) + c 근데 음수가 양수라서 + 대신 - this.Draw() //선 그리기 this.ExitPoint("이차함수") }; }보시면 알겠지만 별거없습니다.
그냥 수학시간에 배운 함수는 X에다 어떤 값들이 들어가면
이런식으로 그려지겠다 라고 배우는데
이건 그냥 진짜로 함수에다가 X를 하나하나 대입해보고
점들을 찍는거죠 저기선 선을 그었지만요
부가 설명
[p5.js]삼각함수를 이용해서 뭐든지 그려보기
intro 삼각함수를 배우면서 저는 계속 생각했습니다. 솔직히 삼각함수 뿐만이 아니라 초중딩때부터 수학을배울때마다 "도대체 이걸 어디다가 써먹지?" 라는 생각을 계속했습니다 하지만 p5.js를
velog.io
이 글을 보신 분들은 대부분 이해가 가실텐데 읽지않으신 분들을 위해 몇가지 설명을 더 해보면
-를 붙이는 이유
Canvas가 원랜 이렇게 생겼습니다. Trasnform으로 화면은 중앙으로 옮겼으니까
Y축은 아래가 양수가 위에가 -축입니다 때문에 Y에다가 -를 대입해야 우리가 아는 정상적인 함수가 나옵니다.
아니면 양수를 넣었는데 음수 그래프가 나올수가있어요
애니메이션 말고 Desmos처럼 바로 그려지게 하고싶어요
p.draw가 아니라
While True에다가 넣으면 바로 그려집니다.
저거 네이버 검색엔진에 검색되게 함그라는 이름을 지어서 등록까지했는데
함그라고 검색해도 나오지가않네요..
728x90'Javscript' 카테고리의 다른 글
[Javascript] let ,const , var 차이점 (호이스팅) (0) 2022.02.02