ねこでじ(Nekodigi)

Nekodigi’s diary

学習中の気づきをまとめています。応援よろしくお願いします

Processing

【Processing】ハノイの塔の視覚化をした

ハノイの塔とは 仕組み ダウンロード ハノイの塔とは ハノイの塔は三本の柱と円盤から構成される塔で、常に小さいものが上に来るようにしながら、円盤を一枚ずつ移動させ。塔を他の柱に移すというものです。 単純な仕組みでありながら、円盤の数が増えると爆…

【原神】ライアーを動画から譜面起こしするプログラム

動作デモ www.youtube.com 動作デモ きっかけ 使い方 ダウンロード きっかけ 最近原神のライアーにはまっていて、雷電将軍と鍾離の曲を練習しています。実はこの動画も自分で演奏したものです! 普段使っているGenshin Music NightlyはMIDIファイルの直接読…

【Processing×PHP】Webから花火を遠隔操作しよう!

この作品について ダウンロード 必要なもの この作品について 今回作ったのは、以前作った花火のアートをWebから操作できるプログラムです。 赤、緑、青のLEDのボタンを押すと、花火が打ちあがります。 実は、隠しコマンドも使えて、虹色の花火が打ち上った…

【p5.js】マインスイーパーも200行以下でプログラミング出来ます!

成果物 動作画面 クリア 失敗 ライブデモ 遊び方 作り方・コード 作り方 コード 成果物 動作画面 クリア 失敗 ライブデモ お友達がマインスイーパーにはまっていたので、簡単に作ってみました。シンプルだけれど、爆弾を避けるドキドキ感がクセになります! …

【Processing】3つ並べて消す、マッチ3ゲームを簡単に作る! |

3つ並べて消す!マッチ3ゲームを作る キャンディークラッシュなどのゲームは皆さんも見たことがあると思います。 こうしたゲームはマッチ3ゲームと呼ばれるのですが、簡単に作れそうに見えて意外とプログラムが複雑になってしまいがちなゲームです。 そこで…

【Processing】オンライン対戦できる横スクロールゲームをプログラミングする。

www.youtube.com オンライン対戦できる横スクロールゲーム 自分で作ったステージで友達と遊べる横スクロールゲームを作りました。 マリオなどで有名な横スクロールゲームは、四角いブロックを並べていくだけで簡単にステージを作ることが出来ます。 物理判定…

【Processing】シューティングゲームを200行以下でプログラミングする。

www.youtube.com シューティングゲームの作り方 ダウンロード シューティングゲームの作り方 シューティングゲームでは、プレイヤーと敵が存在し、プレイヤーは弾を放ち敵を撃退します。 プレイヤーは十字キーで移動でき、スペースキーで弾を生成します。敵…

まるで衝撃波!Audio Visualizerをp5.jsで作る

www.youtube.com 衝撃波のようなAudio Visualizer Webで実行 残像を使おう! 衝撃波のようなAudio Visualizer 音楽を再生するときに表示される棒グラフのようなものがAudio Visualizerで、音の周波数などを視覚化するために使われています。特にNCSのAudio V…

竜とそばかすの姫に出てくるような、サイバー風のアートを体験できるWebアプリ - Cyber Wave

www.youtube.com Cyber Waveとは p5.jsでこんなものも作れる Wavy Fabric Generative Portrait Cyber Waveとは 竜とそばかすの姫やサマーウォーズに出てくるような、サイバー風のアートを、直感的に動かすことが出来るWebアプリです。 マウスで簡単に操作で…

【p5.js】波打つ布をPerlin Noiseを使って作る

www.youtube.com 布の模様を作るのは簡単! Webで実行 Perlin Noiseでできること 布の模様を作るのは簡単! 手作業で布を織るのは本当に大変ですが、コンピューターなら水平方向と垂直方向に線を引くだけで簡単に描くことが出来ます。 動画の11秒当たりで線…

【p5.js】渦巻く肖像画!?のアートを作ってみた

www.youtube.com 渦巻く肖像画の作り方 使い方 使用例 ベートーベン バッハ 渦巻く肖像画の作り方 まず、画像の明るい方を示す勾配ベクトルを生成します。それに垂直になるようにペンを動かすと、明るい場所を中心に輪を描きます。 これが渦巻く肖像画の仕組…

【Unity・Processing対応】流体シミュレーションを使ったシャボン玉

www.youtube.com シャボン玉 ライブデモ ダウンロード Processing版 Unity版 元にした情報 シャボン玉 シャボン玉の虹色は光の干渉によって発生し、厚みによって色が変わります。今回は、ColorpyというPythonライブラリを使いシャボン玉のグラデーションをあ…

【Processing】神経細胞のような神秘的な模様を生成できるEdge Bundling

www.youtube.com Edge Bundlingとは Edge Bundlingは大量の線を束ねて、見やすく表示することができるアルゴリズムです。Force-Directed Edge Bundlingと呼ばれるこの方法は、角度・長さ・位置・可視性を総合的に判断して整形するため、より線を美しく表現す…

【Processing】"ACTUAL" Piano Visualizer

www.youtube.com I've seen Piano Visualizer using Synthesia, but I've never seen Piano Visualizer using a real display, so I made it. Features It uses Processing to get Midi and visualize it, and also sends a signal to Arduino to control th…

【Processing】Generate Polygon from Raster Image with Marching Square.

Abstract You can use this algorithm to get contours from an image. It also turns clockwise or counterclockwise depending on whether it is facing inward or outward, which is convenient when draw it. How it works. We can find the contour by …

【Arduino×Processing】Calculate rotation with MPU9250 and visualize with Processing

Abstract www.youtube.com I had used MPU9250 with Raspberry PI before, so I did same thing with Arduino. I implemented formula to calculate yaw, but I won't use because I want to make it accurate and simple. How it works Arduino At first, g…

【Processing】Newton Fractal given Solutions

Abstract www.youtube.com Newton-Raphson's method is a method to solve an equation recursively. In addition, when we visualize it we can get an amazing fractal so I made a program that can generate fractal given point (or complex number sol…

【Processing】Implement 2D FFT and 2D IFFT and Gaussian blur with them. (Cooley-Tukey Algorithm)

Abstract I found that I could extend the FFT(Cooley Tukey Algorithm) easily to two dimensions so I implemented it immediately.I can convert an image to frequency data and I can get the original image from the frequency data with IFFT. It i…

【Processing】FFTをきちんと実装する。

成果物 今まではFFTの仕組みがよく分かっておらず、見つけたものをそのまま使っていたのですが、WikipediaのCooley-Tukey-algorithmというFFTのアルゴリズムが思いのほか分かりやすかったのでそれをもとに実装してみました。分かりやすさを重視したので速度…

【Processing】MIDI入力をスピーカーで再生する。

概要 電子ピアノからMIDI入力すると、Virtual Midi Synthなどに転送されて音が出ます。単純にMIDI入力をそのまま出力しているだけなので、シンプルです。環境によっては遅延も少ないかもしれません。 コード Virtual Midi Synthはここからダウンロードできま…

【Processing×Arduino】WS2812Bを使って音に合わせてPCをライティングする。

成果物 固定 www.youtube.com 新しいマザーボードのTaichiにはLEDコントローラーが付いているのはいるのですが、長さが2Mまでという制約が気に入らないので、より良いカスタマイズ性を求めてArduinoでコントロールすることにしました。 音と同期 www.youtube…

【Processing】雷のような模様を超高速で生成!Laplacian Growthを実装する。

成果物 【Processing】Laplacian Growth Animation 今回は、放電した時などに現れるパターンを生成するLaplacianGrowthを実装してみました。DLAに似た結果を生み出せるアルゴリズムですが、圧倒的に早く計算できます。 その後、しばらく放置したら凄いことに…

【Processing】Calabi Yau多様体を動かす。

成果物 【Processing】Calabi Yau Formatted Animation Calabi Yau多様体は超弦理論などで出てくる次元を畳み込んだものなのですが、非常に美しいのでぜひ作りたいと思って調べてみました。また4つの数値を三角関数でブレンドして3次元に落とし込んでいるの…

【Processing】あるxでの三次ベジェ曲線のyの値を三次方程式を使って全て求める。

成果物 前回三次方程式の解を全て求めるプログラムを作ったので、今回はそれを三次ベジェ曲線に使ってみました。 成果物 3次ベジェ曲線はtについての3次方程式の形で表すことができます。方程式をといてtを求めます(実数解のみ採用)そして、そのtをベジェ…

【Processing】壊れていたと思っていたLEDテープが1年ぶりに復活!!早速コントロールしてみる。

成果物 5mでLEDが300個も付いている防水LEDテープを今から1年ほど前に購入しました。しかし、買った当日に端子をショートさせてしまい、壊れてしまったと思ってずっとしまっていました。ALITOVE LEDテープライト WS2812Bアドレス可能 5050RGB SMD 5m 300個ピ…

【Processing】三次方程式の3つの解を全て求める。

成果物 前回は1つの解だけしか求められなかったので、全ての解を求める方法を調べてみました。コードは長く、3つの条件で処理を分けるのですが、複素数の計算があまりなく、シンプルです。 前回記事 nekodigi.hatenablog.com 仕組み www.1728.org こちらのサ…

【Processing】3次方程式を解く(解1つ編)

成果物 三つある解のうち、現時点では1つしか求められていないのですが、複素数解も計算することができます。 こちらのサイトの数式で全ての解を求めることができそうなので、また次回トライしていこうと思います。 www.1728.org 仕組み 今回は、こちらのサ…

【Processing】CatenaryからTractrixを求める。

成果物 前回はTractrixからCatenaryを求めましたが、逆もできると言うことでやってみました。弧の長さの数式がなかったので、単純に何回も足し合わせています。ちなみに、Tractrixの方はこの長さを求めることができるようです。あくまで見た感想ですが、同じ…

【Processing】TractrixからCatenaryを求める。

成果物 棒を真っ直ぐ押していったときにできるTractrixから、縮閉線evolute or法線を引いていくとCatenaryが求められるので、やってみました。逆もできるのですが、積分が大変そうなので、後々やっていこうと思います。 仕組み こちらのサイトをもとにTractr…

【Processing】黄金角で球面状のサンプリングをする。

成果物 このような方法を使って、球状にRayを飛ばしていた人がいたので、やってみました。軌跡を表示すると非常にきれいなのでやってみてください。 仕組み zを少しずつ変えながら、黄金角に従って球状に配置していくと均一にサンプリングできます。 こちら…