• Easy to use

• WYSIWYG

• Opensource

• 크리에이티브 코딩을 위한 자바스크립트 라이브러리

• Processing을 오늘날의 웹에 맞게 해석한 것

웹 에디터 열고 시작하기

• p5.js 웹에디터 살펴보기

• 나의 첫 스케치: 레퍼런스를 참고하여 뭘 조금 그려보자.

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(220);
}

• 그려본 걸 저장하려면?

• setup과 draw는 각각 어떤 역할을 할까?

• draw 함수를 이용해서 애니메이션 하려면: 화면에 가운데 (20, 20) 원이 오른쪽으로 이동

  

  

• 그리는 크기를 조금 키워볼까?

• 색상 다루기

  

• 반복해서 그리기

• 이미지 업로드

• 이미지 사이즈에 맞추어 이미지 나타내기 (p5.Image 클래스)

• Interactivity 레퍼런스

• 마우스 데이터

function draw() {
  background(255);
  frameRate(12);
  text("X: "+mouseX, 0, height/4);
  text("Y: "+mouseY, 0, height/2);
}

• Kitty 마우스 포인터

• 원으로 궤적 그리기

• sin + millis 를 이용하여 원 크기 바꾸어 궤적 그리기