p5.js - コーディングとアート制作のためのオープンソースJavaScriptライブラリ

 (p5js.org)
3 ポイント 投稿者 GN⁺ 2024-08-04 | 1件のコメント | WhatsAppで共有
  • p5.jsは、コーディング学習とアート制作をWebで始められるようにする無料のオープンソースJavaScriptライブラリ
  • アーティスト・デザイナー・初心者・教育者を幅広く対象としており、プロジェクトの中心には包摂的なコミュニティがある
  • むやみに新機能を増やすのではなく、アクセシビリティ向上に寄与する機能は例外とする方針を取っている
  • Reference、サンプル、Webエディタ、対話型の紹介動画が提供されており、アニメーション・オーディオ・WebGLの学習と制作をすぐに始められる
  • ダウンロード、寄付、コミュニティ参加、p5.js 2.0 betaの確認先までが一か所につながっており、学習者とコントリビューターの双方にとっての入り口になっている

コーディングとアートのためのp5.js

  • p5.jsは、コーディング学習とアート制作のための無料のオープンソースJavaScriptライブラリ
  • アーティスト、デザイナー、初心者、教育者など多様なユーザーを歓迎している
  • プロジェクトは、包摂的でケア志向のコミュニティを中心に運営されている
    • 韓国の50歳以上向けCoding Club、NairobiとNYCのワークショップといった活動事例がある
  • 機能追加ポリシーは比較的明確
    • アクセシビリティを高める機能を除き、新機能は追加しない

学習と制作を始めるための導線

  • Reference: p5.jsライブラリのリファレンス文書
  • Examples: サンプルでp5.jsを学ぶための場所
  • Start Coding: Webですぐにコーディングを始められるp5.jsエディタ
  • interactive video: アニメーション、オーディオ、WebGL、アクセシビリティ、貢献方法を扱う対話型の紹介動画
  • Download Library: p5.jsライブラリのダウンロード

コミュニティと参加

  • Community: p5.jsコミュニティの活動を確認するページ
  • Donate: プロジェクト支援のための寄付先
  • p5.js 2.0 beta: 新バージョンp5.js 2.0を確認できる別個のベータサイト

関連記事

1件のコメント

 
GN⁺ 2024-08-04
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