Featured image of post 音でワイングラスを割るアプリ

音でワイングラスを割るアプリ

音でワイングラスを割るためのWebアプリをVueとp5.jsで作りました.

爆音グラス破壊サイト

爆音グラス破壊

音でグラスを破壊できるかもなサイト

これは何?

グラスを音で破壊するサイトです,

具体的には,グラスの固有周波数を再生して激しく共振させることで破壊します.

使い方

https://hakai.yasai.dev/usage

準備

  • スマホもしくはパソコン
  • 割れやすそうなワイングラス
  • いい感じの長さのストロー
  • できれば爆音スピーカー (最悪スマホスピーカーでもOK)

破壊

  • Analysisボタンを押す (マイクの確認ダイアログがでたら許可)
  • もう一度Analysisボタンを押す
  • カウントダウン後グラスをはじいて音を出す
  • サイトが音を自動分析
  • Playボタンは破壊音を再生!

破壊の仕組み

はじめにマイクからグラスを弾いた音をFFTして,周波数のピークをとり固有周波数として求めます.

次に,その固有周波数のサイン波を生成し,再生します.

結果,グラスは共振し激しく揺れて限界を超えた際破壊されてしまいます.

Tech

  • JS framework: Vue.js
  • Design Framework : Vuetify
  • オーディオ/描画周り: p5.js

Code

GitHub - yasaidev/glass-breaker: スマホの音でグラスを割れるかもしれないサイトです

スマホの音でグラスを割れるかもしれないサイトです. Contribute to yasaidev/glass-breaker development by creating an account on GitHub.

comments powered by Disqus
Built with Hugo
テーマ StackJimmy によって設計されています。