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

S.F. Page

Programming,Music,etc...

フラグメント・シェーダー(Shadertoy)で2D Line(線分)を描く

フラグメント・シェーダー(Shadertoy)で線分を書いてみようと思った。 Shadertoyのフラグメント・シェーダーは描画するピクセルごとにmainImage(out vec4 fragColor, in vec2 fragCoord)が呼ばれる。画面のピクセル個数分このmainImage()が呼ばれるのである…

Stubble Bobble

ShadertoyでStubble Bobbleなるゲームを発見。なんと頂点シェーダーは使わず、すべてフラグメント・シェーダーで描画されているという。 フラグメント・シェーダーでのグラフィック・プログラミングってCPUで絵を描く時とは考え方を変えなくてはいけない。そ…

node.jsの実務利用について

ここでいうnode.jsの実務利用とは、アイデア溢れるWebサービスとかの話ではない。 いわゆるExcelなどに代表される、ちょっと手作業では面倒くさい集計処理とかの話である。このような集計処理は巷に溢れかえっており、プログラミングの心得がないと、EXCELの…

Shadertoyで遊ぶ

Shaderの書き方も少しわかってきたところで、Shadertoyで遊んでみた。 動かすと目が回る感じがするし、静止していてもなぜか回転していると錯覚してしまう。不思議だ。。

ES2015 ModuleのLoaderの件

ECMA Script 2015 Module (ESM)はまだ未確定の部分があるとのこと。 先日読んだ「ES Modules と Node.js について - from scratch」を引用するに、 そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取…

Interop between Windows and Bash

おお、とうとうbash on windowsから.exeファイルを呼べるようになったのか。Windows 10 Insider build 14951から使えるとのこと。 blogs.msdn.microsoft.com bashがcmd.exeの代替として使えるということだろうか。そうするとビルドスクリプトとかもlinuxと共…

Windows 10にnode.js 7.0.0をインストールしたらnpm install が「Cannot find module 'internal/fs'」エラーでコケる件

7.0.0をインストールして「npm install electron -g」しようとしたらエラー発生。 C:\WINDOWS\system32>npm install electron -g npm ERR! Windows_NT 10.0.14955 npm ERR! argv "I:\\App\\nodejs\\node.exe" "i:\\libs\\npm\\node_modules\\npm\\bin\\npm-c…

ES2015 Modulesの実装がなかなか進まない件

標題の件、なんでだろうねえとちょっとググったら、素晴らしい記事が。前読んだような気もするけど。。 yosuke-furukawa.hatenablog.com そもそも ECMAScript 2015 自身で定義されたのは構文だけなので、構文はともかく、どうやってモジュールを取ってくるか…

いつのまにかd3.jsがV4に..

あら、いつのまに..。 github.com V4になってモジュール化されたらしい。例えばselectionだけ使いたいのであれば <script src="https://d3js.org/d3-selection.v1.js"></script> だけでよい。 中身はV3まではオリジナルのモジュールシステム(https://github.com/mbostock/smash)を使っていたと思うんだけど、V4からはES20…

YouTube側の誤認なのだけれど ...

昨日RYDEENのカバーをアップしたらこのようなメッセージがYouTubeから届いた。 SFPG 様 Content ID を使用している著作権所有者が、お客様の動画に含まれている素材を申し立てました。 これは一般的なお知らせのメールです 問題が発生しているわけではありま…

bl.ocks.org/sfpgmr/ を手直しする。

ドメインを変えたり、APIが変わったり、バグっていたりでほとんどのコンテンツが動かなかくなっていたhttp://bl.ocks.org/sfpgmr を手直しした。 内容的には Web Audio APIのモジュラー接続の作りかけ ブロック崩し SVGファイルをthree.jsのshapeに変換して…

rollup.jsを使ってみる

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

近頃のモダンブラウザのES2015対応具合とrollup.js

近頃のモダンブラウザのES2015対応具合はEdge14でも9割を超えており、もうES5に変換する必要はなくなりつつある。 つまりはES2015規格レベルではBabelは近い将来必要なくなるということだ。ただJSはこれからも進化していくので、機能の先取りという役割でBab…

rollupというツールを発見した。

まあちょっと、three.jsでエフェクトコードを書いているけど、electronだけでなくブラウザでも動かしたくなってきている。electronではcommonjsモジュールが使えるからガシガシモジュールを作ってrequireしているけれども、ブラウザではその手は使えない。Br…

gpgpu birdsのコードをいじる

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

three.jsのgpgpu Birdsのコードを読む。

RYDEENカバー用の動画を作るためにthree.jsを復習していて、ようやくシェーダー・マテリアルの使い方がわかってきてちょっと楽しくなってきている。 ただまだまだ表現として稚拙だし、サンプルのパラメータやコードを少し変えてみている程度なので、もうちょ…

JavaScriptの黒魔術的な側面についてちょっと書く

なぜかQiitaに去年投稿したevalハックのポストにまたストックが増えてきてなんでかなぁ?と思ったら人気ポストにリンクされていたからだった。 qiita.com 私がこのevalハックを思いついたわけではなくて、knockoutのコードを眺めてたら偶然見つけただけなの…

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

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

YouTubeにHDでアップロードした動画の再エンコード後の画質について

動画を作っていて困っていることのひとつ。1080pや720pでアップした動画の再エンコード後の画質低下。ある程度はしょうがないし、少し前まではあまり気にはならなかったが、激しく画面が変化するようになってからかなりの画質低下となってしまっている。 下…

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…

トラックダウンとマスタリングは難しい。- RYDEENをREAPERでカバーする -

ミックスダウンとマスタリングで苦しんだ一週間。いまいまの成果はこれ。 各トラックの音量レベルを上げて、それをマスタ側のコンプで無理やり押し込むような感じになってしまっていて、なんか音が奥まったというか平板な感じになってしまっていたのを改め、…

Windows 10 Insider Build 14915

私のPCは前回のビルドで電源メニューが使えなくなっていたが、アップデートすると使えるようになっていた。よかった。 Windows 8.1くらいから使えるようになった、スタートメニューあたりを右クリックすると出てくるメニューで代替できるから別段困りはしな…

FFMpegのフィルター・グラフを使ってオーディオ・ファイルを動画化する。

REAPERを使ってRYDEENのカバー曲を作っていて、久しぶりにFFMpegを使ってオーディオ・ファイルを動画化してみた。 スペクトル表示の上に、波形表示を重ねてみている。最後の数秒で画面をフェードアウトするのも試みてみた。 コマンドライン以下の通りだ。よ…

YMOの足跡をあらためて辿りながら、RYDEENのカバー(そっくりさん)を作る。

RYDEENのカバーを再びやり始めたのは下のアーカイブサイトの影響が大きい。 hosono archaeology 上のchronologyの1978-1980あたりを熟読していたら、またRYDEENを無性にカバーしたくなったのだ。 RYDEENをスタジオで作っていたときはまだ公的抑圧はなく、結…

YMO - RYDEENのカバーをREAPERで作り直し始めた。

「音楽」のカバーでREAPERに少し慣れてきたので、RYDEENを作り直すことにした。 下の動画は途中経過。 ドラムの音を差し替えてみたが、私の聴覚の限りではかなりオリジナルに近くなった気がしている。ドラムパートだけソロで聴いても似ても似つかない音なの…

RYDEENの馬の蹄音のエフェクトで使われているQSエンコーダーというのはなんだろうね。

前からすごく気になっていたRYDEENの馬の蹄音のエフェクトの話。細野さんや、小池さんというエンジニアの話では、 逆相の音+イコライジングで飛び出すような感じ QSエンコーダーで後方から前方に駆け抜けていく感じ ということらしい。 このQSエンコーダー…

疑似ステレオ効果を得る - REAPERのJSFXでエフェクトを作る(7)

モノラルなシンセ音をステレオ感を感じさせるエフェクトを作ってみた。 少し遅らせた音をLチャンネルはそのまま、Rチャンネルは逆相でミックスすることによってステレオ感を得るというものである。 逆相の音というのは、簡単に言えばサンプルの符号を逆転さ…

移動平均フィルタの周波数特性を視覚化してみた - REAPERのJSFXでエフェクトを作る(6)

JSFXのgfx機能を使って、移動平均フィルタの周波数特性を視覚化してみた。 移動平均のサンプル数を増やすと、カットオフ周波数が下がり、そしてフィルタ特性がより急峻となるのがよくわかる。 しかしJSFXは結構簡単に書けるな。よくできてるわ。。 REAPERは…

移動平均フィルタを作る - REAPERのJSFXでエフェクトを作る(5)

移動平均をとればLPFが作れるというのでやってみた。確かにLPFっぽいな。。 次はJSFXの@gfxを使ってフィルタ特性を視覚化しようかなと思っている。 ソースコード desc:SF:Moving Average slider1:50<0,100,1>Wet (%) slider2:50<0,100,1>Dry (%) slider3:10<…

デジタルフィルタを理解するのに役立つコンテンツらしきものを集めてみた。

デジタルフィルタを理解するのに役立つコンテンツ「らしきもの」を集めてみた。なぜ「らしきもの」かというと、超初心者レベルかつなんども途中で放棄した私では本当に役立つコンテンツなのかが判断できないからである。 最近ちょっと理解が進んで、もうちょ…

LPF/HPF/BPFなどのデジタル・フィルタを作る - REAPERのJSFXでエフェクトを作る(4)

今回はデジタル・フィルタを作成してみた。 ソースコード desc:SF:Digital Filter slider1:0<0,4,1{LPF,HPF,BPF,notch,APF> Filter Type slider2:1000<20,20000,1> Cut Off Freq (Hz) slider3:1<1,100,0.1> Q slider4:50<0,100,1>Wet (%) slider5:50<0,100,1…

LR独立型ディレイを作る - REAPERのJSFXでエフェクトを作る(3)

LR独立型ディレイも作ってみた。私は音色に左右の音の広がりを持たせたい場合に使う。左80ms・右60msくらいのディレイを設定してミックスすると音が左右に広がったように感じる。 JSFXコード 前回の記事のコードをベースに、左右独立してディレイタイムを設…

デジタル・ディレイを作る - REAPERのJSFXでエフェクトを作る(2)

ディレイとは ディレイとは、こだまのような効果を与えるエフェクトのことである。実際の効果は以下の動画を参考にされたい。 ディレイの仕組み ディレイを作るのは比較的簡単である。ディレイのためのバッファメモリ(リングバッファ)を用意して、元音と遅…

Gainを作る - REAPERのJSFXでエフェクトを作る(1)

まず最初に作ったのがこれ。ゲイン。 desc:Volume Gain slider1:0<-100,20,0.1>Gain (db) @slider gain = 10 ^ (slider1 / 20); @sample spl0=spl0*gain; spl1=spl1*gain; スライダーは1個。-100db~20dbまで0.1刻みで変化させることができる。gain変数には…

REAPERでのスクリプティング(JSFX)の始め方

REAPERはスクリプティングによって、エフェクトや音源を作ることができる。それをJSFXと呼んでいる。JSFXで使われる言語はEELという言語である。JSFXというからにはJSのサブセットかと思いがちだが、実際はC言語に近い。 REAPERはこのスクリプティングを行う…

Reaperでスクリプティングをやってみたい。

Reaperのスクリプティング機能を使って、音声処理をいろいろやってみたいと思っているんだけど、高校野球ウォッチに忙しく、ほとんどいじれていない。 インターフェースの本を買ってGETした音声処理プログラムを移植したいなぁと思っているんだけどね。あと…

Windows 10上でのReaperのデバイス設定と、ボーカル録りでの遅延回避方法。

Reaperのデバイス設定 Reaperのドライバ・ダイアログを見ると、Windowsのオーディオ・ドライバの歴史をみているようで面白い。 Windows 10でどれを選ぶべきかといえばやっぱりWASAPIの排他モードか、ASIOだろう。DirectSoundやWaveoutは発音までのレイテンシ…

ReaperでYMOの「音楽」をカバーする。途中経過。

Reaperに余暇の時間のほとんどを費やしているので、ブログを更新する暇もあまりない。 かなり音を入れたが、まだまだ原曲にはほど遠い出来である。 なんちゅうか、YMOの後期って曲は軽いんだけど、シンセの音色とか、編曲に凝っていたりするので、初期~中期…

Reaperを勢いで購入し、練習曲としてYMOの「音楽」をカバーする。外部エディタを使用するTipsなど。

表題の通り。7000円くらいという価格に目がくらみ、勢いでレジストしてしまった。。 今YMOの「音楽」をネタに勉強しているところである。これがなかなか慣れなくて大変なのである。ただピアノロールによるステップレコーディングはなかなか快適である。この…

YMO - RYDEENをカバー曲を修正することで、またちょっと音楽アプリいじりに対するモチベーションが上がってきている。

うーむ一進一退の感じが濃厚。こう同じ曲をずっと編集し、繰り返し聴いていると、どんどん「あるべき形」からずれていったりする。少し時間をおいて聴きなおすと「なんだこれ?」みたいな感じになることもままあるので、この曲はいったんこれで寝かせること…

YMOのライディーンをカバーしている。シーケンスパートは難しい。

うーむ。よくなったような。悪くなったような。 中低音を重視したミックスを最近試みている。あとはシーケンスパターンを何とか近づけたいと思って頑張っているが、なかなか難しい。とくにBメロのシーケンスパターンが跳ねているようなそうでないような、ち…

CPUをCore i7 6700に換装した。LPMによってDVD Driveが動かなくなってしまったのでその対応にちょっと苦労した。

CPUをCore i7 2700KからCore i7 6700に換装した。能力的には不満はないのだけれども、前回CPUを換装したのが2012年だからもう4年以上たちそろそろ故障が気になりだしたので。去年はHDDが故障したし。。 ただCPUを換装するにはCPUだけを買いなおせばよいので…

実装はそこそこ進めている - 静的ブログジェネレータのコンテンツ管理システム

静的ブログジェネレータの実装を進めていたので、ブログを更新する暇がなかった。 ようやくNeDBを使ってのデータ保存・更新ができるようになった。 NeDBもオブジェクトをそのまま扱えるというところがよくて、保存するために文字列に変換したりとかする必要…

YMO - RYDEENのカバー曲を更新した。ちょっとはましになっただろうか。。

昨日ちょっとBuzzで作っているカバー曲を手直しした。だんだんリバーブ成分がなくなっていっている気がするな。。しかもエンコード時にでるノイズが結構乗っているね。。 この動画はメディア・プレイヤーで再生したものをnvidiaのShadowPlayで録画したもので…