Mamboleoo

async function getZipImages(data) {
    const zip = new JSZip();
    let allImagesPromises = data.bytes.flatMap((bytes, i) => {
        // Generate an url from the layer bytes
        const url = URL.createObjectURL(new Blob([bytes]))
        // Create an image from the url
        return new Promise((resolve, reject) => {
            const img = new Image()
            img.onload = () => resolve(img)
            img.onerror = () => reject()

Mamboleoo

<ul>
    <li>
        <a href="/en">EN</a>
    </li>
    <li>
        <a href="/fr">FR</a>
    </li>
    <li>
        <a href="/nl">NL</a>
    </li>

Mamboleoo

const CUBE_VERTICES = [[-1, -1, -1],[1, -1, -1],[-1, 1, -1],[1, 1, -1],[-1, -1, 1],[1, -1, 1],[-1, 1, 1],[1, 1, 1]];
const CUBE_LINES = [[0, 1], [1, 3], [3, 2], [2, 0], [2, 6], [3, 7], [0, 4], [1, 5], [6, 7], [6, 4], [7, 5], [4, 5]];

Mamboleoo

function render(a) {
  ...
   
  // Loop through the dots array and project every dot
  for (let i = 0; i < dots.length; i++) {
    dots[i].project();
  }
  
  // Sort dots array based on their projected size
  dots.sort((dot1, dot2) => {

Mamboleoo

const DOT_RADIUS = 10; // Radius of the dots
let GLOBE_RADIUS = width / 3; // Radius of the globe based on the canvas width

class Dot {
  constructor() {
    this.theta = Math.random() * 2 * Math.PI; // Random value between [0, 2Pi]
    this.phi = Math.acos((Math.random() * 2) - 1); // Random value between [0, Pi]
    
    // The x, y, z coordinates will be calculated in the project() function
    this.x = 0;

Mamboleoo

let GLOBE_RADIUS = width / 3; // Radius of the globe based on the canvas width
class Dot {
  constructor() {
    this.theta = Math.random() * 2 * Math.PI; // Random value between [0, 2Pi]
    this.phi = Math.acos((Math.random() * 2) - 1); // Random value between [0, Pi]
  }
  ...
}

Mamboleoo

class Dot {
  constructor() {
    this.theta = Math.random() * 2 * Math.PI; // Random value between [0, 2Pi]
    this.phi = Math.acos((Math.random() * 2) - 1); // Random value between [0, Pi]
    
    // Calculate the [x, y, z] coordinates of the dot along the globe
    this.x = 0;
    this.y = 0;
    this.z = 0;
    

Mamboleoo

class Dot {
  constructor() {
    ...
    
    TweenMax.to(this, (Math.random() * 10 + 15), {
      z: width,
      repeat: -1,
      yoyo: true,
      ease: Power2.easeOut,
      yoyoEase: true,

Mamboleoo

function render() {
  // Clear the scene from top left to bottom right
  ctx.clearRect(0, 0, width, height);
  
  // Loop through the dots array and draw every dot
  for (var i = 0; i < dots.length; i++) {
    dots[i].draw();
  }
  
  // Request the browser the call render once its ready for a new frame

Mamboleoo

let PERSPECTIVE = width * 0.8; // The field of view of our 3D scene
let PROJECTION_CENTER_X = width / 2; // x center of the canvas
let PROJECTION_CENTER_Y = height / 2; // y center of the canvas
const dots = []; // Store every particle in this array

class Dot {
  constructor() {
    this.x = (Math.random() - 0.5) * width; // Give a random x position
    this.y = (Math.random() - 0.5) * height; // Give a random y position
    this.z = Math.random() * width; // Give a random z position