S.F. Page

Programming,Music,etc...

electronでRYDEENの動画を作る

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

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

three.jsはやっぱりRetained Modeの現代版ですな。

RYDEENのカバー曲動画づくりをelectronで作っている。electronはお手軽な3Dグラフィックプログラミング環境として利用している。three.jsを使わないとお手軽にはならないけど。。 しかし、このようなことがJSでできるようになるなど20年前に想像できたであろ…

アニメーションのパターンを増やしてみた - 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/#…

RYDEENのカバーに合わせた動画をelectronかnwで作りたくなってきたな。。

ちょっとはましになったかなと思えたので動画をアップ。 動画化はffmpegを使っていて、今のコマンドラインはこんな感じである。 ffmpeg -i rydeen.wav -filter_complex "[0:a]avectorscope=s=1920x1080:m=0:draw=1:scale=3:zoom=1:rc=2:gc=200:bc=10:rf=1:gf…