console.clear();

const scene = new THREE.Scene();
scene.fog = new THREE.Fog(0x7C71FF, 10, 30);
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.x = 12;
camera.position.y = 7;
camera.position.z = 12;
camera.lookAt(new THREE.Vector3());

const size = 20;
const renderer = new THREE.WebGLRenderer({
  antialias: true
});
renderer.shadowMap.enabled = true;
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setClearColor(0x7C71FF);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry(size, 0.2, size);
const material = new THREE.MeshStandardMaterial({ color: 0x6557ff });
const ground = new THREE.Mesh(geometry, material);
ground.receiveShadow = true;
ground.castShadow = true;
scene.add(ground);

var colors = chroma.scale(['#F83FDE','#FF43A9','#FF717A','#FFA359','#FFD153','#F9F871','#FFD153','#FFA359','#FF717A','#FF43A9','#F83FDE']);

const light = new THREE.HemisphereLight(0xF9F871, 0x7C71FF, 1);
scene.add( light );
const light2 = new THREE.DirectionalLight(0xffffff, 0.5);
light2.castShadow = true;
light2.position.y = 40;
light2.shadow.mapSize.width = 1024;
light2.shadow.mapSize.height = 1024;
light2.shadow.camera.near = 0.5;
light2.shadow.camera.far = 100;
light2.shadow.camera.top = size / 1.5;
light2.shadow.camera.left = -(size / 1.5);
light2.shadow.camera.right = size / 1.5;
light2.shadow.camera.bottom = -(size / 1.5);
scene.add(light2);

const boomMats = [
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('https://www.mamboleoo.be/CodePen/Bounce/boom1.png?v1') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('https://www.mamboleoo.be/CodePen/Bounce/boom2.png?v1') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('https://www.mamboleoo.be/CodePen/Bounce/boom3.png?v1') }),
  new THREE.SpriteMaterial({ depthTest: false, map: new THREE.TextureLoader().load('https://www.mamboleoo.be/CodePen/Bounce/boom4.png?v1') })
];

const sphereGeom = new THREE.IcosahedronGeometry(1, 3);
function createSphere (i) {
  const r = Math.random() * 0.4 + 0.3;
  const material = new THREE.MeshPhongMaterial({
    color: colors(i).hex()
  });
  const sphere = new THREE.Mesh(sphereGeom, material);
  sphere.scale.setScalar(r);
  sphere.r = r;
  sphere.castShadow = true;
  sphere.receiveShadow = true;
  setSphere(sphere);
  return sphere;
}

function createSprite (sphere) {
  const sprite = new THREE.Sprite(boomMats[Math.floor(Math.random() * 4)].clone());
  const scale = 0.8 + Math.random();
  sprite.position.copy(sphere.position);
  sprite.position.y = scale;
  sprite.scale.multiplyScalar(0);
  sprites.add(sprite);
  const bounce = 0.5;
  gsap.timeline({
    onComplete: () => {
      sprites.remove(sprite);
    }
  }).to(sprite.position, {
    x: sphere.position.x + Math.sign(sphere.position.x) * 1,
    y: sphere.position.y + Math.random() + 2,
    z: sphere.position.z + Math.sign(sphere.position.z) * 1,
    duration: 0.8
  }, 0).to(sprite.scale, {
    x: scale,
    y: scale,
    z: scale,
    duration: bounce,
    ease: 'elastic.out(1.2, 0.4)'
  }, 0).to(sprite.material, {
    opacity: 0,
    duration: Math.random() * 02 + 0.2,
    delay: 0.5
  }, 0).to(sprite.scale, {
    x: 0,
    y: 0,
    z: 0,
    duration: Math.random() * 0.2 + 0.1
  }, bounce);
}

function setSphere (sphere) {
  sphere.position.x = (Math.random() - 0.5) * 10;
  sphere.position.y = Math.random() * 30 + 8;
  sphere.position.z = (Math.random() - 0.5) * 10;
  sphere.v = new THREE.Vector3();
  sphere.v.x = (Math.random() - 0.5) * 0.15;
  sphere.v.y = 0;
  sphere.v.z = (Math.random() - 0.5) * 0.15;
}
var gravity = -0.015;
var slow = 0.978;

function moveSpheres () {
  spheres.children.forEach(s => {
    s.v.y += gravity;
    s.v.y *= slow;
    s.position.add(s.v);
    if (
      (s.position.x < (size/2) && s.position.x > -(size/2) && s.position.z < (size/2) && s.position.z > -(size/2)) &&
      s.position.y < (0.1 + s.r)
    ) {
      s.position.y = (0.1 + s.r) + 0.001;
      if (s.v.y < -0.1) {
        createSprite(s);
      }
      s.v.y = -s.v.y;
    }
    /* If sphere is too low */
    if (s.position.y < -40) {
      setSphere(s);
    }
  });
}

let spheres = new THREE.Group();
scene.add(spheres);
let sprites = new THREE.Group();
scene.add(sprites);
for (let i = 0; i < 40; i++) {
  window.setTimeout(() => {
    spheres.add(createSphere(i / 40));
  }, Math.random() * 6000);
}

function animate() {
	requestAnimationFrame(animate);
  moveSpheres();
  
  scene.rotation.y += 0.001;
  
	renderer.render(scene, camera);
}
animate();

function onWindowResize(){
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();
    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);