Play Siv3D!

ゲームとメディアアートのための C++ ライブラリ「Siv3D」

リファレンス | 図形を描く

リファレンス | 図形を描く

点を描く
Point は整数の座標、Vec2 は浮動小数点数の座標を設定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Point(50, 50).draw();

		Vec2(100, 100.5).draw();

		for (int i = 0; i < 10; ++i)
		{
			Point(i * 20, 200).draw(Color(i * 20, 255, i * 20));
		}

		for (int i = 0; i < 12; ++i)
		{
			Vec2(Circular(40, Radians(i * 30)) + Window::Center()).draw(HSV(i * 30));
		}
	}
}

線分を描く
LineInt は整数の座標、Line は浮動小数点数の座標を設定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		LineInt(100, 100, 400, 100).draw(10);

		Line(30.5, 400, 500.5, 200).draw(Palette::Green);

		LineInt(50, 50, Mouse::Pos()).draw(4, Palette::Yellow);

		const double theta = System::FrameCount() * 0.01;

		Line(Circular(200, theta), Circular(200, theta + Pi)).movedBy(Window::Center()).draw(2);
	}
}

長方形を描く
Rect は整数の座標と大きさ、RectF は浮動小数点数の座標と大きさを設定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Rect(50, 50, 100, 100).draw();

		RectF(300, 200, 100, 2.5).draw(Palette::Skyblue);

		Rect(Window::Center() - Point(5, 5), Window::Size() / 2).draw(Palette::Green);

		RectF(50, 50).setCenter(Mouse::Pos()).draw(Palette::Orange);
	}
}

円を描く
X 座標、Y 座標、半径の順に設定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Circle(100, 100, 20).draw();

		Circle(500, 100, 40).draw(Color(100, 200, 0));

		Circle(300, 300, 100).draw(Palette::Yellow);
	}
}

楕円を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Ellipse(100, 100, 20).draw();

		Ellipse(500, 100, 20, 40).draw(Color(100, 200, 0));

		Ellipse(300, 300, 200, 100).draw(Palette::Yellow);
	}
}

三角形を描く
頂点は右回りに指定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Triangle(100, 100, 50.0).draw(Palette::Red);

		Triangle(300, 100, 50.0, 0.3).draw(Palette::Green);

		Triangle(500, 100, 80.0, 0.6).draw(Palette::Blue);

		Triangle(200, 300, 250, 400, 50, 350).draw(Palette::Yellow);

		Triangle({ 400, 300 }, { 500, 400 }, { 400, 400 }).draw(Palette::Pink);
	}
}

四角形を描く
頂点は右回りに指定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Quad(200, 100, 400, 100, 500, 300, 100, 300).draw();

		Quad({ 200, 350 }, { 400, 350 }, { 600, 400 }, { 400, 400 }).draw(Palette::Green);
	}
}

多角形を描く
頂点は右回りに指定します。

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon
	{
		{ 50, 50 }, { 350, 50 }, { 350, 350 },
		{ 200, 350 }, { 200, 200 }, { 50, 200 }
	};

	while (System::Update())
	{
		polygon.draw();

		polygon.draw(200, 100, Palette::Yellow);
	}
}

穴の開いた多角形を描く
Polygon の 第 2 引数にて Array<Array<Vec2>> で穴の形状を定義します。
多角形の頂点は右回りに、穴の頂点は左回りに指定します。

# include <Siv3D.hpp>

void Main()
{
	const Triangle t1(Point(200, 200), 330);
	const Triangle t2(Point(200, 200), 140, Pi);
	const Polygon polygon({ t1.p0, t1.p1, t1.p2 }, { { t2.p2, t2.p1, t2.p0 } });

	while (System::Update())
	{
		polygon.draw();

		polygon.draw(200, 100, Palette::Skyblue);
	}
}

多角形の集合を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon p1
	{
		{ 50, 50 }, { 150, 50 }, { 150, 250 }, { 350, 250 }, { 350, 350 }, { 50, 350 }
	};

	const Polygon p2
	{
		{ 450, 50 }, { 550, 150 }, { 450, 250 }, { 350, 150 }
	};

	const MultiPolygon polygons({ p1, p2 });

	while (System::Update())
	{
		polygons.draw();
	}
}

連続した線分を描く

# include <Siv3D.hpp>

void Main()
{
	const LineString line
	{
		{ 50, 100 }, { 600, 100 },
		{ 50, 200 }, { 600, 200 },
		{ 50, 300 }, { 600, 300 },
		{ 50, 400 }
	};

	while (System::Update())
	{
		line.draw(5, Palette::Yellow);
	}
}

スプライン曲線を描く

# include <Siv3D.hpp>

void Main()
{
	const LineString line
	{
		{ 180, 150 }, { 450, 80 }, { 350, 230 },
		{ 450, 380 }, { 180, 310 }
	};

	while (System::Update())
	{
		line.drawCatmullRomSpline(10, Palette::Orange);
	}
}

閉じたスプライン曲線を描く

# include <Siv3D.hpp>

void Main()
{
	const LineString line
	{
		{ 180, 150 }, { 450, 80 }, { 350, 230 },
		{ 450, 380 }, { 180, 310 }
	};

	while (System::Update())
	{
		line.drawCatmullRomSpline(10, Palette::Orange, true);
	}
}

円の枠を描く
内側方向の厚み、外側方向の厚みを指定します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Circle(320, 240, 100).drawFrame(50, 10);
	}
}

扇形を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Circle(320, 240, 200).drawPie(-0.5, HalfPi + 0.2, Palette::Skyblue);
	}
}

アーチ型を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Circle(320, 240, 200).drawArc(-0.5, HalfPi + 0.2, 80, 0, Palette::Skyblue);
	}
}

長方形の枠を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Rect(200, 100, 300, 200).drawFrame(40, 10, Palette::Skyblue);
	}
}

楕円の枠を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Ellipse(320, 240, 250, 100).drawFrame(20, 10, Palette::Skyblue);
	}
}

三角形の枠を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Triangle(320, 240, 200).drawFrame(20, Palette::Skyblue);
	}
}

四角形の枠を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Quad({ 200, 50 }, { 400, 50 }, { 500, 400 }, { 100, 400 }).drawFrame(20, Palette::Skyblue);
	}
}

多角形の枠を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon
	{
		{ 50, 50 }, { 350, 50 }, { 350, 350 },
		{ 200, 350 }, { 200, 200 }, { 50, 200 }
	};

	while (System::Update())
	{
		polygon.drawFrame(20, Palette::Skyblue);
	}
}

多角形の構造を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon
	{
		{ 50, 50 }, { 350, 50 }, { 350, 350 },
		{ 200, 350 }, { 200, 200 }, { 50, 200 }
	};

	while (System::Update())
	{
		polygon.drawWireframe(2, Palette::Skyblue);
	}
}

多角形の一部を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon
	{
		{ 50, 50 }, { 350, 50 }, { 350, 350 },
		{ 200, 350 }, { 200, 200 }, { 50, 200 }
	};

	while (System::Update())
	{
		for (const auto& triangle : polygon.triangles())
		{
			triangle.drawFrame();

			if (triangle.mouseOver)
			{
				triangle.draw(Palette::Red);
			}
		}

		for (size_t i = 0; i < polygon.num_triangles; ++i)
		{
			polygon.triangle(i).draw(Color(255, 255, 0, 32));
		}
	}
}

平行四辺形を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Rect(100, 50, 300, 150).shearedX(80).draw();

		Rect(300, 220, 300, 200).shearedY(-50).draw(Palette::Skyblue);
	}
}

矢印を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Line(50, 200, 200, 250).drawArrow();

		Line(250, 350, 500, 100).drawArrow(5, { 20, 50 }, Palette::Yellow);
	}
}

矢印の枠を描く
Arrow() 関数は矢印型の Polygon を作成します。

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		Arrow({ 250, 350}, { 500, 100 }, 35, { 60, 80 }).drawFrame(10, Palette::Yellow);
	}
}

角丸長方形を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		RoundRect(Rect(200, 100, 300, 200), 30).draw(Palette::Skyblue);
	}
}

角丸長方形の枠を描く

# include <Siv3D.hpp>

void Main()
{
	while (System::Update())
	{
		RoundRect(Rect(200, 100, 300, 200), 30).drawFrame(20, 10, Palette::Skyblue);
	}
}

十字形を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon = Geometry2D::CreatePlus(200, 50, { 320, 240 });

	while (System::Update())
	{
		polygon.draw(Palette::Skyblue);
	}
}

正多角形を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon = Geometry2D::CreateNgon(6, 200, 0.0, { 320, 240 });

	while (System::Update())
	{
		polygon.draw(Palette::Skyblue);
	}
}

星形図形を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon = Geometry2D::CreateNStar(10, 200, 150, 0.0, { 320, 240 });

	while (System::Update())
	{
		polygon.draw(Palette::Skyblue);
	}
}

五光星を描く

# include <Siv3D.hpp>

void Main()
{
	const Polygon polygon = Geometry2D::CreateStar(200, 0.0, { 320, 240 });

	while (System::Update())
	{
		polygon.draw(Palette::Yellow);
	}
}

任意形状を描く
Sprite は頂点とインデックスを自由に設定できます。
3 つのインデックスの組で 1 つの三角形を構成していきます。

# include <Siv3D.hpp>

void Main()
{
	Sprite sprite(4, 6);
	
	sprite.vertices[0].setPosColor(320.0f, 100.0f, Palette::Yellow);
	sprite.vertices[1].setPosColor(400.0f, 300.0f, Palette::Orange);
	sprite.vertices[2].setPosColor(320.0f, 260.0f, Palette::Orange);
	sprite.vertices[3].setPosColor(240.0f, 300.0f, Palette::Orange);

	sprite.indices = { 0, 1, 2, 0, 2, 3 };

	while (System::Update())
	{
		sprite.draw();
	}
}

任意形状の一部を描く

# include <Siv3D.hpp>

void Main()
{
	Sprite sprite(4, 6);
	
	sprite.vertices[0].setPosColor(320.0f, 100.0f, Palette::Yellow);
	sprite.vertices[1].setPosColor(400.0f, 300.0f, Palette::Orange);
	sprite.vertices[2].setPosColor(320.0f, 260.0f, Palette::Orange);
	sprite.vertices[3].setPosColor(240.0f, 300.0f, Palette::Orange);

	sprite.indices = { 0, 1, 2, 0, 2, 3 };

	while (System::Update())
	{
		sprite.drawSubset(0, 3);
	}
}