Giting.
낮의 Giting

홈 · 크리에이티브 코딩 · 캔버스 · WebGL · 교육 · JavaScript · LGPL-2.1

p5.js 대표 이미지 브라우저용 크리에이티브 코딩 라이브러리. Processing 의 그리기 모델(`setup()`/`draw()`)을 자바스크립트로 옮겨, 2D 캔버스·WebGL·사운드·입력 인터랙션을 몇 줄로 다루게 한다. 예술가·디자이너·학생·입문자가 코드로 표현하는 걸 1순위로 두고 설계됐다
분석 리포트실측 정보적용점원문 README

뭔가

p5.js 는 브라우저에서 코드로 그림을 그리고 움직이게 하는 라이브러리다. 2001년 시작된 Processing 의 그리기 모델을 자바스크립트로 옮긴 것으로, setup() 에서 한 번 준비하고 draw() 가 매 프레임 불리며 캔버스를 다시 그린다. 예술가·디자이너·학생·입문자가 코드로 표현하는 것을 1순위로 두고 설계됐고, 2D 캔버스부터 WebGL·사운드·마우스/터치 입력까지 몇 줄로 다룬다.

운영은 Processing Foundation이 맡고, p5.js 는 Lauren McCarthy가 만들었다. 근래에는 거버넌스와 접근성·포용을 프로젝트 전면에 두고 있다.

실측

  • 규모: 409,599 LOC · 2,075 파일. 주력은 JavaScript(177,415줄)이고 GLSL 셰이더와 도입 중인 TypeScript 도 있다.
  • 품질 장치: 테스트 파일 1,029개의 실제 큰 test 트리, CI 9개 워크플로. 확장치고도 라이브러리답게 갖췄다.
  • 활발도: 커밋 17,467(2013년 이래 전체 이력), 기여자 940명, 최근 90일 546커밋에 마지막 커밋이 어제다. 재단이 받치는 대표 OSS 답게 활발히 개발 중이다.
  • 버전: 최신 v2.3.4(2026-09-25). 대형 전환은 v2.0.0(2025-04-17)으로, ES 모듈·번들러 친화·애드온 체계·내부 재작성을 하면서도 setup()/draw() API 는 지켰다.

라이선스 (읽고 쓰자)

p5.js 는 LGPL-2.1이다. 우리가 자주 쓰는 MIT/Apache 와 다르다. 핵심만 보면,

  • p5.js 를 별도 .js 로 로드(CDN 또는 언번들 스크립트)하면 거의 마찰이 없다. 대부분의 웹 페이지가 여기 해당한다.
  • 독점/비공개 제품의 번들에 깊이 인라인하거나 트랜스파일해 섞으면 의무가 붙는다. p5.js 자체와 그 수정분은 LGPL 로 유지하고 변경을 공개하며, 저작권·라이선스 고지를 보존하고, 사용자가 p5.js 사본을 교체·재링크할 수 있게 해야 한다.

GPL 처럼 내 코드까지 전염되는 것은 아니다. 다만 출하 앱에 통째로 접어 넣을 때는 이 조건을 먼저 따진다.

쓸까, 참고할까

이 분야 일을 할 사람에겐 분명한 도입 후보다. 반면 의존성 0 과 작은 결정론적 도구를 지향하는 스택이라면, 40만 줄·LGPL 의 프레임워크를 통째로 들이기보다 그리기 패턴을 참고하거나 일회성 인터랙티브 웹 작업에 별도 스크립트로 얹는 쪽이 맞다. 라이브러리(processing/p5.js)와 웹 에디터(processing/p5.js-web-editor), 사운드 같은 애드온(p5.sound)이 각각 다른 저장소라는 점도 고르는 데 도움이 된다. 무게가 걱정이면 코어에 필요한 애드온만 얹으면 된다.

*이 리포트는 저장소 클론 실측(probe, head 94fb07d2d, 전체 이력)과 GitHub 메타·릴리스 대조로 작성했다. 성능/벤치 수치는 해당 없음(그리기 라이브러리), 실행 시연은 생략했다.*

실측 정보

무엇
브라우저용 크리에이티브 코딩 라이브러리. Processing 의 그리기 모델(`setup()`/`draw()`)을 자바스크립트로 옮겨, 2D 캔버스·WebGL·사운드·입력 인터랙션을 몇 줄로 다루게 한다. 예술가·디자이너·학생·입문자가 코드로 표현하는 걸 1순위로 두고 설계됐다
규모 / 실측
409,599 LOC · 2,075 파일(최대 파일은 테스트 자산 many_lines.txt 131,073줄). 주력 JavaScript 546파일 177,415줄 + GLSL 셰이더 16파일 + TypeScript 도입 중(7파일). ✅ 테스트 파일 1,029개(실제 큰 test/ 트리) · CI 9 워크플로. 런타임 의존성 13 + dev 23(의존성 0 프로젝트는 아니다)
활발 / 유지
커밋 17,467(2013-02-25 이래 전체 이력) · 기여자 940명(깃 기준, GitHub 집계 342) · 태그 181. 최근 90일 546커밋 · 365일 1,903 · 마지막 커밋 2026-10-02(어제). 열린 이슈 527(PR 포함 GitHub 집계). 재단이 받치는 대표 OSS 로 활발히 개발 중이다
버전 / 2.0
최신 v2.3.4(2026-09-25, 거의 월간 점 릴리스). 대형 전환은 **v2.0.0(2025-04-17)**. ES 모듈·번들러 친화 코드베이스, 새 애드온/확장 체계, 내부 재작성. `setup()`/`draw()` 같은 익숙한 API 는 유지해 마이그레이션 충격을 줄였다
라이선스 (LGPL 주의)
GNU LGPL-2.1(약한 카피레프트). MIT/Apache 와 다르다. 별도 `.js` 로 로드하면(CDN·언번들 스크립트) 거의 마찰이 없다. 다만 독점 번들에 깊이 인라인/트랜스파일해 넣으면 의무가 붙는다. p5.js 자체와 그 수정분은 LGPL 유지·변경 공개, 저작권/라이선스 고지 보존, 사용자가 p5.js 사본을 교체·재링크할 수 있게. GPL 처럼 전염되진 않지만, 출하 앱에 통째로 접어 넣을 땐 이 조건을 따진다
계보 / 구분
Processing Foundation 운영, Lauren McCarthy 가 만들었고 근래엔 거버넌스·접근성·포용을 전면에 뒀다. ⚠️ 이 repo(`processing/p5.js`)는 **라이브러리뿐**이다. 웹 IDE 는 별개 repo(`processing/p5.js-web-editor`), 사운드 등은 이제 코어가 아니라 별도 애드온(p5.sound)으로 산다

적용점

  • 이럴 때 유용브라우저에서 그림·애니메이션·인터랙티브 스케치·제너러티브 아트를 코드로 만들 때. 특히 교육·프로토타이핑·전시용 작업에서 몇 줄로 캔버스가 살아 움직인다. 입문 자료와 커뮤니티가 방대해 배우기 쉽고, 지금도 활발히 유지되는 정본이라 오래 믿고 쓸 수 있다.
  • 이럴 땐 주의가벼운 유틸이 아니라 40만 줄 브라우저 프레임워크다. 작은 효과 하나에 통째로 끌어오면 무겁다. 라이선스가 LGPL 이라 독점 앱 번들에 깊이 인라인할 땐 고지·재링크 의무를 확인해야 한다(별도 스크립트 로드는 저마찰). 서버/네이티브 파이프라인에는 맞지 않는 클라이언트 전용 라이브러리다.
  • 먼저 볼 것핵심은 `setup()`/`draw()` 루프 하나다. 매 프레임 `draw()` 가 불리고, 좌표·색·도형 명령으로 캔버스를 다시 그린다. 이 모델만 익히면 나머지는 레퍼런스를 찾아 쓰면 된다. 2.0 의 애드온 체계는 필요한 기능만 얹는 방향이라, 무게가 걱정이면 코어 + 필요한 애드온만 고른다.
◆ 도입 후보

판정은 도입 후보다. 단, 누가 쓰느냐로 결이 갈려서 그 전제를 적는다. 브라우저에서 코드로 그림을 그리고 인터랙션을 붙이는 일이라면, p5.js 는 사실상 표준이고 망설일 이유가 거의 없다. Processing 의 유산을 자바스크립트로 옮긴 정본이고, 재단이 받치며, 테스트 1,029개·CI 9개에 90일 546커밋으로 지금도 활발하다. 입문 자료와 커뮤니티의 두께도 다른 선택지를 압도한다. 2.0 으로 ES 모듈·애드온 체계로 현대화하면서도 익숙한 API 를 지켜, 배운 사람이 다시 배울 필요가 없다. 교육·전시·프로토타입·제너러티브 아트라면 바로 집어 쓰면 된다. 다만 성격을 알고 봐야 한다. 40만 줄짜리 클라이언트 프레임워크이고 라이선스가 LGPL 이다. 별도 스크립트로 얹으면 마찰이 거의 없지만, 독점 앱 번들에 깊이 인라인할 땐 고지·재링크 의무가 붙는다. 그리고 가벼운 효과 하나에 통째로 끌어오는 건 과하다. 의존성 0 과 작은 결정론적 도구를 지향하는 스택(우리가 그렇다)이라면, p5.js 는 '도입'보다 '그리기 패턴을 참고하거나, 일회성 인터랙티브 웹 작업에 별도 스크립트로 얹는' 자리가 맞다. 요컨대 크리에이티브 코딩 그 자체를 할 사람에겐 도입 후보, 가벼움을 지키려는 스택엔 참고용. 어느 쪽이든 이 분야의 정본이라는 사실은 변하지 않는다.

원문 README

아래는 processing/p5.js 저장소의 README 원문입니다(GitHub 렌더, 수집 시점 기준). 저작권은 원 프로젝트에 있으며 원 저장소의 라이선스를 따릅니다. GitHub에서 보기

README 전문 펼치기

npm version All Contributors Total Downloads

Welcome! 👋👋🏿👋🏽👋🏻👋🏾👋🏼

p5.js is a free and open-source JavaScript library for accessible creative coding. It is a nurturing community, an approachable language, an exploratory tool, an accessible environment, an inclusive platform, welcoming and playful for artists, designers, educators, beginners, and anyone else!

function setup() {
  createCanvas(400, 400);
  background(255);
}

function draw() {
  circle(mouseX, mouseY, 80);
}

Get Started — Reference — Tutorials — Examples — Libraries — Forum — Discord

About

p5.js is built and organized to prioritize accessibility, inclusivity, community, and joy. Similar to sketching, p5.js has a full set of tools to draw. It also supports creating audio-visual, interactive, experimental, and generative works for the web. p5.js enables thinking of a web page as your sketch. p5.js is accessible in multiple languages and has an expansive documentation with visual examples. You can find tutorials on the p5.js website and start coding right now in the p5.js web editor. You can extend p5.js with many community-created libraries that bring different capabilities. Its community provides endless inspiration and support for creators.

p5.js encourages iterative and exploratory code for creative expression. Its friendly, diverse community shares art, code, and learning resources to help elevate all voices. We share our values in open source and access for all, to learn, create, imagine, design, share and code freely.

Community

The p5.js community shares an interest in exploring the creation of art and design with technology. We are a community of, and in solidarity with, people from every gender identity and expression, sexual orientation, race, ethnicity, language, neuro-type, size, disability, class, caste, religion, culture, subculture, immigration status, age, skill level, occupation, and background. We stand in solidarity with justice and liberation movements. We work to acknowledge, dismantle, and prevent barriers to access p5.js code and the p5.js community.

Learn more about our community and read our community statement and code of conduct. You can directly support our work with p5.js by donating to the Processing Foundation.

Issues

If you have found a bug in the p5.js library or want to request new features, feel free to file an issue! See our contributor guidelines for a full reference of our contribution process. A set of templates for reporting issues and requesting features are provided to assist you (and us!). Different parts of p5.js are in different repositories. You can open an issue on each of them through these links:

p5.js — p5.js website —- p5.js web editor

p5.js is maintained mostly by volunteers, so we thank you for your patience as we try to address your issues as soon as we can.

Get Started for Contributors

p5.js is a collaborative project with many contributors, mostly volunteers, and you are invited to help. All types of involvement are welcome. See the contribute for more in-depth details about contributing to different areas of the project, including code, bug fixes, documentation, discussion, and more.

A quick Getting Started with the Build and setting up the repository could be found here.

AI Usage Policy

This project does not accept fully AI-generated contributions. AI tools may be used assistively only. As a contributor, you should be able to understand and take responsibility for changes you make to the codebase.

More details can be found in our AI Usage Policy and AGENTS.md.

Stewards

Stewards are contributors who are particularly involved, familiar, or responsive to certain areas of the project. Their role is to help provide context and guidance to others working on p5.js. If you have a question about contributing to a particular area, you can tag the listed steward in an issue or pull request. They may also weigh in on feature requests and guide the overall direction of their area, with the input of the community. You can read more about the organization of the project in our p5.js Contributor Guidelines and p5.js Steward Guidelines.

Anyone interested can volunteer to be a steward! There are no specific requirements for expertise, just an interest in actively learning and participating. If you’re familiar with or interested in actively learning and participating in some of the p5.js areas below, please reply to this issue mentioning which area(s) you are interested in volunteering as a steward! 👋👋👋

p5.js was created by Lauren Lee McCarthy in 2013 as a new interpretation of Processing for the context of the web. Since then we have allowed ourselves space to deviate and grow, while drawing inspiration from Processing and our shared community. p5.js is sustained by a community of contributors, with support from the Processing Foundation. p5.js follows a rotating leadership model started in 2020. Learn more about the people behind p5.js.

Current Lead/Mentor

Lead/Mentor Alumni

Area Steward(s)
Maintainers @clairep94, @davepagurek, @doradocodes, @khanniie, @ksen0, @limzykenneth, @perminder-17
Accessibility @calebfoss
Accessibility (p5.js-website) @coseeian
Color @limzykenneth
Core @davepagurek
DevOps @Vaivaswat2244, @limzykenneth, @lirenjie95
Documentation @limzykenneth, @perminder-17
Graphics (WebGL) @RandomGamingDev, @davepagurek, @perminder-17
Graphics (WebGPU) @aashu2006, @davepagurek, @perminder-17
i18n (es) @marioguzzzman
i18n (hi) @Divyansh013
i18n (ko) @JiwonHaam, @eupthere
i18n (zh) @limzykenneth, @lirenjie95
p5.js-web-editor @clairep94, @doradocodes, @khanniie, @kitlord
p5.js-website @Nwakaego-Ego, @clairep94, @doradocodes, @ksen0
p5.sound.js @ogbabydiesal
Typography @dhowe

Contributors

We recognize all types of contributions. This project follows the all-contributors specification and the Emoji Key ✨ for contribution types. Instructions to add yourself or add contribution emojis to your name are here. You can also post an issue or comment on a pull request with the text: @all-contributors please add @YOUR-USERNAME for THINGS (where THINGS is a comma-separated list of entries from the list of possible contribution types) and our nice bot will add you to CONTRIBUTORS.md automatically!

Grid of avatars representing contributors to the p5.js project

Thanks to all the wonderful contributors! 💓

의견

판정에 대한 반론, 도입 경험, 정정 제보를 환영합니다. GitHub 계정으로 참여합니다.

이것도 재봤습니다

전체 리포트 →