P5의 세계로
https://p5js.org/ko/get-started/
cdn을 써서 인터넷의 파일을 다운받아 쓰기
function setup() {
createCanvas(400, 800);
background('gray');
}
400,800크기의 캔버스가 만들어지고 ㅡ 배경색은 회색이다.
circle(x,y,크기);-- 원생성
point(x,y); ---점 생성
rect(100,100,100)--- 100,100 위치에 생성되는 100,100 크기의 박스.
색을 빼고 싶다면
noFill();
rect(200,100,100);
테두리--- stroke
stroke('blue');
strokeWeight(10);
fill의 세부 -- fill(r,g,b,a)
애니메이션 들어가기
circle + random을 하자.
circle(random(400),random(400),random(100));
마우스 위치에 따라 원이 생성되게 하기
function draw() { circle(mouseX,mouseY,100);}
조건문으로 제어하기
if(mouseIsPressed){}로 할 수도 있지만
function mousePressed() {background(1,1,1);}로 하면 클릭시 배경의 색이 검은 색이 된다.
위의 원들은 서로 이어지지 않는다. 이제 저것들을 이어지도록 해보자.
이전 마우스 위치는 pmouseX(previous)로 표현 가능하다.
그리고 line을 사용.
line(pmouseX,pmouseY,mouseX,mouseY);
마우스가 느리게 움직일 떄는 작은 원이 만들어지고 빨리 움직이면 큰원이 만들어지도록 하기.
피타고라스의 정리 사용 -- 빗변의 길이.
제곱 -- pow() -- pow(3,2)는 3의 2제곱인 9.
제곱근은 --sqrt()
function draw() {
px=pow(mouseX-pmouseX,2)
py=pow(mouseY-pmouseY,2)
speed = sqrt(px+py);
circle(mouseX, mouseY,speed);
}
삼각함수 표현.
1라디안 === 57도
circle(Math.cos(0)200,Math.sin(0)200,10);
반지름 200의 단위원.
circle(Math.cos(1)size,Math.sin(1)size,10);
57도 1라디안 만큼 떨어진 지점에 점 찍기.
조금 더 세련되게 각도에 맞는 동경 표현하기
function degreeToRad(degree)
{
return degree * Math.PI / 180;
}로 함수 정하고.
circle(Math.cos(degreeToRad(100))size,
Math.sin(degreeToRad(100))size,10);
}로 마무리.
이제 삼각함수를 이용해 각도에 맞게 원을 생성해 큰원을 그려보는 코드를 써보자.
function setup() {
createCanvas(windowWidth,windowHeight);
background('black');
size = 200;
degree =0;
}
function degreeToRad(degree)
{
return degree * Math.PI / 180;
}
function draw() {
translate(width/2,height/2);
circle(0,0,10);
degree = degree +1;
rad = degreeToRad(degree);
circle(Math.cos(rad)*size,Math.sin(rad)*size,10);
}각도 degree를 매번 증가시키고 그에따라 원이 생성됨. 결과는
생활코딩 p5 사생대회
