processing.jsを使った簡単なサンプル
processing.js は、processing のコードをそのまま HTML5 の canvas 要素で動かしてしまおう。というものです。
公式ページはコチラ
とりあえずどのように動くのか見てください。簡単なサンプルのつもりが、WebGLが必要になってしまったので、サポートしている Chrome などのブラウザでアクセスしてください。
思ったより、動作早いですよね。
さて、まずはHTMLのコードから解説していきます。
【Javascript】 YouTubeプレイリストを便利にするブックマークレット
YouTubeのプレイリスト検索結果画面が少し前から、使いづらくなりました。
この画面です。
YouTubeプレイリスト検索結果のキャプチャ
YouTubeのプレイリストは作業中のBGMとして聴いたり、昼食中に眺めたり、とても便利でよく使っていました。
特に不便と感じたのは次の２点です。
(1) 検索結果までのステップが増えた
(2) プレイリストの内容閲覧画面がなくなった
です。
現在、プレイリストの検索結果に辿り着くには、
1. トップページからキーワードを入力して検索
2. 検索オプションを開く
3. 「プレイリスト」を選択する
このようなステップが必要です。以前はトップページからタブを選べば一発で検索できました。
また、プレイリストの検索結果、以前まではプリリストのタイトルなどをクリックすると、
そのプレイリスト内に含まれる動画が一覧表示されるページに遷移できました。 => こんなページ
しかし、今は自動的に再生画面に飛び、再生が始まります。
目的の動画で構成されたプレイリストなのかどうか確認するためにはとても大切なページでした。
と、不満を言ってるだけでは意味がないので、エンジニアらしく工夫で自己満足できるレベルまで改善していこうと思います。
【Processing】 Light Blossom
この作品は『Light Blossom』というタイトルにしていますが、光の軌道が花びらのように見えたので、
そのように命名していますが、それは狙ってできあがったものではありません。
今回は3D平面とカメラ、さらにblendというメソッドを利用してこれを実現しています。
ぜひコード解説をお読みいただき、偶然でも見れるものが作れるということを知っていただきたいと思っています。
【Processing】 Simple Paricles
今回はProcessingがもっとも得意とするであろうParticleの処理です。
いくつかの点が一塊となってランダムに動き回ります。
それぞれの点は発光しているので奇跡が残るし、点が集まれば光は強くなります。
今回はProcessing入門という視点でコードを解説しておこうと思います。
コードの解説は以下。
【Processing】 簡単な音声処理
以前、人から言われてためしに作ってみた、リアルタイムのエフェクトです。 ただし、エフェクトと呼べるほどマトモなものではなく、適当に波形データをいじくってます。 マウスカーソルの位置によって、エフェクトの適用量を変えており、右に持って行くほど強くなり、 マウスドラッグするとまた別のエフェクトに切り替わります。 起動中にファイル名を指定してmp3を変更できるように、テキストボックスを配置するために、 ・INTERFESCIA(http://www.superstable.net/interfascia/) を利用しています。 また、メインの音声（波形）処理には、 ・Minim(http://code.compartmental.net/tools/minim/) を利用しています。 ※コード利用の際には上記パスからライブラリをダウンロードしてください。 ■ソースファイル ダウンロード(.zip) ■実行ページ 実行（音が出ます）
各技術のインデックス
今回はまず最初の記事ということで、本サイトで取り上げる技術の公式ページと、よく使うリファレンスの直リンクを紹介しておきます。
Silverlightは実際あまりやっていないので怪しいです。。。ただ、今後やっていこうかなと興味があるので挙げています。
いずれそれぞれの紹介や、なぜ選択したのかも紹介していきたいとは思いますが、ひとまず以上です。