9：オブジェクト p5.js JavaScript – HIM.CO ヒム・カンパニー
オブジェクト指向プログラミング(OOP)はプログラムについて考える、また別の方法です。オブジェクトはまた、変数をそれと関係する関数とグループ化する方法でもあります。変数や関数の扱いに慣れてくると、オブジェクトは単に、これまでに学んだことをより理解しやすいパッケージにまとめたものだと分かってきます。 オブジェクトは重要です。なぜならアイデアをより小さな構成要素に分けたものであるからです。これは自然界にある事物に似ています。たとえば、臓器は組織でできており、組織は細胞でできています。これと同様に、コードがどんどん複雑になってくると、複雑化したものを形成するより小さな構造の視点から考える必要が出てきます。すべてのことを１度にやってしまおうとする大きなコードのかたまりを記述するよりも、互いが連携する、もっと小さくて理解しやすいコードのかたまりを記述して管理する方が、よほど容易です。 プロパティとメ
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ではじめる自然現象のシミュレーション その画面が「弾幕シューティング」のようになったのに触発されて、せっかくなのでよりゲームぽくアレンジしたものを作ることに挑戦してみました。シンプルですが、それなりに楽しくできたと思うので、よかったら遊んでみてください。 ●ミニゲーム「メテオロイド」（クリックすると別タブが開きます。マウス推奨。ちょっとだけ音が出るので音量注意） 起動すると即ゲームスタートです。黒いカンバス上のどこかをクリックすると、そこに「赤い二重丸」が表示されます。ゲームの目的は、画面上でマウスポインタを動かし、この「赤い二重丸」をゆっくりと追いかけてくる青いツブツブとぶつからないよう、で
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
p5.jsのWebGLモードで「ブラー」を使ってみる - infosmith.biz
p5.jsで「ブラー」や「グロー」を使う方法 - infosmith.biz
p5.jsで加算ブレンド | はじめてプログラム