Moyo: いくつも円を重ねる

前回、CustomPaintでいろいろ描いていくプロジェクトを作りました。

今回はたくさんの円を重ねる模様を書きました。

コードは以下のような感じです。

class _MyPainter extends CustomPainter {
  @override
  bool shouldRepaint(_MyPainter oldDelegate) {
    return false;
  }

  @override
  void paint(Canvas canvas, Size size) {
    const double radius = 100;

    final Paint fill = Paint()
      ..color = Colors.black.withAlpha(20)
      ..style = PaintingStyle.fill;
    final Paint stroke = Paint()
      ..color = Colors.black.withAlpha(40)
      ..style = PaintingStyle.stroke
      ..strokeWidth = 1;

    for (int i = 0; i < 360; i += 15) {
      final double rotation = radians(i.toDouble());
      final double x = radius * cos(rotation);
      final double y = radius * sin(rotation);

      canvas.drawCircle(Offset(x, y), radius * 0.7, fill);
      canvas.drawCircle(Offset(x, y), radius * 0.7, stroke);
    }
  }
}

cos・sinを使ってx・yをradiusの大きさの円上を移動させていき、各座標でradiusより少し小さい円を描いています。
cos・sinはdart:math、radiansはvector_mathパッケージで提供されています。

模様の描き方は以下の本がとても参考になりました。

きれいな模様の描き方―うずまき、万華鏡模様からスピログラフまで 定規とコンパスで、みるみる描ける!

今回書いたコード全体は以下のコミットをご参照ください。