# Points on the surface of a Sphere using beginShape(POINTS or QUADS)

**URL:** https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425
**Category:** Coding Questions
**Created:** [January 1, 2022, 11:45pm UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425 "2022-01-01T23:45:03Z")
**Posts on this page:** 9
**Page:** 1

<div class="post-metadata">

### Author: ![companje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/companje/32/2418_2.png) [@companje](https://discourse.processing.org/u/companje)
#### Post date: [January 1, 2022, 11:45pm UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/1 "2022-01-01T23:45:03Z")

</div>

Hi everyone,

I’m looking for a way to draw a couple of thousands of points on the surface of a sphere. beginShape/endShape feels like an efficient way to draw them. For example as POINTS with strokeWeight(10). However, this makes them always face the camera instead of being perpendicular to the sphere. I was hoping setting the `normal` before the `vertex` would help but it seems not to.

I can think of two other ways to do it. But I was wondering if it can be done differently.

1. using polar coordinates: rotate(…) followed by a translate(0,0,z)
2. manually calculating the 4 corners of a quad perpendicular to the sphere (using crossproduct for this ?)

What do you think would be the best way to have the points perpendicular to the sphere’s surface?

Best wishes,  
Rick

 ![sphere](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/089c8b28b25178c2e653f330e9059407a590a0a4.jpeg)

```auto
PVector points[] = new PVector[1000];

void setup() {
  size(600, 600, P3D);
    stroke(255);
  strokeWeight(10);
  noFill();
  for (int i=0; i<points.length; i++) {
    points[i] = PVector.random3D().mult(300);
  }
}

void draw() {
  ortho();
  background(0);
  translate(width/2, height/2);
  rotateY(mouseX*.01);
  rotateX(mouseY*.01);
  beginShape(POINTS);
  for (PVector v : points) {    
    vertex(v.x, v.y, v.z);    
  }
  endShape();
}

```

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 1, 2022, 11:46pm UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/2 "2022-01-01T23:46:44Z")

</div>

I don’t think that points are the right path

What about using circle() and rotate them correctly?

---

<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: [January 2, 2022, 12:05am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/3 "2022-01-02T00:05:44Z")

</div>

Hello @companje,

Explore the PVector resources:

- [https://processing.org/](https://processing.org/)
- [https://processing.org/tutorials/pvector](https://processing.org/tutorials/pvector)
- [https://processing.org/reference/PVector.html](https://processing.org/reference/PVector.html)
- [The Nature of Code](https://natureofcode.com/book/chapter-1-vectors/)

Consider this simple example:

```auto
PVector v;

void setup() 
  {
  size(600, 600, P3D);
  translate(width/2, height/2);
  v = new PVector(0, 0, 0);
  strokeWeight(5);
  for(int i = 0; i<1000; i++)
    {
    v.set(random(-1,1), random(-1, 1), random(-1, 1));
    v.normalize();
    v.mult(200);
    point(v.x, v.y, v.z);
    }  
  }

```

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

Back to workout…

Working mind and body at the same time!

`:)`

---

<div class="post-metadata">

### Author: ![companje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/companje/32/2418_2.png) [@companje](https://discourse.processing.org/u/companje)
#### Post date: [January 2, 2022, 12:13am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/4 "2022-01-02T00:13:49Z")

</div>

Dear GLV,

Thanks for your response. I think your code is quite identical to my approach. Please see me screenshot and source code. I am already using the PVector functions you suggest. My problem is (as well as in your code) that all the dots point in the same direction (towards the screen) instead of ‘facing outwards from the center’.

Best wishes,  
Rick

---

<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: [January 2, 2022, 12:20am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/5 "2022-01-02T00:20:11Z")

</div>

> [@companje](#):
>
> I think your code is quite identical to my approach

That it is! I cooked this up quickly and did not look at your code.

I will take another look later…

`:)`

---

<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: [January 2, 2022, 12:23am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/6 "2022-01-02T00:23:36Z")

</div>

Hello,

Take a look here at the Cartesian Coordinates:

> **[Spherical coordinate system](https://en.wikipedia.org/wiki/Spherical_coordinate_system)**
>
> In mathematics, a spherical coordinate system is a coordinate system for three-dimensional space where the position of a point is specified by three numbers: the radial distance of that point from a fixed origin, its polar angle measured from a fixed zenith direction, and the azimuthal angle of its orthogonal projection on a reference plane that passes through the origin and is orthogonal to the zenith, measured from a fixed reference direction on that plane. It can be seen as the three-dimensi...

I used my original example for the random points, a translate, a rotate for _phi_ and a rotate for _theta_ and then drew a circle():

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

This approach was fresh in my head from a recent project.

`:)`

---

<div class="post-metadata">

### Author: ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)
#### Post date: [January 2, 2022, 10:15am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/7 "2022-01-02T10:15:51Z")

</div>

As I said, I don’t think that points can be rotated properly so circle is better

---

<div class="post-metadata">

### Author: ![companje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/companje/32/2418_2.png) [@companje](https://discourse.processing.org/u/companje)
#### Post date: [January 2, 2022, 10:22am UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/8 "2022-01-02T10:22:07Z")

</div>

And what about QUADS? I really would like to use beginShape/endShape so I can calculate my vertices up-front and render them in batch. That should be much faster than orienting and drawing thousands of circles.  
I’m now trying to figure out how to calculate the 4 four corners of a quad using the cross-product. I’ll keep you posted.

---

<div class="post-metadata">

### Author: ![companje](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/companje/32/2418_2.png) [@companje](https://discourse.processing.org/u/companje)
#### Post date: [January 2, 2022, 7:52pm UTC](https://discourse.processing.org/t/points-on-the-surface-of-a-sphere-using-beginshape-points-or-quads/34425/9 "2022-01-02T19:52:16Z")

</div>

I’m happy now! 🙂 I use the **cross product** to calculate a local coordinate space perpendicular to the sphere. I add all vertices in `setup()` to a `PShape` and only call `shape(dots)` to draw them all at once in `draw()`.

I hope it is useful for others.

Best wishes,  
Rick

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

```auto
float dotRadius = 4;
float sphereRadius = 250;
PShape dots;

void setup() {
  size(700, 700, P3D);

  dots = createShape(GROUP);
  for (int i=0; i<1000; i++) {
    PVector n = PVector.random3D().mult(sphereRadius);

    //create an 'up' vector. it should not point in the same direction as the the normal
    PVector up = abs(n.x)<.99 ? new PVector(1, 0, 0) : new PVector(0, 1, 0); 

    //calculate local coordinate space using the crossproduct
    PVector t = n.cross(up).normalize(); //local x axis (red)
    PVector b = t.cross(n).normalize(); //local y axis (green)

    //draw circle perpendicular to sphere's surface
    PShape dot = createShape();
    dots.setStroke(false);
    dot.beginShape();
    for (int j=0, jj=16; j<=jj; j++) {
      float a = float(j)/jj * TWO_PI;
      float x = cos(a) * dotRadius;
      float y = sin(a) * dotRadius;
      vertex(dot, t.copy().mult(x).add(b.copy().mult(y)).add(n)); //(t*x)+(b*y)+n
    }
    dot.endShape();
    dots.addChild(dot);
  }
}

void draw() {
  background(0);
  translate(width/2, height/2);
  rotateX(mouseY*.01);
  rotateY(mouseX*.01);
  fill(0, 128, 200);
  noStroke();
  sphere(sphereRadius);
  shape(dots);
}

void vertex(PShape s, PVector p) {
  s.vertex(p.x, p.y, p.z);
}

```
