はてなブックマーク

p5.jsでスケッチを制作する際にどんな感じの環境でやってるのかを晒します。 OSはMacです。 もっと効率の良いツール情報もお待ちしております！！ あと色んな人の作業環境知りたい！あなたの作業環境もぜひ晒してください。 ターミナル 「p5-manager」を入れています。 p5.js用のファイル構成を自動で生成してくれたり、index.html中のライブラリロード記述をあらかじめやっといてくれる優れもの！ p5-manager - npm 毎回、p5 g -b PROJECT_NAMEしてプロジェクトディレクトリごとにp5.jsライブラリをダウンロードして使ってたんですが、 今調べてみたら一度親ディレクトリ生成のためにp5 new my_collectionして、その後にそのディレクトリ内でp5 g my_projectしていけば子ディレクトリが生成される上に、子ディレクトリ内のinde

Processing Advent Calendar 2019 参加記事 p5.jsには実はたくさんのライブラリが存在します。コミッターの皆様には足を向けて寝られません。 libraries | p5.js 今回はその中からp5.speechを利用して遊んでみたいと思います！ p5.speech | Speech synthesis and recognition for p5.js p5.speechは音声認識と音声合成のためのライブラリで、これらの機能をサクッと簡単に使えるようなしくみになっています。 しゃべらせよう 音声合成のサンプルが以下のページで公開されています。 https://idmnyu.github.io/p5.js-speech/examples/02speechbox.html テキストボックスに適当な文言を入力して(日本語もいけます)、Speakボタンを押すと読み上

p5.jsとPS4のコントローラ、Switchのコントローラ(Joy-Con)が接続できるか調べてみました。 ブラウザと各種ゲームコントローラがつながるので色々面白いことができそうです。 使用OSはMac(High Sierra)、使用ブラウザはChromeです。 p5.jsとPS4のコントローラを接続 あらかじめ、PS4コントローラのPSボタンとSHAREボタンを同時押しした後、Macの環境設定のBluetoothから「Wireless Controller」に接続してください。 デモページは以下です。 https://reona396.github.io/p5_gamepads_ps/ 適当にボタン押したら反応すると思います。 押されたボタン名に枠が付きます。アナログスティックの動きは上部に反映させています。 接続方法は以下を参考にしました。 MacにPS4コントローラを接続して利用す

Processing Advent Calendar 2017 参加記事 p5.js のライブラリのひとつ p5.collide2D はその名のとおり当たり判定を手軽に実装できるライブラリです。 bmoren/p5.collide2D: 2d collision library for p5.js このライブラリのサンプルにも含まれている、図形を重なることなく充填させる"ぎゅむぎゅむ"スケッチの描き方が面白かったので紹介します。 p5.collide2D は対象となる2つの図形が衝突しているかしていないかを判断してくれます。 例えば、以下のサンプルスケッチではマウス(=点)と四角が衝突しているか判定し、 衝突している場合は四角の色が変わるようになっています。 Basic Usage 対象となる図形は円、四角、線、点などが用意されており、 判定する組み合わせも「円と円」、「円と線」など、様々

p5.js のスケッチを展示できるサービスを試してまとめてみました。 2019/03/19追記 : NEORTを追加しました。 2021/01/15追記 : 最新の情報にアップデートしました。 OpenProcessing OpenProcessing - Algorithmic Designs Created with Processing Processingの老舗投稿サイトです。どれくらい老舗かというとJavaアプレットで投稿してた時代があったくらいです。 p5.jsおよびProcessing.jsでの投稿を受け付けており、交流機能や作品に対するお気に入り機能なども提供されています。 (※2021/01/15追記 : Processing.jsでの投稿はできますが技術的に古いので非推奨となっています) 最近リニューアルされて、作品がよりかっこよく展示できるような工夫が凝らされています

Processing Advent Calendar 2015 参加記事 今年はTumblrというサービスにハマってしまい、 そこで「vaporwave」という音楽ジャンルに出会いました。 vaporwaveについてのアツい思いを書いたりもしました。 そもそもvaporwaveとは既存の楽曲を切り貼りしたりアレンジしたりするのが特徴の音楽なのですが、 これにまつわるアートワークやMVには、 レトロなギーク要素が多く取り入れられています。 古い3Dアニメや昔のWindowsのスクリーンショットなどがよく登場しますが、 それと並ぶ人気のレトロギーク要素がVHSの映像・画像です。 ざらりとしたノイズ、ぼやけた輪郭、独特のジャギジャギとした文字がレトロかつパンクに映ります。 というわけで今回はこのレトロギークロマンあふれるVHSっぽい画像をProcessingでつくることに挑戦してみました。 【1

Processing Advent Calendar 2013 参加記事 Processingでは、beginShape()とendShape()、 vertex()を用いることで、色々な図形を描くことができます。 正多角形を描く 正多角形は以下のようなコードで描くことができます。 int vertex_num = 6; //頂点数(六角形を描画) int R = 200; //頂点から中心までの距離(半径) int centerX = width/2; //図形の中心のx座標 int centerY = height/2; //図形の中心のy座標 float x; //頂点のx座標の計算用 float y; //頂点のy座標の計算用 pushMatrix(); translate(centerX, centerY); beginShape(); for (int i = 0; i < v

Processing Advent Calendar 2014 参加記事 私は現在、大学院の修士1年なのですが、 大学院生になるとティーチングアシスタントといって、 先生の補助として仕事を請け負うという活動を行います。 テストの監督や答案の採点、あるいは実験の補助などが主な内容なのですが、 私の指導教官がプログラミングの授業の担当ということで、 その授業で教壇に立つことになりました。 授業内容はもちろんProcessing(+α)です。 対象は、学部2年生のプログラミング演習の授業と、 学部1年生の情報リテラシー実習という授業です。 この記事では、授業の内容や、受講生の反応、 Processingによる教育的効果についての考察を述べます。 学部2年生の授業について 授業の目的と内容 学部2年生前期に「プログラミング演習」という必修授業が行われます。 別枠でアルゴリズムに関する授業が開かれて

ProcessingにはExperimentalモードやPDE Xモードにデバッグモードが搭載されています。 リアルタイムなエラーチェッカーの他、ブレークポイントの設定も可能です。 以下のページに使い方が書かれています。 Debug Mode for Processing この記事では、上記ページからブレークポイントの使い方についての内容を翻訳し、まとめたものを書きたいと思います。 なお、PDE Xの使い方については以下を参照してください。 補完・デバッグ機能搭載！Processingの新モード「PDE X」使い方ガイド -- デバッグモードを有効にする デバッグ環境にするため、モードをExperimentalモードかPDE Xモードに切り替えます。 なお、PDE Xモードの場合は、メニューバーの「PDE X」から「Show Debug Toolbar」を選択し、デバッグモードを有効にしま

先日の「Twaek」モードに続き、Google Summer of Code 2013のプロジェクトである「PDE X」がProcessingの新たなモードとして搭載されました。 Quarks: Announcing PDE X! Getting Started · processing/processing-experimental Wiki · GitHub 上記ページに紹介されているとおり、今回の新モードは ・コード補完機能 ・コードのアウトライン表示 ・変数名や関数名等の確認や変更の簡易化 ・Importを必要とするコードへの補助 ・デバッグ機能 ・エラーチェッカー といった便利な機能が多数追加されました。 今回のこの記事では、上記ページを翻訳しまとめたものを書きたいと思います。 -- 導入方法 「PDE X」はProcessing2.0.2以上で動作します。 これより古いバージョ

Processingに新たなモード「Tweakモード」が搭載されました。 引用動画からわかるとおり、このモードはスケッチを実行しながら直感的にコードが改良できるという素晴らしい機能を持っています。 この機能を使うことにより、ハードコーディング(決め打ち、ベタ書き)された値も調整しやすくなります。 使い方はこちらのページに書いてあります。 Gal : portfolio この記事では、上記ページを翻訳し、まとめたものを書きたいと思います。 -- 導入方法 Processingのダウンロードページから、最新版を準備してください。 なお、現在の最新版は2.0.3です。 Download \ Processing.org Processingを起動し、右上のモード表示(デフォルトではJavaモード)をクリックします。 メニューから「Add Mode...」を選択し、「Tweak Mode」をインス

Processingのライブラリで「Handy」というものを見つけました。 いつものスケッチがあっという間にマーカーペンでぐしゃぐしゃに落書きしたような ポップな絵柄に生まれ変わります。 ダウンロードはこちらから。 giCentre: Handy Processingへはマニュアルでインストールします。 Processingのスケッチが保存されているフォルダ(Documentsフォルダの下のProcessingフォルダがデフォルトのはずです)の中に、 「libraries」というフォルダをつくり、そこに上記サイトからダウンロードしてきたzipを解凍します。 使い方はこちらに書いてあります。 giCentre | Using the HandyRenderer 今回は上記ページを翻訳し、まとめたものを以降に書こうと思います。 -- 使い方 上記のようにインストールした後、Processing

Processing.jsを利用して、Webページで使えるアニメーションな背景をつくってみました。 花のアニメーションな背景ページ 花がくるくる回りながら、浮かびあがったり透明になったりします。 色が変わるインタラクティブな背景ページ 四角をクリックすると、背景に浮かんでいる円がそれぞれの色に変化します。 このようなインタラクティブな背景ページも作ることができます。 設置方法について解説していきます。 まずはhead内についての記述です。 1、Processing.js本体を読み込む<script src="Processing.js本体へのパス"></script> Processing.js本体を読み込みます。 パスを正しく書いてください。 2、canvasを画面いっぱいに表示するためにJSとCSSを記述 canvasを全画面に表示する | 2GRAVITY こちらのページを参考に、J

***** 【2016年10月14日 追記】 この記事は古い情報を掲載しています。 現在、OpenProcessingは大規模リニューアルにともなって使用方法が変わっています。 詳しくは以下の記事をご覧ください。 OpenProcessingがリニューアル！ : だらっと学習帳 ***** Processing Advent Calendar 2012 12月3日参加企画 【1】はじめに 最近、Processingがプログラミング初心者にオススメの言語として、 雑誌やネットでも紹介されるようになりました。 学習の最初の一歩として取り入れている情報系やデザイン系の学校も増えてきているそうです。 「Processing　入門」と検索すれば、プログラミングの基礎からデザイン的な表現法まで、 初心者をサポートする資料がたくさん見つかると思います。 しかし、そこから先のステップを示す資料は意外と見つ

Android端末をいただいたお借りしたので、Processingのスケッチを入れてみました。 画像はこのスケッチを実機で実行したところ。 色々試行錯誤したのですが、 結論からいうとエミュレータで動かすより実機で動かした方が何倍も楽でした。 エミュレータはいまだに正常に動く条件を理解できていません…。 エラーが出ても、少し経ってから実行すると上手くいったり…。 よくわからないです。 【導入について解説】 0、Processingの2.0aをダウンロード Download \ Processing.org 今の時点ではプレリリース版ですが、現在の正式バージョンである1.5.1でAndroid関係のことをすると バグが邪魔してくるらしいので、こちらをダウンロードして使ってください。 1、Android SDKをダウンロード Android SDK | Android Developers この

Processing Advent Calendar 2011 12/10企画 Processingを使って高校数学に復讐したいと思う。 高校数学を復習するのではない。復讐するのだ。 私は中学の時から数学が苦手だ。 高校の頃は理系クラスに入ったせいで毎日拷問のような日々を送った。 この写真はその拷問の証である。 そこで今回、各教科書一冊につき一分野ずつ、Processingでスケッチを作成することにした。 数学とは使いこなす事によって打ち負かすことのできる敵である。 Processingで使いこなされれば、数学だって「こりゃまいった！」と言わざるを得ないだろう。 私はさっそく作業に取りかかった。 【高校数学Ⅰ】二次関数（放物線） Math1_Parabola - Dog Fight- まずは数Ⅰである。 数Ⅰといえば、私を「場合分け」で苦しめた二次関数（放物線）である。 Processin