----- Coding Tutorial by Patt Vira ----- 

Name: Möbius Strip

Video Tutorial: https://youtu.be/d6LG9UWBJAg

​

Connect with Patt: @pattvira

https://www.pattvira.com/

----------------------------------------

*/

​

let r1 = 100; let r2 = 50; let angle = 0;

​

function setup() {

  createCanvas(400, 400, WEBGL);

  angleMode(DEGREES);

}

​

function draw() {

  background(220);

  orbitControl();

​

  /* // Uncomment for drawing a donut (torus)

  strokeWeight(1);

  stroke(0);

  noFill();

  beginShape(POINTS);

  for (let theta = 0; theta < 360; theta+=10) {

    for (let phi = 0; phi < 360; phi += 10) {

      let x = (r1 + r2*cos(phi))*cos(theta);

      let y = (r1 + r2*cos(phi))*sin(theta);

      let z = r2*sin(phi)

      vertex(x, y, z);  

    }

  }

  endShape();

  */

  // Drawing the Mobius Strip 

  let x, y, z;

  beginShape(QUAD_STRIP);

  let big = 1;

  let small = 0.5;

  let startingAngle = 180;

  for (let theta = 0; theta <= 360; theta+=10) {

    // First Half

    fill(255, 0, 0);

    x = (r1 + r2*cos(small * theta))*cos(big * theta);

    y = (r1 + r2*cos(small * theta))*sin(big * theta);

    z = r2*sin(small * theta)

    vertex(x, y, z);  

    // Second Half

    fill(0, 0, 255);

    x = (r1 + r2*cos(startingAngle + small * theta))*cos(big * theta);

    y = (r1 + r2*cos(startingAngle + small * theta))*sin(big * theta);

    z = r2*sin(startingAngle + small * theta)

    vertex(x, y, z);  

  }

  stroke(0, 0, 255);

  endShape();

  // Drawing the moving spehere

  let x2, y2, z2;

  if (angle < 180) {

    x2 = (r1 + r2*cos(small * angle))*cos(big * angle);

    y2 = (r1 + r2*cos(small * angle))*sin(big * angle);

    z2 = r2*sin(small * angle)

  } else {

    x2 = (r1 + r2*cos(startingAngle + small * angle))*cos(big * angle);

    y2 = (r1 + r2*cos(startingAngle + small * angle))*sin(big * angle);

    z2 = r2*sin(startingAngle + small * angle);

  }

  push();

  translate(x2, y2, z2);

  sphere(10);

  pop();

  angle += 1;

}