lissajous figure

lissajous_figure.dart

import 'package:flutter/material.dart';
import 'dart:math' as Math;

class PainterPage extends StatefulWidget {
  @override
  _PainterPageState createState() => _PainterPageState();
}

class _PainterPageState extends State<PainterPage>
    with SingleTickerProviderStateMixin {
  AnimationController _controller;
  Animation<double> animation;

  @override
  void initState() {
    _controller =
        AnimationController(vsync: this, duration: Duration(seconds: 40));

    animation = Tween<double>(begin: 0, end: 52 * Math.pi).animate(_controller);

    _controller.addListener(() {
      setState(() {
        print('animated value : ${animation.value}');
      });
    });

    _controller.forward();

    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return CustomPaint(
      painter: MyPainter(angle: animation.value),
      child: Container(
        height: 600,
      ),
    );
  }
}

class MyPainter extends CustomPainter {
  double angle;

  MyPainter({this.angle});

  @override
  void paint(Canvas canvas, Size size) {
    final height = size.height;
    final width = size.width;

    final paint = Paint()
      ..color = Colors.blueAccent
      ..strokeWidth = 2;

    drawLine(height, width, canvas, paint, .1, .9, width * .1, height * 1,
        Colors.red);
    drawLine(height, width, canvas, paint, .2, .8, width * .2, height * .9,
        Colors.amber);
    drawLine(height, width, canvas, paint, .3, .7, width * .3, height * .8,
        Colors.green);
    drawLine(height, width, canvas, paint, .4, .6, width * .4, height * .7,
        Colors.yellow);
    drawLine(height, width, canvas, paint, .5, .5, width * .5, height * .6,
        Colors.teal);
    drawLine(height, width, canvas, paint, .6, .4, width * .6, height * .5,
        Colors.blue);
    drawLine(height, width, canvas, paint, .7, .3, width * .7, height * .9,
        Colors.pink);
    drawLine(height, width, canvas, paint, .8, .2, width * .8, height * 1,
        Colors.deepOrange);
    drawLine(height, width, canvas, paint, .9, .1, width * .9, height * 1,
        Colors.yellowAccent[100]);
    drawLine(height, width, canvas, paint, 1, 1, width * .1, height * 1,
        Colors.purple);
    drawLine(height, width, canvas, paint, .9, .9, width * .2, height * 1,
        Colors.deepPurple);
    drawLine(height, width, canvas, paint, .8, .8, width * .3, height * 1,
        Colors.black26);
    drawLine(height, width, canvas, paint, .7, .7, width * .4, height * 1,
        Colors.black.withOpacity(.5));
  }

  void drawLine(double height, double width, Canvas canvas, Paint paint, xSpeed,
      ySpeed, xRadius, yRadius, color) {
    paint.color = color;
    var centerX = width * .5,
        centerY = height * .8,
        xAngle = xSpeed * angle,
        yAngle = ySpeed * angle,
        x = centerX + Math.cos(xAngle) * xRadius,
        y = centerY + Math.sin(yAngle) * yRadius;


    canvas.drawCircle(Offset(x, y), Math.pi * 16, paint);
    canvas.drawCircle(Offset(x * 2, y * 2), Math.pi * 10, paint);
    canvas.drawCircle(Offset(x * 3, y * 3), Math.pi * 8, paint);
    canvas.drawCircle(Offset(x * 4, y * 4), Math.pi * 6, paint);
    canvas.drawCircle(Offset(x * 5, y * 6), Math.pi * 4, paint);


//    canvas.drawLine(Offset(centerX, centerY), Offset(x, y ), paint);
//    paint.color = Colors.blueAccent.withOpacity(.2);
//    canvas.drawCircle(Offset(centerX, centerY), Math.pi * 10, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) {
    return this != oldDelegate;
  }
}