第7回: p5.js Libraryを使う 1 – p5.dom でHTML 5オブジェクトを使う
p5.jsは、その設計思想として、構造をあまり複雑にせず創造的な部分に集中できるよう焦点を絞っています。グラフィクスとモーションを作り、マウスやキーボードといった汎用的な入力デバイスに反応する機能が基本です。しかし、それ以上のことを行うために、p5.jsではライブラリー (Libraries) というものが用意されています。ライブラリーとは汎用性の高い複数のプログラムを、再利用可能な形でひとまとまりにしたものです。p5.jsでも用途に応じて様々なライブラリがまとめられ、入手できるようになっています。 今回はp5.jsのライブラリーを使う第１弾として、p5.domを使用します。このライブラリーによって、p5.jsのcanvasの枠を越えて、HTML 5のDOMに直接アクセスすることが可能となります。例えば、Webブラウザで用意されている、ボタンやチェックボックス、スライダーなどのGUIのパー
p5jsでPokémon GOっぽいUIを作る(5) - Qiita
さて、5回目です。これまでcreateCanvas(600,600,WEBGL)と画面サイズを決め打ちしてましたが、スマートフォンの画像サイズを取得してキャンバスサイズを指定するのと、touchMovedを使って、画面をスワイプすると地図が動くようにします。 まず、今回からJavaScriptが長くなるのでhtmlから分離します。また、キャンバスの上と左に余計なマージンができるので、CSSでpadding:0; margin:0にしています。 <!-- index.html --> <!doctype html> <html lang="ja"> <head> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, viewport-fit=cover" /> <title>
VS Code & TypeScriptとp5.jsで始めるモダンなクリエイティブコーディング入門 - ICS MEDIA
ページの背景で動くダイナミックなパーティクルやラインアニメーション、あるいはちょっとした遊びごころの溢れるキャラクターアニメーションなど、webページにクリエイティブな表現を組み込めるようになりたいと考える方はエンジニアにも多いでしょう。 この記事では、基本的なJavaScriptの知識があれば誰でも始められるp5.jsというライブラリを使用して、クリエイティブな作品作りの入門を解説します。 環境面では、フロントエンド開発のデファクト・スタンダードとも言えるVisual Studio Code（以下VS Code）とTypeScriptを使用して、モダンで快適な開発環境を作ります。 環境構築といっても、とくに難しい作業はありません。記事を読みながらぜひ、オリジナルの作品作りにチャレンジしてみてください。 ▼ VS Codeでp5.jsを使って制作している環境の例 クリエイティブ・コーディン
9：オブジェクト p5.js JavaScript – HIM.CO ヒム・カンパニー
オブジェクト指向プログラミング(OOP)はプログラムについて考える、また別の方法です。オブジェクトはまた、変数をそれと関係する関数とグループ化する方法でもあります。変数や関数の扱いに慣れてくると、オブジェクトは単に、これまでに学んだことをより理解しやすいパッケージにまとめたものだと分かってきます。 オブジェクトは重要です。なぜならアイデアをより小さな構成要素に分けたものであるからです。これは自然界にある事物に似ています。たとえば、臓器は組織でできており、組織は細胞でできています。これと同様に、コードがどんどん複雑になってくると、複雑化したものを形成するより小さな構造の視点から考える必要が出てきます。すべてのことを１度にやってしまおうとする大きなコードのかたまりを記述するよりも、互いが連携する、もっと小さくて理解しやすいコードのかたまりを記述して管理する方が、よほど容易です。 プロパティとメ
home | p5.js
Search p5js.org Hello! p5.js is a JavaScript library for creative coding, with a focus on making coding accessible and inclusive for artists, designers, educators, beginners, and anyone else! p5.js is free and open-source because we believe software, and the tools to learn it, should be accessible to everyone. Using the metaphor of a sketch, p5.js has a full set of drawing functionality. However,
p5.jsのWebGLモードで「ブラー」を使ってみる - infosmith.biz
しばらく続けると言っていた「フラクタル」ネタを一時お休みして、昨年末からp5.jsで3D表現ができる「WebGLモード」を手探りでいろいろ試しています。 ・これまでの「p5.js WebGLモード」ネタ 今回のお題は「p5.jsのWebGLモードでブラーやグローぽい効果を使いたい」。以前、2Dモードでブラーやグローのような効果を出すやり方については、こちらのエントリで試してみていました。 ・p5.jsで「ブラー」や「グロー」を使う方法 2Dモードでの「ブラー」は ・backgroundでの背景色塗りつぶしをせずに、アルファ値を設定したrectで画面を覆う というやり方が一番手軽でよさそうでした。 2Dモードと同じやり方だとうまくいかない テストのために、600×600×600の空間上に100個くらいのsphereをばらまき、それぞれをランダムに動かすというスケッチを使います。 まずは2Dモ
p5.jsで「ブラー」や「グロー」を使う方法 - infosmith.biz
（※2020/12/13追記）このエントリでは、p5.jsでブラーやグロー的な表現を使いたい場合の方法について説明していますが、最新のp5.js（1.0.0以降）には「drawingContext」というオブジェクトが用意されており、それを使うことでより簡単に標準的な「グロー」や「ドロップシャドウ」のような表現を行えます。以下のエントリで簡単なサンプルを紹介していますので、このエントリと合わせてごらんください。 ●p5.js ver.1時代のシャドウとグロー インスタンスが動き回るようなスケッチを作っていると、軌跡を画面上に残す「ブラー」や、物体がぼんやりと発光しているように見える「グロー」のような効果を使いたくなることがあります。 p5.jsには「ブラー」や「グロー」を直接画像に適用するような機能はないのですが、調べてみたところ、多少の工夫でそれらしい効果が出せることが分かったのでまとめ
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で加算ブレンド | はじめてプログラム