とは夏果とは
🔖️AI🔖️browser🔖️event🔖️film🔖️JS🔖️museum🔖️Rust🔖️stroll🔖️tourism🔖️VTuber🔖️Wasm🔖️Wired🔖️Zola
手描きイージングと丸ドット画像   
2023.10.31 🔖️JS 🔖️AI

chatGPTと戯れることを主目的に以下の静的サイト(とは名ばかりの生html)を作成した.

手描きイージング

動画編集が行き詰まるとイージングを弄って一日が終わる.
そんな中で気づいたのだが,イージングは大抵のソフトでベジェ曲線により制御されていて,手描きなんて中々みない.
便利になるとも思えないが物は試しで手描きのイージングを試す.

https://gist-4d0c6.web.app/draw.html

これくらいの実装なら適当に頼めば書いてくれるだろうと思ったが,細かく手順を書かないと思ったようなコードをくれなかった.
結局

  • canvasに線を引けるプログラム
  • easing-functionによって四角形を動かすプログラム

を書いてもらい,jsで取得したマウスの軌道をcssのeasing-functionに当てる肝の部分は自分で書いた.

コード: https://gist.github.com/slnq/5cf7fc14dc1c7d2fb10b7f8f0516977d

cssのcubic-bezierは3次に限定されているようなので,4次以上のベジェ曲線に対応するイージングも作ってみたい気持ちはある.
B-スプライン曲線にも興味はあるが肝要となるn次におけるn+1点での制御では始点と終点を固定することが出来ず面倒事が多そうだなという思いが強くある.

画像を丸いドットで表現する

随分前に作ったので動機などは覚えていないが,VTuberの3Dライブで3D空間に置かれたモニターを敢えて荒いドットで現実のライブ然と実装していることが気に入って作ったような気がする.

https://gist-4d0c6.web.app/circle_dot.html

これは結構ChatGPTが書いてくれたんじゃないかな.自分で書いたら入力した画像の解像度に応じた円の大きさと量を設定する気がするため.
いまから加筆修正してもいいのだが形になってはいるのでまぁいいかな.

コード: https://gist.github.com/slnq/925eda31999a88c527170377a1d6478b

円を小さくし数を増やすとモアレのようなものが見えて面白い.
面白いが携帯では重くなってしまうのが問題.

Zolaのこと

それぞれの記事を書くほどの内容でも無いのでまとめてしまったが,このサイトでは複数のURLを⧉から飛べるように設定していないので改変の必要が出てきてしまった.また近いうちに.