---

let angle = 0; // Переменная для анимации движения

function setup() {
  createCanvas(500, 500, WEBGL);
}

function draw() {
  background(255); // Белый фон
  orbitControl();  // Вращение сцены мышкой
  
  // Стиль 3D-сетки из фото
  noFill();          
  stroke(0);         
  strokeWeight(0.6); 
  
  // Геометрия пончиков (ТЕПЕРЬ ОНИ ОДИНАКОВЫЕ)
  let R = 90;  // Радиус колец (одинаковый для обоих)
  let r = 22;  // Толщина колец (одинаковая для обоих)

  // --- 1. НЕПОДВИЖНЫЙ ВЕРТИКАЛЬНЫЙ ПОНЧИК ---
  push();
    rotateY(0.4);      // Наклон вбок
    rotateX(HALF_PI);  // Ставим вертикально
    torus(R, r);       // Рисуем первый пончик
  pop();


  // --- 2. ДВИЖУЩИЙСЯ ГОРИЗОНТАЛЬНЫЙ ПОНЧИК (БЕЗ ПЕРЕСЕЧЕНИЯ) ---
  push();
    rotateY(0.4);      // Тот же наклон осей
    
    angle += 0.015;    // Скорость вращения
    
    // Вычисляем правильный радиус траектории движения центра второго пончика.
    // Чтобы они не пролетали сквозь текстуры, расстояние между их центрами
    // должно быть строго равно: Радиус + Две толщины кольца
    let safetyRadius = R + (r * 2); 
    
    // Считаем координаты движения вокруг вертикального пончика
    let posX = safetyRadius * cos(angle);
    let posY = safetyRadius * sin(angle);
    
    // Перемещаем пончик на его безопасную орбиту
    translate(posX, posY, 0);
    
    // Дополнительно закручиваем сам пончик по оси Y в такт движению,
    // чтобы он всегда оставался направлен «лицом» к первому пончику 
    // и плавно скользил по нему, как звено цепи
    rotateY(angle);
    rotateX(HALF_PI);
    
    // Рисуем точно такой же пончик с теми же размерами R и r
    torus(R, r);
  pop();
}