​

function setup() {

  createCanvas(1200, 800, 'webgl');

  frameRate(45)

  p = createP();

}

​

let size = 100

let angleX1 = 0,

  angleX2 = 0

let speedX1 = 3,

  speedX2 = 3

​

let offsetX1 = 0,

  forward = true,

  onCenter = false

​

function draw() {

  debugMode();

  background(220);

  angleMode(DEGREES)

  translate(-width / 2, -height / 2)

  translate(width / 2, height / 2)

  orbitControl();

​

  offsetX1 = map(sin(angleX1), -1, 1, -size*2.5 , size*2.5 )

  onCenter = offsetX1>= -size / 8 && offsetX1<= size / 8

​

  if(parseInt(angleX2)%180===0 && parseInt(angleX2)%180===0 && onCenter)

    forward = !forward

  p.elt.innerText = `angleX1:${angleX1}\nangleX2: ${angleX2} \n isTrue:${angleX2/180} \n\n offsetX1:${offsetX1}\n onCenter:${onCenter}`

  //x

  push()

  normalMaterial();

  translate(0, 0)

  rotateX(forward ? angleX2 : -angleX2);

  torus(size/2, 10);

  //box(size * 2, size * 2, size)

  pop()

​

  //z

  push()

  normalMaterial();

  translate(0, 0)

  rotateX(forward ? angleX2 : -angleX2);

  rotateX(90)

  cylinder(size/10, size*5);

  //box(size / 2, size / 2, size * 5)

  pop()

​

  //y

  push()

  normalMaterial();

  translate(0+offsetX1, 0, size * -2)

  sphere(size / 8);

  pop()

​

​

​

  angleX1 += speedX1

  angleX2 += speedX2

}