p5.js
成果物 動作画面 クリア 失敗 ライブデモ 遊び方 作り方・コード 作り方 コード 成果物 動作画面 クリア 失敗 ライブデモ お友達がマインスイーパーにはまっていたので、簡単に作ってみました。シンプルだけれど、爆弾を避けるドキドキ感がクセになります！ …
www.youtube.com 衝撃波のようなAudio Visualizer Webで実行 残像を使おう！ 衝撃波のようなAudio Visualizer 音楽を再生するときに表示される棒グラフのようなものがAudio Visualizerで、音の周波数などを視覚化するために使われています。特にNCSのAudio V…
www.youtube.com Cyber Waveとは p5.jsでこんなものも作れる Wavy Fabric Generative Portrait Cyber Waveとは 竜とそばかすの姫やサマーウォーズに出てくるような、サイバー風のアートを、直感的に動かすことが出来るWebアプリです。 マウスで簡単に操作で…
www.youtube.com 布の模様を作るのは簡単！ Webで実行 Perlin Noiseでできること 布の模様を作るのは簡単！ 手作業で布を織るのは本当に大変ですが、コンピューターなら水平方向と垂直方向に線を引くだけで簡単に描くことが出来ます。 動画の11秒当たりで線…
www.youtube.com 渦巻く肖像画の作り方 使い方 使用例 ベートーベン バッハ 渦巻く肖像画の作り方 まず、画像の明るい方を示す勾配ベクトルを生成します。それに垂直になるようにペンを動かすと、明るい場所を中心に輪を描きます。 これが渦巻く肖像画の仕組…
成果物 小学生の時、あと何秒で学校が終わるかよく計算していたので、p5.jsでも実装してみました。目標の日時までの差、残りの、時間or分or秒を表示してくれます。正月に限らずカレンダーマークから任意の日付を選択できます。 仕組み 現在時刻と目標の時間…
成果物 ※そもそも、ヒエログリフにはないアルファベットがあり、そうした文字は無理やり置き換えられています。特にxは2文字で近似されていましたが、こちらの都合で置き換えています。 こちらのサイトのヒエログリフ変換を参考にしました。 日本語/英語から…
成果物 今回は、気軽に利用できるようにしたかったので、久々にp5.jsを使ってみました。任意の文字数だけずらしたシーザー暗号が作れるようにしました。 参考 シーザー暗号 - Wikipedia コード editor.p5js.org
