読者です 読者をやめる 読者になる 読者になる

S.F. Page

Programming,Music,etc...

Electron

rollup.jsを使ってみる

モジュールのインポート周りをES2015化して、gulpも併用して、rollup.jsでelectron用とモダン・ブラウザ用にバンドルするようにしてみた。 github.com electron用とブラウザ用がまったく同じコードで動くわけでもなく、コードも2種類用意するのだが、共通す…

gpgpu birdsのコードをいじる

gpgpu birdsの理解を深めるために、自分の動画作成プログラムに取り込んで、コードをいじってみることにした。 いじってみた結果がこの動画。16384個の鳥を飛ばしてみた。鳥というよりは大量発生した虫のような感じだけれどもね。 これくらい動かすともうYou…

画像生成時の工夫によってYouTubeの動画品質向上を図ってみた。

HD1080p 60fpsでアップしているが、画像荒れが発生している件。 画像荒れに関してはYouTube側に問題はない。私の動画がYouTubeのエンコの特性に合っていないだけである。 この特性は一般的に普及しているmp4などのエンコード規格の特性でもある。画面全体が…

electronでcanvasの画像データ化スピードを上げる&YouTubeアップロード後の画質の劣化について

RYDEENの曲に合う動画をelectron+three.jsで作っている。 動画化はどのように行っているかというと、canvasでの描画結果を複数のビットマップファイルに落として、ffmpegでオーディオ・ファイルとマージしてmp4形式にしている。 肝の部分は描画結果をビット…

アニメーションのパターンを増やしてみた - YMO - RYDEENのカバーをREAPERとelectron+three.jsで作る。

いくつかアニメーションのパターンを用意し、tween.jsで切り替えてみた。 馬のアニメーションやパーティクルの部分はthree.jsのexampleをもとに作っている。 https://threejs.org/examples/#canvas_particles_sprites https://threejs.org/examples/#webgl_m…

波形表示のメッシュを追加してみた。 - REAPERとelectronとffmpegを使ってRYDEENのカバー動画を作る。

動画の地面に波形表示を加えてスクロールさせ、馬が走っているような感じにしてみた。 この動画はCメロの馬の蹄音の部分のイメージな感じがしてきている。 馬がぐるぐる回っている動画を4分も観るのはつらいので、もうちょっと局面に応じて出す動画を工夫し…

馬のメッシュの色を変えてみた。- REAPERとelectronとffmpegを使ってRYDEENのカバー動画を作る。

馬のメッシュの色を変え、若干音の調整を行った。 曲の進行に合わせて動画を出しわけたいし、いろいろな視覚効果を入れたいんだけど、技術とセンスがなく、なかなかすぐにはできない。 今はthree.jsの復習をしているところだ。とはいっても過去ちょっとかじ…

RYDEENの動画をReaperとElectronとffmpegを使って飽きるまで作ろうかなと思う。

今日までのRYDEENの成果は下の動画。electron・three.js使って馬のアニメーションを作って入れてみた。 馬のアニメーションは下記サンプルをもとに、動画ビットマップに出力する部分を追加し、それをffmpegで動画化している。 http://threejs.org/examples/#…

riot.js,emmet,markedを試しながら恐る恐るコンテンツ管理システムを作っている。

コンテンツ管理システムをぼちぼちと作っている。 軽量でミニマムな仕様かつ学習コストが低いというのでriot.jsを使ってみている。確かに学習コストは低い気がする。メニューをカスタムタグにして配置してみているが、そんなに1つのアプリで再利用するもので…

やっぱりelectronで簡単なコンテンツ管理システムを作ろうと思う。

静的ブログジェネレータのエディタはVS Codeでいいや!と思って割り切ろうと思っていたが、それはそれでコンテンツを管理するのが面倒だなと思い始めた。 なので簡単なコンテンツ管理システムをelectronで作ろうと思う。 で、UIの構築はどのライブラリでやろ…

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(13)

非常にゆっくりだが、敵エディタの実装を続けている。もう少しでできそうな気もするが、まだまだな気もする。 ジェネレータの使い方がまだいまいちで、変なコードになってきている。が、まあそれは二の次にしておこう。とりあえずエディタを完成させて、ゲー…

敵エディタを作る - three.jsで2Dシューティングゲームの続きを作る(12)

敵エディタをぼちぼち作っている。 ギャラガタイプのシューティングゲームなので「敵編隊」と「敵1つ1つの動き」の編集が必要だ。まずは編隊の情報を編集する画面を作っていて、ある程度めどが立った。画面自体にはWeb Audioのシーケンス・エディタで作った…

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

開発支援ツールを動かすときはElectronで動かすようにしてみた。作成したデータを保存する必要があるし、そうしたほうが何かと便利そうなので。 ブラウザ版とソースコードをできる限り共通化して、開発支援ツールはブラウザ版ではインクルードせず動作するよ…

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…