건너뛰기

언어 설정

라이브러리

라이브러리 이용하기

라이브러리란 p5.js의 핵심 기능을 확장하거나 추가하는 자바스크립트 코드를 말합니다. 라이브러리에는 크게 두 종류가 있습니다. 주요 라이브러리인 p5.sound의 경우 p5.js 자체 배포물인 반면, 커뮤니티 라이브러리는 커뮤니티 공헌자에 의해 개발, 소유, 유지됩니다.

스케치에 라이브러리를 사용하려면 우선 스케치에 p5.js 링크를 걸고, 그 다음 HTML 파일에 라이브러리 링크를 걸면 됩니다. 링크가 걸린 HTML 파일은 이렇게 보입니다:

<!doctype html>
<html>
<head>
  <script src="p5.js"></script>
  <script src="p5.sound.js"></script>
  <script src="sketch.js"></script>
</head>
<body>
</body>
</html>
      

나만의 라이브러리 만들기

p5.js는 여러분만의 라이브러리 제작을 환영합니다! 라이브러리 제작에 대해 더 알고 싶다면 라이브러리 튜토리얼 을 확인해보세요. 제작한 라이브러리를 이 페이지에 추가하고 싶다면 이 문서를 제출하세요!

주요 라이브러리

p5.sound는 p5에 웹 오디오 기능(오디오 입력, 재생, 분석 합성 등)을 추가합니다. 제작: Jason Sigal

p5.accessibility는 p5 캔버스에 대한 맹인 또는 시각 장애인의 접근성을 향상합니다.

커뮤니티 라이브러리

p5.asciiart는 p5.js를 아스키(ASCII) 아트로 쉽고 간단하게 변환합니다. 한마디로, p5.js를 위한 아스키 아트 컨버터입니다. 제작: Pawel Janicki

p5.ble은 BLE 기기와 p5 스케치를 연결합니다. 제작: Yining Shi, Jingwen Zhu, Tom Igoe

blizard.js는 DOM 조작을 간단하게 처리합니다. 제작: Rohan Samra-O'Neill

p5.bots를 통해 브라우저, 아두이노, 마이크로프로세서 간의 인터랙션을 만들 수 있습니다. 센서 데이터로 스케치를 만들거나, 스케치에서 LED나 모터를 작동해보세요! 제작: Sarah Groff-Palermo

사용이 편리한, 이벤트 기반 p5.js 버튼 라이브러리입니다. 제작: Martín del Río

CMYK 색상 모드. 제작: JT Nimoy

p5.collide2D는 p5.js로 만든 2D 도형들 간의 충돌을 감지합니다. 제작: Ben Moren

노이즈와 GIF 기반의 반복 애니메이션을 단 한 줄의 코드로 만들어보세요. 제작: Peter Hayman

p5.dimensions은 p5.js의 벡터 기능을 확장하여 n차원에서 작동하도록 합니다. 제작: Smilebags, Max Segal

패닝, 줌, 회전이 가능한 간단한 3D 카메라 컨트롤. Thomas Diewald가 핵심적으로 기여하였습니다. 제작: jWilliam Dunn

확장형 p5.js 라이브러리로, 캔버스 기반 웹 어플리케이션 제작을 위한 이벤트리스닝 기능을 추가할 수 있습니다. 제작: Felix Meichelböck

p5.func은 시간, 빈도, 그리고 공간 기능 생성을 위한 새로운 객체 및 기능을 제공합니다. 제작: R. Luke DuBois

p5.geolocation은 사용자 위치를 획득, 관찰, 계산, 지오펜싱(geo-fencing)하기 위한 기술을 제공합니다. 제작: Ben Moren

p5.gibber는 음악 시퀀싱 및 오디오 합성 기능을 빠른 속도로 제공합니다. 제작: Charlie Roberts

grafica.js는 p5.js 스케치상 변형이 쉬운 2D 플롯을 추가합니다. 제작: Javier Graciá Carpio

p5.gui는 p5.js 스케치를 위한 그래픽 유저 인터페이스를 생성합니다. 제작: Martin Schneider

p5.localmessage는 멀티윈도우 스케칭을 위한 스케치 간 로컬 메시지 전송 기능 및 인터페이스를 제공합니다. 제작: Ben Moren

래스터에서 벡터로의 변환, 등면. 제작: jtnimoy

Mappa는 정적 맵, 타일 맵, 지오 데이터 활용을 위한 툴을 제공합니다. 지리 정보 기반의 시각적 재현물을 제작할 때 용이합니다. 제작: Cristóbal Valenzuela

ml5.js는 Tensorflow.js를 기반으로하며, 머신러닝 알고리즘 및 모델에 대한 브라우저상의 접근성을 높입니다. 제작: NYU ITP/IMA and contributors

p5.play는 게임과 같은 어플리케이션 제작을 위한 스프라이트(sprite), 애니메이션, 인풋, 충돌 기능을 제공합니다. 제작: Paolo Pedercini

파티클은 사용자가 직접 제작한 구조나 기능, 또는 JSON 인풋 데이터를 사용하여 시각적 효과를 만드는 데에 쓰입니다. 제작: Robert Cook

p5.Riso는 석판화와 같은 파일을 생성하는 라이브러리입니다. 스케치를 다양한 색상의 판화처럼 만들어줍니다. 제작: Sam Lavigne, Tega Brain

RiTa.js는 제너레이티브 문학을 위한 자연어 처리 객체를 제공합니다. 제작: Daniel C. Howe

Make knobs you can rotate with custom graphics and return value ranges. 제작: Miles DeCoster

p5.SceneManager는 스케치를 여러 단계의 씬들로 구성할 수 있도록 합니다. 각각의 씬은 메인 스케치에 포함된 일부 스케치와도 같습니다. 제작: Marian Veteanu

프로세싱의 screenX 및 screenY 기능을 p5js에 적용합니다. 제작: Hartmut Bohnacker

2D 기본 조형을 손그림으로 표현합니다. 제작: Janneck Wullschleger, 프로세싱 라이브러리 포트 기반 제작: handy

p5.serial는 시리얼 (RS-232)와 p5 웹 에디터를 지원하는 기기상에서의 직렬 통신을 구현합니다. 제작: Shawn Van Every, Jen Kagan, Tom Igoe

Shape5는 코딩을 처음 배우는 초등학생을 위한 2D 기본 조형 라이브러리입니다. 제작: Patrick Ester

p5.js 프레임워크에 더 많은 기본 도형을 추가하고자 제작된 라이브러리입니다. 제작: Sebastien Lorentz

p5.speech는 웹 스피치 및 스피치 인식 API에 대한 접근 권한을 제공하여, 음성을 인식하고 출력할 수 있는 스케치를 쉽게 만들 수 있게 합니다. 제작: R. Luke DuBois

픽셀, 밀리미터, 센티미터 또는 인치 단위의 정적인 2D 아트를 만들기 위한 p5 확장 라이브러리입니다. 제작: Kris HEYSE

p5.tiledmap은 스케치에 지도를 넣기 위한 드로잉 및 도움 기능을 제공합니다. 제작: Caldas Lopes

p5.js를 위한 멀티터치 및 마우스 그래픽 유저 인터페이스(GUI) 라이브러리 제작: Carlos L05 Garcia

Tramontana는 인터랙티브 환경 및 공간을 생성하거나, 공간 속 스케일 기능을 프로토타이핑하기 위한 여러가지 기기(iOS, Android, tramontana Board, ...)를 쉽게 쓸 수 있도록 하는 플랫폼입니다. 제작: Pierluigi Dalla Rosa

Vida는 카메라(또는 비디오) 기반의 모션 감지 및 얼룩(blob) 트래킹 기능을 더하는 p5js 라이브러리입니다. 제작: Pawel Janicki

p5.voronoi는 p5.js 스케치상 보로노이 다이어그램을 그리고 활용할 수 있는 툴을 제공합니다. 제작: Francisco Moreira

p5로 VR 및 AR 스케치를 작성하기위한 라이브러리. 제작: Stalgia Grigg

WebGL로 3D 텍스트 및 이미지를 쓸 수 있습니다. 제작: Freddie Rawlins