Coding Challenge #58: 3D Earthquake Data Visualization

In this Coding Challenge, I follow up on the Earthquake Data Visualization challenge ( and create a 3D version in Processing(Java) using spherical coordinates. I also discuss some 3D vector math including the cross product.

Support this channel on Patreon:

Send me your questions and coding challenges!:

The Coding Train website:

Links discussed in this video:
Spherical Coordinates System on Wikipedia:
USGS Earthquake Data:
Cross Product Diagram:
Natural Earth Texture Maps:
Nasa Earth Maps:
Euler Angle on Wikipedia:
Quaternions and spatial rotation on Wikipedia:

Source Code for the all Video Lessons:


For More Coding Challenges:
For an Intro to Programming using p5.js:
For more videos about p5.js and Data:

Help us caption & translate this video!






46 responses to “Coding Challenge #58: 3D Earthquake Data Visualization”

  1. Ilayda Hanci Avatar

    where can I find the code or the video with the rotated earth texture to correct the data position on it?

  2. shuhan zhou Avatar

    when I am inputing rotateY(angle), an error occurs, and it says the variable angle does not exist

  3. SHUANG XIA Avatar

    great job! thank u !

  4. SheRhy Avatar

    the intro's become smoother haha

  5. Nathan Chambers Avatar

    if you have to run when u say Quaternion, you would have one heck of a time trying to do a Unity3D tutorial 😛

  6. The Game Developer Avatar

    Can you pls make a processing game tutorial.

  7. Val Avatar

    Hey Dan, I've been trying to make a 3D game in Processing, and I have to say, it's really difficult! It's a fun challenge, though (since I don't know how to change the position of the camera without PeasyCam, and I'm not using PeasyCam because of the admittedly horrible roll control.) So far, I have an interface called WorldObject, and two WorldObjects (the Player and a Cube). I figured out how to draw cubes at the proper location only a few days ago (thank pushMatrix() )

  8. zhong kevin Avatar

    what language is it?

  9. my name Avatar

    one dislike ? must be a c# guy

  10. Slick Avatar

    What programming language is this, and compiler?

  11. Daniel Astillero Avatar

    Three things: It's either (1) Neural Networks are really ridiculously difficult to learn; (2) Siraj (no intention to undermine his greatness) unfortunately doesn't have your talent in explaining things clearly, succinctly, and effectively; or (3) I just suck at Neural Networks.

    But please give it a try. Please do Neural Nets!

  12. Charbel Sarkis Avatar

    why did he add pi/2 the wikipedia page said pi*2 and i think he got longitude and latitude a little wrong

  13. John Avatar

    "Sounds like a terrible idea but I'm going to do it anyways". That's so me hahaha

  14. Desprez Hugo Avatar

    Hi, great tutorial! I was wondering what would you change in the code to have a more "European point of view", like when the sphere rotates, you should be able to see France in the middle and not close to the top… ?

  15. Lawrance T.P Avatar

    Good job..make python videos would be really helpful..

  16. Lawrance T.P Avatar

    Good job..make python videos would be really helpful..

  17. Typical Lucas Avatar

    hamagad, its a rectangular prism. A prisssmmm. I love your videos, thanks for making them!

  18. Diamonddrake Avatar

    The division operation is trivially slower, except when dividing by powers of 2 right? Binary representation, right shift operation. Compiler should be smart enough to do that. (In this case the JVM does it)

  19. Aman Gupta Avatar

    Dividing by powers of 2 is always fast since it's just a bit shift, the compiler will optimise that for us (I think), so /2 would work faster than *0.5, and it also looks cleaner 🙂

  20. zwilliamsdev Avatar

    If you don't say Metal Gear every time he says Ray you are wrong

  21. Sam Kelly Avatar

    Is cuboid the word you were wanting?

  22. Joao Espanca Bacelar Avatar

    This will correct the GPS positions :

    theta = radians(lat) + PI/2;
    phi = radians(-lon) + PI;
    // and after beatenkevin1995:
    x = r * sin(theta) * cos(phi);
    y = r * cos(theta);
    z = r * sin(theta) * sin(phi);

  23. Quickpinguin Avatar

    really like your work with geocoded data. especially because i'm a student in the field of computer science and geography 😀

  24. realcygnus Avatar

    very slick job Dan ! …..I'd use the cylinder primitive instead(as a 1st choice for demo/test)….good thing u didn't get involved with the quad(for this tut)LOL @ your regular tangents ….& change radius & height & color based on mag(logarithmic or not?), if/when you revisit this yet again ……as an old c cat, I'm still blown away by processing & P5/js… something this cool can be done in like a page of code & so quickly & easily …..really great channel !

  25. Gurkensohn Avatar

    Hey Daniel, I have a question for you that has nothing to do with this video. ^^
    Would you recomment to use new ArrayList<Foo>(fooList) in a foreach loop in order to avoid a CurrentModificationException? I don't know but I think this is very compilant and I wonder if there is a better and faster way. Oh and btw, a toAdd and toRemove list is not what I am searching for. ^^

  26. Pablo Martin Avatar

    in the box step i get the box leaving like a shadow behind it. like it is leaving a path. not like in the video that just rotates.

  27. Benjamin TG Avatar

    Can someone tell me why this isn't working? I'm a new noob and need some advice!

    I'm trying make loads of red circles appear on the page.

    It keeps saying w and x is undefined?

    I've tried to just put 'width' and 'height' into the push array, but still nothing. I'm using p5.js.

    function setup() {
    var w = width;
    var h = height;

    var mc = 100;
    var circles = [];

    for (i = 0; i < mc; i++) {

    x: Math.random() * w,
    y: Math.random() * h,
    diameter: Math.random() * 1,

    function draw() {


    for (i = 0; i < mc; i++)
    var c = circles[i];
    ellipse(c.x, c.y, c.diameter, c.diameter);

  28. Christoffer Hjärtström Avatar

    Why do I get the feeling that you are on drugs?

  29. Scott P Avatar

    Could you do another coding challenge that updates live as the earthquakes happen.

  30. theExtinctGamer Avatar

    Can you make videos about python too?

  31. Weed Avatar

    OMG I LOVE processing it was the first language I learned and I use it everyday :>

  32. Ovni121 Avatar

    I too want to run away when I hear quaternion

  33. beatenkevin1995 Avatar

    Shouldn't the equations be:
    x = rsin(theta)cos(phi)
    y = rcos(theta)
    z = rsin(theta)sin(phi)
    if the y direction is vertically up and the z direction in out of the screen, since it is usually the opposite in calculus?

  34. Ken Haley Avatar

    Also, once your applied the earth image texture, I'd drop the lights(), so the geography shows up a little better.

  35. OMRI7919 Avatar

    I dont remember the last time I saw a video with 0 dislikes. Great content!

  36. Ken Haley Avatar

    Considering you already have phi and theta, can't you use those as your rotate angles, instead of going through all that cross-product stuff, etc.? I haven't tried it, but it seems like that would work…

  37. Rodolfo Ribeiro Gonçalves Avatar

    a rectangle box is called parallelepiped

  38. SuperRoli123 Avatar

    great video (as usual)! keep going 😉


    15:34 – Why do you use a for-each loop in java but not in js?!

    Also the keying is off, you are slightly transparent.

  40. reububble Avatar

    You really didn't need to add to the angles after converting them to radians. That's almost certainly why the locations are skewed. Lines 41 and 42 of CC_58_EarthQuakeViz3D.pde

Leave a Reply

Your email address will not be published. Required fields are marked *