Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to draw overlapping circles

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.

like image 371
SuzieCodes Avatar asked Mar 23 '19 18:03

SuzieCodes


People also ask

What are two overlapping circles called?

A Venn diagram uses circles that overlap or don't overlap to show the commonalities and differences among things or groups of things. Things that have commonalities are shown as overlapping circles while things that are distinct stand alone.


1 Answers

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;
  }
}

like image 152
divyanshu bhargava Avatar answered Sep 19 '22 18:09

divyanshu bhargava