回る!マケドニア背景!

おめでたい!

回るマケドニア背景にSiv3Dクンが中央に表示されている。
こういうやつ作ります
2017年が終わり2018年が始まります。今回は新年のお祝いとしてTwitter等でたまに見かける赤と黄色が放射状に広がるアレ、通称「マケドニアコラ」をSiv3Dの極座標機能を使って作ります。

環境

Siv3DのバージョンはAugust 2016 v2版を使います。

コード全文

# include <Siv3D.hpp>

void Main()
{
    Window::Resize(1280, 960);

    const Texture texture(L"Example/Siv3D-kun.png");

    const Color Red = Color(255, 0, 51);
    const Color Yellow = Color(255, 255, 51);

    Stopwatch sw(true);
    while (System::Update())
    {
#ifdef _DEBUG 
        Point point = Mouse::Pos();
#else
        Point point = Window::Center();
#endif

        for (int i = 0; i < 24; ++i)
        {
            const Color color =  i % 2 == 0 ? Red : Yellow;

            const double radian = Radians(i * 15 + sw.ms() / 25);

            Triangle(point,
                point + Circular(2000, radian),
                point + Circular(2000, radian + Radians(15))).draw(color);
        }
        texture.drawAt(point);
    }
}

解説

Stopwatch型を宣言

Stopwatch sw(true);

Stopwatch型を宣言と同時にカウントスタートしています。詳細は下のリンクよりどうぞ。 経過時間の測定 · Siv3D/Reference-JP Wiki · GitHub

Point型変数を用意&DebugかReleaseか

#ifdef _DEBUG 
        Point point = Mouse::Pos();
#else
        Point point = Window::Center();
#endif

DebugのときはMouse::Pos();、そうじゃない時つまりRelease時にはWindow::Center();が実行されます。 ぶっちゃけるともともとDebugのMouse::Pos();だけでしたが上のgif作成用にWindow::Center();を書き足しました。

三項演算子

 const Color color =  i % 2 == 0 ? Red : Yellow;

これは三項演算子というやつです。(条件式)? (trueの時の処理):(falseのときの処理)と書きます。
iが偶数なら赤、奇数なら黄となります。

ラジアン

const double radian = Radians(i * 15 + sw.ms() / 25);

Radians(度数法での角度)で弧度法の数値が帰ってきます。プログラム中ではこの弧度法の数値を使います。for文添字のiとStopwatchを使っているのでradianの中身は刻々と変化します。

極座標

Triangle(point,
                point + Circular(2000, radian),
                point + Circular(2000, radian + Radians(15))).draw(color);

今回のキモですね。関数自体は三角形を作るものです。詳しくはこちらの公式ページをご覧ください。 図形を描く · Siv3D/Reference-JP Wiki · GitHub

Triangle()の引数の中身について。

pointの中身は画面中央だったりマウスの位置だったり先に指定しています。
point + Circular(2000, radian)はpointの座標から長さ2000、12時の位置を0として角度radianだけ時計回りに回した座標を示します。 長さ2000はマウスを画面端に持っていっても大丈夫なように指定した長さです。角度は弧度法で指定しましょう。言葉だけでは難しいので解説用の画像を用意しました。

f:id:movementi:20171230154338j:plain
座標の解説

あとは三項演算子で指定した色(赤黄が交互に来る)で三角形を書き並べ、その上に画像を表示して終わりですね。

さいごにごあいさつ

2018年一発目なのでおめでたい見た目の記事にしました皆さんいかがでしたでしょうか。 短いコードですがgithubにMITライセンスで上げて居るので良かったらどうぞ。

GitHub - akirakoizumi/SpinMakedonia: マケドニア背景が回ります。