P5.js (생활코딩)

P5의 세계로

https://p5js.org/ko/get-started/

cdn을 써서 인터넷의 파일을 다운받아 쓰기

최초로 실행되는 작업은 ---setup 애니메이션처럼 반복적인 작업은 --- draw를 통해 표현하도록 한다.

function setup() {
createCanvas(400, 800);
background('gray');
}

400,800크기의 캔버스가 만들어지고 ㅡ 배경색은 회색이다.

circle(x,y,크기);-- 원생성
point(x,y); ---점 생성
rect(100,100,100)--- 100,100 위치에 생성되는 100,100 크기의 박스.

색을 넣으려한다면 그림이 그려진 이후가 아니라 그려지기 전에 채워넣어야 한다. fill('red'); rect(100,100,100);

색을 빼고 싶다면
noFill();
rect(200,100,100);

테두리--- stroke
stroke('blue');
strokeWeight(10);

fill의 세부 -- fill(r,g,b,a)

애니메이션 들어가기

draw를 통해 반복적 구현을 해보자,

크기, 위치가 랜덤하게 원을 생성하기.

circle + random을 하자.

circle(random(400),random(400),random(100));

하나의 원이 옆으로 움직이게 하고 싶으면.

function setup() { createCanvas(400, 400); x = 0; y =0;}

function draw() { background(220); x = x+10; y= y+5; circle(x,y,100);}

백그라운드로 매번 초기화가 되고 x,y축으로 이동하게 된다.

캔버스 크기를 화면 크기만큼 만들고 싶다면 -- createCanvas(windowWidth,windowHeight);

마우스 위치에 따라 원이 생성되게 하기

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 사생대회

https://www.google.com/url?q=https://docs.google.com/spreadsheets/d/178cIAH4C-UlYHQ24oWLW9DK7Bg91GLTOKnPYd1cXqFQ/edit?usp%3Dsharing&sa=D&source=editors&ust=1650184981880832&usg=AOvVaw2HBToq96fEcpM34w_cO39s

Author And Source

이 문제에 관하여(P5.js (생활코딩)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@mingi001/P5.js-들어가기