HosodaMath

駆け出しのフロントエンジニア、インタラクションデザイナー WebGL(Threejs)…

HosodaMath

駆け出しのフロントエンジニア、インタラクションデザイナー WebGL(Threejs)、WebAudioAPI、Blender、Rust、C++、TypeScript、JavaScript

AltEdu2022 Day28の解説記事

本日のテーマは100年後の誰かに向けてコードを書いてくださいでした。 コードは以下にあります。 デモは以下にあります。 今日はライブラリーやフレームワークを使わずWebGL2、GLSL、CSSを使いリアルタイム3Dアプリケーションを作成しました。 今回もっとも難しいと思ったのはCSSを使いコントロールパネルの作成したことです。CSSでオリジナルのコントロールパネルを作るには一度既存のスタイルを破壊しなければならいので当然最初はコントローラーとして機能しませんでした。そも

HosodaMath

    • AltEdu2022 Day22の解説記事

      本日のテーマはこれまで使ったことがない関数や命令を用いてコードを書いてくださいでした。 p5.jsでイージングアニメーションを実装しました。 コードは以下にあります。 デモは以下にあります。 イージングアニメーションはほとんどcssでしか扱ったことないのでTypeScriptで扱うのはおもしろいです。今度c#(Unity)でも実装したいと思いました。 本日は以上です。

      HosodaMath

      • AltEdu2022 Day21の解説記事

        本日のテーマは今日の天気や、空の様子を眺めてコードを書いてくださいでした。 昼とは書かれていないので昼の空の様子と夜の空の様子を同時に描いていますあるいは昼の青空のもとに昼の星空を描いています（こちらは当然わかりにくいです）。 コードは以下にあります。 昼の空のときの昼の星空 夜の空のときの昼の星空 本日は以上です。

        HosodaMath

        • AltEdu2022 Day18とDay19の解説記事

          Day18のテーマは音を使った、あるいは音を感じるようなスケッチを作ってくださいでした。 Day19のテーマはプログラミングを意識して料理を作ってください。作った料理や感想をシェアしてくださいでした。 Day18の成果物は以下の通りです。 コードは以下にあります。 デモは以下にあります。 動画はこちらです。 今回はSVGでかんたんなシンセサイザー・キーボードとWeb Audio APIを用いて音の出力そしてWebGL2を使い波形表示を行いました。 シンセサイザー・キー

          HosodaMath

        AltEdu2022 Day28の解説記事

        HosodaMath

          AltEdu2022 Day17の解説記事

          今日のテーマは3色の色、3種類の図形だけを使って、コードを書いてくださいでした。 コードは以下にあります。 デモは以下にあります。 3色の色と3種類の図形（円、矩形、三角形）の3つを使い異なるパターンや変化などをスケッチを3つ作成して描きました。 1つめはy軸に大きさの異なる変化をした図形を描きました。 2つめはx軸に大きさの異なる変化をした図形を描きました。 3つめは3つの図形がそれぞれ異なるタイミングで変化する図形を描きました。 3つめのコードの変化の割当は以下

          HosodaMath

          AltEdu2022 Day17の解説記事

          HosodaMath

          AltEdu2022 Day16の解説記事

          今日のテーマは壁紙のような、身の回りにある模様を真似してコードを書いてくださいでした。 こんな壁紙がほしいと思い和柄の1つである三崩しを描きました。 コードは以下にあります。 和柄は模様がかなり複雑なものもありとてもむずかしいと思います。今度はWebGL2でも挑戦したいなと思いました。 参考文献 本日は以上です。

          HosodaMath

          AltEdu2022 Day16の解説記事

          HosodaMath

          AltEdu2022 Day14の解説記事

          今日のテーマは#つぶやきProcessingに挑戦してみましょう！1ツイートに収まらなくても構いませんでした。 実装したコードは以下にあります。 int i,j;float x,y;void setup(){size(512,512);background(230,230,255);for(i=0;i<1000;i++){x=random(-1,1);y=random(-1,1);for(j=0;j<1000;j++){fill(i*0.5,250,100);circle(

          HosodaMath

          AltEdu2022 Day14の解説記事

          HosodaMath

          AltEdu2022 Day13の解説記事

          今日のテーマは周りの誰かや、コミュニティの人たちと話しながらコードを書いてみてください。あるいは書いたあと作ったものを通じて話し合ってくださいでした。 サウンドビジュアライゼーションです。 昨日の続きでWebAudioAPIとp5.jsをシェーダーを通じて連携したものです。サンプリングした音源データをGLSLに流し込みました。型はfloatなのでそれほど難しくはなかったです。 コードは以下にあります。 デモは以下にあります。 今度はWebGL2やWeb GPUでも挑戦し

          HosodaMath

          AltEdu2022 Day13の解説記事

          HosodaMath

          AltEdu2022 Day12の解説記事

          今日のテーマは普段と違う場所や違う時間にコードを書いてみてくださいでした。 違う場所で書いてみました。 コードは以下にあります。 デモは以下にあります。 WebAudioAPIとp5.jsあるいはWebGL2とのシェーダーを使い連携しようとして壁にぶつかりました。具体的にはサンプリングした音源データをGLSLに流し込もうとしましたがうまくいきませんでした。また明日再挑戦します。 本日は以上です。

          HosodaMath

          AltEdu2022 Day12の解説記事

          HosodaMath

          AltEdu2022 Day11の解説記事

          今日のテーマは「デジタル」を感じるようなコードを書いてくださいでした。 実装したコードは以下にあります。（フォントはフリーで再配布可能フォントを使っています。） デモは以下にあります。 0と1のみのデジタル世界な世界観（サイバー空間）を描きました。 背景はGLSLを使っています。 p5.jsだと少し重いです。 フォントはKen Pixelを用いました。このフォントはフォント名通り文字をドットで表すフォントです。 本日は以上です。

          HosodaMath

          AltEdu2022 Day11の解説記事

          HosodaMath

          AltEdu2022 Day10の解説記事

          今日のテーマは身の回りにあるモノをいくつか集めて、その色を使ったコードを書いてくださいでした。 身の回りの色を使って生成的なPatternを作成しました。 実装した成果物は以下にあります。 実装したコードは以下にあります。 デモは以下にあります。 https://github.com/HosodaMath/naturePattern/settings/pages クリエイティブコーディング面白いです。 パラメーターを少し変えるだけでそれなりに違うものができます。 本

          HosodaMath

          AltEdu2022 Day10の解説記事

          HosodaMath

          AltEdu2022 Day9の解説記事

          今日のテーマはにおいや手触りのような感覚をコードで表現してください。 今回は聴覚と視覚を刺激するものを作ってみました。匂いや手触りというのはかなり難しかったと思います。 ザラザラ質感のある星を作って風に流されていくというのを作ってみました。 Web Audio APIは風の音を効果音としてのみ使用としています。 実装した成果物は以下にあります。 デモは以下にあります。 次はp5.jsやProcessingでザラザラ感なものも作ってみたいと思います。 本日は以上です。

          HosodaMath

          AltEdu2022 Day9の解説記事

          HosodaMath

          AltEdu2022 Day8の解説記事

          今日のテーマはお気に入りの曲を聞きながらコードを書いてください。書いている途中で踊っても構いません。 実装した成果物は以下にあります。 デモは以下にあります。 今回は比較検討のため簡単なランディングページになっています。 聞いていた曲はTRUEさんのWILLとDREAM SOLISTERです。 今回はWebに関わる複数のAPIを使って実装しているので実装は若干難しかったです。 作成したものはWeb Audio APIでp5.jsを使って作成したスケッチ自体を動かしています

          HosodaMath

          AltEdu2022 Day8の解説記事

          HosodaMath

          AltEdu2022 Day7の解説記事

          今日のテーマは全画面でアニメーションするコードを書いてみてください。完成したらしばらく表示してみてくださいでした。 コードのライセンスはCC BY-NC-SA 3.0です。 実装した成果物は以下にあります。 デモは以下にあります。 今回はWebGLモードで作成しました。circleの大きさを少しづつ変化させて回転するアニメーションを作成しました。 const divValue = 3;const radius = 5;const shiftX = radius;cons

          HosodaMath

          AltEdu2022 Day7の解説記事

          HosodaMath

          AltEdu2022 Day6の解説記事

          今日のテーマは誰かのコードを参照しそれを別のものに書き換えてみてくださいでした。 @senbakuさんのnoise wavesを改良してNoise Sound Visualizationを作成しました。 オリジナルコードは下記にあります。 コードのライセンスはCC BY-NC-SA 3.0です。 実装した成果物は以下にあります。 デモは以下にあります。 Web Audio APIの部分はAltEdu2022 Day4と変わりません。 問題なのは音の長さと映像の長さが

          HosodaMath

          AltEdu2022 Day6の解説記事

          HosodaMath

          AltEdu2022 Day5の解説記事

          厳密には線ではなく線分ですがここでは線としておきます。 今日のテーマは線を使わないで線を書いてみてくださいでした。 実装した成果物は以下にあります。 デモは以下にあります。 何で作ったかといいますと、p5.jsの標準のvertexを使っています。p5.jsの標準のline関数は使っていません。最初はrectを細めて使おうとしましたがrectは座標の個数が4個なので細めても線のように動かすのは無理だと思いvertexを用いました。 今回作ったものは左右で微妙にずれて動かす

          HosodaMath

          AltEdu2022 Day5の解説記事

          HosodaMath