Tutorials of 'p5js'

1.1 basics of drawing(사각형 그리기)
1.2 color(색깔 넣기)
1.3 How to upload your sketch(깃허브에 스케치 올려서 웹에 공개하기)

2.1 mouseDraw_Variables(mouseX, mouseY)(마우스로 그림그리기)
2.2 circle_javascript_object(원 이동시키기)
2.3 color change_map() function(마우스로 배경색 바꾸기)
2.4 dots_the random() function(무작위 점찍기)

3.1 Introduction to Conditional Statements(마우스 위치 감지로 색 바꾸기)
3.2 The bouncing ball(공이 벽에 맞으면 반대로 방향 바꾸기)
3.3 else and else if, and and or(네모 안에 마우스를 옮기면 색깔 바꾸기)
3.4 Boolean variables(마우스 좌표와 클릭으로 상태 바꾸기)

5.4 Functions inside of objects(원래 위치 근처에서 랜덤으로 포인트 이동하기)

6.1 What is an array?(마우스 클릭할 때마다 배열에 있는 문구 바꾸기)
6.2 Arrays and loops(배열, 반복 연습하기)
6.3 Arrays of Objects_1(오브젝트를 반복 생성하기(400개))
6.3 Arrays of Objects_2(오브젝트를 반복 생성하기(4개))
6.4 The Constructor Function in JavaScript(변수 대신 생성자 함수 사용하기)
6.5 Adding and removing objects_1(마우스 클릭하면 오브젝트 갯수 늘리기)
6.5 Adding and removing objects_2(마우스 드래그하면 오브젝트 갯수를 늘리고, 키보드를 누르면 오브젝트를 하나씩 삭제하기)
6.5 Adding and removing objects_3(마우스 드래그 하면 오브젝트가 늘어나다가 50개가 넘으면 하나씩 지우기)

8.6 API Query with User Input(온라인 웹사이트 http://openweathermap.org/ 에서 제공하는 API를 사용하여 특정 지역의 온도와 습도를 시각화하기)

• 소스코드를 바로 다운로드 받으려면 위쪽의 tar(리눅스), zip(윈도우) 버튼을 누르고, 깃허브 원본을 보려면 'View on Github' 버튼을 누르세요.
  

• 소스코드 실행은 각 주제별 폴더로 들어가서 'index.html' 파일을 실행하면 되고, 각종 동작을 담당하는 javascript 본문을 수정하려면 편한 스크립트 에디터(메모장, Atom, Sublime Text 등)를 이용해 'sketch.js' 파일을 열어 수정하면 됩니다.

• 하지만 위에 열거한 에디터를 사용하는 것보다 http://p5js.org/ 페이지에 들어가서 Download 탭 하단의 전용 에디터를 다운로드 받아 사용하는게 훨씬 편합니다.

p5js로 만든 동적 웹페이지 패키지를 github를 이용해 바로 웹에 게시하기
(아래 사진을 클릭하세요)