1. hello p5.js!

1. p5.js 사이트에 접속합니다.

   home | p5.js

2. p5 에디터를 실행합니다.

   1. Start creating with the p5 Editor! 버튼을 클릭합니다.

3. 캔버스에 원을 그려봅시다.

   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     background(220);
     ellipse(50, 50, 80, 80);
   }
   

   ellipse(x, y, w, [h])

   • https://p5js.org/reference/#/p5/ellipse
   • x, y 는 타원의 중심점을 나타낸다.
   • w 는 타원의 너비를 나타낸다.
   • h 는 선택사항으로 타원의 높이를 나타낸다.

4. 원에 색을 칠해 봅시다.

   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     background(220);
     fill(0);  
     ellipse(50, 50, 80, 80);  
   }
   

   fill(gray, [alpha])

   • https://p5js.org/reference/#/p5/fill
   • gray : 그레이스케일 값, 흑백의 정도, (흑)0~255(백)
   • alpha : 선택사항으로 투명도 상태, 0~255

5. 캔버스에 마우스 클릭을 하면 원의 색을 바꿔봅시다.

   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     background(220);
     if(mouseIsPressed){
       fill(0);
     } else {
       fill(255);
     }
     ellipse(50, 50, 80, 80);  
   }
   

   mouseIsPressed

   • https://p5js.org/reference/#/p5/mouseIsPressed
   • 논리값으로 마우스를 눌렀다면 true, 그렇지 않으면 false 값을 가지게 된다.

6. 원이 마우스 포인터를 따라다니도록 만들어 봅시다.

   function setup() {
     createCanvas(400, 400);
   }
   
   function draw() {
     //background(220);
     if(mouseIsPressed){
       fill(0);
     } else {
       fill(255);
     }
     ellipse(mouseX, mouseY, 80, 80);  
   }
   

   mouseX

   • https://p5js.org/reference/#/p5/mouseX
   • 현재 마우스 포인터의 x 좌표 값을 저장한다.

7. 다음 퀴즈를 풀어 봅시다.

   1. 원을 랜덤한 색으로 바꿔보자.
      • hint!
   2. 원이 아닌 다른 도형을 그려보자.
      • hint!

8. p5.js 로 만들어 보고 싶은 도형이나 동작을 자유롭게 만들어 봅시다. 다음 자료를 참고해 보세요.

   reference | p5.js

   examples | p5.js

   learn | p5.js

9. 내가 만든 프로젝트를 만들고 공유해 봅시다.

   1. p5.js 사이트에서 회원 가입 (Sign up) 을 합니다.
   2. 로그인 후 프로젝트를 저장(File > Save) 하고, 공유할 프로젝트 링크를 복사(File > Share > Fullscreen)
   3. 패들렛의 p5.js project 에 링크를 추가해주세요.

   CreativeComputingWithAI

2. Snake Game 만들기

1. Snake Game 을 즐겨봅시다.

p5.js Web Editor

1. 내 컴퓨터에서 코드를 붙여넣기 해서 실행해 봅시다.
   • index.html
   • sketch.js
   • snake.js
2. 다음 질문에 해당하는 코드를 찾아서 읽어 봅시다.
   1. 키보드의 입력에 따라 움직이는 코드는 어디일까?

3. 이미지 분류 모델을 p5.js 에서 사용하기