p5.js를 통해 프로젝트를 생성하고, 생성된 프로젝트에 대하여 탐구합니다. 본격적인 코딩은 4. 기본 도형 그리기 부터 시작합니다! 프로세싱 IDE 살펴보기 프로세싱 IDE에서 p5.js 모드를 하면 위와 같은 창이 나오게 됩니다. 내부에는 두 개의 파일(Sketch_*와 index.html)이 있는데요, 각각의 역할을 아래와 같습니다. Sketch_* : p5.js를 직접 코딩하는 파일입니다. index.html : p5.js는 자바스크립트 파일이니 만큼, 웹에서 p5.js를 실행하기 위해서는 그 배경이 되는 html 파일이 필요합니다. 우리가 p5.js를 다룰 때에는 index.html은 거의 다루지 않을 예정이니 Sketch_* 파일에만

p5.js를 사용하기 위해서는 먼저 개발 환경을 세팅해야 합니다. 저는 크게 아래 두 가지 방법을 추천합니다! 1. p5.js 설치하기 1-1. 프로세싱 IDE에서 이용하기 프로그래밍에 대해서 완전 처음이라면 프로세싱 IDE를 사용하는 걸 추천합니다. 별도로 세팅할 것도 없고 바로 프로세싱을 배울 수 있습니다. 먼저 Processing.org에서 자신의 운영체제에 맞는 버전을 선택해서 설치해주세요. 별도의 설치 과정없이 .zip 파일을 압축해제한 후 폴더 안에 있는 실행파일을 실행하면 됩니다. ![](https://images.velog.io/images/phw3071/post/aacd5034-271e-403d-98c0-5001b3d

p5.js가 뭔가요? 저번 포스팅에서도 언급했듯 p5.js는 자바로 되어 있는 Processing을 자바스크립트 버전으로 만든 라이브러리이다. 프로세싱의 거의 그대로 자바스크립트로 옮겼기 때문에 대부분의 코드가 동일하다. 프로세싱이란? > 프로세싱(Processing)은 컴퓨터 프로그래밍의 본질을 시각적 개념으로 프로그래머가 아닌 사람들에게 교육할 목적으로 뉴 미디어 아트, 시각 디자인 공동체를 위해 개발된 오픈 소스 프로그래밍 언어이자 통합 개발 환경(IDE)이다. 2001년 MIT 미디어 연구소에서 케이시 리아스와 벤자민 프라이가 시작하였다. 위키백과)에서는 프로세싱을 다음과 같이 정의하고 있습니다. 간단하게 풀어서 이야기하면

반가워요! p5.js의 세계에 오신 걸 환영합니다. p5.js가 대체 뭔가요? 이 글의 태그를 보면 프로세싱이라는 어디서 뭔가 익숙한 단어을 볼 수 있어요. 물론 이 프로세싱은 "처리중"이라는 뜻의 영어 단어가 아니라 프로그래밍 언어인 프로세싱이라는 언어입니다! 프로세싱은 미디어 아트를 만들 수 있는 오픈소스 언어로 사용법도 쉬워서 초보자라도 금방 자신만의 작품을 만들 수 있을 정도에요. 아쉽게도 우리나라에서는 인지도가 바닥을 달리고 있지만 해외에서는 인지도가 어느정도 있는 편이에요. p5.js는 자바로 되어 있던 프로세싱을 자바스크립트에서 사용할 수 있도록 한 라이브러리에요. 문법(변수 선언, 메인 함수 이름 등)이 조금 다르기는 하지만 거의 대부분 동일한 덕분에 어느 한쪽을 배우더라도 프로세싱과 p5.js 모두에서 사용이 가능해요. 저도 지금 프로세싱에 대한 책으로 p5