# Double Möbius strip

**URL:** <https://discourse.processing.org/t/double-mobius-strip/31362>\
**Category:** Coding Questions\
**Created:** [July 21, 2021, 2:06pm UTC](https://discourse.processing.org/t/double-mobius-strip/31362 "2021-07-21T14:06:46Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![fleshcircuit](https://avatars.discourse-cdn.com/v4/letter/f/b3f665/32.png) [@fleshcircuit](https://discourse.processing.org/u/fleshcircuit)\
**Post date:** [July 21, 2021, 2:06pm UTC](https://discourse.processing.org/t/double-mobius-strip/31362/1 "2021-07-21T14:06:46Z")

</div>

I am currently working on a mobius strip animation based on this example: [Mobius Strip Animation - #6 by glv](https://discourse.processing.org/t/mobius-strip-animation/13273/6)

However, I am trying to figure out a way to increase the folds and double the strip. This is my first attempt at working with 3D, and it is a tricky entry point and the math may be beyond my skill level, but I wonder if anyone has suggestions on how to increase the folds. Here is my code:

```auto
let rad;
let v;
let turn = 0;
let num;

function setup() {
  createCanvas(windowWidth, windowHeight, WEBGL);
  colorMode(HSB, 360, 100, 100, 100);
  rad = width*.3;
  v = width*.1
  num = height*.5;
  frameRate(30)
}

function draw() {
  //background(40, 20, 100);
  background(10);
  lights();
  push();
  rotateY(turn);
  rotateX(turn);
  rotateZ(turn);
  //noStroke();
  drawTrack(100, rad, v);
  drawEdges(100, rad, v);
  turn += 0.003
  pop();
}

function drawTrack(steps, rad, v) {
  beginShape(TRIANGLE_STRIP);
  fill(0);
  strokeWeight(2);
  stroke(255);
  for (let step = 0; step < (steps + 1); step += 1) {
    let u = step * TAU / steps;
    let x = (rad - v * cos(0.5 * u)) * cos(u);
    let y = (rad - v * cos(0.5 * u)) * sin(u);
    let z = -v * sin(0.5 * u);
    vertex(x, y, z);
    x = (rad + v * cos(0.5 * u)) * cos(u);
    y = (rad + v * cos(0.5 * u)) * sin(u);
    z = v * sin(0.5 * u);
    vertex(x, y, z);
  }
  endShape(CLOSE);
}

function drawEdges(steps, rad, v) {
  for (let step = 0; step < (steps + 1); step += 1) {
    fill(260, random(100), 100);
    stroke(0)
    let u = step * TAU / steps;
    let x = (rad - v * cos(0.5 * u)) * cos(u);
    let y = (rad - v * cos(0.5 * u)) * sin(u);
    let z = -v * sin(0.5 * u);
    push();
    translate(x, y, z);
    //box(10)c
    box(random(6,10))
    pop();
    x = (rad + v * cos(0.5 * u)) * cos(u);
    y = (rad + v * cos(0.5 * u)) * sin(u);
    z = v * sin(0.5 * u);
    push();
    translate(x, y, z);
    box(random(6,10))
    //box(10);
    pop();
  }
}
``
```

---

<div class="post-metadata">

**Author:** ![KumuPaul](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kumupaul/32/13072_2.png) [@KumuPaul](https://discourse.processing.org/u/KumuPaul)\
**Post date:** [July 21, 2021, 9:31pm UTC](https://discourse.processing.org/t/double-mobius-strip/31362/2 "2021-07-21T21:31:05Z")

</div>

To understand what is going on here you need some familiarity with [trigonometry](https://en.wikipedia.org/wiki/Trigonometry), especially the trigonometric functions [sin](https://p5js.org/reference/#/p5/sin) and [cos](https://p5js.org/reference/#/p5/cos).

In the `drawTrack` and `drawEdges` functions the variable `u` represents the angle around a circle in [radians](https://en.wikipedia.org/wiki/Radian). The constant `TAU` represents a complete revolution around a circle (i.e. `2 * π` radians which is equivalent to 360°). So `u` is an angle that increases incrementally depending on the number of steps.

If you were simply plotting a circle you would simply leave one dimension constant (`z = 0` for example), and you would compute the two other dimensions by multiplying the radius of the circle by either to cosine or the sine of the angle for the x and y dimensions respectively. However, since you’re drawing a strip, and it is being twisted, each edge of the strip will be offset from the edge of the circle, and you can use sine/cosine again to calculate the offset based on the twist. The thing that jumps out in the code is all of the use of `0.5 * u`. We can deduce that anywhere we see this it represents the current angle of twist (since a Mobius strip has a ½ twist). So by simply multiplying by a different value instead of `0.5` we will get a different amount of twist.

Here’s an example:

```auto
const DefaultTwists = 0.5;

let rad;
let v;
let turn = 0;
let num;

let twistSlider;

function setup() {
	createCanvas(windowWidth, windowHeight, WEBGL);
	twistSlider = createSlider(0, 10, DefaultTwists, 0);
	twistSlider.position(10, 10);
	colorMode(HSB, 360, 100, 100, 100);
	rad = width * 0.3;
	v = width * 0.1;
	num = height * 0.5;
	frameRate(30)
}

function draw() {
	//background(40, 20, 100);
	orbitControl(2, 1, 0.05);
	background(10);
	lights();
	push();
	//noStroke();
	drawTrack(100, rad, v);
	drawEdges(100, rad, v);
	turn += 0.003
	pop();
}

function drawTrack(steps, rad, v) {
	beginShape(TRIANGLE_STRIP);
	fill(0);
	strokeWeight(2);
	stroke(255);
	let twists = twistSlider.value();
	for (let step = 0; step < (steps + 1); step += 1) {
		let u = step * TAU / steps;
		let x = (rad - v * cos(twists * u)) * cos(u);
		let y = (rad - v * cos(twists * u)) * sin(u);
		let z = -v * sin(twists * u);
		vertex(x, y, z);
		x = (rad + v * cos(twists * u)) * cos(u);
		y = (rad + v * cos(twists * u)) * sin(u);
		z = v * sin(twists * u);
		vertex(x, y, z);
	}
	endShape(CLOSE);
}

function drawEdges(steps, rad, v) {
	let twists = twistSlider.value();
	for (let step = 0; step < (steps + 1); step += 1) {
		fill(260, random(100), 100);
		stroke(0)
		let u = step * TAU / steps;
		let x = (rad - v * cos(twists * u)) * cos(u);
		let y = (rad - v * cos(twists * u)) * sin(u);
		let z = -v * sin(twists * u);
		push();
		translate(x, y, z);
		//box(10)c
		box(random(6, 10))
		pop();
		x = (rad + v * cos(twists * u)) * cos(u);
		y = (rad + v * cos(twists * u)) * sin(u);
		z = v * sin(twists * u);
		push();
		translate(x, y, z);
		box(random(6, 10))
		//box(10);
		pop();
	}
}

```

> **[Mobius Strip - OpenProcessing](https://openprocessing.org/sketch/1236866/pc/E7vSnkBU)**

---

<div class="post-metadata">

**Author:** ![glv](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/glv/32/18785_2.png) [@glv](https://discourse.processing.org/u/glv)\
**Post date:** [July 24, 2021, 2:56pm UTC](https://discourse.processing.org/t/double-mobius-strip/31362/3 "2021-07-24T14:56:12Z")

</div>

Hello,

@fleshcircuit l like what you did with it!

I modified your version and provided an example:

> **Double Möbius strip**
>
> ```auto
> let rad;
> let v;
> let turn = 0;
> let num;
> 
> function setup() {
> createCanvas(windowWidth, windowHeight, WEBGL);
> colorMode(HSB, 360, 100, 100, 100);
> rad = width*.3;
> v = width*.1
> num = height*.5;
> frameRate(30)
> }
> 
> function draw() {
> //background(40, 20, 100);
> background(10);
> lights();
> push();
> rotateY(turn);
> rotateX(turn);
> rotateZ(turn);
> //noStroke();
> drawTrack(100, rad, v);
> turn += TAU/500;
> pop();
> }
> 
> function drawTrack(steps, rad, v) {
> beginShape(TRIANGLE_STRIP);
> fill(0);
> strokeWeight(2);
> stroke(255);
> for (let step = 0; step < (2*steps + 1); step += 1) {
> let u = 2*step * TAU / steps;
>     
> let x = (rad - v * cos(0.5 * u)) * cos(u/2);
> let y = (rad - v * cos(0.5 * u)) * sin(u/2);
> let z = -v * sin(0.5 * u);
> vertex(x, y, z);
>     
> x = (rad + v * cos(0.5 * u)) * cos(u/2);
> y = (rad + v * cos(0.5 * u)) * sin(u/2);
> z = v * sin(0.5 * u);
> vertex(x, y, z);
> }
> endShape(CLOSE);
> }
> 
> ```

Output:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/f/f3e598d2c668cb5be7c3429736009d5853b50255.png)

You can add more loops:

 ![image](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/3/349900ad3e3305712564f15735c020db1658772c.png)

You will have to decipher what I did for more loops… it was familiar and I just played around with it a bit.

`:)`