How to draw overlapping circles

987

As bereal said:

The coordinates of the k-th center will be (rcos kx, rsin kx) where r is the radius, and x = 2*pi/n where n is the number of circles you need.

Here is the example how to do it:

import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: CustomPaint(
            foregroundPainter: CustomCirclesPainter(),
          ),
        ),
      ),
    );
  }
}

class CustomCirclesPainter extends CustomPainter {
  var myPaint = Paint()
    ..color = Colors.black
    ..style = PaintingStyle.stroke
    ..strokeWidth = 5.0;

  double radius = 80;

  @override
  void paint(Canvas canvas, Size size) {
    int n = 10;
    var range = List<int>.generate(n, (i) => i + 1);
    for (int i in range) {
      double x = 2 * pi / n;
      double dx = radius * cos(i * x);
      double dy = radius * sin(i * x);
      canvas.drawCircle(Offset(dx, dy), radius, myPaint);
    }
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return true;
  }
}

Share:
987
SuzieCodes
Author by

SuzieCodes

Updated on December 10, 2022

Comments

  • SuzieCodes
    SuzieCodes over 1 year

    I need to code these white intertwined circles (not the background):

    enter image description here

    I know how to draw one circle. What eludes me is the math.

    Note: Yes, trigonometry is high school stuff, I'm perfectly aware.

    • bereal
      bereal over 5 years
      The coordinates of the k-th center will be (r*cos kx, r*sin kx) where r is the radius, and x = 2*pi/n where n is the number of circles you need.
    • Idle_Mind
      Idle_Mind over 5 years
      I don't use flutter, but most modern systems have a way to rotate the drawing surface. Figure out how to draw one "unit circle", then rotate the surface repeatedly and draw again.
  • SuzieCodes
    SuzieCodes over 5 years
    I am so shy to have the whole solution given this way!!! Thank you kindly Divyanshu! This is very nice of you.