サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
災害への備え
blog.livedoor.jp/reona396
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ボタンを押すと読み上
ポータブルプロジェクターを買いました。 My New Gear!ポータブルプロジェクター買った。投影テスト中… (プロジェクター代の一部をpixivFANBOXの支援金から出しました。いつも応援いただきありがとうございます!頑張ります!) pic.twitter.com/XbOnA04VuG — レオナ (@reona396) 2019年3月16日 収納バッグ付きのほんとに小さくて軽いやつです。 amazonのタイムセールで半額くらいになっていて、しかも「あと30分でタイムセール終わるよ!」となっていたので買いました。チョロい。 Processingの作品展示やプロジェクションマッピング制作に使いたいと思い購入しました。 さらっとテストした感じ、特に問題はないかなという感じです。 暗い所であれば十分はっきり作品を投影できました。 ただ、ピント調整用のダイアルや台形補正用のバーがクソ固くて不
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コントローラを接続して利用す
適当に黒い縦長の円を描く function setup() { createCanvas(600, 350); } function draw() { background(255, 222, 205); push(); translate(width/2, height/2); noStroke(); fill(0); ellipse(0, 0, 190, 220); pop(); } 適当に白い円を重ねる function setup() { createCanvas(600, 350); } function draw() { background(255, 222, 205); push(); translate(width/2, height/2); noStroke(); fill(0); ellipse(0, 0, 190, 220); fill(255); ellipse(
Processing Advent Calendar 2017 参加記事 p5.js のライブラリのひとつ p5.collide2D はその名のとおり当たり判定を手軽に実装できるライブラリです。 bmoren/p5.collide2D: 2d collision library for p5.js このライブラリのサンプルにも含まれている、図形を重なることなく充填させる"ぎゅむぎゅむ"スケッチの描き方が面白かったので紹介します。 p5.collide2D は対象となる2つの図形が衝突しているかしていないかを判断してくれます。 例えば、以下のサンプルスケッチではマウス(=点)と四角が衝突しているか判定し、 衝突している場合は四角の色が変わるようになっています。 Basic Usage 対象となる図形は円、四角、線、点などが用意されており、 判定する組み合わせも「円と円」、「円と線」など、様々
Twitterで反響が大きかったので補足含めてまとめます。 前職でプログラミング教育の営業を少しやった事があったけど、年配の方には「プログラミング教育の意味?なぁに、家庭科の授業と同じです。食卓に出された物をふんぞりかえって食べてるだけじゃ感謝の心も芽生えず社会のしくみもわからない。ITも自分の手で学ぶのが大事なんです」でイチコロだった — レオナ (@reona396) 2017年5月10日 このイチコロ文句が響くのは「お料理を作って食卓に出している」あるいは「食卓にお料理が並ぶようにお金を家庭に入れている」世代ならではかなという印象でした。 特に「お料理を作って食卓に出している」タイプの方は(結構な割合で)ふんぞり返って食べられた経験がおありのようで、 「そうそう!やっぱり作ってもらってばっかりじゃダメだよね」という反応に行き着くことが多かったです。 これを言うと「そーなのよ、うちの娘
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 というサービスをご存知でしょうか。 画像や文章などをスクラップできるブログのようなサービスです。 様々なブログをフォローし、流れてくるコンテンツをお気に入り登録(スキ!機能)したり、 Twitterのリツイートのような機能である「リブログ」を行うことで、 「このコンテンツにグッときた!」という気持ちを記録することができます。 P5er こと Processing ファンにこそTumblrをすすめたい!という気持ちをぶつけるため、 こうしてlivedoorブログに書き込むことにしました。 Tumblrでスケッチを閲覧してみよう Tumblrには記事ごとにタグをつけることができます。 つまり、タグ検索で「#processing」と入力すると… #processing | Tumblr Processingス
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でグリッチ画像を生成してみました。 元の画像は、熊本県八代市で撮影した工場の写真です。 コードは以下のとおりです。 こちらのページを参考にしました: hysysk: today's glitch 3 PImage glitch; byte[] b; byte byte_check = 20; byte byte_count = 0; void setup() { b = loadBytes("test.jpg"); for (int i = 0; i < b.length;i++) { if (b[i] == byte_check) { b[i] = byte_count; } } saveBytes("glitch_" + byte_check + "_" + nf(byte_count, 2) + ".jpg", b); glitch = loadImage("gl
Processing.jsを利用して、Webページで使えるアニメーションな背景をつくってみました。 花のアニメーションな背景ページ 花がくるくる回りながら、浮かびあがったり透明になったりします。 色が変わるインタラクティブな背景ページ 四角をクリックすると、背景に浮かんでいる円がそれぞれの色に変化します。 このようなインタラクティブな背景ページも作ることができます。 設置方法について解説していきます。 まずはhead内についての記述です。 1、Processing.js本体を読み込む<script src="Processing.js本体へのパス"></script> Processing.js本体を読み込みます。 パスを正しく書いてください。 2、canvasを画面いっぱいに表示するためにJSとCSSを記述 canvasを全画面に表示する | 2GRAVITY こちらのページを参考に、J
Land of Lispのミュージックビデオの和訳に挑戦・改。 前回の記事を読んでくださった方、コメントくださった方、TwitterでRTやふぁぼってくださった方々、 ありがとうございました。 引き続きお付き合い下さい。 前回と同じく、小さい字は私のコメントです。 英語もLispもわかんないのでまだまだツッコミどころあると思います。 あと、今回はより日本語らしく訳すことを心がけました。意訳おもしろーい! A long time ago, a young Lisper was reading an Eighties games magazine... 今は昔、若きLisperは80年代のゲーム雑誌を読んでいた... ...you know, the kind with code for BASIC games printed in it. ご存じのとおり、そこにはBA
***** 【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をはじめよう」読み終わった。 内容は印象のとおり、初心者向けだけど中級者もカバーしてる感じ。 ただ、上級者も初心者指導には持っておくと便利かも、と思った。 だいたい日本語のProcessingの解説サイトを探すとメディア系の専門学校のページに行きつくし、 そういうところの先生や、授業を受ける人は参考書として良いと思う。 初版だけど私が発見した限りでは間違い1個しかなかったし。 →新しい版で修正されました。 実は「オブジェクト」と「拡張」の2章分だけが目当てで買ったようなものだったが、 意外にクイックリファレンスの「算術関数」という項が新しい発見もあって面白かった。 mag()とかdist()とかmap()とか。知らなかった。 各章末に紹介されてるロボットのデザインがなかなかかっこいい。 しかし、左中央に描かれた曲線的な導線を見て、 こんなきれいな曲線がきっち
Processing Advent Calendar 2011 12/10企画 Processingを使って高校数学に復讐したいと思う。 高校数学を復習するのではない。復讐するのだ。 私は中学の時から数学が苦手だ。 高校の頃は理系クラスに入ったせいで毎日拷問のような日々を送った。 この写真はその拷問の証である。 そこで今回、各教科書一冊につき一分野ずつ、Processingでスケッチを作成することにした。 数学とは使いこなす事によって打ち負かすことのできる敵である。 Processingで使いこなされれば、数学だって「こりゃまいった!」と言わざるを得ないだろう。 私はさっそく作業に取りかかった。 【高校数学Ⅰ】二次関数(放物線) Math1_Parabola - Dog Fight- まずは数Ⅰである。 数Ⅰといえば、私を「場合分け」で苦しめた二次関数(放物線)である。 Processin
このたび、インプレス NextPublishing 技術の泉シリーズより「チャットAIよ、この世で一番美しいデジタルアートを創造せよ!」をリリースしました。 2冊目の商業出版です!やりました! ChatGPTとBing AIといったチャットAIにプログラミングをお願いできるのなら、クリエイティブコーディングだってできるよね…?という内容になっています。 果たしてチャットAIはどのようなコードとアートを生成するのでしょうか? 書籍版、電子版をAmazonなどで販売しておりますのでぜひチェックしてください! 印刷書籍版▼ 電子書籍版▼ プレスリリースはこちら: このたび、インプレス NextPublishing 技術の泉シリーズより「2時間でクリエイティブコーダーになる本」をリリースしました。 念願だった商業出版です。 このブログもずいぶん続けてきましたが、商業出版はひとつの目標だったので本当
このページを最初にブックマークしてみませんか?
『blog.livedoor.jp』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く