How to create an sphere to have set of tiles in certain position p5

p5.js Coding Questions
1

Hello all,

I am interested in creating an object that I want to use to hold videos/ or images within but am having great trouble in creating the framework of it.

After looking at multiple forums and posts, I can’t seem to try to figure out the code to what I want to create.


The image of what I want to create attached:

interface
interface.png1484×1194 83.6 KB

The code offers the tiles, but not in the sequence of form I want it to take. I know I need to limit the number of tiles but I am not sure to scale the number of tiles from the top to bottom using the same amount of 5 tiles or how to add the frame around it to make it look as an closed sphere.

 
function setup() {
  createCanvas(640, 640, WEBGL);
}
 
 
function draw() {
  background(0);
    
  //Next emulates yaw motion from Processing's PeasyCam environment
  rotateY(map(mouseX, -width/2, width/2, -PI, PI));
  
 
 
 
  for (var theta = 0; theta <360; theta+=20) {
    for (var phi = 0; phi <360; phi+=15) {
      push();
      rotateY(radians(theta));
      rotateX(radians(phi));
      translate(0, 0, 300);
      noStroke();
      fill(255, 0, 0);
      box(50, 50, 2);      
      pop();
    }
  }
 
 
 
  stroke(3);
  fill(255);
  box(8, 10, 2);
  //popMatrix();
 
  push();
  translate(45, 5, 5);
  fill(250, 250, 25);
  box(90, 5, 5);
  pop();
 
  push();
  translate(5, 45, 5);
  fill(25, 250, 25);
  box(5, 90, 5);
  pop();
 
  push();
  translate(5, 5, 45);
  fill(25, 25, 250);
  box(5, 5, 90);
  pop();
}
1 Like
2

Okay – so what is the sequence you want it to take…? Do you mean the visual order, like left to right, top to bottom?

3

Both in essence, right now the top tiles are kind of mushed together, there are more top tiles that make it look blocky, whereas the middle is spaced out. So top to bottom, and the scale working so it doesn’t mesh into each other.

24%20PM
Screen Shot 2019-04-20 at 12.53.24 PM.png1280×1278 28.4 KB

Thanks for the reply.

4

You have the same number of tiles in each ring. This won’t work on a sphere if your goal is equadistant elements – you can’t have 20 on the top ring and 20 on the middle ring – the equator of a sphere is farther around. You need another approach to subdividing the space – or you need a small number of elements and columns/rows, so that when the distance changes it doesn’t matter except at the very poles. How you do that depends in part on your goals.

What do you want to happen at the poles? Your reference drawing doesn’t say. Are you going to leave the top ring and the pole empty?

5

If instead you want to start from model code for a small number of columns / rows, like your reference drawing, you might want to look at the p5.js sphere().

https://p5js.org/reference/#/p5/sphere

If you modify the reference sketch, you will get something like this:

function setup() {
  createCanvas(100, 100, WEBGL);
}

function draw() {
  background(200);
  sphere(40, 20, 10);
}

and if you look up the source code for “sphere”:

…it is based on ellipsoid, in the same file.

6

Yes but when I reduce the number of tiles the spacing is off, is there a way to combine the first sketch to where the tiles stretch to fit the sphere. Yes, the top ring and poles would empty/ the top of the sphere flat if possible. Sorry just having trouble, when I used the model code how would I be able to implement the peasycam function.

7

Do you mean EasyCam?

Peasycam (which it is based on) is for Processing(Java), not p5.js

Keep in mind that p5.js has a simple built-in camera as well:

https://p5js.org/reference/#/p5/camera

I suggest separating the two problems.

In sketch 1, experiment with a cam with a simple sphere.
In sketch 2, draw your complex 3D sphere image object.
Then combine 1 and 2 – instead of a sphere, draw your object.