p5.js 시작하기
웹브라우저 상에서 모션그래픽을 할 수 있는 p5.js는 자바스크립트를 할 수 있으면 더 잘 다룰 수 있다고 한다.
정말 기본적인 자바스크립트 밖에 모르는 무지렁이인 나는
.... 그래도 포기하지 않고 한 걸음씩 천천히 내딛어 보기로 한다. (포기하지 않게 해주세요! 🙏)
p5.js로 할 수 있는 3가지
- 정지된 그림 그리기
- 애니메이션
- 사용자와의 상호작용
생활코딩 강의를 들어보니 p5.js로 위와 같은 3가지를 할 수 있다고 하는데,
애니메이션을 하는 것도 뿌듯하겠지만 사용자와의 상호작용이 제일 기대가 된다.
실행방법
첫번 째 방법 : p5.js 웹 에디터 사용하기
p5.js Web Editor
editor.p5js.org
p5.js 공식사이트 상의 에디터 링크를 사용하면 브라우저 상에서 바로바로 작성 내용을 확인할 수 있다.
두번 째 방법 : 라이브러리 다운로드 혹은 CDN 삽입하기
download | p5.js
다운로드 Introduction 안녕하세요! 이 페이지는 온라인에서 바로 사용가능한 웹에디터와 각종 다운로드 링크를 소개합니다. 입문자에게 꼭 필요한 자료부터 숙련된 개발자를 위한 리소스 모두를
p5js.org
다운로드 페이지로 이동하면 라이브러리를 다운로드 할 수 있다.
아래의 사이트에서 CDN 링크를 복사해서 html 파일 head 태그에 붙여넣어 보았다.
p5.js - Libraries - cdnjs - The #1 free and open source CDN built to make life easier for developers
p5.js is a client-side JS platform that empowers artists, designers, students, and anyone to learn to code and express themselves creatively on the web. It is based on the core principles of Processing. - Simple. Fast. Reliable. Content delivery at its fin
cdnjs.com
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.3.0/p5.min.js"></script>
<title>Document</title>
</head>
<body>
<script>
function setup(){
createCanvas(400,400);
background('gray');
}
</script>
</body>
</html>
