p5.js
p5.js is a friendly tool for learning to code and make art. It is a free and open-source JavaScript library built by an inclusive, nurturing community. p5.js welcomes artists, designers, beginners, educators, and anyone else! Lauren Lee McCarthy reading the Processing Community Catalog. Photo credit: Maximo Xtravaganza. Coding Club for people aged 50+ in Korea, led by Inhwa Yeom. Qianqian Ye intro
p5.jsで3次元アニメーションを試してみた - infosmith.biz
気づけば前回のエントリから既に1カ月以上が経過。いかんですね。正直、コードはいっぱい書いているのですが、それをエントリ化しようと整理し始めると、追加で調べてみたいことや試してみたいことが次から次へと出てきて、なかなか手が進みません。 今回は「p5.js」の3次元機能について。Processingでは、「size」関数の第3引数に「P3D」あるいは「OPENGL」と書いておくことで、スケッチ内で3次元座標を扱えるようになります。「p5.js」にも同等の機能が用意されており、createCanvas関数の第3引数として「WEBGL」と指定してやります。 試しに、以前Processingで書いた3次元のスケッチをp5.js向けに書き直してみました。 （2017/10/12追記：このスケッチは5.14向けのものですが、p5.jsでは5.16以降でWebGL関連の機能が大きくアップデートされており、
p5.jsがWebGL＆3D対応。軽くいじってみます - Qiita
地味に拡張しているp5.js。久々にウォッチしてみると2015/10/05のリリースでWebGL対応していて、それに伴い3Dのサポートもはじめたようです。他のライブラリには色々先を越されていると思いますが、いじってみました。 最後は、時間がなかったのでシンプルなUFO作って終了 基本テンプレート 見るところは公式サイトのチュートリアル、あとはリファレンスにはそれに載り切らない実装がありました。まずは基本テンプレを p5パッケージのサンプルファイルの、コメント冒頭にはShiffmanのサイトへのリンクが。宣伝乙であります // Learning Processing // Daniel Shiffman // http://www.learningprocessing.com // Example 1-1: stroke and fill function setup() { createC
p5.jsで作るゲーム開発超入門！100行以内で「ブロック崩し」に挑戦してみる！ : うえぶはっく
「p5.js」というJavaScriptライブラリが最近気になっていたので、勉強も兼ねてちょっと遊んでみました。 そもそも「canvas」を利用した描画処理を簡単にプログラミングできるのが「p5.js」の特徴ですが、機能を拡張するライブラリがとても優秀で、ゲーム、音楽、Webアプリ、IoT…など、幅広いジャンルの開発ができるところに魅力を感じています。 そこで今回は、ゲーム用の拡張ライブリ「p5.play」を使って、シンプルな「ブロック崩し」を作ってみたいと思います！ 用意するもの！ ゲームを作るのに必要なファイルは、「HTMLファイル」と「JavaScriptファイル」です。 HTMLファイルは、単純に「p5.js」関連のファイルを読み込んで、今回作る「ブロック崩し」のゲームファイル「app.js」を明記するだけでOK。 <!-- index.html --> <!doctype htm
p5.jsでミニゲーム「メテオロイド」を作ってみた – infosmith.biz
前回のエントリでは、こちらの本の第1章「ベクトル」で紹介されているProcessingコードをp5.jsに移植しながらアレンジしたのですが、 ■ Nature of Code – Processingではじめる自然現象のシミュレーション その画面が「弾幕シューティング」のようになったのに触発されて、せっかくなのでよりゲームぽくアレンジしたものを作ることに挑戦してみました。シンプルですが、それなりに楽しくできたと思うので、よかったら遊んでみてください。 ●ミニゲーム「メテオロイド」（クリックすると別タブが開きます。マウス推奨。ちょっとだけ音が出るので音量注意） 起動すると即ゲームスタートです。黒いカンバス上のどこかをクリックすると、そこに「赤い二重丸」が表示されます。ゲームの目的は、画面上でマウスポインタを動かし、この「赤い二重丸」をゆっくりと追いかけてくる青いツブツブとぶつからないよう、で
HTML5開発者必見、最速のJavaScriptライブラリはどれだ!? パフォーマンスの徹底検証 | ICS MEDIA
HTML5で2次元のインタラクティブコンテンツを制作するには、さまざまなJavaScriptライブラリがあります。どれを選択するべきか迷いどころではないでしょうか？ そこで今回はHTML5の各種JavaScriptライブラリについて、パフォーマンスを比較検証してみました。 今回検証したフレームワーク メジャーなJavaScirptライブラリとして次の5種類でテストしました。バージョンは2013年4月10日現在の最新版を使っています。詳しい検証方法は記事の後半にまとめています。 CreateJS (EaselJS 0.6.0) Arctic.js (v0.1.11) enchant.js (v0.6.3-48) Pixi.js (v1.0.0) Processing.js (v1.4.1) 各種JavaScirptライブラリのベンチマーク結果 ※グラフの数値が高いほどパフォーマンスが高いこと
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
p5.jsのWebGLモードで「ブラー」を使ってみる - infosmith.biz
p5.jsで「ブラー」や「グロー」を使う方法 - infosmith.biz
p5.jsで加算ブレンド | はじめてプログラム
Processing×Webの薄い本ください。 ～Processing.jsについて～