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;
}
}
![SuzieCodes](https://lh6.googleusercontent.com/-LO-AunCy1z8/AAAAAAAAAAI/AAAAAAAAAAA/ACHi3rd3QQP8t9IiayjvyLmA4Y6H3b4bvg/mo/photo.jpg?sz=256)
Author by
SuzieCodes
Updated on December 10, 2022Comments
-
SuzieCodes over 1 year
I need to code these white intertwined circles (not the background):
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 over 5 yearsThe coordinates of the
k
-th center will be(r*cos kx, r*sin kx)
wherer
is the radius, andx = 2*pi/n
wheren
is the number of circles you need. -
Idle_Mind over 5 yearsI 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 over 5 yearsI am so shy to have the whole solution given this way!!! Thank you kindly Divyanshu! This is very nice of you.