### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 7, 2019, 12:31pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/6 "2019-08-07T12:31:39Z")
Thank you all for the inspiring discussion!
I have to look into it later.
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 7, 2019, 8:56pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/7 "2019-08-07T20:56:03Z")
> [@glv](#):
>
> this
@glv
so your new line is between the two brackets of the for-loops?
It’s much better but I still have a weak seam.
Is this correct?
```auto
// defining a QUAD_STRIP shape
int i2_span=100;
void initMainItem() {
// https://de.wikipedia.org/wiki/M%C3%B6biusband
boolean grid=false;
moebius1=createShape();
moebius1.beginShape(QUAD_STRIP);
if (grid) {
// only grid
moebius1.noFill();
moebius1.stroke(0);
} else {
// full fill
moebius1.fill(255, 0, 0);
moebius1.noStroke();
}
// i2 -> radius (how wide the red strip is)
// i3 / i -> alpha (angle)
for (int i2=-i2_span; i2360)
i=i-360;
makeVertex3D(i2, i);
makeVertex3D(i2+1, i);
//
}//for
//
makeVertex3D(-50, 1); //Added !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
//
}//for
// ---------------------------------
moebius1.endShape();
println("");
println (">>>>"
+leaves.size());
}//func
void makeVertex3D( int i2, int i) {
float factor1 = 220;
float yadd1 = 200;
float r = i2/i2_span;
float alpha=radians(i);
PVector v = new PVector(
cos(alpha) * ( 1+ ((r/2) * cos ( alpha / 2 ) ) ),
sin(alpha) * ( 1+ ((r/2) * cos ( alpha / 2 ) ) ),
(r/2) * sin(alpha/2));
v.mult(factor1);
v.y+=yadd1;
moebius1.vertex(v.x, v.y, v.z);
}
//
```
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 9, 2019, 12:32pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/8 "2019-08-09T12:32:12Z")
I just tinkered with your code and did not present a solution.
I posted my Mobius strip work in the Gallery for the masses to enjoy viewing.
🙂
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 9, 2019, 2:59pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/9 "2019-08-09T14:59:21Z")
I suggested the gap was caused by rounding errors due to repeated addition of irrational numbers. I did provide some starting code but have decided to provide a full solution showing how to avoid the gap. The code below produced this Mobius Strip.
```auto
import peasy.*;
PeasyCam pcam;
PVector[] s;
// Radius of Mobius strip
float r = 100;
// Width of mobius strip
float w = 40;
// Number of slices round the strip
int nbrSlices = 20;
void setup() {
size(400, 400, P3D);
pcam = new PeasyCam(this, 300);
// Calculate strip
s = new PVector[nbrSlices * 2];
float deltaT = TWO_PI / (nbrSlices - 1);
// Calculate strip vertices
for (int i = 0; i < nbrSlices; i++) {
float t = i * deltaT;
float t2 = t / 2;
float cos_t2 = cos(t2);
float sin_t2 = sin(t2);
float cos_t = cos(t);
float sin_t = sin(t);
s[i] = new PVector( (r + w*cos_t2)*cos_t, (r + w*cos_t2)*sin_t, w * sin_t2 );
s[nbrSlices + i] = new PVector( (r - w*cos_t2)*cos_t, (r - w*cos_t2)*sin_t, -w * sin_t2 );
}
// Draw mobius
}
void draw() {
background(0);
lights();
stroke(255);
strokeWeight(2);
fill(200, 30, 30);
beginShape(QUAD_STRIP);
for (int i = 0; i < nbrSlices; i++) {
vertex(s[i].x, s[i].y, s[i].z);
vertex(s[i+nbrSlices].x, s[i+nbrSlices].y, s[i+nbrSlices].z);
}
endShape();
}
```
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 9, 2019, 4:06pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/10 "2019-08-09T16:06:00Z")
suggested the gap was caused by rounding errors due to repeated addition of irrational numbers
Thanks a ton.
I didn’t think this was referring to my code since I don’t add up things.
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 9, 2019, 5:23pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/11 "2019-08-09T17:23:52Z")
No, I was referring to glv’s code.
Even so it highlights a problem many beginners don’t know about i.e. limited accuracy of floating point numbers in computing
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 11, 2019, 2:12pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/12 "2019-08-11T14:12:19Z")
@Chrisir
Some nice work in the Gallery! Pleased to see you closed the gap.
I explored this further with **my code** (updated since last posts) so just adding to topic:
1. There is no gap at the seam (first and last QUAD\_STRIP joining).
2. There is a “lighting issue” at the last “QUAD\_STRIP” at the seam.
3. I suspect the “lighting” of the “QUAD\_STRIP” is related to this topic:
[https://processing.org/reference/normal\_.html](https://processing.org/reference/normal_.html)
4. I used some normal() methods in code and it displays a smooth transition but the lighting was not correct (see link above). I will explore this further.
5. I extended my Möbius strip shape by adding additional QUAD\_STRIPS that were **transparent** and this provided a clean transition at the seam.
6. I coloured the Möbius strip with a gradient (color wheel) and used the “extra transparent QUAD\_STRIPS” for a smooth transition for this effect.
7. I have **fixed location** lights() (start of loop) and rotate my Möbius shape after and this is when I see the “lighting issues” at the seam. If the light is rotated along with Möbius shape the lighting issues do not present themselves (expected since this view appeared seamless).
Your post helped me with my SPHEREs:
> **[Processing 2.x and 3.x Forum](https://forum.processing.org/two/discussion/8504/group-pshape-with-sphere-solved)**
>
> Processing is an electronic sketchbook, a language and a worldwide community. This is its forum.
🙂
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 11, 2019, 2:27pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/13 "2019-08-11T14:27:14Z")
Integers in loops are indeed preferred practice:
[https://help.semmle.com/wiki/display/CCPPOBJ/Avoid+floats+in+for+loops](https://help.semmle.com/wiki/display/CCPPOBJ/Avoid+floats+in+for+loops)
[https://chortle.ccsu.edu/Java5/Notes/chap42/ch42\_6.html](https://chortle.ccsu.edu/Java5/Notes/chap42/ch42_6.html)
[https://www.quora.com/Can-we-use-floating-point-control-variables-in-the-case-of-iteration-in-C++-Is-it-always-wise-to-use-them](https://www.quora.com/Can-we-use-floating-point-control-variables-in-the-case-of-iteration-in-C++-Is-it-always-wise-to-use-them)
This did not affect my code (I did not have a gap) but I will be transitioning to this preferred practice.
🙂
---
### Author:  [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [August 11, 2019, 2:34pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/14 "2019-08-11T14:34:37Z")
> [@glv](#):
>
> If the light is rotated along with Möbius shape the lighting issues do not present themselves
Could you show me how this is achieved? How do you rotate the lights() (and what kind?) ?
Thanks for the great Input!
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 11, 2019, 2:52pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/15 "2019-08-11T14:52:04Z")
Using quark’s example:
> [@quark](#):
>
> The code below produced this Mobius Strip.
1. PeasyCam is rotating everything including the lights(); try the example with noStrokes() and nbrSlices = 50. There is a noticeable issue at seam ((QUAD\_STRIP) but not so apparent as next step 2.
2. Remove all the references to PeasyCam and add this and increase nbrSlices = 50:
> float theta;
> void draw() {
> background(0);
> lights();
> translate(width/2, height/2);
> rotateX(theta);
> theta += TAU/1000;
> noStroke();
>
> // stroke(255);
> // strokeWeight(2);
And I see the same “lighting issues” that I discussed:
I wanted to see if the “lighting issues” were present in this example and they are for my use of lights().
The description here discusses this issue:
> **[normal() / Reference](https://processing.org/reference/normal_.html)**
>
> Sets the current normal vector. Used for drawing three-dimensional shapes and surfaces, normal() specifies a vector perpendicular to a shape's surface which, in turn, determines how lighting af…
> Sets the current normal vector. Used for drawing three dimensional shapes and surfaces, **normal()** specifies **a vector perpendicular to a shape’s surface which, in turn, determines how lighting affects it. Processing attempts to automatically assign normals to shapes, but since that’s imperfect,** this is a better option when you want more control.
🙂
---
### Author:  [@quark](https://discourse.processing.org/u/quark)
#### Post date: [August 11, 2019, 4:07pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/16 "2019-08-11T16:07:58Z")
If you only use ambient light you don’t have the problem because the surface normals are ignored. If you un-comment the directional light line the problem appears because of the way Processing estimates the normal vector.
````auto
float theta;
PVector[] s;
// Radius of Mobius strip
float r = 100;
// Width of mobius strip
float w = 40;
// Number of slices round the strip
int nbrSlices = 50;
void setup() {
size(400, 400, P3D);
// Calculate strip
s = new PVector[nbrSlices * 2];
float deltaT = TWO_PI / (nbrSlices - 1);
// Calculate strip vertices
for (int i = 0; i < nbrSlices; i++) {
float t = i * deltaT;
float t2 = t / 2;
float cos_t2 = cos(t2);
float sin_t2 = sin(t2);
float cos_t = cos(t);
float sin_t = sin(t);
s[i] = new PVector( (r + w*cos_t2)*cos_t, (r + w*cos_t2)*sin_t, w * sin_t2 );
s[nbrSlices + i] = new PVector( (r - w*cos_t2)*cos_t, (r - w*cos_t2)*sin_t, -w * sin_t2 );
}
}
void draw() {
translate(width/2, height/2);
background(0);
ambientLight(200,200,200);
// directionalLight(100,100,100, 0,1,1);
noStroke();
fill(200, 15, 15);
rotateX(theta);
theta += TAU / 200;
beginShape(QUAD_STRIP);
for (int i = 0; i < nbrSlices; i++) {
vertex(s[i].x, s[i].y, s[i].z);
vertex(s[i+nbrSlices].x, s[i+nbrSlices].y, s[i+nbrSlices].z);
}
endShape();
}```
````
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 11, 2019, 5:47pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/17 "2019-08-11T17:47:49Z")
> [@glv](#):
>
> I extended my Möbius strip shape by adding additional QUAD\_STRIPS that were **transparent** and this provided a clean transition at the seam.
Elaborating on what I did to work around using lights() which includes ambient() and directionall():
```auto
public void mobius2(int steps, float r, float v, float u)
{
m2 = createShape();
m2.beginShape(QUAD_STRIP);
for (int step = 0; step < (steps+1)+2; step++)
{
u = step*(TAU/steps);
if (step > steps)
m2.fill(255, 255, 0, 0);
else
m2.fill(255, 255, 0, 255);
mobEq(r, -v, u);
m2.vertex(x, y, z);
mobEq(r, v, u);
m2.vertex(x, y, z);
}
m2.endShape();
}
```
I will post my example code later; time to go for a hike in the woods for some fresh air!
🙂
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 11, 2019, 5:54pm UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/18 "2019-08-11T17:54:48Z")
Thanks for the insight.
That narrows it down to directionalLight(100,100,100, 0,1,1);
and normals (see description for anyone visiting topic):
[https://processing.org/reference/normal\_.html](https://processing.org/reference/normal_.html)
I much prefer lights() and have my workaround working.
No one viewing sketch will ever know what I did. 🤐
🙂
---
### Author:  [@glv](https://discourse.processing.org/u/glv)
#### Post date: [August 13, 2019, 2:42am UTC](https://discourse.processing.org/t/3d-shape-with-a-bad-seam/13218/19 "2019-08-13T02:42:03Z")
> [@glv](#):
>
> I will post my example code later
The example is posted in the gallery:
> [@Möbius Strip Animation](https://discourse.processing.org/t/mobius-strip-animation/13273/6):
>
> Seamless **Möbius** strip