p5.js 에디터 사용방법

 

 

1. p5 접속(크롬권장)

https://www.p5js.org

home | p5.js

 

 

 

• p5는 다른 자바프로그램과는 다르게 인터넷 창에서 직접 웹에디터를 사용합니다.
• 별도의 다운로드 작업 없이 바로 사용 가능하기 때문에 학생들 교육에 활용하기 편합니다.
• 초급자 교육용으로 사용이 용이합니다.

 

 

 

2.  p5.js 에디터 메뉴설명

 

 

 

① 코드 실행 : Ctrl + Enter

② 코드 정지 : Shift + Ctrl + Enter

③ 변경 코드 재 실시

④ 프로젝트명 (변경하여 저장)

 

 

① scktch.js : 작업중인 코드

② Console : 메시지 출력창

③ Preview : 코드 실행결과 미리보기

 

 

 

① index.html

② sketch.js

③ style.css

 

 

 

① Create folder : 폴더만들기(클라우드)

② Create file : js 파일만들기(클라우드)

③ Upload file : 파일업로드