画像のサンプル

1. スケッチ

コード

# include <Siv3D.hpp>

void Main()
{
	// キャンバスのサイズ
	constexpr Size CanvasSize{ 600, 600 };

	// ペンの太さ
	constexpr int32 PenThickness = 8;

	// ペンの色
	constexpr Color PenColor = Palette::Orange;

	// 書き込み用の画像データを用意する
	Image image{ CanvasSize, Palette::White };

	// 表示用のテクスチャ（内容を更新するので DynamicTexture）
	DynamicTexture texture{ image };

	while (System::Update())
	{
		if (MouseL.pressed())
		{
			// 書き込む線の始点は直前のフレームのマウスカーソル座標
			// （初回はタッチ操作時の座標のジャンプを防ぐため、現在のマウスカーソル座標にする）
			const Point from = (MouseL.down() ? Cursor::Pos() : Cursor::PreviousPos());

			// 書き込む線の終点は現在のマウスカーソル座標
			const Point to = Cursor::Pos();

			// image に線を書き込む
			Line{ from, to }.overwrite(image, PenThickness, PenColor);

			// 書き込み終わった image でテクスチャを更新
			texture.fill(image);
		}

		// 描いたものを消去するボタンが押されたら
		if (SimpleGUI::Button(U"Clear", Vec2{ 640, 40 }, 120))
		{
			// 画像を白で塗りつぶす
			image.fill(Palette::White);

			// 塗りつぶし終わった image でテクスチャを更新する
			texture.fill(image);
		}

		// テクスチャを表示
		texture.draw();
	}
}

2. 万華鏡スケッチ

コード

# include <Siv3D.hpp>

void Main()
{
	// キャンバスのサイズ
	constexpr Size CanvasSize{ 600, 600 };

	// 分割数
	constexpr int32 N = 12;

	// 背景色
	constexpr Color BackgroundColor{ 20, 40, 60 };

	// ウィンドウをキャンバスのサイズにする
	Window::Resize(CanvasSize);

	// 書き込み用の画像
	Image image{ CanvasSize, BackgroundColor };

	// 画像を表示するための動的テクスチャ
	DynamicTexture texture{ image };

	while (System::Update())
	{
		if (MouseL.pressed())
		{
			// 画面の中心が (0, 0) になるようにマウスカーソルの座標を移動させる
			const Vec2 begin = ((MouseL.down() ? Cursor::PosF() : Cursor::PreviousPosF()) - CanvasSize / 2);
			const Vec2 end = (Cursor::PosF() - CanvasSize / 2);

			// 時間に応じて色を変化させる
			const ColorF color = HSV{ (Scene::Time() * 60.0), 0.5, 1.0 };

			for (int32 i = 0; i < N; ++i)
			{
				// 円座標に変換する
				std::array<Circular, 2> cs = { begin, end };

				for (auto& c : cs)
				{
					// 角度をずらす
					if (IsEven(i))
					{
						c.theta = (-c.theta - 2_pi / N * (i - 1));
					}
					else
					{
						c.theta = (c.theta + 2_pi / N * i);
					}
				}

				// ずらした位置をもとに、画像に線を書き込む
				Line{ cs[0], cs[1] }.moveBy(CanvasSize / 2)
					.overwrite(image, 2, color);
			}

			// 書き込んだ画像でテクスチャを更新する
			texture.fillIfNotBusy(image);
		}

		if (MouseR.down()) // 右クリックでリセットする
		{
			// 画像を塗りつぶす
			image.fill(BackgroundColor);

			// 塗りつぶした画像でテクスチャを更新
			texture.fill(image);
		}

		// テクスチャを描く
		texture.draw();
	}
}

3. ペイント

コード

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// キャンバスのサイズ
	constexpr Size CanvasSize{ 600, 600 };

	// ペンの太さ
	double penThickness = 8;

	// ペンの色
	HSV penColor = Palette::Orange;

	// 書き込み用の画像データを用意する
	Image image{ CanvasSize, Palette::White };

	// 表示用のテクスチャ（内容を更新するので DynamicTexture）
	DynamicTexture texture{ image };

	const Array<String> modes = { U"Draw", U"Fill", U"Pick" };

	size_t modeIndex = 0;

	while (System::Update())
	{
		if (modeIndex == 0) // ペン
		{
			if (MouseL.pressed())
			{
				// 書き込む線の始点は直前のフレームのマウスカーソル座標
				// （初回はタッチ操作時の座標のジャンプを防ぐため、現在のマウスカーソル座標にする）
				const Point from = (MouseL.down() ? Cursor::Pos() : Cursor::PreviousPos());

				// 書き込む線の終点は現在のマウスカーソル座標
				const Point to = Cursor::Pos();

				// image に線を書き込む
				Line{ from, to }.overwrite(image, static_cast<int32>(penThickness), penColor, Antialiased::No);

				// 書き込み終わった image でテクスチャを更新
				texture.fill(image);
			}
			else if (MouseR.pressed())
			{
				const Point from = (MouseL.down() ? Cursor::Pos() : Cursor::PreviousPos());
				const Point to = Cursor::Pos();
				Line{ from, to }.overwrite(image, static_cast<int32>(penThickness), Palette::White, Antialiased::No);
				texture.fill(image);
			}
		}
		else if (modeIndex == 1) // 塗りつぶし
		{
			if (MouseL.down())
			{
				image.floodFill(Cursor::Pos(), penColor);
				texture.fill(image);
			}
			else if (MouseR.down())
			{
				image.floodFill(Cursor::Pos(), Palette::White);
				texture.fill(image);
			}
		}
		else // ピッカー
		{
			if (MouseL.down())
			{
				const Point cursorPos = Cursor::Pos();

				if (InRange(cursorPos.x, 0, (image.width() - 1))
					&& InRange(cursorPos.y, 0, (image.height() - 1)))
				{
					penColor = image[cursorPos];
				}
			}
		}

		if (SimpleGUI::Button(U"Save", Vec2{ 620, 40 }, 160))
		{
			image.saveWithDialog();
		}

		// 描いたものを消去するボタンが押されたら
		if (SimpleGUI::Button(U"Clear", Vec2{ 620, 100 }, 160))
		{
			// 画像を白で塗りつぶす
			image.fill(Palette::White);

			// 塗りつぶし終わった image でテクスチャを更新する
			texture.fill(image);
		}

		// 色の選択
		SimpleGUI::ColorPicker(penColor, Vec2{ 620, 160 });

		// ペンの太さ
		SimpleGUI::Slider(penThickness, 1.0, 30.0, Vec2{ 620, 300 }, 160);

		// モードの選択
		SimpleGUI::RadioButtons(modeIndex, modes, Vec2{ 620, 360 });

		// テクスチャを表示
		texture.draw();
	}
}

4. Image to Polygon

コード

# include <Siv3D.hpp>

void Main()
{
	// 使用する画像
	const Image image{ U"example/siv3d-kun.png" };

	// テクスチャの表示位置
	constexpr Vec2 BasePos{ 40, 80 };

	// テクスチャ
	const Texture texture{ image };

	// アルファ値 1 以上の領域を Polygon 化する
	const Polygon polygon = image.alphaToPolygon(1, AllowHoles::No);

	// Polygon 単純化の許容距離（ピクセル）
	double maxDistance = 4.0;

	// 単純化した Polygon
	Polygon simplifiedPolygon = polygon.simplified(maxDistance);

	while (System::Update())
	{
		// 単純化した Polygon の三角形数を表示する
		ClearPrint();
		Print << U"{} triangles"_fmt(simplifiedPolygon.num_triangles());

		texture.draw(BasePos);

		// 単純化した Polygon をテクスチャ上に表示する
		simplifiedPolygon.movedBy(BasePos)
			.draw(ColorF{ 1.0, 1.0, 0.0, 0.2 })
			.drawWireframe(2, Palette::Yellow);

		// 単純化した Polygon をテクスチャの横に表示する
		simplifiedPolygon.movedBy(BasePos.movedBy(320, 0))
			.draw(ColorF{ 0.5 });

		// Polygon 単純化の許容距離を設定するスライダー
		if (SimpleGUI::Slider(U"{:.1f}"_fmt(maxDistance), maxDistance, 0, 50, Vec2{ 400, 40 }, 60, 240))
		{
			// スライダーに変更があれば、単純化した Polygon を新しい許容距離で再作成
			simplifiedPolygon = polygon.simplified(maxDistance);
		}
	}
}

5. JPEG Glitch

コード

# include <Siv3D.hpp>

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// 画像
	const Image image{ U"example/windmill.png" };

	// 表示用の動的テクスチャ
	DynamicTexture texture{ image };

	// JPEG のバイナリデータ
	const Blob originalBlob = image.encodeJPEG();

	// 改変するデータの個数
	const size_t noiseCount = (image.num_pixels() / 4000);

	while (System::Update())
	{
		if (SimpleGUI::Button(U"Glitch", Vec2{ 40, 40 }))
		{
			// Array を作成
			Blob modifiedBlob = originalBlob;

			for (size_t i = 0; i < noiseCount; ++i)
			{
				// ランダムな位置の 1 バイトについて、ランダムな値に書き換える。
				// ヘッダ部分（先頭）は改変しない。
				const size_t index = Random<size_t>(630, (modifiedBlob.size() - 1));

				modifiedBlob[index] = Byte{ RandomUint8() };
			}

			// JPEG データとして読み込んで画像を作成、動的テクスチャに転送
			texture.fill(Image{ MemoryReader{ modifiedBlob }, ImageFormat::JPEG });
		}

		texture.drawAt(Scene::Center());
	}
}

6. 模写アプリ

コード

# include <Siv3D.hpp>

// 2 つの画像の距離を計算する関数
double Diff(const Image& a, const Image& b)
{
	const Color* pA = a.data();
	const Color* pB = b.data();
	const Color* const pAEnd = (pA + a.num_pixels());
	double d = 0.0;

	// すべてのピクセルに対して
	while (pA != pAEnd)
	{
		d += (AbsDiff(pA->r, pB->r) + AbsDiff(pA->g, pB->g) + AbsDiff(pA->b, pB->b));
		++pA;
		++pB;
	}

	return d;
}

void Main()
{
	Scene::SetBackground(ColorF{ 0.6, 0.8, 0.7 });

	// 目標とする画像をファイルダイアログで選択、シーンのサイズにフィットするようリサイズ
	const Image target = Dialog::OpenImage().fit(Scene::Size());

	// 現在の画像
	Image image{ target.size(), Palette::White };

	// 直前の画像
	Image old = image;

	// 現在の画像を表示するための動的テクスチャ
	DynamicTexture texture{ image };

	// 目標との距離
	double d1 = Diff(target, image);

	while (System::Update())
	{
		for (int32 i = 0; i < 100; ++i)
		{
			// ランダムな座標
			const Point pos = RandomPoint(Rect{ image.size() });

			// ランダムな色
			const ColorF color{ Random(), Random(), Random(), Random() };

			// ランダムな半径
			const int32 size = Random(1, 10);

			// 円を現在の画像に書き込む
			Circle{ pos, size }.paint(image, color);

			// 目標との距離を計算
			const double d2 = Diff(target, image);

			if (d2 < d1) // 目標に近づいていたら採用
			{
				d1 = d2;
				old = image;
			}
			else // 近づいていなかったら元に戻す
			{
				image = old;
			}
		}

		// 動的テクスチャを更新する
		texture.fill(image);

		// テクスチャを画面の中心に描画する
		texture.drawAt(Scene::Center());

		// 保存ボタン
		if (SimpleGUI::Button(U"Save", Vec2{ 660, 550 }))
		{
			// 現在の画像をファイルダイアログ経由で保存する
			image.saveWithDialog();
		}
	}
}

7. GrabCut による背景分離と Inpaint による修復

コード

# include <Siv3D.hpp>

void Main()
{
	Window::Resize(1280, 720);
	Scene::SetBackground(ColorF{ 0.8, 1.0, 0.9 });

	const Image image = Dialog::OpenImage().fit(Size{ 480, 320 });
	const Texture texture{ image };

	GrabCut grabcut{ image };
	Image mask{ image.size(), Color{0, 0} };
	Image background{ image.size(), Palette::Black };
	Image foreground{ image.size(), Palette::Black };
	Image inpaint;
	DynamicTexture maskTexture{ mask };
	Grid<GrabCutClass> result;
	DynamicTexture classTexture;
	DynamicTexture backgroundTexture{ background };
	DynamicTexture foregroundTexture{ foreground };
	DynamicTexture inpaintTexture{ foreground };

	constexpr Color BackgroundColor{ 0, 0, 255 };
	constexpr Color ForegroundColor{ 250, 100, 50 };

	while (System::Update())
	{
		if ((not classTexture) || MouseL.up() || MouseR.up())
		{
			grabcut.update(mask, ForegroundColor, BackgroundColor);
			grabcut.getResult(result);
			classTexture.fill(Image(result, [](GrabCutClass c) { return Color(80 * FromEnum(c)); }));

			for (auto p : step(image.size()))
			{
				const bool isBackground = (GrabCutClass::PossibleBackground <= result[p]);

				if (isBackground)
				{
					background[p] = image[p];
					foreground[p] = Color{ 0,0 };
				}
				else
				{
					foreground[p] = image[p];
					background[p] = Color{ 0,0 };
				}
			}

			ImageProcessing::Inpaint(background, background, Color{ 0, 0 }, inpaint);
			inpaint.gaussianBlur(3);

			foregroundTexture.fill(foreground);
			backgroundTexture.fill(background);
			inpaintTexture.fill(inpaint);
		}

		if (MouseL.pressed())
		{
			const Point from = MouseL.down() ? Cursor::Pos() : Cursor::PreviousPos();
			const Point to = Cursor::Pos();
			Line{ from, to }.overwrite(mask, 4, ForegroundColor, Antialiased::No);
			maskTexture.fill(mask);
		}
		else if (MouseR.pressed())
		{
			const Point from = MouseR.down() ? Cursor::Pos() : Cursor::PreviousPos();
			const Point to = Cursor::Pos();
			Line{ from, to }.overwrite(mask, 4, BackgroundColor, Antialiased::No);
			maskTexture.fill(mask);
		}

		texture.draw();
		maskTexture.draw();
		classTexture.draw(600, 0);

		backgroundTexture.scaled(0.7).regionAt(200, 520).draw(ColorF{ 0 });
		backgroundTexture.scaled(0.7).drawAt(200, 520);

		foregroundTexture.scaled(0.7).regionAt(1080, 520).draw(ColorF{ 0 });
		foregroundTexture.scaled(0.7).drawAt(1080, 520);

		inpaintTexture.drawAt(640, 520);
		{
			const Transformer2D transformer{ Mat3x2::Scale(1.1, Vec2{640, 520}.movedBy(0, image.height() / 2)).translated((Scene::Center() - Cursor::Pos()) * 0.04) };
			foregroundTexture.drawAt(640, 520);
		}
	}
}

8. ドロップされたイラストから顔を検出

コード

# include <Siv3D.hpp>

void Main()
{
	Texture texture;

	double scale = 1.0;

	// 検出器。正面を向いた顔の学習データを使用して分類
	const CascadeClassifier animeFaceDetector{ U"example/objdetect/haarcascade/face_anime.xml" };

	Array<Rect> detectedFaces;

	while (System::Update())
	{
		// ファイルがドロップされた
		if (DragDrop::HasNewFilePaths())
		{
			// ファイルを画像として読み込めた
			if (const Image image{ DragDrop::GetDroppedFilePaths().front().path })
			{
				// イラスト内の顔を検出する
				detectedFaces = animeFaceDetector.detectObjects(image);

				// 画面のサイズに合うように画像を拡大縮小
				texture = Texture{ image.fitted(Scene::Size()) };

				// 画像の拡大縮小率
				scale = (static_cast<double>(texture.width()) / image.width());
			}
		}

		if (texture)
		{
			texture.draw(0, 0);

			// 顔の領域の座標を表示に合わせる
			const Transformer2D transformer{ Mat3x2::Scale(scale) };

			for (const auto& detectedFace : detectedFaces)
			{
				detectedFace.drawFrame((4 / scale), ColorF{ 1.0, 0.0, 0.0, Periodic::Sine0_1(1.5s) });
			}
		}
	}
}

9. マンデルブロ集合

コード

# include <Siv3D.hpp>

int32 Mandelbrot(double x, double y)
{
	double a = 0.0, b = 0.0;

	for (int32 n = 0; n < 360; ++n)
	{
		const double t = (a * a - b * b + x);
		const double u = (2.0 * a * b + y);

		if (4.0 < (t * t + u * u))
		{
			return n;
		}

		a = t;
		b = u;
	}

	return 0;
}

void Main()
{
	constexpr Size SceneSize{ 640, 480 };
	Window::Resize(SceneSize);

	Vec2 center(0, 0);
	double scale = -4.0;

	// 結果を保存する画像
	Image image{ SceneSize, Palette::Black };

	// 描画用の動的テクスチャ
	DynamicTexture texture(image);

	while (System::Update())
	{
		const double wheel = Mouse::Wheel();
		const bool clicked = (MouseL | MouseR).down();

		// 最初のフレームか、操作があったときだけ更新する
		if (wheel || clicked || (Scene::FrameCount() == 1))
		{
			scale -= wheel;

			const double s = Pow(1.25, scale);
			const double d = ((1.0 / s) / SceneSize.x);

			if (clicked)
			{
				center += (Cursor::PosF() - SceneSize / 2) * d;
			}

			const double xb = (center.x - d * (SceneSize.x * 0.5));
			const double yb = (center.y - d * (SceneSize.y * 0.5));

			for (int32 y = 0; y < SceneSize.y; ++y)
			{
				const double yPos = yb + (d * y);

				for (int32 x = 0; x < SceneSize.x; ++x)
				{
					const double xPos = xb + (d * x);

					if (const int32 m = Mandelbrot(xPos, yPos))
					{
						image[y][x] = HSV{ (240 - m), 0.8, 1.0 };
					}
					else
					{
						image[y][x] = Palette::Black;
					}
				}
			}

			// 動的テクスチャの中身を image で更新する
			texture.fill(image);
		}

		// テクスチャを描画する
		texture.draw();
	}
}

10. 万華鏡ランダムウォーク

Siv3D-Sample | 万華鏡ランダムウォーク