/* 
 * BUBBLE GUM
 * Shader Exp XXXII.
 *
 * - Press buttons to change the gum's flavor: sweet vs. sour <3.
 *
 * Follow my shader experiments here:
 * https://github.com/ilithya/anydayshaders
 * https://twitter.com/hashtag/anydayshaders
 * https://www.instagram.com/explore/tags/anydayshaders/
 *
 * #061 - #100DaysOfCode
 * By ilithya | 2020
 * https://www.ilithya.rocks/
 * https://twitter.com/ilithya_rocks
 */

// GLOBAL
const nearDist = 1;
const farDist = 100;
const camera = new THREE.PerspectiveCamera(
	45,
	window.innerWidth / window.innerHeight,
	nearDist,
	farDist
);
const scene = new THREE.Scene();
const renderer = new THREE.WebGLRenderer();
const canvasWrapper = document.querySelector("#canvas-wrapper");
const clock = new THREE.Clock();
const zpos = farDist/4;

const init = () => {	
	camera.position.y = -0.5;	
	camera.position.z = zpos;	

	renderer.setClearColor('hotpink');
	renderer.setPixelRatio(window.devicePixelRatio);
	renderer.setSize(window.innerWidth, window.innerHeight);

	canvasWrapper.appendChild(renderer.domElement);
};
init();

// MATERIAL
const vertexShader = document.querySelector("#vertex").textContent;
const fragmentShader = document.querySelector("#fragment").textContent;
const uniSweet1 = { type: "v3", value: new THREE.Vector3(0.5, 0.0, 0.5) }; // purple
const uniSweet2 = { type: "v3", value: new THREE.Vector3(1.0, 0.41, 0.71) }; // hotpink
const uniSour1 = { type: "v3", value: new THREE.Vector3(0.90, 0.8, 0.30) }; // yellow
const uniSour2 = { type: "v3", value: new THREE.Vector3(1.0, 0.54, 0.40) }; // orange
const uniforms = {
	u_c1: uniSweet1,
	u_c2: uniSweet2,
	u_time: { type: "f", value: 1.0 },
};
const shaderMaterial = new THREE.ShaderMaterial({
	uniforms,
	fragmentShader,
	vertexShader,
});

// BACKGROUND
const bgWidth = window.innerWidth; // I wanted a big number here
const bgHeight = window.innerHeight; // Here too :)
/* FYI - the sizes of this plane are far too big in comparison with the actual width and height of our 3d camera */
const bgGeometry = new THREE.PlaneBufferGeometry(bgWidth, bgHeight);
const bgMesh = new THREE.Mesh(bgGeometry, shaderMaterial);
scene.add(bgMesh);

// BUBBLE GUM
const gumRadius = 5;
const gumGeometry = new THREE.SphereBufferGeometry(
	gumRadius,
	gumRadius * 6.4,
	gumRadius * 6.4
);
const gum = new THREE.Mesh(gumGeometry, shaderMaterial);
scene.add(gum);

// TOGGLE BUBBLE GUM'S FLAVOR
const toggle = {
	btnColor: document.querySelectorAll("#toggle-color button"),
	updateMaterial(mode) {		
		const defaultMode = 'sweet';
		
		shaderMaterial.uniforms.u_c1 = mode === defaultMode ? uniSweet1 : uniSour1;
		shaderMaterial.uniforms.u_c2 = mode === defaultMode ? uniSweet2 : uniSour2;
		shaderMaterial.uniformsNeedUpdate = true;
	},
	checkActiveBtnColor() {
		this.btnColor.forEach((el) => {
			el.addEventListener("click", (e) => {
				e.preventDefault();

				const target = e.currentTarget;

				this.btnColor.forEach((l) => delete l.dataset.active);
				target.dataset.active = true;

				this.updateMaterial(target.dataset.mode);
			});
		});
	}
};
toggle.checkActiveBtnColor();

// SCREEN RESIZE
const onWindowResize = () => {
	const w = window.innerWidth;
	const h = window.innerHeight;
	
	camera.aspect = w / h;
	camera.updateProjectionMatrix();

	renderer.setSize(w, h);	
};
window.addEventListener("resize", onWindowResize);

// CREATE ANIMATIONS
const createAnimShaders = () => uniforms.u_time.value = clock.getElapsedTime();

// RENDER BUBBLE GUM
const render = () => {	
	createAnimShaders();
	renderer.render(scene, camera);
	requestAnimationFrame(render);
};
render();