소개

처음으로 p5.js를 시작하는 분을 향해 쓰고 있습니다.
p5.js에서 처음으로 나오는 함수 등을 소개합니다.

캔버스의 크기와 색상

처음으로 p5의 사이트를 열면 이미 화면의 크기나 어느 정도까지의 코드가 기입되어 표시되고 있습니다.
이것을 (▶︎) 눌러 오른쪽의 표시란에 표시시키면서 코드를 써 갈 수 있으므로, 이 사이트에서는 HTML이나 script의 설정을 하지 않고 JavaScript를 자꾸자꾸 써 갈 수 있습니다.
아래 그림의 코드. . .

mysketch.js

function setup() {
    createCanvas(windowWidth, windowHeight);
    background(100);
}

‘createCanvas’로 말 그대로 캔버스를 생성하고 있습니다.
windowWidth에서 가로 폭을 설정하고 windowHeight에서 높이를 설정합니다. 여기의 문자는 그 밖에도 습득하는 방법이 많이 있습니다.


width 습득↑


height의 습득↑

위의 표에 있는 코드를 자신의 WEB 사이트 표시 사이즈에 맞추어 재작성해 나가면 됩니다.
그 밖에도 수득 방법은 있어, 아래와 같은 기술로 하면 canvas의 사이즈도 자유자재입니다.

mysketch.js

function setup() {
    createCanvas(800, 800);//800pxずつの正方形でcanvasが現れます。
    background(100);
}

수치로 입력하면 화면 전체가 아니고, 일부 표시도 가능하게 되므로 용도는 여러가지가 됩니다.

배경 색상 지정

mysketch.js

function setup(){
    createCanvas(windowWidth, windowHeight);
    background(100);//グレーが表示される
}

background의 색 지정은, 학생의 무렵에 미술등에서 배운 RGB나 CMYK・HSB가 있습니다만, p5도 같은 방법으로 지정할 수 있습니다.
위의 코드 안에 쓰여진 background(100); 는 RGB 로 지정되어 있어 이대로라면 회색이 표시됩니다. 여기의 숫자를 여러가지 조사해 좋아하는 색으로 바꾸는 것이 가능하므로, 색채의 사이트에서 색을 찾아 지정해도 좋고, 없으면 스스로 이 근처가 이런 색일까? 라고 생각하면서 입력해도 즐겁다고 생각합니다.
【참고 사이트】
htps //w w.ぉrぢc. rg/

여기까지가 setup() 함수가 됩니다.

그리는 모양은 여러가지

sketvh.js

function draw() {
    ellipse(mouseX, mouseY, 20, 20);
}

다음에 나오는 것은 draw() 함수입니다.
이곳은 캔버스에 그릴 수 있는 것을 지정할 수 있습니다.
상기 코드내에서는 ellipse(원)가 지정되고 있습니다만, 이 외에도 삼각이나 사각형·직선으로 하거나, 연결하거나 해 슬라임 같은 형태를 묘화할 수도 있습니다.
자바스크립트와 같이 코드를 쓰면 자동으로 그리거나 마우스에 붙어 와 그리게 하는 등 그 밖에도 많은 그리기 방법이 떠오른 코드나 구그하거나 해서 지정할 수 있습니다.

p5의 코드나 참고의 것은 사이트를 열어 검색할 수 있게 되어 있으므로, 다른 사람이 쓰고 있는 코드로 모르는 것이 있어도 refarence등에서 조사해 보면 좋을 것입니다.
【참고 사이트】
htps // p5js. 오 rg / 레후 렌세 /
htps : //에서 ゔぇぺぺr. 어쩌면. 오 rg / 그럼 /

마지막으로

정말 처음으로 p5.js를 해 볼까 싶은 분에게 써 보았습니다.
조금이라도 힘이 될 수 있으면 다행입니다.
p5.js 이외에서도 JavaScript에 관련되어 있다 〇〇.js라든지 있으므로, 자신이 하고 싶은 애니메이션의 이미지와 맞는 것을 해 나가면 매우 즐겁다고 생각합니다.
끝까지 읽어 주셔서 감사합니다.