ねこでじ(Nekodigi)

Nekodigi’s diary

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

【Blender】配布あり!VFXで机に穴をあけたり、物を置いたりするシンプルなデモプロジェクト。

www.youtube.com

VFX制作の大まかな流れ

まず初めに動画を読み込み、特徴のある点をいくつか追跡して映像がどのように動いているのかを調べます。ここで精度を上げておかないと不自然な映像になってしまうので、マーカーを使って正確な追跡が出来るようにしたり、うまくいっていないデータを取り除いたりします。
次に、映像の動きから三次元の位置情報を計算し、それに従ってカメラを動かします。光の当たり具合などは手動で設定する必要がありますが、この作業を行うと映像に溶け込む説得力のある仕上がりになります。
最後に、立体や穴を配置してレンダリングしたものを映像の上に重ねると出来上がります。

ダウンロード

著作権フリーで使用できます。ライセンス表記も必須ではないので気軽にご利用ください。
github.com

参考にした動画

今回のプロジェクトはこちらのチュートリアルをもとにしています。
www.youtube.com

【Unity】WebGLやAndroidでも動く互換性のあるGPUパーティクルを作ってみた。

www.youtube.com

ライブデモ

app.nekodigi.com
10万パーティクル程に減らしてありますが、機器によっては読み込みが非常に遅いので注意してください。

GPUパーティクルについて

パーティクルは大量の物体を表示して、様々な視覚効果を作るときに使われます。しかし、大量の物体を一つずつ表示するとあまりにも遅くなってしまいます。そこで、同時に大量の処理を行うことができるGPUを使うと、何百倍、何千倍の速さで表示することが出来るのです。
この動画では、1000万個のパーティクルとCurlノイズというものを使って火炎を表現してみました。

互換性の確保

Unityには柔軟な計算に対応するComputeShaderという機能があるのですが、実はWebGLOpenGL ESのバージョンが2.0までなので動かすことができません。そこで、画像に位置情報や速度情報を保存して互換性の高いShaderLabを使って計算することにしました。
計算に使う頂点の数が制限を超えてしまう、精度の高いデータ型が対応していないなど様々なトラブルも発生しましたが、データを分割したり別の型で初期化することで解決しました。
※互換性は確保してありますが、機種ごとに実行速度は大きく変動するので注意してください。

ダウンロード

github.com

参考文献

今回のプロジェクトはこれらのプロジェクトを元に製作しています。
github.com
github.com

【Python】Google先生が半自動で歌えるようにしてみた。

サンプル

Google先生は簡単には歌ってくれない。

Google先生が歌う動画はすでにいくつか投稿されていますが、旧式のGoogle先生が歌っていたり力技で歌わせていたりして、新しいGoogle先生を楽に歌わせる手段は未だにありませんでした。
そこで、今回はセリフと音階と音の長さを入力するだけで簡単に歌わせられるプログラムを作ってみました。

仕組み

音符に紐づいている文字を入力します。(例:さ)次にPydubを使い、ピッチを変えます。最後にはみ出た部分を切り取ります。各文字に対してこれを繰り返し、最後につなげることで仕上がります。

ダウンロード

Google Colabでも動きますが、音は出ないようなのでJupyter Notebookなどで実行してください。
gist.github.com

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

www.youtube.com

Edge Bundlingとは

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

ダウンロード

github.com

関連情報

Horikawa Junichiro氏によるHoudiniを使った解説動画です。
www.youtube.com
今回の作品の基礎となっている論文です。
http://citeseerx.ist.psu.edu/viewdoc/download?doi=10.1.1.212.7989&rep=rep1&type=pdf

クリスタルのような美しい3Dボロノイ図が体験できるアプリ【無料】

www.youtube.com

このアプリについて

コンピューターグラフィックスやシミュレーションの現場で使われるボロノイ図とドロネー図を2D、3D、球状の全てで体験することができます。また、生成した図形に様々なアルゴリズムを適用すると、変形させたり、穴をあけたり、ツタのような模様を作ったりすることもできるのです。
f:id:Nekodigi:20210527212320p:plain
Get it on Google Play

使い方

1. スタートボタンを押す。

f:id:Nekodigi:20210527211032p:plain

2. 次元を選択する。

f:id:Nekodigi:20210527211103p:plain
これが次元を選択するためのドロップダウンです。
f:id:Nekodigi:20210527211226p:plain
2D、3D、球状を選択することが出来ます。

3. 図の種類を選択する。

f:id:Nekodigi:20210527211328p:plain
これが図の種類を選択するためのドロップダウンです。
f:id:Nekodigi:20210527211411p:plain
ドロネー図、ボロノイ図のどちらかを選ぶことが出来ます。

4. 適応するアルゴリズムを選ぶ。

f:id:Nekodigi:20210527211550p:plain
ラジオボタンから適応するアルゴリズムを選ぶことが出来ます。

オプション1. 頂点の数を設定する

f:id:Nekodigi:20210527211624p:plain
このスライダーで頂点の数を変更することが出来ます。数が大きいほど細かくなりますが、重たくなります。

オプション2. 図を再生成する。

f:id:Nekodigi:20210527211912p:plain
このボタンを押すことで図を再生成することが出来ます。

オプション3. 図をばらばらにする。

f:id:Nekodigi:20210527211951p:plain
いくつかの2Dの図を表示しているときに画面をタップすると、タッブしたところの周りの多角形がバラバラになって消えます。

体験できる三つの図形

ボロノイ図とは

美しい破片を生成することができるため、破壊シミュレーションの場面でよく使われる図形です。実は、自然界でも泡や微生物の骨格にこのような模様が現れています。
幾何学的には任意の点群の中で、最も近い点を元に領域分けしたものになっています。このアプリでは、ドロネー図の外心をつなぐ方法で生成する方法を採用しました。
f:id:Nekodigi:20210527212411p:plain

ドロネー図とは

正三角形に近くなるように三角形分割したものがドロネー図です。計算に適した三角形なのでコンピューターグラフィックスの分野でよく使われます。アプリ内ではでは一つ上の次元の凸包を平らに押し潰すようにして生成する方法を採用しています。
f:id:Nekodigi:20210527212439p:plain

凸包

母点群を凹みなく綺麗に包み込んだ形です。計算に適した形なので物理エンジンなどでよく使われます。ドロネー図のもとになる形で、意外に思うしれませんが、3Dの凸包は球状ドロネー図と同じなのです!様々な方法で計算することが出来ますが、このアプリでは4Dの凸包が必要となるため、高次元にも対応できるQuickhullアルゴリズムというものを使っています。
f:id:Nekodigi:20210527212452p:plain

適用できる5つのアルゴリズム

均等に広げる → ボロノイ図の緩和

生成されたボロノイ図の重心に母点を移動させると、なんと!たったこれだけで点を均一に広げることができるのです。この方法はVoronoi Relaxation(ボロノイ図の緩和)と呼ばれています。
f:id:Nekodigi:20210527212526p:plain

ツタのような模様を作る → A*アルゴリズム

地図アプリなどで使われるA*アルゴリズムを使い、任意の二つの点の最短経路を求め続けていくと、不思議なことに、ツタのような模様が出来上がっていきます!今回は曲線で描くことでさらに自然な仕上がりにしました。
f:id:Nekodigi:20210527212543p:plain

穴の開いた複雑な形を作る → 制約付きドロネー三角形分割

ドロネー図は決められた点を通るように変形することができ、これをConstrained Delaunay Triangulation(制約付きドロネー三角形分割)と呼びます。このアルゴリズムを使うと、星形やドーナツ型などあらゆる形のドロネー図を作ることができるのです!
f:id:Nekodigi:20210527212601p:plain

バラバラにしながら小さくする → 多角形のオフセット

タップしたところの周りの多角形をPolygon Offset(多角形のオフセット)という方法で小さくすると、ばらばらに小さくなりながら消えてゆくアニメーションができます。このアルゴリズムは、多角形のオフセットは輪郭を描いたりする場面でも使われています。
f:id:Nekodigi:20210527212630p:plain

破壊シミュレーション → ブーリアン演算

3Dモデリングの分野でよく使われるブーリアン演算を使うと、3Dボロノイ図と任意の立体が重なっている部分を計算することができます。そうすることで、任意の立体から美しい破片を作ることができます。
※非常に残念ですがスマホ上ではうまく動かず、アプリから取り除きました。
f:id:Nekodigi:20210527212650p:plain

Google Play

3Dのボロノイ図が体験できるのはこのアプリだけです!めったに見られない美しい技術をぜひ体験してみてください。
Get it on Google Play

【Cities Skylines】10種類の美しいジャンクションを持つ100万都市!

www.youtube.com

100都市とジャンクション

Cities Skylinesではごみ問題に次いで、交通渋滞が終盤まで続く大きな問題になります。そこで、今回の100万都市では、実物を参考に10種類のジャンクションを作りました。

ジャンクションの種類

f:id:Nekodigi:20210521222327p:plain
不完全クローバー型
f:id:Nekodigi:20210521224101p:plain
タービン型(左)とスタック型(右)
f:id:Nekodigi:20210521223325p:plain
横から見る分岐風車型(下)と街並み
f:id:Nekodigi:20210521224210p:plain
特殊型(左)と分岐風車型(右)
f:id:Nekodigi:20210521224318p:plain
円形に近い特殊型
f:id:Nekodigi:20210521224647p:plain
トランペット型
f:id:Nekodigi:20210521225325p:plain
全体図

【無料アプリ】パーリンノイズを使った6種類の驚きのジェネラティブアート

www.youtube.com

パーリンノイズとは

パーリンノイズはもっとも有名なノイズの一つでマインクラフトの地形生成など、様々な場面で使われています。このアプリではそのパーリンノイズを利用した6種類のアートを楽しむことが出来ます。

1. 粒子

パーリンノイズから計算された角度に移動する粒子は徐々に列をなして動き、美しい模様を描きます。
f:id:Nekodigi:20210512212312p:plain

2.ピクセルソーティング

ピクセルソーティングは画像を明るい順に並べ替えたものです。パーリンノイズに従って部分的に並び替えることで美しい模様を生み出すことが出来ます。
f:id:Nekodigi:20210512212320p:plain

3.木目柄

線上のパーリンノイズを変化させながら積み重ねて行くと木目柄を作り出されます。色や位置を変えるとさらに複雑な模様を生成することが出来ます。
f:id:Nekodigi:20210512212349p:plain

4.波

残像を表示すると、パーリンノイズは全く異なった印象になります。
f:id:Nekodigi:20210512212343p:plain

5.ブロック破壊

粒子を使いブロック崩しのようにブロックを崩していくと、ブロックは次第に浸食されて有機的な模様が現れます。
f:id:Nekodigi:20210512212306p:plain

6.渦

パーリンノイズの勾配に垂直に粒子を動かすと、たくさんの等高線が形作られます。
f:id:Nekodigi:20210512212331p:plain

ダウンロード

Get it on Google Play

【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 the Tape LED (WS2818).
Also, the piano is long horizontally, it is displayed using two windows.

Download

Note* You need to change some variables depending on your device.
github.com

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

Abstract

f:id:Nekodigi:20210505105231g:plain
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 connecting around the sides of Marching Square.
I recommend you to watch this video to learn Marching Square.
www.youtube.com

Download

Iadded it to the Marching Square repository with the name Polygon_from_Raster_with_Marching_Square.
github.com

【Unity】I made the first smartphone game. (Open Source Block Breaker)

Abstract

www.youtube.com
I've ever made some video games, but I've never made for a smartphone.
I want more people to experience my works so I tried to make the first smartphone game.
This game available on Google Play and you can also download source code from GitHub.

How it works

Spawn ball when tapping the screen and the bar follows tapped point.
A block will break when the ball collides, but a hard block won't break with one collision. Also, there are 2 unique blocks, spawn block and star block.
A spawn block spawn ball when breaks. A star block makes the ball powerful and that ball breaks block instantly.
In this project, I made most UI and sounds, to publish source code.
After making the game, I published it with Google Play Console. The review took about 5 days.

Source code

github.com

【Pytorch】Create Real-Time Image Classifier!

Abstract

www.youtube.com
I've tried some PyTorch examples like CIFAR-10, but those examples are not real-time. For this reason, I created a real-time PyTorch image classifier. In this project, you can create custom datasets and test them in real-time with your webcam.

How it works

You can create an AI following steps.
1. Create datasets.
Take pictures with OpenCV and store them.
2. Create a neural network.
3. Classify images with it.

1.Create datasets

Take pictures with OpenCV and store them for each class.
Then get file paths and create a dataset that contains images and labels.

2.Create a neural network

Create a simple convolutional network that outputs class id.
Then, set up the optimizer and train the network.

3. Classify images with it.

Input camera image into the trained network and predict class name.

Source code and How to use it

1. Run this notebook with Jupyter Notebook.

*This project requires some libraries such as PyTorch.
gist.github.com

【Declare!】Time management web application with goals.【HTML/CSS/JS x PHP/MySQL】

Abstract

www.youtube.com
I've used various timers, but I have never seen a timer that can set goals, so I made that one. You can set a goal at the start of the timer and you can review the goals after it ends.

How it works

I developed this project following steps.
1. Design website.
Design a form and appearance of website.
2. Manage data with a server.
2.1 Send client data with JavaScript and send server data with PHP.
The client program sends get server data request when website loaded and server side PHP program response html code.
Also the client program send form data when button is clicked.
3 Implement timer function.
Client program gets current time and update text each 1 second with setInterval command.
In addition, the program replace a content with review form when time is over.

Source code and how to use it

1. Run these source codes with XAMPP.

Run those programs with XAMPP etc.
Make sure to run SQL.txt with the console.
github.com

2.Create MySQL database.

Run SQL written in SQL.txt

3. Open the page with your browser.

That's all!

【Raspberry Pi】Pi Camera image transport to PC using socket.

Abstract

f:id:Nekodigi:20210218162918p:plain
This photo was taken with a Pi camera

I wanted to get the data with the Raspberry Pi Camera and process it with the AI on my desktop PC so I made a camera images transmission system using socket communication.

How it works

I transmitted the Pi camera image following steps.
1. Take a picture with the Pi camera.
2. Send the image.
3. Receive and display the image.

1.Take a picture with the Pi camera.

Take a picture and store it in memory as binary data.
4. Advanced Recipes — Picamera 1.12 documentation

2.Transmit the image.

Send STORE command to server PC.
Then the binary data is sent 1024 bytes at a time.
Tutorial 30: Transfer & Backup a File using Socket File Transfer - The Zan Show

3. Receive and display the image.

Server PC receives the STORE command and starts to receive the binary data.
Then store it as an image.

Source code and How to use it

1. Connect your Pi camera and run this source code on your Raspberry Pi.

This code is client-side.
*Make sure to set server PC address.

2. Run this notebook with Jupyter Notebook on your PC.

This code is server-side.
*Make sure to set this (server) PC address

【Arduino】Custom MIIDI Player

Abstract

www.youtube.com
Selects any midi file. Then, extract highest tone and generate data with the processing program. Finally, save it as DATA.TXT in SD card and insert it to Arduino.

How it works

Get all midi data with Java standard library. However it's difficult to play for Arduino so extract highest tone and calculate duration(convert to ms) then output as text.
The program calculate for each tracks so I will choose one of them. Then copy it and write to SD card as DATA.TXT.
Insert the card to Arduino. Arduino plays it according to written tone and duration.

Source code

github.com

【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, get acceleration and angular velocity with this library.
github.com
Then add (angular velocity * delta time) to the rotation.
 \begin{array}{l}
\mathsf{rot\ is\ angular\ velocity}\\
\mathsf{dt\ is\ delta\ time}\\
roll\ -=\ rot_{x} *dt\\
pitch\ -=\ rot_{y} *dt
\end{array}
Calculate rotation from acceleration with below formula to calibrate.
  \begin{array}{l}
\mathsf{acc\ is\ acceleration}\\
troll=\mathrm{atan2}( acc_{y} ,acc_{z})\\
temp=\sqrt{acc^{2}_{z} +acc^{2}_{y}}\\
tpitch=\mathrm{atan2}( acc_{x} ,temp)
\end{array}
Blend them like this.
※I used pointer to make function of this process.
 \begin{array}{l}
\mathsf{fac\ is\ factor}\\
roll=( 1-fac) *roll+fac*troll
\end{array}
Finally serial print them.

Processing

Use readStringUntil and convert to number. Then, just visualize it.

Source code

gist.github.com