サクサク読めて、
アプリ限定の機能も多数！
アプリで開く
ゲームエンジンや3Dソフトウェアを利用して高度な表現ができるこの時代でも、プリミティブな描画や動き、アルゴリズムから学べることは多い。それらをJavaScriptで書くクリエイティブコーディングという形で学べる手引書が本書となる。
p5.js Share Let's share the code of p5.js around the world! Please upload as much anything assimple artworks and amazing artworks. Art at 500x500 sizes.
p5.js のスケッチを展示できるサービスを試してまとめてみました。 2019/03/19追記 : NEORTを追加しました。 2021/01/15追記 : 最新の情報にアップデートしました。 OpenProcessing OpenProcessing - Algorithmic DesignsCreated with Processing Processingの老舗投稿サイトです。どれくらい老舗かというとJavaアプレットで投稿してた時代があったくらいです。 p5.jsおよびProcessing.jsでの投稿を受け付けており、交流機能や作品に対するお気に入り機能なども提供されています。 (※2021/01/15追記 : Processing.jsでの投稿はできますが技術的に古いので非推奨となっています) 最近リニューアルされて、作品がよりかっこよく展示できるような工夫が凝らされています
この記事はProcessing Advent Calendar 2015の15日目の記事です。 前置き 昔，幾つかお絵かきソフトを作った． turanegaku.hateblo.jp turanegaku.hateblo.jp せっかくだから通信したいと考えたのだが， processing.netのServerとClientを使うとなるとちょっと面倒くさい． どうせならsocket.ioを使って楽々やりたいと考えた． ということでp5.js, node.js, socket.ioを使って，お絵かきチャットソフトを作った． p5pchat p5pchat 下記の説明通りに作業を行うと簡単に通信を行うことができる．github.com つくりかた 当初の予定以上にただ持ってくるだけだったので，どうやってつくったのかを書くぞ!!! 目標herokuにupしてlocalじゃなく，socket.
p5.js プログラミングガイド サンプルプログラム 松田晃一、由谷哲夫、椎野綾菜 著 このページでは初版（2015年発行）のサンプルプログラムを紹介しています。改訂版（2021年発行）のサンプルプログラムについては当該書籍に記載のURLを参照してください。 サンプルプログラムは章ごとに構成されています。詳しくは、第1章のサンプルプログラムの動かし方を参照してください。ネットで公開されているサンプルプログラムは、ここをクリックしてください。本書で参照しているリンク一覧ここをクリックしてください。 ［2015-12-1追加］p5jsSamples.zip（約112MB）：本ページおよび本ページ以下の階層のリンク先を含むZIPファイルです。サンプルファイルを一括してダウンロードしたい場合にご利用ください。 第2章 p5.jsとJavaScript入門 DrawFunction: 「こんにちは」
GSwCCのトップページで動くフルスクリーンのp5.jsを最初に作ったときのこと。 function setup(){createCanvas(windowWidth, windowHeight); } として、画面いっぱいちょうどのサイズを指定しているはずなのに、縦横ともにスクロールバーが出てしまっていました。このスクロールバーをなんとか消したくて色々調べて調整してたのですが上手く行かず、最終兵器としてTwitterで呟いたところ見事フォロワーさんに助けていただいたので、その会話を載せておきます。 @P5Aholic canvasにdisplay:block;をいれたら綺麗に出たので、canvasが縦方向に数ピクセル拡張されて、はみ出て、スクロールバーが出ているのかな、と思いました。細かい仕組みは分からずですが。。これって自動生成でしょうか。手動ならCSSいじれば直るかと！— はぅ君
クラウド上のアプリ開発環境である Monacaクラウド を利用して、p5.js をスマホアプリとして動かしてみました。 Processing本家のAndroidモードは最近では今ひとつな状態ですが、 p5.js + Monaca を利用すれば簡単にスケッチをスマホ上で動かせるので便利です。AndroidだけでなくiOS等でも動かせますし、 何よりブラウザ上で開発できるので特別な環境構築を必要としないのも良いですね。 開発方法 Monacaのサイトへ行き、サインアップ、ログインを行います。 Monaca -HTML5ハイブリッドアプリ開発プラットフォーム その後、ダッシュボードから「新規プロジェクトの作成」を選択し、 「最小限のテンプレート」を選択します。 上部ツールバーから 設定 > JS/CSS コンポーネントの追加と削除 を選択します。 検索ボックスに「p5」と入力して検索します。
The p5 D3 Cookbook is a repository of documented examples for integrating the features of D3.js into the p5.js library. D3.js offers a wealth of tools for manipulating data and connecting data to visual representations. p5.js, whosegoal is to make coding accessible for artists, designers, educators, and beginners, provides a environment where users can sketch their ideas in code. Together, these
A collection of computer vision examples for p5.js by @kcimc. Includingjsfeat, clmtrackr, js-objectdetect, JSARToolkit, oflow, and tracking.js. Download fromGitHub. Low level (analyzes single pixels):Empty Average Brightness Thresholding Brightest Point Color Detection Background Subtraction Frame Difference Medium Level (analyzes patches of pixels): Motion History Point Tracking Optical Flow E
HTML5では、PCのマイクやカメラから音声や映像を取得するMedia Streamと呼ぶインタフェースが提供されています。この機能はIE11やSafariでは、まだ実装されておらず、ChromeとFirefoxのみのサポートですが、今回、この機能を活用して、先週投稿したthree.jsによる3D再帰木を、マイクから拾った音声に応じて動くようにしてみました。以下の画像をクリックすると、ブラウザがマイクを使用してよいか尋ねるダイアログボックスが表示されますので、それをONにしてみて下さい。3D木が表示され音声に応じて動きます。YouTubeなどで音楽を流すと踊ります。 今回、p5.jsというライブラリを使ってMedia StreamAPIを利用しました。p5.jsは、Processingに近いコーディングスタイルでアニメーションやメディア操作が容易に記述できるJavaScriptのライブラ
高校数学がボロボロでも大丈夫です。（ もともと個人的にインプットし貯めていたものですが、書きなおして公開します。 地味ですが、派手な動きはこの地味な数式・概念がベースになってきます。 また、メディアアートとは言ったものの、ゲーム制作などにも役立つでしょう。 「ラジアンとは？」「サイン波を描く」「円軌道を描く」「弾幕（2点間の距離系&角度系）」「多角形を描く」「フラクタル」といったテーマです。 また、そのプレイグラウンドとしてp5.js（Processingのjs版）をご紹介します。2014年にリリースされたものでまだマイナーですがCodePenのような海外サイトでは人気が出つつあります。またProcessing公式プロジェクトなので安心感もありますね。ちなみに、Processing.jsとは別プロジェクトです。 ラジアンとは？ ・ラジアンは単位 角度についてのもう一つの単位です。 角度とラ
夜中のテンションで作るの良くない。ずっと見てると目が痛くなる。mactkg/p5.js-screen-saver ·GitHub 作った。p5.jsで書いたスクリプトがそのままスクリーンセーバーになるやつ。ソースコード、ほとんどnotona/ugoira-screen-saver ·GitHubを参考にしてて、WebViewはっつけてるだけ。WebViewがキャッシュしてると更新されないことがあるからそこだけ変えてると思う。 インタラクティブ・プログラミング勉強会 第1回 乱数 | fladdictとかを参考にすると面白いものが作れるかもしれない。お気に入りの動きとかをスクリーンセーバーにしたり出来ると楽しいんじゃないでしょうか。 遊び方 まずp5.js-screen-saverを落とす Releases ·mactkg/p5.js-screen-saver ·GitHub 解凍
mbedJSを使うと、mbedでWebページ連動のハードウェアを作ることができます。今回はmbedJSの導入方法を説明し、mbedJSとp5.jsの連携、iPadでの利用などについて紹介します。 mbedJSとは mbedJSはmbedをネットワーク経由で制御するためのサーバファームウェアです。mbed上でWebサーバとして動作し、PCやスマートフォンからWebブラウザを使ってmbedにアクセスするとWebページが表示されます。ユーザはそのWebページ上で操作を行うことにより、mbedの入出力を制御することができます。 mbedJSではJavaScriptを使ってmbedのAPIを呼び出せるようになっており、プログラマはJavaScriptとHTMLを使ってWebページ連動のハードウェア制御を記述することができます。 必要なもの mbedJSを動かすには以下のものが必要です。 mbed ネ
最終課題のテーマ :「インタラクティブ・サウンド・アニメーション」 金曜日のサウンドの授業で作成した音を使用して、Webブラウザ上でインタラクティブなアニメーション作品を制作し発表する。 音響素材 : サウンド（矢坂先生） プログラミング : ネット（田所） この2つの要素を融合する インタラクションは、キーボード操作を基本とするが、それ以外のインタラクション（マウス、Webカメラ、センサー?）を使うのは自由 授業では、p5.jsを使用して解説するが、それ以外のJavascriptのライブラリ、その他の言語を使用しても良い ただし作品はWebブラウザで発表できるものに限定 先週のプログラムの復習 先週作成した、キー入力によって、アニメーションと音を再生するサンプルについて、再度復習します。 sketch.js var sample = []; varanimation; var num;
前回に引き続きp5.jsでWebブラウザ上でプログラミングしていきます。今回からは、p5.jsでサウンドを扱っていきます。最終目標のイメージとして、音と映像をインタラクティブに操作する作品、例えば、patatapのような作品をWebブラウザ上で発表します。 patatap – http://www.patatap.com/ サンプルファイル 今回とりあげるプログラムのサンプルは、全て下記からダウンロード可能です。 https://github.com/tado/SoundNet14 サウンドファイルの準備 手元にサウンドファイルを準備します。もし、手元に適当なサウンドがない場合には、freesoundやsoundcloudからフリーのサウンド素材をダウンロードして使用しましょう。 最終的に作品で使用するサウンドは、金曜日のサウンドの授業で作成したもので作成します。 サウンドファイルを再生す
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
