건너뛰기

언어 설정

라이브러리

라이브러리 이용하기

라이브러리란 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.asciiart는 p5.js를 아스키(ASCII) 아트로 쉽고 간단하게 변환합니다. 한마디로, p5.js를 위한 아스키 아트 컨버터입니다. 제작: Pawel Janicki

c2.js is a JavaScript library for creative coding based on computational geometry, physics simulation, evolutionary algorithm and other modules. 제작: Ren Yuan

이 라이브러리는 p5 * js와 관련된 코더, 디자이너 및 아티스트의 크리에이티브 커뮤니티에 CO2 카운트 다운 아이디어를 제공합니다. 제작: Olaf Val

Calculate a Concave Hull from a set of points in 2D space. 제작: Mark Roland

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

UserInterface 라이브러리. 제작: sam oakes

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

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

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

친숙하고 직관적인 수학 라이브러리입니다. 제작: Nick McIntyre

Real time audio, video, canvas, and data sharing. 제작: Shawn Van Every

p5snap is a command-line interface that creates and saves snapshots of a p5 sketchp5snap is a command-line interface that creates and saves snapshots of a p5 sketch on an interval. 제작: Zach Krall

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

p5.animS animates p5.js shapes by rendering their drawing processes. 제작: Yonggang Wang

p5.beizer는 조절점(control point) 개수 제한 없이 정교한 베지에 곡선(Bézier Curve)을 그릴 수 있게 해주는 라이브러리입니다. 제작: Peiling Jiang

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

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

Small one function library to design and render simple or styled buttons directly in p5.js canvas. 제작: Nicolas ATEK

A library that aims to de-complicate scripting buttons. 제작: Jadon L

p5.capture provides a simple GUI to easily record p5.js animations and output video files in various formats (webm, gif, mp4, png, jpg, and webp). 제작: tapioca24

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

CMYK 색상 모드. 제작: JT Nimoy

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

p5.create는 효율적인 게임 제작을 위해 설계된 저장, 애니메이션, 충돌 및 태그 기능을 제공하는 라이브러리입니다. 제작: Zach Mohammed

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

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

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

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

p5.fab controls digital fabrication machines from p5.js. 제작: Blair Subbaraman

A fast offscreen canvas for WebGL, giving access to depth data for fog and blur effects. 제작: Dave Pagurek

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

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

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

p5.glitch는 글리치 이미지와 이진(binary) 파일을 위한 p5.js 확장자입니다. 제작: Ted Davis

Adds more key support for p5.js. 제작: Max Parry

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

The full Johnny-Five.io Nodebots/robotics library for Arduino and other microcontrollers made to work directly in browser with WebSerial or WebUSB. 제작: Luis Montes

Plug-and-play micro-controllers for p5js 제작: Jonathan de Halleux

물리적 조이스틱으로 연결 및 플레이. 제작: Vamoss

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

p5.mapper is a projection mapping library for p5.js. This library makes it easy to code and keystone interactive, algorithmic sketches. 제작: Jenna deBoisblanc

The mathematical operations of JavaScript have been converted into simple human language so that they can understand really quickly. 제작: Bharath Satheesan

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

p5.party는 네트워크 기반의 멀티유저 게임, 앱, 그리고 스케치를 쉽게 만들 수 있게 하는 라이브러리입니다. 제작: Justin Bakse

p5.PatGrad let's you add patterns and gradients to your sketches. 제작: Sam Lavigne

A pattern drawing library for p5.js. 제작: Taichi Sayama

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

p5.Polar는 수학적 추상화를 통해 아름답고 만화경 같은 방사형의 패턴을 쉽게 만들 수 있게 해 줍니다. 제작: Liz Peng

Easy projection mapping of sketches onto real world surfaces 제작: Trammell Hudson

p5.js quadrille library. 제작: Jean Pierre Charalambos

스케치 녹화 및 오디오 녹음 기능을 제공합니다. 제작: Dori Claudino

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

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

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

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

p5.serial enables serial communication between devices that support serial (RS-232) and p5 sketches running in the browser. 제작: Shawn Van Every, Jen Kagan, Tom Igoe

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

p5.slides is a presentation platform written in p5.js. 제작: Garrett Flynn

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

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

A beginner friendly math animation library for p5.js. Created with mentorship from Nick McIntyre and Jithin KS. 제작: Aditya Siddheshwar

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

This library performs asynchronous timing functions like countdowns, one-shot timers, % time elapsed and encapsulates the millis() function and other related calculations that often clog up your code. 제작: Scott Kildall

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

With p5.tween you can create easily animations as tween for your objects and shapes. 제작: Nick Müller

A set of utilities and additional features for my creative coding class aiming to help students. 제작: ALP TUĞAN

Record your canvas as a video file with audio. 제작: Caleb Foss

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

p5.wasm is an addon library written in Rust and compiled to WebAssembly that implements common functions found in p5.js. 제작: Kenneth Lim

A web assembly core for p5.js. 제작: Arshia Moghaddam

A library for interacting with Serial devices from within the browser, based on Web Serial API (available on Chrome and Edge). 제작: Gottfried Haider

A p5.js library for using the Web Serial API to access devices like Arduino, no setup required. 제작: Ong Zhi Zheng

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

상호작용하는 도형을 통해 물리를 가르치고 배울 수 있게하는 함수와 클래스들입니다. 제작: Ian Lawrence

이 라이브러리는 여러분의 p5 스케치와 리액트(React) 앱을 연동합니다. 제작: Gherciu Gheorghe

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

스킨과 반환값을 설정할 수 있는 나만의 노브(knob)를 만들어보세요 제작: Miles DeCoster

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

Helper functions and defaults for young and new coders. 제작: Tariq Rashid

A small library to bridge the functionality of p5.js, p5.play.js and p5.tiled.js to easily create 2D platformer games using javascript. 제작: Andrew Tacon

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

TurtleGFX allows to code with Turtle Graphics in JavaScript. Great for education and creative coding. 제작: CodeGuppy

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

Easily send and receive MIDI messages from p5. 제작: Jean-Philippe Côté