9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました。

デモシーンの魅力や、64KB制限で映像作品を創るための3Dモデルやテクスチャのプロシージャル生成について解説しています。

この記事をきっかけにCGWORLD読者の方々にもデモシーンに興味をもっていただき、国内のデモシーンが盛り上がっていくことを願っています。

もちろん自分の活動を知っている方々もお手に取っていただければとても嬉しいです！

9/10（木）発売のCGWORLD vol.266（2020年10月号）に「デモシーンを支えるプロシージャル技術」という記事を寄稿しました。

デモシーンの魅力や、64KB制限で映像作品を創るための3Dモデルやテクスチャのプロシージャル生成について解説しています。https://t.co/BPf1txlSxU#CGWjp #demoscene pic.twitter.com/XXpCh1xiFw

— がむ #CEDEC2020 9/4登壇, CGWORLD 10月号 (@gam0022) September 3, 2020

4月10日～4月13日に世界最大のデモパーティRevision 2020に参加しました。

Revision 2020内で開催されたコンペのうち、PC 64K Introという64KBの容量制約のある部門で『RE: SIMULATED by gam0022 & sadakkey』という作品を発表しました。

Tokyo Demo Fest 2018に続き、私（@gam0022）が映像を、さだきちさん（@sadakkey）が音楽を制作しました。

……なんと、本作品が参加者投票により1位に選ばれました！ 日本人のチームがPC 64K Intro部門で優勝するのは Revision 史上初です。とても嬉しいです！

本記事では、技術解説をメインに、『RE: SIMULATED by gam0022 & sadakkey』を紹介したいと思います。

12/21に開催されたemscripten night !! #2という勉強会に参加して、 「Emscriptenを使ってブラウザ上でレイトレーシングする」というタイトルで10分間のLT発表を行いました。

こちらが発表資料です。

バレンタインデー（2016/02/14）にGPU の熱でチョコも溶けちゃう！？ GLSL シェーダテクニック勉強会でレイマーチングについて発表してきました。

シェーダというニッチな分野にも関わらず、100人以上の参加者となる熱い勉強会でした。 無料なのに出席率が高く、参加者のモチベーションが高くて良いことだなと思いました。 WebGLの普及により、Web系のエンジニアもシェーダを触ることで、シェーダの注目度が上がってきたのを感じました！

当日の様子はtogetterまとめを参考にしてください。

私は「シェーダだけで世界を創る！three.jsによるレイマーチング」という発表をしました。

coinsLT #0 で three.js についてのLTをしました。

はじめに

卒研で three.js という3DCGのライブラリを使って何か開発することしたので、JavaScript について勉強しました。

また、CoffeeScript という、コンパイルするとJavaScriptのコードに変換される言語についても使ってみることにしたので、 これについても勉強しました。

忘れてしまうと勿体無く思うので、備忘録です。

この記事では、

1. JavaScriptを勉強する上で重要だと思われる概念
2. CoffeScript の学び方
3. Rails で CoffeeScript を使う時のメモ

を紹介します。

Twitter名刺ジェネレータを作るにあたって、 Canvas を使ったので、勉強になったことを適当にメモします。

関連記事

• SQlite3でハマった点まとめ

canvas#toDataURL() の注意点

canvas#toDataURL() の注意点なのですが、 一度でもクロスドメインで読み込んだファイルを描画した canvas に対して使うと、 Uncaught SecurityError: An attempt was made to break through the security policy of the user agent. というエラーがでます。

クロスドメインで取得したImageを引数にしても、context#drawImage()は成功するので、すこし気が付きにくいと思いました。

Chrome バージョン 29.0.1547.65 で確認しました。

最近、COJTという授業でWebGLとHTML5、JavaScriptなどを駆使して、3Dを使ったカバンの商品カタログのような物体を生成しています。 JavaScriptなどについて色々調べているので、有益そうなことをメモします。 とりあえず、動くようになったので、公開用のURLを晒しておきます。 COJT用の何か 実は、開発方法が色々とアレなのですが、ここでは深く言わないことにします。 JavaScriptそのものについて 私のようにクラスベースオブジェクト指向の言語から入った人間にとっては、 JavaScriptのプロトタイプベースオブジェクト指向はなかなか馴染みにくいものでした。 そういう人は、以下のサイトなどから、JavaScriptのOOPについて学習するのが良いと思います。 最強オブジェクト指向言語 JavaScript 再入門！ slideshare JavaScriptでオブジェクト指向プログラミング @IT イーズ・アウト について COJT用の何かをみてもらえれば分かると思うのですが、棚の回転やパネルのポップアップの動きが 等速ではなく、動きの終わりに減速するようになっていると思います。 動きの終わりに減速する動きを「イーズ・アウト」と呼ぶそうです。 イーズ・アウトは重要で、フレーム数が限られた描画でも滑らかに動きに見せることができます。 ぶっちゃけ、COJTで学んだ一番のことと言うと、イーズ・アウトという単語を覚えたことな気がします。 イーズ・アウトの実現方法は色々とあると思いますが、私は次の関数で実装することにしました。 {% math%} f(t) = 1 - exp(-6t) {% endmath %} tは時間で、tを0〜1の間で変化させると、f(t)が良い感じにイーズアウトする物体の座標になります。 この式は、次のサイトから知りました。 指数関数を使ったお手軽イーズ・アウト spinrfの実装 JavaScriptには、spinrfがないので、自分で実装するか、誰かが作った実装を使う必要があります。 単純な用途なら、この実装で十分だと思いました。 連載：jQuery逆引きリファレンス：第5回 コア編 (11⁄13) @IT より // sprintf(‘{0}は{1}’, ‘猫’, ‘うろうろ’); => ‘猫はうろうろ’ sprintf = function(format) { // 第2引数以降を順に処理 for (var i = 1; i < arguments.length; i++) { // 正規表現でプレイスホルダと対応する引数の値を置換処理 var reg = new RegExp(’\{’ + (i - 1) + ‘\}‘, ‘g’); format = format.