p5.js - 코딩과 아트 제작을 위한 오픈소스 자바스크립트 라이브러리

 (p5js.org)
3P by GN⁺ | ★ favorite | 댓글 1개
  • p5.js는 코딩 학습과 아트 제작을 웹에서 시작할 수 있게 해주는 무료 오픈소스 JavaScript 라이브러리임
  • 예술가·디자이너·초보자·교육자를 폭넓게 대상으로 하며, 프로젝트의 중심에는 포용적인 커뮤니티가 있음
  • 새 기능을 무작정 늘리기보다, 접근성 향상에 기여하는 기능을 예외로 두는 방향을 취함
  • Reference, 예제, 웹 에디터, 대화형 소개 영상이 제공돼 애니메이션·오디오·WebGL 학습과 제작을 바로 시작할 수 있음
  • 다운로드, 기부, 커뮤니티 참여, p5.js 2.0 beta 확인 경로까지 한곳에서 이어져 학습자와 기여자 모두에게 진입점이 됨

코딩과 아트를 위한 p5.js

  • p5.js는 코딩 학습과 아트 제작을 위한 무료 오픈소스 JavaScript 라이브러리임
  • 예술가, 디자이너, 초보자, 교육자 등 다양한 사용자를 환영함
  • 프로젝트는 포용적이고 돌봄 지향적인 커뮤니티를 중심으로 운영됨
    • 한국의 50세 이상 대상 Coding Club, Nairobi와 NYC 워크숍 같은 활동 사례가 있음
  • 기능 추가 정책은 비교적 명확함
    • 접근성을 높이는 기능을 제외하면 새 기능을 추가하지 않음

학습과 제작을 시작하는 경로

  • Reference: p5.js 라이브러리 참조 문서
  • Examples: 예제로 p5.js를 학습하는 공간
  • Start Coding: 웹에서 바로 코딩을 시작하는 p5.js 에디터
  • interactive video: 애니메이션, 오디오, WebGL, 접근성, 기여 방법을 다루는 대화형 소개 영상
  • Download Library: p5.js 라이브러리 다운로드

커뮤니티와 참여

  • Community: p5.js 커뮤니티 활동을 확인하는 페이지
  • Donate: 프로젝트 후원을 위한 기부 경로
  • p5.js 2.0 beta: 새 버전 p5.js 2.0을 확인하는 별도 베타 사이트

함께 보면 좋은 글 β

GN⁺   [-]
Hacker News 의견들

  • 이 링크가 지금 HN에 올라온 핵심 이유는 p5.js 새 웹사이트 때문인 듯함
    2023년에 Sovereign Tech Fund가 p5.js 팀에 “p5.js 문서 구조와 접근성 개선” 명목으로 45만 유로 지원금을 줬고, 지금 보이는 결과물이 그 투자에서 나온 것으로 보임
    개인적으로는 성과가 있는 듯함. 사이트 탐색과 검색이 훨씬 쉬워졌고 정보도 더 유용해짐. 예를 들어 스크린 리더로 p5.js 편집기와 캔버스를 쓰는 방법의 이전 문서와 새 문서를 비교해볼 만함
    [1] - STF announcement/progress - https://p5js.org/events/stf-2024/
    [2] - Using p5 with a screen reader (old version) - https://archive.p5js.org/learn/p5-screen-reader.html
    [3] - How to Use the p5.js Web Editor with a Screen Reader (new) - https://p5js.org/tutorials/p5js-with-screen-reader/
    [4] - Writing Accessible Canvas Descriptions (new) - https://p5js.org/tutorials/writing-accessible-canvas-descrip...

    • 최근에 디지털 광고 하나를 전부 Processing으로 만들고 p5.js로 옮겨봤는데, p5.js가 따라잡고는 있어도 작업하기는 여전히 Processing이 훨씬 쉬웠음
      10년 전쯤에도 Processing을 썼는데 이미 아주 쉬웠고, p5.js에서는 버그나 빠진 구현을 찾기도 쉬웠음. 거의 동일하게 포팅은 가능했지만 1:1은 아니고 일부 API를 배워야 했음
      성능 면에서는 p5.js가 d3나 three.js에 전혀 가깝지 않음. 솔직히 2024년에 교육용 도구 말고 p5.js가 얼마나 의미 있는지 의문임. 요즘 웹 애니메이션은 최신 CSS3와 보조 라이브러리로 하는 편이 더 쉬워 보이고, 무료 벡터 앱에서 CSS로 이어지는 단순한 흐름도 가능해 보임
      픽셀 단위 계산이 필요한 작업에서도 GPU를 효율적으로 쓰는 쉬운 방법이 없음. 그래서 45만 유로 지원이 꽤 이상하게 느껴지고, 특히 인기가 크지 않은 프레임워크에 배정된 점이 더 그렇다
    • 예전 사이트를 https://archive.p5js.org/로 계속 볼 수 있게 해둔 건 좋음
      다만 큰 화면에서의 배치는 마음에 들지 않음. 링크된 튜토리얼 [1]은 고정 폭의 왼쪽 정렬 문단이라 화면 오른쪽 절반이 비어 있음. 반대로 참조 문서 개요 [2] 같은 요소는 전체 화면에 4열로 늘어나는데, 브라우저 창을 화면 절반 폭으로 줄였을 때는 괜찮지만 최대화하면 읽기 어려움
      [1]: https://p5js.org/tutorials/p5js-with-screen-reader/
      [2]: https://p5js.org/reference/
    • 어제 JavaScript Weekly에서도 꽤 눈에 띄게 소개했음
      구독자가 약 17만 5천 명이라, 여기에 넣은 링크가 몇 시간 뒤 HN 첫 페이지에 오르는 경우가 자주 있음. 실제 연관성을 증명하기는 거의 불가능하지만, 생태계 안에서 링크가 퍼지는 재미 중 하나라고 봄
    • 예전 사이트도 괜찮았고 이미 모바일 반응형이었음
      새 사이트는 모바일에 더 최적화됐고, 고밀도 화면에서 더 많은 내용을 읽기 좋게 만들어줌. p5.js가 새로 주목받는 건 충분히 그럴 만하고, 관련 Coding Train 영상들도 마찬가지로 볼 가치가 있음

  • ChatGPT가 P5.js를 꽤 잘 알아서 “사인파를 그리고 슬라이더로 위상을 조절할 수 있는 P5 프로그램을 작성해줘”라고 하면 바로 만들어줌
    ChatGPT와 P5.js로 둘레 위의 질량 5개 균형을 맞추는 설계 도구를 만들었고, 이는 고조파 잠김을 줄인 회전식 자기 활을 만들기 위한 것이었음
    오각형 꼭짓점을 드래그해볼 수 있음: https://editor.p5js.org/spDuchamp/full/zgtkE2xik
    3D 프린트 결과물: https://www.instagram.com/p/Cr4ZXGztY27/

    • 흥미로운데, 이건 어디에 쓰는 건가?
    • LLM이 게임의 새 콘텐츠를 계속 프로그래밍해서 절차적 생성 게임을 만드는 모습을 상상하게 됨

  • 정말 예쁜 웹사이트임. About 섹션에서 이것이 Processing의 아이디어를 이어받은 것이라는 내용을 뺀 게 의외임
    이제는 p5.js가 Processing보다 더 유명해졌거나, 과거의 Processing보다 더 유명해진 걸지도 모르겠음

    • Ben Fry와 Processing Foundation 사이에 분열이 있었으니 정치적인 이유일 가능성이 있어 보임
      그의 주요 불만 중 하나가 p5.js 프로젝트가 Processing Foundation을 장악하고 Processing 개발을 축소했다는 것이었음
    • proce55ing을 미니 언어로 정말 좋아했음
      웹페이지 안의 캔버스 같은 곳에서 픽셀을 조작해 흥미로운 시각 실험을 만들기 꽤 어려웠던 시절에는 정말 합리적인 도구였고, 프로그래밍 경험이 적은 예술가에게도 읽기 쉽고 접근하기 좋았음

  • 대학 때 p5.js로 놀면서 정말 즐거웠고, 예전에 직접 작은 세포 자동자도 만들었음: https://ezhik.me/beyond184/
    우연히도 디지털 아트에 처음 관심을 갖게 만든 작품, 컴퓨팅에 대한 즐거운 헌사 같은 그 작품도 p5.js를 사용했음: https://baku89.com/work/ffff?lang=en https://animethemes.moe/anime/subete_ga_f_ni_naru_the_perfec...
    프로그래머로서 가장 어려운 일 중 하나는 화면에 첫 픽셀을 찍기 전까지의 보일러플레이트를 통과하는 것인데, p5.js는 그걸 꽤 잘 해결해줘서 “크리에이티브 코딩”의 창작적인 측면에 더 집중하게 해줌
    “진짜 대형 소프트웨어 개발”에는 p5.js를 쓰지 않겠지만, 스케치를 하고 싶을 때 가장 먼저 손이 가는 디지털 도구임

  • 몇 년 전 Daniel Shiffman 덕분에 이 라이브러리를 알게 됨
    그의 영상들은 프로그래머로 성장하는 데 필수적이었음

  • 게임을 빠르게 만들기 꽤 좋은 라이브러리임
    p5.js로 작은 물 시뮬레이션을 만들었고, p5를 배우기 쉬운 점이 정말 마음에 들었음
    [1]: https://github.com/trungdq88/summer

  • 원래 Java 기반이던 Processing은 많은 라이브러리에 영감을 줬음
    요즘은 인기 있는 대부분의 언어에서 어느 정도 호환되는 라이브러리를 찾을 수 있음
    여름 프로젝트로 Racket용 버전을 작성했음: https://docs.racket-lang.org/manual-sketching/
    가장 큰 영감은 Daniel Shiffman의 YouTube 채널 “The Coding Train”이었음. 그는 시각적으로 흥미로운 문제와 알고리즘을 고르는 감각이 있고, 열정도 비할 데가 없음
    https://thecodingtrain.com/

  • p5.js를 전문 작업에서도 많이 써왔지만, 지금 쓰려는 사람이라면 foundation의 공동 창립자 중 한 명이자 p5의 바탕이 된 원래 Processing 언어의 창시자에게 무슨 일이 있었는지는 알아두는 게 좋겠음
    https://news.ycombinator.com/item?id=37760363
    지금 아는 것을 알고 나니 Processing Foundation의 작업을 지원했던 것이 후회됨

    • Processing Foundation이 Mozilla Foundation화된 것처럼 보임
    • 이걸 보니 많은 게 설명됨
      성능 좋은 그래픽 API가 이렇게 많은 시대에 Processing/p5가 왜 몇 년 동안 큰 변화 없이 정체된 느낌이었는지 이해가 됨. 슬픈 결말이다

  • P5.js를 정말 좋아함. 커뮤니티인 OpenProcessing에는 쉽게 보고, 복제하고, 수정할 수 있는 멋진 작품이 수천 개 있음
    주로 Python을 쓰지만 P5.js 프로그램을 조금씩 고쳐보면서 JavaScript를 배우는 데 도움이 됐음
    [1] -- https://openprocessing.org/discover/#/trending

  • p5.js의 플레이그라운드에서는 브라우저에서 코드를 작성하고 실행할 수 있고, 계정을 만들어 코드 스케치를 저장할 수도 있음
    https://editor.p5js.org/nonoesp/sketches/ruSYeEUEH

답변달기