S.F. Page

Programming,Music,etc...

JavaScript

three.jsで2Dシューティングゲームの続きを作る(3)

続きを作ると宣言したものの、これといったアイデアは依然としてない。考えていることを列挙すると ボーナス・ステージの内容をどうしようか。ギャラガとかギャプラスのボーナス・ステージは楽しかったな。 1-3面を通常、4面をボーナス、5面をボス敵にし…

ブロック崩しをちょっと手直しする

ブロック崩しをちょっと手直しした。ジェネレータ関数の生成方法がおかしくてFirefoxとEdgeでは動かなくなっていたので。さらにGitHub Pagesで動かすようにした。 github.sfpgmr.net レポジトリは下。 github.com あたり判定がいい加減だし、パドルとボール…

three.jsで2Dシューティングゲームの続きを作る(2) - gulp + babel + browserifyでビルドするように変更し、コードを修正した。

表題の通り、シューティングゲームのビルドをgulp + babel + browserifyで行うように変更した。 コードはファイルで分割していたものの、モノリシックな構成になっていたので、ファイル単位でモジュール化を行った。 といってもファイル間で疎に保てているか…

three.jsで2Dシューティングゲームの続きを作ることにする

2Dシューティングゲームの続きを作ることにする。 この作りかけは現時点ではギャラガの劣化版となっているが、何か新たなアイデアを追加してそこそこ遊べるようなものにしたいと思う。 といってもまだこれといったアイデアはないのだが。ちょっと隕石のよう…

2Dシューティングゲームを修正する

DownWellに触発され、ゲーム作りをしたくなってきた。まずは以前作ったギャラガもどきの2Dシューティングゲームを手直し。 動くものは下記。Chrome/Firefox/Edgeでの動作は確認した。 github.sfpgmr.net このゲームはthree.jsを2Dレンダリングエンジンとして…

馬のアニメーションをVR対応(Side By Side 3D方式)にする

ics.media THREE.JSで簡単にVR対応できるというので以前作りかけて放置していた馬のアニメーションでやってみた。確かに簡単だった。 馬の3Dアニメーション(VR対応) ただ上記をiphone 6で実行してみたけども相当動きがつらかった。。

Seascape

私の好きな波面のデモ。こういうのはずーっと観てられるという。 これは私のPCでも60FPSで動く。意外と軽いからねえ。複雑そうだけど。GTX960だと楽々だ。iphone6でも50FPS超えだった。いやぁ、軽いねぇ。恐るべきシェーダーパワー。

Snail

Snailは世界最高峰の GLSL シェーダデモらしい。 webgl.souhonzan.org 私のPCで実行したら30FPS程度であった。GTX960でも60FPSいかない。970以上じゃないときついのかな。やっぱり。ただ思ったほど虫は動かない。カタツムリだから当然か。 このShadertoyと…

HTML909

Web AudioによるTR909のクローン。懐かしいねぇ。といっても実物を触ったのは中古楽器屋の店頭以来だが。20年以上前だろうか。 icon.jp html909.com 大阪の昭和町に中古楽器屋さんがあって、そこによく通ってた。そこでYAMAHA C-1の中古とか買った。ある時…

レイトレーシング - 格子柄の地面と鏡面の球体のデモはいつから始まったのか。

WebGLによるリアルタイム・レイトレーシングの記事。 qiita.com ブラウザ上でリアルタイムでレイトレーシング(レイマーチング)を行い表示するというもの。ブラウザからGPUをいじれかつ、リアルタイムでレイトレできる時代が来ようとは。 PCでレイトレーシ…

Web Audio APIのモジュラー接続デモを作ってみる(20) - 範囲選択機能の実装

ますます実装スピードが遅くなっている。今週は範囲選択機能を実装中。 シーケンスデータを実装するのにジェネレータをコルーチン代わりに使用しているが、関数の実行途中でyieldできる利点を生かした実装とは言い難いものがあったのだが、ちょっとだけ利点…

Web Audio APIのモジュラー接続デモを作ってみる(19) - 小節単位の移動機能を実装する

小節管理部分と、小節単位の移動機能を実装した。これで小節管理は一段落だ。 次に任意選択&カット・コピペを作ろうかなと。おっとコマンド機能を実装するのを忘れているな。全体として2割程度の実装状況だから、まだまだ作らねばならない部分がたくさんあ…

Web Audio APIのモジュラー接続デモを作ってみる(18) - 小節管理部分を作り直す

引き続きエディタを作成中である。少し前に入力や上下カーソルを移動すると音が鳴るようにしてみた。これでかなりMC-4っぽくなってきた。 ただ小節管理がちょっとこのままではまずい気がした。例えばリピートやセームメジャーの処理をするときとかね。なので…

Web Audio APIのモジュラー接続デモを作ってみる(17) - localStorageを使ってデータ保存・読み込みを作る

コードを改良するたびにテスト用のモジュラー接続を作ったりデータ入力をするのが面倒なのでlocalStorageに保存するようにしてみた。Bugはあるがとりあえず保存・読み込みができるようになった。データ形式はJSONである。例によってChromeのみで動作する。 h…

Web Audio APIのモジュラー接続デモを作ってみる(16) - シーケンスエディタ作成中

ぼちぼち作っていますよ。 現状の動くバージョンはこれ。Chromeでのみ動作する。 https://sfpgmr.github.io/webaudiomoduler/dist/20151205/ どの程度実装できたのは以下の通り。まだまだ全然である。この一覧はSTED2のHTMLマニュアルを元にしている。 キー …

Web Audio APIのモジュラー接続デモを作ってみる(15) - シーケンスエディタ引き続き作成中

カーソルの動き、イベントの追加・削除が動くようになってきた。Undo/Redoも。画面は変わりないように見えるが。さらにメジャーエンドで小節のステップ合計を表示できるようにしてみた。徐々にSTED2のエディタっぽくなってきている。 しかしこのSTED2のエデ…

Web Audio APIのモジュラー接続デモを作ってみる(14) - STED2風のシーケンス・エディタを実装、あとはSTED2のこととか

STED2を実際に動かし、その動きをまねるコードを書いている。非常にゆっくりとしているが。コードを書いている途中得た知見はQiitaにもぼちぼち書いてみている。 私が書いているものは、トラックはモノトラックだし、コマンド列というものを追加しているから…

Web Audio APIのモジュラー接続デモを作ってみる(13)

ぼちぼちとシーケンスエディタを実装している。d3.js・イベントドリブン・ジェネレータによるコルーチン、の折衷方式というなんともいえないゲテモノ感漂う実装となってきている。すごいことはないのだが普通こんな作り方をしないよなーという。要するに汚い…

Web Audio APIのモジュラー接続デモを作ってみる(12)

シーケンス・エディタ部分をぼちぼち作っている。3連休で形を作りたかったんだけど、無理だった。。 エディタの動きに関してはSTED2のヘルプを観たり、アプリを動かして参考にしている。実装は汚い感じになってきた。これはあとで手を入れたくなくなるような…

babel 6.1.18における export * の挙動が変?

babelをアップデートしたら意味不明のトラブルが発生して悩んでいる。 swizec.com 私もこのポストの記事と同じ問題にハマっているらしい。すこし内容が違うかもしれないが。 "use strict"; export * from './audioNodeView'; export * from './eg'; export *…

Web Audio APIのモジュラー接続デモを作ってみる(11)

シーケンス・エディタ部分を実装中だが、苦手なところなので遅々として進まない。しかしスクリーンショットを撮ってみるとなかなかアプリっぽい体裁になっている。ちょっとモチベーションが上がる。 4CHを同時に編集できるような画面構成にするつもりである…

Object.observe()は使えなくなる

今作っているWeb Audio APIデモのシーケンス・エディタのデータ・バインディング部分をどうしようかなと検討していたところ、衝撃の情報が。 tech.nitoyon.com ちょうどオブジェクトの更新とUIからの反映をどうしようかと考えていたところだった。knockoutや…

Web Audio APIのモジュラー接続デモを作ってみる(10)

シーケンサーの実装を進めている。ようやく音が鳴るようになったところ。まだ編集画面はないし、考慮不足の部分もあるだろう。これから機能追加を進めていく。画面はJasmineのテスト画面にUIを表示してみているところ。 シーケンサーはMC-4に敬意を表して4CH…

Web Audio APIのモジュラー接続デモを作ってみる(9)

モジュラー接続デモもぼちぼち作っている。昨日今日とEGとシーケンサーを作っている。まだハリボテレベルだが作成中の画面。 シーケンサーは単音の16トラックで、ゲート情報(CV/GATEのGATEと意味合いは似ているが内容は違う)とピッチ情報(間違ってVとして…

Web Audio APIのモジュラー接続デモを作ってみる(8)

EGはサクッと作ってしまおうと思っていたが、モジュラー・グラフを考えると結構やることが多いことが分かった。 EGは他のオーディオ・ノードと見た目は同じに見える。しかしオーディオ・グラフ(いわゆるconnect()で結んでいくやつ)上のノードに含むことは…

Web Audio APIのモジュラー接続デモを作ってみる(7)

今日はエンベロープ・ジェネレータ(EG)を作ろうと、少し設計を考えて軽く実装し始めたところ。 EGはアナログシンセではほぼ必須の機能である。これがないと楽音のシミュレーションができない。 上図は典型的なADSRタイプのEGのパラメータを説明するもので…

Web Audio APIのモジュラー接続デモを作ってみる(6)

ここいらでシーケンサーを実装してみようと思う。あ、EGも一緒に作ろうと思っている。シーケンサーはステップシーケンサーで、周波数・ゲート・ベロシティを接続先ノードに送る役割を担う。ST/GT方式で実装するつもりである。その2つがあれば演奏できるから…

Web Audio APIのモジュラー接続デモを作ってみる(5)

今までgistでちょこちょこ作ってきたが、githubにレポジトリを作って管理することにした。 github.com そしてgh-pagesでサンプルを公開することにした。 https://sfpgmr.github.io/webaudiomoduler/dist/20151028/ ソースコード的にはES6モジュールを使って…

Windows 10 Insider Preview Build 10565のEdgeのWeb Audio API

今朝起きるとPCが自動アップデートされており、ビルド番号が「10565」に上がっていた。10/12に告知されていたのだが、Web Audioに勤しんでいたせいで追っかけてなかった。 blogs.windows.com 内容はまあ小幅な修正だと思うけどね。オーディオ・ビデオ関連で…

Web Audio APIのモジュラー・インターフェースとかMODミュージシャンとかの話

Web Audio APIの仕様はファットではあるのものの、非常に面白いインターフェースだ。 しかし振り返ると、PCのソフトウェア・オーディオ・シンセシスって気が付くともう30年くらいの歴史があるんだよね。このモジュラー接続するというアイデアも、1990年代に…

Web Audio APIのモジュラー接続デモを作ってみる(4)

いい加減な実装だが、ようやく音が鳴らせるようになり、AudioNodeの追加・削除、ノード間の接続・切断ができるようになった。だけどAudioBufferSourceNodeとかはまだ実装できていないし、エディターズ・ドラフトレベルの機能も使っている(任意のコネクショ…

console.assert()

昨日JSにはassertがないと言っていたが、consoleのメソッドにそのものずばりのassert()があるではないか。 このメソッドは引数を2つ取り、第一引数がfalseのとき、第二引数の内容を表示するというものである。私にはこれで十分である。assert()がfalseだった…

JasmineとMocha

そろそろテストをしなきゃなと思った。C/C++ならassert()があるけど、JSにはない。そういう簡便なテスト機能がほしいのだが。 でちょろっと探すと、JasmineとかMochaとかいうテスト・スイートがあるようだ。CppUnitとかそういう系統のものかな。 あまりテス…

Web Audio APIのモジュラー接続デモを作ってみる(3)

現在の状況は下記。相変わらずノードが動くだけだが。ようやく複数Output/Inputに対応した。 動くデモ bl.ocks.org 次にノードを追加したり、ノード間をコネクトできたりする機能をつけようと思う。音が中心のデモなのに音がなかなか鳴らないという。 これを…

Web Audio APIのモジュラー接続デモを作ってみる(2)

今日は土日に書いたコードの書き直しを行っていた。まだ書き直しは完了していない。 複数Output・Inputの対応がまだできていなかったのでその対応がメインであるが、合わせてコードが汚いのでちょっとでもきれいにしようとしている。まあきれいといっても人…

Web Audio APIのモジュラー接続デモを作ってみる(1)

ぼちぼちと作ってみている。ようやく画面が表示できるようになった。 現時点の成果物はGistに上げている。ノードをドラッグして動かせる程度であるが。 Web Audio モジュラー接続画面デモ - bl.ocks.org 今のところChrome,Firefox,Edgeで動作を確認している…

Web Audio APIのモジュラー接続デモを作ってみようと思う。

ちょっと横道にそれるが、表題の通りWeb Audio APIのモジュラー接続デモのようなものを作ってみようと思う。その成果をYMO Giga Sample Viewerに反映させようかなと思っている。 すでにそのようなデモは存在している。 Web Audio Playground このサイトすご…

YMO Giga CapsuleのビューワをElectronで作ってみている(10)

スライダーの改良版ができたので、自作のカバー曲(Rydeen)のトラックを使ってミキシングテストをしてみた。元曲のトラックを使いたいところだが、それはNGなのでしょうがない。 デスクトップだけど10点マルチタッチディスプレイを持っているので、最大…

YMO Giga CapsuleのビューワをElectronで作ってみている(9)

d3.svg.brushを使ったスライダーはやはりマルチタッチ時の動作がおかしいので、自前で作り直すことにした。d3.svg.axisとd3.behavior.dragを使えばなんとかなるだろう。 d3.jsを久しぶりにいじってみて、やっぱりこのライブラリの設計は素晴らしいなと思う。…

YMO Giga CapsuleのビューワをElectronで作ってみている(8)

昨日からRemix部分を作り始めている。今のところはフェーダーが7個並んでいるだけというさみしい画面である。 このRemix機能というのは「Behind The Mask」「Rydeen」「Solid State Survivor」「Technopolis」「Tong Poo」の5曲のうちから1曲選んで、その曲…

YMO Giga CapsuleのビューワをElectronで作ってみている(7)

タイトル部分は一応できたので、次はいよいよビューワ部分に着手し始めることにした。とりあえず下はメインメニュー。 TechnodelicフォントというフリーのWebフォントを使ってみた。色合いもテクノデリック風にしてみた。そういえば今思い出したが、テクノデ…

electron 0.33.7 における Web Audio APIの不具合について

electron 0.33.7におけるWeb Audio APIの不具合をまとめておこう。 Qiitaに書こうかなと思ったけどTipsじゃないし、一過性のものだと思うからね。 AudioContext.decodeAudioData()はopusをサポートしない。 audioタグではopusファイルはサポートされているに…

YMO Giga CapsuleのビューワをElectronで作ってみている(6)

ちゅうことで、Jingle Y.M.O.をBGMにアニメーションする部分を作ってみた。 スクリーンショット バイナリ Release Jingle Y.M.O.を再生する部分を追加 · sfpgmr/gigacapsule · GitHub タイミングを合わせてd3.jsでSVGアニメーションをしている。内容は稚拙な…

YMO Giga CapsuleのビューワをElectronで作ってみている(5)

意味不明だと思うが、とりあえずJingle YMOの動画の作りかけスクリーンショット。 Jingle YMOのBGMに合わせて絵や文字を動かすつもりだ。d3.js+SVGでね。音はWeb Audioで。 久しぶりにWeb Audioをいじるのでまずはチュートリアル的なサイトを参考にopusファ…

YMO Giga CapsuleのビューワをElectronで作ってみている(4)

とりあえず動画やオーディオを再生できるようになった。そしてビルドも意外に簡単にできることを知った。Electronなかなか良いな。 続いてJingle YMOをBGMに、d3.jsでアニメーションを作ろうかなと思っている。これはGiga CapsuleのDVDにも入っているもので…

YMO Giga CapsuleのビューワをElectronで作ってみている。(3)

とりあえず動画とオーディオの再生ができるようになったので、まだまだ完成には程遠いがelectron-packagerを使用してビルドしてみた。 Release とりあえず動きそうなバージョン · sfpgmr/gigacapsule · GitHub ビルドは結構簡単にできるが、アプリが持つ機能…

YMO Giga CapsuleのビューワをElectronで作ってみようかなと思う。(2)

まあぼちぼちと作っている。 メディアがPCに挿入していないと動かないようなつくりにして、メディアを持っていることを動作要件にしたいので、ドライブをチェックしようとしたが意外に簡単にはできない。方法についてはQiitaに書いた。 qiita.com あとは動画…

Giga CapsuleのビューワをElectronで作ってみようかなと思う。

YMO Giga CapsuleはとりあえずXP仮想マシンで再生することができたが、できればWindows 10でも楽しみたい。とりあえずAIFFファイルやMOVファイルを再生できるようにしてコンテンツは見ることはできているけど、ちょっと面倒である。なので簡単なビューワをEl…

ブロック崩しを作る(1)

ブロック崩しを作る お盆休み中にブロック崩しを作ってみていたが、HDDの修復に時間を取られ、公開できないでいた。ゲームの内容としては、 96個のブロックをボールで崩すと面クリア 9個ボールをロストするとゲームオーバー ブロックを崩すたびにボールのス…

スカッシュゲームを作る(8) - 効果音をつける

スカッシュからブロック崩しに移る前に、WebAudioで効果音をつけてみた。以前作ったシューティングゲームの波形メモリ風音源を修正して使っている。動かしてみるとFirefoxでは動作するが、Chromeでは動作しない。今までAudioBufferSourceNodeのbufferパラメ…