Chapter 08

Ryo Suzuki
2021.10.31に更新

# 4. 図形を描く（発展）

この章では、ここまでの内容の振り返りとして、発展的な 2D グラフィックスを描きます。

## 4.1 縞模様

``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
for (auto i : step(10))
{
Rect{ 0, (i * 60), 800, 30 }.draw(ColorF{ 0.3, 0.9, 0.6 });
}
}
}
``````

## 4.2 市松模様

``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
for (auto x : step(8))
{
for (auto y : step(6))
{
if ((x + y) % 2 == 0)
{
Rect{ (x * 100), (y * 100), 100 }
.draw(ColorF{ 0.3, 0.9, 0.6 });
}
}
}
}
}
``````

## 4.3 水玉模様

``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
for (auto x : step(9))
{
for (auto y : step(7))
{
Circle{ x * 100, y * 100, 20 }
.draw(ColorF{ 0.3, 0.6, 0.9 });
}
}
}
}
``````

## 4.4 虹色の円

https://youtu.be/7BopB31oTpo
``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
const double t = Scene::Time();

for (auto i : step(12))
{
const double angle = (i * 30_deg) + (t * 30_deg);

const Vec2 pos = OffsetCircular{ Scene::Center(), 160, angle };

Circle{ pos, 20 }.draw(HSV{ (i * 30) });
}
}
}
``````

## 4.5 ローディング中の円

https://youtu.be/FW7YmUSTfkU
``````# include <Siv3D.hpp>

void Main()
{
while (System::Update())
{
const double t = Scene::Time();

Circle{ Scene::Center(), 100 }
.drawArc((t * 90_deg), 320_deg, 10, 10);
}
}
``````

## 4.6 複数の円弧

https://youtu.be/6nCzyTGCYjw
``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

const Vec2 center = Scene::Center();

while (System::Update())
{
const double t = Scene::Time();

Circle{ center, 120 }
.drawArc((t * 140_deg), 240_deg, 60, 0, ColorF{ 0.4 });

Circle{ center, 180 }
.drawArc((t * 90_deg), 160_deg, 60, 0, ColorF{ 0.6 });

Circle{ center, 240 }
.drawArc((t * 50_deg), 120_deg, 60, 0, ColorF{ 0.8 });
}
}
``````

## 4.7 太陽

https://youtu.be/qEvQq_8WOHM
``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

const Vec2 center = Scene::Center();

const ColorF sunColor{ 0.9, 0.6, 0.3 };

while (System::Update())
{
const double s = (Periodic::Triangle0_1(0.5s) * 20);

Circle{ center, 120 }.draw(sunColor);

for (auto i : step(8))
{
const double angle = (i * 45_deg);

const Vec2 pos = OffsetCircular{ center, 160, angle };

Triangle{ pos, (40 + s), angle }.draw(sunColor);
}
}
}
``````

## 4.8 注目されるマウスカーソル

https://youtu.be/OUpz2bJC9jM
``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
const Vec2 center = Cursor::Pos();

for (auto i : step(8))
{
const double angle = (i * 45_deg);

const Vec2 from = OffsetCircular{ center, 80, angle };

const Vec2 to = OffsetCircular{ center, 160, angle };

Line{ from, to }
.draw(10, ColorF{ 1.0 }, ColorF{ 0.25 });
}
}
}
``````

## 4.9 幕が閉じる

https://youtu.be/Q6RCY0udrmw
``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
const double t = Scene::Time();

for (auto i : step(6))
{
const double width = Max(t - i, 0.0) * 100.0;

RectF{ 0, (i * 100), width, 100 }.draw(ColorF{ 0.8 - i * 0.1 });
}
}
}
``````

## 4.10 半透明

``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(Palette::White);

while (System::Update())
{
for (auto i : step(6))
{
Rect{ Arg::center = Scene::Center(), 60, 400 }
.rotated(i * 30_deg)
.draw(HSV{ (i * 60), 0.3 });
}
}
}
``````

## 4.11 メニュー画面

``````# include <Siv3D.hpp>

void Main()
{
Scene::SetBackground(ColorF{ 0.9, 0.95, 1.0 });

while (System::Update())
{
Rect{ 450, 0, 100, 600 }
.shearedX(150).draw(HSV{ 40, 0.5, 1.0 });

Rect{ 550, 0, 400, 600 }
.shearedX(150).draw(HSV{ 40, 0.8, 1.0 });

for (auto i : step(5))
{
const RoundRect rr{ 50, (60 + i * 100), 350, 80, 40 };
rr.drawShadow(Vec2{ 4, 4 }, 20, 0)
.draw();

Circle{ rr.rect.pos.movedBy(rr.r, rr.r), rr.r }
.stretched(-5)
.draw(HSV{ 40, 0.5, 1.0 });
}
}
}
``````