https://blog.kimizuka.org/entry/2020/11/05/145418blog.kimizuka.orgこちらの記事 の応用版です。 1フレームずつポーズを作りアニメーションさせてみました。作り始めた時は、1フレームあたり10x10x10の1000個のcubeで想定していましたが、途中でどうして…
A-Frameを色々試していたところ、marker.getAttribute('position')でマーカーの座標が取得できることがわかったので、 Webカメラを定点で固定 0.1秒間隔でマーカーの座標を取得 1個前の座標と現在の座標を結んだでベクトル化 ベクトルの大きさが一定以上であ…
mobile Safariのclcikイベントについて DEMO HTML 対策 その1 対策 その2 HTML DEMO mobile Safariのclcikイベントについて その昔、iOSのmobile Safariに置いて、widnow、document、bodyにはclickイベントが設定できない記憶があったのですが、最近はどうな…
canvasタグはcontextのputImageDataを使って、ピクセルデータを編集することができます。 const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); const video = document.createElement('video'); video.src = 'movie.mp4…
ビデオをミュートにすれば自動再生できることは知っていたので、 const video = document.createElement('video'); // ミュートに設定 video.setAttribute('muted', 'muted'); video.setAttribute('autoplay', 'autoplay'); video.setAttribute('loop', 'loo…
この投稿をInstagramで見る 片付けが捗るように、3秒以上物を置きっぱなしにすると爆発音がする机を作りました。名付けて「かたづくえ」です。 #音楽 #家 #音楽家 #ミュージックハウス #片付け #机 音楽+家=音楽家(ミュージックハウス)(@ongaku.ie)がシ…
己との戦いAR。 pic.twitter.com/1bHUuSggc0— 君塚史高 (@ki_230) 2020年11月2日 これまではglbファイルを読み込んでいたので、Blenderを使ってファイルを変換していました。が。A-Frameのドキュメントを読んでいると、objファイルが読み込めそうな気配が。 …
以前、こんなものをつくりました。本人よりも先に踊り出す影。 pic.twitter.com/mo29EZ19lY— 君塚史高 (@ki_230) 2020年6月18日 この時は、Unityをつかって影とスポットライトをつくっていたのですが、three.jsやA-Frameをつかうことにハマっている今となっ…
昨日つくったボクセルをA-Frameを使ってARで表示してみました。blog.kimizuka.orgA-Frameも内部はThree.jsを使っているので、もっと色々できそうな気がします。 あと、3Dモデルを確認するインターフェイスとして、マーカー型ARは非常に優秀な手段かもしれな…
はじめに 己のスキル 己のスキルで実行可能な作戦を考える ドット絵の三面図の大きさを決める ドット絵で三面図を描いて輪切りにする 輪切りの情報を配列にする 弓 Aポーズ 配列をThree.jsでレンダリングする 弓 Aポーズ はじめに ちょっと前からVRのゲーム…
昔はReact派だった僕も、いまとなってはJavaScriptの書き方的にはReactでもVueでもどちらでも構わないぐらいになってきました。 NextJSとNuxt.jsを比べると、CSSの管理の仕方がNuxt.jsの方が好き、というかSFCが好きなので、どっちでも良いと言われた時は、…
blog.kimizuka.orgの記事の続編です。分身の術。 pic.twitter.com/ATedQVtJXn— 君塚史高 (@ki_230) 2020年10月27日 前回は、実寸代のARで分身の術を作ってみた次第ですが、分身(3Dモデル)はピクリとも動いていませんでした。なので、今回は3Dモデルにアニ…
公式ドキュメントをざっと読むと、autoplayというパラメータも、loopというオプションも見つかるので、その2つを使って const player = new YT.Player('player', { width: '320', height: '180', videoId: '1g0ebPju_eE', playerVars: { autoplay: 1, playsi…
すべては公式ドキュメントに乗っています。webpack.js.orgresolve.extensionsに文字列の配列を渡せばOKです。webpack.js.org module.exports = { //... resolve: { extensions: ['.ts', '.js', '.json'] } }; TypeScriptファイル、JavaScriptファイル、JSON…
Macでターミナルに、 say こんにちはと打つと、機械音声で「こんにちは」と読み上げてくれます。さらに、 say こんにちは -o sayと打つと、say.aiffという感じにaiffファイル化してくれます。 2つ目のsayはファイル名なのでなんでも構いません。また、ffmpeg…