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

S.F. Page

Programming,Music,etc...

富士山を撮る

正月に山中湖で宿泊して富士山を見るというのを続けている。私にとっての初詣は富士山参りなのだ。富士講というわけではないが、何となく。 最初はただ泊まって雄大な富士山の姿を見るだけで満足していたが、携帯やスマフォのカメラの性能が上がってから撮る…

JSON-LDを再度勉強している

とりあえず、JSON-LDでデータ定義すれば、コンテンツが生成できるような環境構築を行った。今はどのようなデータの形にすれば適切なのか思い悩みながら進めているところである。 JSON-LD的に適切なのかどうかは、JSON-LD Playgroundで検証することができる。…

JSON-LDデータからWebページを生成する

コンテンツの修復と整理だが、まずhttps://www.sfpgmr.net/から取り掛かり始めた。 コンテンツは古いし、コンテンツに関する解説はほとんどないし、最新のコンテンツへのリンクもないしで、かなり過疎化が進んでおり、日に1人か2人訪問があればいいような状…

ubuntuにaptでインストールしたnginxをstableからmainlineに切り替える

ガラクタIT創作活動へのモチベーションも回復してきたので、私が活動の場としているサイトやブログ・SNSの再構築に取り掛かることにした。 まずはWebサーバーのnginxをstableからmainlineのバージョンにアップデートすることにした。 作業はaptでバイナリイ…

コンテンツの修復と整理をしようとしている。

私はいろいろなところにコンテンツを作っては放置しているが、Webは常に進化しており、気がつくと動かなくなっていたりする。 https://www.sfpgmr.net/ http://bl.ocks.org/sfpgmr/ https://github.sfpgmr.net/graphics/ その修復と、サイトの再構築を行おう…

ただいま充電中。8ビットPCのゲームの話など。

PCで何かをやる気が失せている。とはいってもPCを触っていないわけではない。受け身な使い方をしているだけになっている状況だ。さらには触れている時間も少ない。ガラクタ創作活動に勤しむ気力も失せている。 年末までちょっと畑違いの仕事をしていて、…

ビデオカード(1060GTX)を購入した。

ボーナスが支給されたので、1060GTXを購入した。メモリ6GBでこれが結構安かったので。 電源も6pinのみで、GTX960と大きさもさほど変わらない。これでGTX980と同等の性能だというのだから、驚きである。 しかし今だにGPUの内部構造には疎くて、勉強しようとは…

こたつという魔物(「人をだめにするソファー」との最強の組み合わせ)

年末近くになるとこたつが出現する。私にとってこれほどの魔物はない。 休日などは「こたつに入ってゴロゴロする。」ことにほとんどの時間が費やされる。これは言葉通り「費やされる。」のである。 私は心の中では、「やりたいことがあるので一分一秒たりと…

アシッド・ジャズ

Suchmosを聴いていて、20代前半に一時期アシッド・ジャズを好んで聴いていたことを思い出す。アシッド・ジャズというのはどのようなカテゴリなのかいまだにわかっていないんだけど。 好んで聴いていたのは「Young Disciples」とか「Omar」とか。あとインコグ…

Suchmos "STAY TUNE" (Official Music Video)

ホンダのCMで知った曲。これはいい曲ですわ。 ジャミロクワイっぽい感じもするけど、あれも70年代あたりのソウルが源のようだしね。昔アシッド・ジャズとか、レア・グルーブのコンピレーションとかよく聴いたんだけどそれに通ずるところもあるような。 日…

三角形のタイリング・フィルを実装してみた。

三角形のタイリング・フィルを実装してみた。4階調だけだと、ちょっとたりない気がするなあ。。 function sf10328749687196759801() { let doc = document.getElementById('sf10328749687196759801'); doc.height = doc.offsetWidth * 200 / 320; } window.a…

三角形フィルを作ってみた。

昨日の8色ビットマップ画面上に三角形フィルを行うコードを追加してみた。 canvasやWebGLだといとも簡単に書けるものだけど、これを自前で書いてみるという。 アルゴリズムは「多角形の塗りつぶし (3)その他の手法」を参考にした。というかほぼそのまま。 fu…

8bitコンピュータ風コンソール画面をthree.jsに移植する。

以前WebGLで作って放置していた8bitコンピュータ風コンソール画面をthree.jsに移植してみた。 function sf10328749687196045071() { let doc = document.getElementById('sf10328749687196045071'); doc.height = doc.offsetWidth * 200 / 320; } window.add…

Rise of Tomb Raiderで遊んでいた。

STEAMで「Rise of Tomb Raider」が50%で売っていたので、思わず購入。ここ数日はこればかりをやっていた。おかげで休日もこれを終わらせることに費やした。。 いやー面白かった。 このゲーム、FPSではないんだけどHALF LIFEのような簡単な謎解きもあったり、…

実習グラフィックス・応用グラフィックス

私が3Dグラフィックスを学ぶ(といっても独学だけど)のに使用したテキストがこの「実習グラフィックス」・「応用グラフィックス」である。買ったのは30年ほど前で、今も大切に持っている。 「入門グラフィックス」というのもあるけど、これは2Dグラフ…

レイマーチングを学ぶ

3Dグラフィックスもままならないのに、レイマーチングに手を出そうという。 レイマーチングとはレイトレーシングの一種だとのことだ。レイトレの高速アルゴリズム版、DFTに対するFFTのようなものか。 コードはとても簡素だけど、生成した画像をは恐ろしく…

「アオイホノオ」を観た。

「装甲騎兵ボトムズ」を観る前に「アオイホノオ」を観ていた。これもAmazonプライムの見放題だけど。 私の場合はアニメや漫画には向かわず、パソコン(ゲーム)に向かっていったのだけれども、この主人公のいい加減な性格は私との共通点で、ものすごく共感で…

sound - acid jam - GPUによる音声の生成?

ShaderToyはSoundタブがあって、そこでGLSLで音声処理を書くことができる。vec2 mainSound(float time)の引数が時間、返り値はステレオサンプルである。mainSound()で音声処理を書いてvec2でステレオサンプルを返せば、音が鳴る。例えば下の動画は、音声サン…

高校生の時に見逃した「装甲騎兵ボトムズ」を観終わった。

Amazonプライムで「装甲騎兵ボトムズ」が見放題になっていたので、ここ1週間くらいかけて観た。 第1話 終戦発売日: 2013/11/26メディア: Amazonビデオこの商品を含むブログを見る 私はあまりアニメは観ない。今ではたまに家族が観る「サザエさん」をチラ見す…

プラズマ - なんとなく書いたシェーダー・コード

昔のメガデモ等でよく見たプラズマ。これは「GLSL 2D Tutorials」のチュートリアルのコードのまんまだけれども。 3d_codes/src/00003 at gh-pages · sfpgmr/3d_codes · GitHub { let doc = document.getElementById('sf10328749687194148357'); doc.height =…

なんとなく書いたシェーダー・コード

偶然できました。 { let doc = document.getElementById('sf00002'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00002 at gh-pages · sfpgmr/3d_codes · GitHub どうも回っているものを見ると酔いますな。。ずっと見ていると遊園地のコーヒー…

ちょっとまあ、書いたシェーダー・コードの公開環境をgithub pagesに作った。

私のはShadertoyに載せるにはレベルが低すぎるので。。とりあえず1つめはこれ。 { let doc = document.getElementById('sf10328749687193382251'); doc.height = doc.offsetWidth * 9 / 16; } 3d_codes/src/00001 at gh-pages · sfpgmr/3d_codes · GitHub S…

フラグメント・シェーダー(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くらいから使えるようになった、スタートメニューあたりを右クリックすると出てくるメニューで代替できるから別段困りはしな…