free earth globe spinning slowly gif animated

IPhone Xs Max, iPhone 11 Pro Max: 1242x2688

IPhone X, iPhone Xs, iPhone 11 Pro: 1125x2436 IPhone 6 plus, iPhone 6s plus, iPhone 7 plus, iPhone 8 plus: 1242x2208 IPhone 6, iPhone 6s, iPhone 7, iPhone 8: 750x1334 IPhone 5, iPhone 5s, iPhone 5c, iPhone SE: 640x1136 IPhone: iPhone 2G, iPhone 3G, iPhone 3GS: 320x480 PlaceHolderAnim.MacBook Pro 13.3' Retina, MacBook Air 13' Retina, MacBook Air 13.3'(2020, M1): 2560x1600 Dual monitor: (keyframesIn, options) Ĭonst placeHolderAnim = placeholder.animate(keyframesOut, options) We start at the south pole and go upwards, calculate the circumference for each latitude, and distribute circles evenly along that line, wrapping around the sphere: for (let lat = -90 lat <= 90 lat += 180/rows) To draw the Earth’s regions, we start by defining the desired density of circles (this will vary depending on the performance of your machine-more on that later), and loop through longitudes and latitudes in a nested for-loop. We don’t use any textures: we point four lights at a sphere, use about 12,000 five-sided circles to render the Earth’s regions, and draw a halo with a simple custom shader on the backside of a sphere. The scene is made up of five layers: a halo, a globe, the Earth’s regions, blue spikes for open pull requests, and pink arcs for merged pull requests.

We feed it data of recent pull requests that have been created and merged around the world through a JSON file. We went through many, many iterations of refinement, and there’s still more work to be done.Īt the most fundamental level, the globe runs in a WebGL context powered by three.js. It was extremely important to us that the globe not only looked inspiring and beautiful, but that it performed well on all devices. Nat had the idea of making each line clickable, which really upleveled the experience and made it much more immersive. We iterated on ways to provide more detail and found most resonance with clear hover states that showed the pull request, repo, timestamp, language, and locations. We started by simply showing the pull requests’ arcs and spires, but quickly realized that we needed “proof of life.” The arcs could quite as easily just be design animations instead of real work.

A showcase of real work happening now.

It turned out to be a beautiful visualization of pull requests being opened in one part of the world and closed in another. We explored many different options, but ultimately landed on pull requests. The main goals we set out to achieve in the design and development of the globe were:

Free earth globe spinning slowly gif animated