パーティクルッピー

KumaMCN唯一？のガチ勢、ガチ本です。
[クラッピーチャレンジ Advent Calendar 2017](https://adventar.org/calendars/2073) 24日目の記事です！

# メリークリスマス（イブ）！楽しんでるかいパーリーピーポーｗ卍
遅くなってすみません。ガチ腹痛で倒れておりました…何食べたかなクラッピー

今回は、クラッピーでノリノリになれるインタラクティブなアート＆VJパーリーに持って来いなものを2分で作った件についてです。

[つくると3!の夜のVJで、みんなで光るクラッピーを持って踊ったのが楽しすぎて…](https://www.facebook.com/clappychal/posts/1891339994472231)
それからというものKumaMCNはクラッピーの光モノを量産し、流行らせました。（手だけ欲しい…）
<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">点灯試験 <a href="https://t.co/tThuS68a1T">pic.twitter.com/tThuS68a1T</a></p>&mdash; まこらぎ (@makoragi) <a href="https://twitter.com/makoragi/status/895686810424049664?ref_src=twsrc%5Etfw">2017年8月10日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

# 作り方
今回用いるのは、クラッピーチャレンジャーまこらぎさんが作った[クラッピーでスライド送り](http://makoragi.hatenablog.com/entry/2017/12/12/073000)（Digisparkが埋め込んであり、拍手するとEnterキーを送信できる）とSiv3Dを用いてパーティクルを表示します！

- Windows 10
- Visual Studio 2017
- Siv3D
- プロジェクター
- DJ
- クラッピーでスライド送り

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">クラッピーのパチパチと文字入力を連動した。USBポートに挿すだけで文字入力してくれるのはいいね。100円台のDigispark大活躍。<a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%A9%E3%83%83%E3%83%94%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#クラッピーチャレンジ</a> <a href="https://twitter.com/hashtag/%E3%83%91%E3%83%81%E3%83%91%E3%83%81%E3%83%88%E3%83%BC%E3%83%AB%E5%90%9B?src=hash&amp;ref_src=twsrc%5Etfw">#パチパチトール君</a> <a href="https://twitter.com/hashtag/KumaMCN?src=hash&amp;ref_src=twsrc%5Etfw">#KumaMCN</a> <a href="https://t.co/MiRJ9JJql1">pic.twitter.com/MiRJ9JJql1</a></p>&mdash; まこらぎ (@makoragi) <a href="https://twitter.com/makoragi/status/882637899421724672?ref_src=twsrc%5Etfw">2017年7月5日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

<blockquote class="twitter-tweet" data-lang="ja"><p lang="ja" dir="ltr">クラッピーへのDigispark固定方法を検討中 <a href="https://twitter.com/hashtag/%E3%82%AF%E3%83%A9%E3%83%83%E3%83%94%E3%83%BC%E3%83%81%E3%83%A3%E3%83%AC%E3%83%B3%E3%82%B8?src=hash&amp;ref_src=twsrc%5Etfw">#クラッピーチャレンジ</a> <a href="https://t.co/l2PIPnb2FM">pic.twitter.com/l2PIPnb2FM</a></p>&mdash; まこらぎ (@makoragi) <a href="https://twitter.com/makoragi/status/899968402000719872?ref_src=twsrc%5Etfw">2017年8月22日</a></blockquote>
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>

[Siv3D](http://play-siv3d.hateblo.jp)は、C++で簡単にゲームやメディアアートアプリが作れるライブラリです。
Kinectなどのセンサーにも対応しています。
[Kinectとスラックラインのコラボ](https://www.facebook.com/scbfukkopf/videos/1674667906160038)した際にも活用しました！

今回、参考にしたソースコードは[こちら](https://github.com/Siv3D/Reference-JP/wiki/パーティクル)。
ソースコードを次のように編集し、拍手のタイミングでEnterキーが送信され、パーティクルが大きくなるように可視化しました。

~~~
# include <Siv3D.hpp>

void Main()
{
	Graphics::SetBackground(Color(20, 40, 60));
	Graphics3D::SetLight(0, Light::None());

	const Texture textureGrass(L"Example/Grass.jpg", TextureDesc::For3D);

	Array<Particle> particles(400);

	// フルスクリーン可能な解像度一覧を取得
	const Array<Size> resolutions = Graphics::GetFullScreenSize();

	for (auto& particle : particles)
	{
		const Vec3 pos = RandomVec3({ -20, 20 }, { -0.2, 4 }, { -20, 20 });

		particle = Particle(pos, 0.2, ColorF(1.0, 0.6, 0.0));
	}

	const Texture texture(L"Example/Particle.png", TextureDesc::For3D);

	Graphics3D::SetBlendStateForward(BlendState::Additive);
	Graphics3D::SetDepthStateForward(DepthState::TestOnly);
	bool enterFlag = false;

	const Size targetSize(1280, 720);

	while (System::Update())
	{
		if (Input::KeyF.clicked)
		{
			// フルスクリーンモード
			if (!Window::SetFullscreen(true, targetSize))
			{
				System::Exit();
			}
		}

		if (Input::KeyW.clicked)
		{
			// ウィンドウモード
			if (!Window::SetFullscreen(false, targetSize))
			{
				System::Exit();
			}
		}
		Graphics3D::FreeCamera();

		if ((Input::KeyEnter).pressed) {
			enterFlag = true;
		}
		else {
			enterFlag = false;
		}

		for (auto& particle : particles)
		{
			particle.pos.y += 0.01f;

			if (4.0 < particle.pos.y)
			{
				particle.pos.y -= 4.2f;
			}
			
			const ColorF color = HSV(particle.pos.y * 100.0);

			const float s = 1.0f - (Abs(2.0f - particle.pos.y) / 2.0f);
			if(enterFlag){
				particle.scaling.x = particle.scaling.y = 1.0f * s;
			}
			else {
				particle.scaling.x = particle.scaling.y = 0.2f * s;
			}

			particle.color.w = s;
			particle.color = Vector4D<float>(color.b, color.g, color.r, color.a);

		}

		Plane(40).draw(textureGrass);

		Graphics3D::DrawParticlesForward(particles, texture);
	}
}
~~~

# 結果
[スライド送りクラッピーを接続して、実行すると…](https://www.facebook.com/satoshi.gachi.fujimoto/videos/vb.100000340690353/1641678579186816/)
![particlappy.gif](https://qiita-image-store.s3.amazonaws.com/0/63863/21718d3c-d5d1-544f-78ee-b4b2d51c0e68.gif)

インタラクションでもクラッピー、「パーティクルッピー」でした。

クラッピーでパーリーしたいやつらはKumaMCNについてこい！卍卍