웹브라우저 상에서 모션그래픽을 할 수 있는 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>
'지식 확장 > p5.js' 카테고리의 다른 글
| p5.js 기본 도형 그리기 - 직사각형 그리기 (0) | 2021.04.11 |
|---|---|
| p5.js 기본 도형 그리기 - 점 · 삼각형 그리기 (2) | 2021.04.11 |
| p5.js 기본 도형 그리기 - 직선 그리기 (0) | 2021.04.04 |
| p5.js 기본 구조와 좌표체계 (0) | 2021.04.04 |
| p5.js 를 배워보자 (0) | 2021.03.27 |
