3D Scatter Plot XYZ

andrianopolino

Hello all,

I would like to create 3D scatter plot like this

Can you pls help me to understand "how to"?

Unfortunately I don't even know how to start, so the first step could be to create a static 3d scatter plot, for now the "interactive version" of the graph can wait, I can implement it just a little later!

Thank you very much in advance for your help!

Best Regards

amnon

This is suitable as a beginner project because it quite easy to realise. To gain basic knowledge to be able to do this take a look at the tutorials on the processing front page, the examples that come with Processing and the reference.

Things you will need (to know): background(), lights(), line(), sphere(), fill(), noStroke(), stroke(), translate(), pushMatrix(), popMatrix(), for loops, array or arrayList, random(), float or PVector and text(). The interactive camera is easy to implement (in 2 lines of code) using the peasycam library.

The 3 axis grids can be created using for loops, pushMatrix, popMatrix, stroke and line. The spheres can be created using random, storing the coordinates in float or PVector arrays or arraylists, sphere and lights (to get smooth colors). The text can be created using basic text options available in processing (see examples or reference).

Chrisir

Yeah, there is even a tutorial on 3D

https://forum.processing.org/tutorials

andrianopolino

At first thank you very much for your support!

Here below you can find the result of the sketch all kind of advices is well accepted :)

import peasy.*;

PeasyCam cam;

void setup() {
  size(500,500,P3D);
  cam = new PeasyCam(this, 500);
  cam.setMinimumDistance(100);
  cam.setMaximumDistance(1000);


}
void draw() { 

  color blue = color (0,0,255);
  color yellow = color (255,255,0);

  rotateX(-.001);
  rotateY(-.001);
  background(255);
  translate(0,0,0);


  pushMatrix();
    fill(200);
  rect(0,0,125,125);

  // asse x
  stroke(0,100,0); 
  line(0, 0, 0, 150, 0, 0);
  fill(0,100,0);
  text("X Axis",140,-5,0);

  stroke(200);
  line(0, 0, 10, 100, 0, 10);
  line(0, 0, 20, 100, 0, 20);
  line(0, 0, 30, 100, 0, 30);
  line(0, 0, 40, 100, 0, 40);
  line(0, 0, 50, 100, 0, 50);


  stroke(255,0,0);
  line(0, 0, 0, 0, 150, 0);

  pushMatrix();
  rotate(-HALF_PI);
  fill(255,0,0);
  text("Y Axis",-160,-5,0);
  popMatrix();



  stroke(200);
  line(0, 0, 10, 0, 100, 10);
  line(0, 0, 20, 0, 100, 20);
  line(0, 0, 30, 0, 100, 30);
  line(0, 0, 40, 0, 100, 40);
  line(0, 0, 50, 0, 100, 50);





stroke(0,0,255);
line(0, 0, 0, 0, 0, 150);
pushMatrix();
  rotateY(-HALF_PI);
  fill(0,0,255);
  text("Z Axis",140,-5,0);
  popMatrix();



stroke(200);
line(10, 0, 0, 10, 0, 100);
line(20, 0, 0, 20, 0, 100);
line(30, 0, 0, 30, 0, 100);
line(40, 0, 0, 40, 0, 100);
line(50, 0, 0, 50, 0, 100);
line(0, 10, 0, 0, 10, 100);
line(0, 20, 0, 0, 20, 100);
line(0, 30, 0, 0, 30, 100);
line(0, 40, 0, 0, 40, 100);
line(0, 50, 0, 0, 50, 100);


translate(10, 10, 10);
noStroke();
lights();
fill(0,255,0);
sphere(5);


translate(25, 10, 50);
noStroke();
lights();
fill(blue);
sphere(5);

translate(25, 30, 10);
noStroke();
lights();
fill(255,0,0);
sphere(5);

translate(75, 10, 50);
noStroke();
lights();
fill(yellow);
sphere(5);

translate(0,0,50);
popMatrix();

printCamera();
}

amnon

Good start. Suggestions:

• Use a for loop for the multiple line calls
• Define the colors as global variables instead of each draw()
• You only need one call to lights() in your draw() loop
• Some superfluous code: 18, 19, 21, 24, 112, 113 + extra lights() calls
• Consider using arrays/arraylists, with 4 points this will work, but what about 100?

Chrisir

looks cool!

try to use more comments. Not how the commands work but what is happening in the next lines (// draw x-axis etc.)

try to make modules into functions.

your draw could be:

void draw() { 
  background(255);
  coordinateDraw() ;
  spheresDraw();
  printCamera();
}

Greetings, Chrisir ;-)