const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const upperLeftWing = [
  { cp1x: -50, cp1y: -100, x: -150, y: -50 },
  { cp1x: -100, cp1y: 0, x: 0, y: 0 }
];

const lowerLeftWing = [
  { cp1x: -50, cp1y: 50, x: -150, y: 100 },
  { cp1x: -100, cp1y: 50, x: 0, y: 0 }
];

const upperRightWing = [
  { cp1x: 50, cp1y: -100, x: 150, y: -50 },
  { cp1x: 100, cp1y: 0, x: 0, y: 0 }
];

const lowerRightWing = [
  { cp1x: 50, cp1y: 50, x: 150, y: 100 },
  { cp1x: 100, cp1y: 50, x: 0, y: 0 }
];

const butterflyBody = [
  { x: 0, y: -20 },
  { x: 0, y: 20 }
];

const butterflyHead = [
  { x: 0, y: -30 }
];

const butterflyAntennas = [
  { baseX: 0, baseY: -30, cp1x: -10, cp1y: -50, endX: -20, endY: -40 }, // Left antenna
  { baseX: 0, baseY: -30, cp1x: 10, cp1y: -50, endX: 20, endY: -40 } // Right antenna
];

let position = { x: canvas.width / 2, y: canvas.height / 2 };
let angle = 0;
let scale = 1;
let radius = 200; // Радиус окружности, по которой будет двигаться бабочка
let speed = -0.02; // Скорость движения бабочки по окружности 

let animationFrameId;
let frame = 0;

// Запускаем анимацию автоматически при загрузке страницы
startAnimation();

function startAnimation() {
  stopAnimation(); // Остановить предыдущую анимацию, если она есть
  animationFrameId = requestAnimationFrame(animate);
}

function stopAnimation() {
  cancelAnimationFrame(animationFrameId);
}

function animate() {
  animationFrameId = requestAnimationFrame(animate);
  update();
  draw();
}

function update() {
  frame = (frame + 1) % 60; // 60 кадров в секунду
  
  // Обновление положения бабочки по окружности
  angle += speed;
  position.x = canvas.width / 2 + radius * Math.cos(angle);
  position.y = canvas.height / 2 + radius * Math.sin(angle);
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // Отрисовка цветов на задний фон
  drawFlower(120, 100, 30, 5, 20, 6, "#ff9900");
  drawFlower(300, 300, 40, 6, 25, 8, "#ff6699");
  drawFlower(500, 250, 35, 7, 22, 7, "#66cc99");
  drawFlower(100, 500, 25, 6, 15, 5, "#ffcc00");
  drawFlower(400, 100, 35, 7, 20, 6, "#cc66ff");
  drawFlower(450, 460, 30, 5, 18, 4, "#66ffcc");
  drawFlower(100, 280, 35, 6, 22, 7, "#3399ff");
  
  ctx.save();
  ctx.translate(position.x, position.y);
  ctx.rotate(angle);
  ctx.scale(scale, scale);

  // Отрисовка крыльев
  drawWing(upperLeftWing);
  drawWing(lowerLeftWing);
  drawWing(upperRightWing);
  drawWing(lowerRightWing);

  // Отрисовка тела бабочки
  ctx.beginPath();
  ctx.moveTo(butterflyBody[0].x, butterflyBody[0].y);
  for (let i = 1; i < butterflyBody.length; i++) {
    ctx.lineTo(butterflyBody[i].x, butterflyBody[i].y);
  }
  ctx.lineWidth = 10;
  ctx.strokeStyle = 'black';
  ctx.stroke();

  // Отрисовка головы бабочки
  ctx.beginPath();
  ctx.arc(butterflyHead[0].x, butterflyHead[0].y, 10, 0, Math.PI * 2, true);
  ctx.fillStyle = 'black';
  ctx.fill();

  // Отрисовка усиков бабочки
  for (let antenna of butterflyAntennas) {
    ctx.beginPath();
    ctx.moveTo(antenna.baseX, antenna.baseY);
    ctx.quadraticCurveTo(antenna.cp1x, antenna.cp1y, antenna.endX, antenna.endY);
    ctx.strokeStyle = 'black';
    ctx.lineWidth = 2;
    ctx.stroke();
  }

  ctx.restore();
}

function drawWing(points) {
  ctx.beginPath();
  ctx.moveTo(0, 0);
  for (let point of points) {
    ctx.quadraticCurveTo(point.cp1x, point.cp1y, point.x, point.y);
  }
  ctx.closePath();
  ctx.fillStyle = '#6600ff';
  ctx.fill();
}

function drawFlower(x, y, radius, petals, petalLength, petalWidth, flowerColor) {
  const stemHeight = radius * 2.5;
  const stemWidth = radius / 10;
  const stemColor = "#228B22";

  // Draw stem
  ctx.beginPath();
  ctx.moveTo(x, y);
  ctx.lineTo(x, y + stemHeight);
  ctx.lineWidth = stemWidth;
  ctx.strokeStyle = stemColor;
  ctx.stroke();

  // Draw flower
  ctx.beginPath();
  ctx.arc(x, y, radius, 0, Math.PI * 2);
  ctx.fillStyle = flowerColor;
  ctx.fill();

  const angleIncrement = (Math.PI * 2) / petals;
  ctx.fillStyle = flowerColor;

  for (let i = 0; i < petals; i++) {
    const angle = i * angleIncrement;
    const x0 = x + Math.cos(angle) * radius;
    const y0 = y + Math.sin(angle) * radius;
    const x1 = x0 + Math.cos(angle) * petalLength;
    const y1 = y0 + Math.sin(angle) * petalLength;
    const cp1x = x1 + Math.cos(angle - Math.PI / 6) * petalWidth;
    const cp1y = y1 + Math.sin(angle - Math.PI / 6) * petalWidth;
    const cp2x = x1 + Math.cos(angle + Math.PI / 6) * petalWidth;
    const cp2y = y1 + Math.sin(angle + Math.PI / 6) * petalWidth;

    ctx.beginPath();
    ctx.moveTo(x0, y0);
    ctx.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x1, y1);
    ctx.lineTo(x0, y0);
    ctx.closePath();
    ctx.fill();
  }
}