Welcome Globe Code

G_G061

I would like to have an interactive version of s.th. like this:

https://stackoverflow.com/questions/28387116/write-text-on-sphere-surface-scenekit

or

gograph.com/illustration/hello-sphere-word-tiles-global-languages-cultures-gg64665945.html

The following example should clarify in which direction I want to go:

mrdoob.com/lab/javascript/threejs/css3d/periodictable/ (click on sphere)

I want to know if someone here could help me to realize this.

kfrajer

Check these two posts:

https://forum.processing.org/two/discussion/21434/orientate-cubes-to-face-target-a-common-point#latest
https://forum.processing.org/two/discussion/comment/84712/#Comment_84712

Kf

G_G061

Thank you for the links. Unfortunately, it seems to be too complicated for me. Could you create what I want for my website? Maybe I can offer you a small (student (me) adjusted) compensation? (e.g. 20-30$ ?)

kfrajer

Here is the demo, both in p5.js and Processing (java):

http://p5js.sketchpad.cc/sp/pad/view/ZakHsameOX/latest

Kf

---

P5.js

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, 100);
      noStroke();
      fill(255, 0, 0);
      box(4, 6, 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();
}

---

Processing

import peasy.*; 
PeasyCam cam;

void setup() 
{

  // ------------------------------------- CAM SETTINGS ----------------------------------------------------
  size(800, 600, P3D);
  cam = new PeasyCam(this, 0, 0, 0, 280);  
  cam.setMinimumDistance(100);
  cam.setMaximumDistance(380);
  cam.setYawRotationMode();  // cam will only rotate around the rigs(lookAt point) Y axis UNLESS shift is held
}


void draw() 
{
  background(0);
  lights(); 

  for (int theta = 0; theta <360; theta+=20) {
    for (int phi = 0; phi <360; phi+=15) {
      pushMatrix();
      rotateY(radians(theta));
      rotateX(radians(phi));
      translate(0, 0, 100);
      noStroke();
      fill(255, 0, 0);
      box(4, 6, 2);      
      popMatrix();
    }
  }



  stroke(3);
  fill(255);
  box(8, 10, 2);
  //popMatrix();


  //noStroke();
  //fill(255, 0, 0);
  //sphere(30);

  pushMatrix();
  translate(45, 5, 5);
  fill(250, 250, 25);
  box(90, 5, 5);
  popMatrix();

  pushMatrix();
  translate(5, 45, 5);
  fill(25, 250, 25);
  box(5, 90, 5);
  popMatrix();

  pushMatrix();
  translate(5, 5, 45);
  fill(25, 25, 250);
  box(5, 5, 90);
  popMatrix();
}

jeremydouglass

Note that people on the forum also post work-for-hire here:

https://forum.processing.org/two/categories/events-opportunities

In general discussion it is usually assumed that you are wanting to learn to do things yourself.

Chrisir

not fully sure but I think with the code above we cover each tile twice?

Look here:

import peasy.*; 
PeasyCam cam;

PFont f1; 

void setup() 
{

  // ------------------------------------- CAM SETTINGS ----------------------------------------------------
  size(800, 600, P3D);
  cam = new PeasyCam(this, 0, 0, 0, 280);  
  cam.setMinimumDistance(100);
  cam.setMaximumDistance(380);
  cam.setYawRotationMode();  // cam will only rotate around the rigs(lookAt point) Y axis UNLESS shift is held

  // text 
  f1 = createFont("Arial", 11);
  textFont(f1);
}


void draw() 
{
  background(0);
  lights(); 
  textFont(f1); 

  int i=0; 
  for (int theta = 0; theta <360; theta+=20) {
    for (int phi = 0; phi <360; phi+=30) {
      pushMatrix();
      rotateY(radians(theta));
      rotateX(radians(phi));
      translate(0, 0, 100);
      noStroke();
      fill(255, 0, 0);//red
      box(18, 16, 2);
      textAlign(CENTER, CENTER); 
      textMode(SHAPE); 
      fill(0); //black
      translate(0, 0, 3);
      text(int(i), 0, 0);
      popMatrix();
      i++;
    }
  }



  stroke(3);
  fill(255);
  box(8, 10, 2);
  //popMatrix();


  //noStroke();
  //fill(255, 0, 0);
  //sphere(30);

  pushMatrix();
  translate(45, 5, 5);
  fill(250, 250, 25);
  box(90, 5, 5);
  popMatrix();

  pushMatrix();
  translate(5, 45, 5);
  fill(25, 250, 25);
  box(5, 90, 5);
  popMatrix();

  pushMatrix();
  translate(5, 5, 45);
  fill(25, 25, 250);
  box(5, 5, 90);
  popMatrix();
}

koogs

this is covering each tile twice

for (int theta = 0; theta <360; theta+=20) {
  for (int phi = 0; phi <360; phi+=30) {

one of those only needs to be 180 degrees. latitude only goes from 90N to 90S

kfrajer

Yes, that is correct. Processing does not have a standard reference frame. I am not sure how this affects the directions of the angles. So, I went the easy way and set both 360 and presented a limited acceptable solution. You can go ahead and solve the bug.

Kf

kfrajer

Here are two possible solutions:

  for (int theta = 0; theta <180; theta+=20) {
    for (int phi = 0; phi <360; phi+=30) {

or

  for (int theta = 0; theta <360; theta+=20) {
    for (int phi = 0; phi <180; phi+=30) {
      pushMatrix();
      rotateX(radians(phi));
      rotateY(radians(theta));

However, one is more suitable than the other pending on circumstances.

Kf

Chrisir

i also noted that the text was upside down in 50 % logically

kfrajer

@Chrisir If the OP wants to continue, I will fix it. I believe I did the hardest part of this demo.

Kf

Chrisir

indeed, you did!