# Semicircle drawing producing artifacts

**URL:** <https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444>\
**Category:** Coding Questions\
**Created:** [February 16, 2019, 12:24pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444 "2019-02-16T12:24:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![RagingLightning](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RagingLightning](https://discourse.processing.org/u/RagingLightning)\
**Post date:** [February 16, 2019, 12:24pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/1 "2019-02-16T12:24:10Z")

</div>

Hello!

I am trying to draw a semisphere using verticies, but for some reason I get weird artifacts, when two or more “rings” are drawn behind each other. I already tried to use illumination (with a point light at 0,0,0 as well as emmissive material) but that didn’t help either.

Can someone please help me?

[source code](https://pastebin.com/VyEqLvpi)

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 16, 2019, 1:04pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/2 "2019-02-16T13:04:08Z")

</div>

would like to see what you see?

your code:

![snap_0035](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/b/bdf12c240c83f81bbd3f226b18d234cbc28b441b.jpeg)  
test:

```auto
// for (a=0; a < TWO_PI+da; a += da) {
    for (a=0; a < TWO_PI; a += da) {

```

![snap_0036](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/d964d21bfb75a387843bf27e45baa582d2f0e3c9.jpeg)

still that dot in the middle??

---

<div class="post-metadata">

**Author:** ![RagingLightning](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RagingLightning](https://discourse.processing.org/u/RagingLightning)\
**Post date:** [February 16, 2019, 3:16pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/3 "2019-02-16T15:16:48Z")

</div>

For me the dot in the middle is still visible, but that is not that important compared to the dark “shadow” appearing all over the surface

---

<div class="post-metadata">

**Author:** ![RagingLightning](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RagingLightning](https://discourse.processing.org/u/RagingLightning)\
**Post date:** [February 16, 2019, 6:40pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/4 "2019-02-16T18:40:36Z")

</div>

It seems like I jusf fixed the middle dot like this

```auto
//for (b=0; b < HALF_PI; b += db) {
for (b=0; b < HALF_PI-db; b += db) { 

```

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 17, 2019, 3:18am UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/5 "2019-02-17T03:18:27Z")

</div>

very good,  
now i would recommend  
not construct the shape at runtime ( inside draw ),  
and play with stroke for visibility ( pls, change back )  
add instead for test/inspect not use the auto rotate,  
here i try my PTZ

```auto
// https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444
PShape myshape;

void setup() {
  size(600, 600, P3D);
  make_myshape(100, 30, 30);
  info_print();
}

void draw() {
  background(0, 0, 80);
  PTZ();
}

void make_myshape(float radius, float slicesA, float slicesB) {
  float a, b, x, y, z, da, db;
  da = TWO_PI / slicesA;
  db = HALF_PI / slicesB;  
  myshape = createShape();
  myshape.beginShape(QUAD_STRIP);
  myshape.fill(0, 255, 0, 127); 
  // myshape.noStroke();
  myshape.stroke(0, 255, 0, 127); // test visibility

  for (b=0; b < HALF_PI-db; b += db) {
    for (a=0; a < TWO_PI; a += da) {
      x = cos(a) * cos(b) * radius;
      y = sin(a) * cos(b) * radius;
      z = sin(b) * radius;
      myshape.vertex(x, y, z);
      x = cos(a) * cos(b+db) * radius;
      y = sin(a) * cos(b+db) * radius;
      z = sin(b+db) * radius;
      myshape.vertex(x, y, z);
    }
  }
  myshape.endShape();
}

// ______________________________________
void draw_object() { // _________________ called by / from inside PTZ
  shape(myshape, 0, 0);
}

// _____________________________________ PTZ tab
int mode = 0;
float Zmag = 2;
int Zaxis=-10;                                                       
float Xmag, Ymag = 0;
float newXmag, newYmag = 0; 
int newZmag = 0;
int zoomf = 3;
float newxpos, newypos = 0; // for PAN
float xposd, yposd = 0; // for PAN

// _________________________________________________________________ ROTATE / TILDE and MOVE / PAN
void mousePressed() {
  if (mouseButton == LEFT) { 
    mode=1;
  } // ORBIT
  else if (mouseButton == RIGHT) { 
    mode=2;
  } // PAN
  // else if (mouseButton == CENTER) { mode=3; } // zoom mouse wheel works same , presssed or not
}

// _________________________________________________________________ mouse PT end
void mouseReleased() { 
  mode = 0;
}

// _________________________________________________________________ mouseWheel ZOOM
void mouseWheel(MouseEvent event) {
  int newZmag = event.getCount(); // +- 1
  //if (Zmag > 10) { Zmag += newZmag * 5; } else { Zmag += newZmag; }// from 1 to 11 go in step 1 else in step 5 
  Zmag += newZmag*0.3;
  //println("Zmag: "+nf(Zmag, 1, 2));
}

void keyPressed() {
  if ( keyCode == UP ) Ymag -= 0.1 ;
  if ( keyCode == DOWN ) Ymag += 0.1 ;
  if ( keyCode == RIGHT) Xmag -= 0.1 ;
  if ( keyCode == LEFT ) Xmag += 0.1 ;
  if ( keyCode == 16 ) Zmag -= 0.5 ;
  if ( keyCode == 11 ) Zmag += 0.5 ;
  //println("key: "+key); println("keyCode: "+keyCode);
}
// _________________________________________________________________ Pan Tilde Zoom
void PTZ() {
  pushMatrix(); 
  translate(width/2, height/2, Zaxis);
  // get new mouse operation  
  if ( mode == 2 ) { // PAN ( right mouse button pressed)
    xposd = (mouseX-float(width/2));
    yposd = (mouseY-float(height/2));
  }  
  newxpos = xposd;// xposd=0;
  newypos = yposd;// yposd = 0; 
  translate(newxpos, newypos, 0); // move object
  if ( mode == 1 ) { // ORBIT ( left mouse button pressed)
    newXmag = mouseX/float(width) * TWO_PI;
    newYmag = mouseY/float(height) * TWO_PI;

    float diff = Xmag-newXmag;
    if (abs(diff) > 0.01) Xmag -= diff/4.0;
    diff = Ymag-newYmag;
    if (abs(diff) > 0.01) Ymag -= diff/4.0;
  }
  rotateX(-Ymag);   
  rotateY(-Xmag);   
  scale(Zmag);
  draw_object(); // THE OBJECT see main tab
  popMatrix();
}

// _______________________________________________ SETUP PRINT INFO
void info_print() {
  println("PTZ info:");
  println("key UP DOWN RIGHT LEFT -> rotate // key PAGE UP DOWN -> zoom");
  println("mouse LEFT press drag up down right left -> rotate // mouse RIGHT press -> move // mouse WHEEL turn -> zoom");
}

```

---

<div class="post-metadata">

**Author:** ![RagingLightning](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RagingLightning](https://discourse.processing.org/u/RagingLightning)\
**Post date:** [February 17, 2019, 8:49am UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/6 "2019-02-17T08:49:21Z")

</div>

Thanks for your advice, but my problem still persists where a light area appears where the bottom is visible through the top.

 ![2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/1/1c8f6b58e1918d96aeb0178c4c422837e858f0f5.jpeg)

but it doesn’t appear to be happening when it is a highet level in the background [Image](https://ibb.co/G02Cdnx)

[without light area, for reference](https://ibb.co/C831QQk)

I’m wondering; is it possible to probhibit a shape to be visible through itself causing those areas to get darker…?

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [February 17, 2019, 9:06am UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/7 "2019-02-17T09:06:26Z")

</div>

?? you started with transparency

```auto
fill(0, 255, 0, 127);

```

did you try without?  
or is it that default inside / outside rendering look?  
i have no idea where it comes from and how to change

when i wanted a different inside and outside color  
i draw it 2 times, the second / with a other color / some pix bigger.

or you go the next step using texture.

---

<div class="post-metadata">

**Author:** ![RagingLightning](https://avatars.discourse-cdn.com/v4/letter/r/439d5e/32.png) [@RagingLightning](https://discourse.processing.org/u/RagingLightning)\
**Post date:** [February 17, 2019, 9:10am UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/8 "2019-02-17T09:10:25Z")

</div>

Yes, I want transparency so that i can see some other objects behind that, but i don’t want the back of the hemisphere to affect the transparency -\> everything should be tinted the same way at any rotation…

---

<div class="post-metadata">

**Author:** ![jeremydouglass](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/jeremydouglass/32/20_2.png) [@jeremydouglass](https://discourse.processing.org/u/jeremydouglass)\
**Post date:** [February 20, 2019, 7:41pm UTC](https://discourse.processing.org/t/semicircle-drawing-producing-artifacts/8444/9 "2019-02-20T19:41:00Z")

</div>

It seems that you don’t want a transparent sphere – what you want is to make an opaque image of a sphere, then make that flat image transparent. For example, you could do this by drawing the image opaquely onto a PGraphics, then setting transparency and drawing the image onto your main sketch canvas.

There are also various depth hints like that you might try playing around with:

hint(DISABLE\_DEPTH\_MASK)  
hint(ENABLE\_DEPTH\_MASK)  
hint(ENABLE\_DEPTH\_TEST)  
hint(DISABLE\_DEPTH\_TEST)