// ui
const smileButton = document.querySelector("#smile-button");
const madButton = document.querySelector("#mad-button");
const sadButton = document.querySelector("#sad-button");
const mehButton = document.querySelector("#meh-button");
const evilButton = document.querySelector("#evil-button");
const wowButton = document.querySelector("#wow-button");
// graphics
const mouf = document.querySelector("#mouf");
const eyebrow = document.querySelector("#eyebrow");
const leftEye = document.querySelector("#left-eye");
const rightEye = document.querySelector("#right-eye");
const tweenDur = 0.5;
const mouthPoints = {
leftX: 200,
leftY: 250,
rightX: 300,
rightY: 250,
midX: 250,
midY: 250
};
const mouthMeh = {
leftX: 210,
leftY: 250,
rightX: 290,
rightY: 250,
midX: 250,
midY: 250
};
const mouthSmile = {
leftX: 210,
leftY: 225,
rightX: 290,
rightY: 225,
midX: 250,
midY: 275
};
const mouthFrown = {
leftX: 210,
leftY: 250,
rightX: 290,
rightY: 250,
midX: 250,
midY: 225
};
const mouthWow = {
leftX: 248,
leftY: 250,
rightX: 252,
rightY: 250,
midX: 250,
midY: 250
};
const eyebrowPoints = {
leftX: -10,
leftY: 0,
rightX: 10,
rightY: 0,
midX: 0,
midY: -10
};
const eyebrowMeh = {
leftX: -10,
leftY: 0,
rightX: 10,
rightY: 0,
midX: 0,
midY: -10
};
const eyebrowFrown = {
leftX: -10,
leftY: -5,
rightX: 10,
rightY: 5,
midX: 0,
midY: -5
};
const eyebrowSmile = {
leftX: -10,
leftY: 5,
rightX: 10,
rightY: -5,
midX: 0,
midY: 5
};
const eyebrowWow = {
leftX: -10,
leftY: -10,
rightX: 10,
rightY: -20,
midX: 0,
midY: -30
};
const eyePoints = {
r: 8
};
const eyesWideOpen = {
r: 14
};
const eyesNormal = {
r: 9
};
const eyesBeedie = {
r: 3
};
initUI();
function initUI() {
smileButton.addEventListener("click", () => {
smile();
});
madButton.addEventListener("click", () => {
mad();
});
sadButton.addEventListener("click", () => {
sad();
});
mehButton.addEventListener("click", () => {
meh();
});
evilButton.addEventListener("click", () => {
evil();
});
wowButton.addEventListener("click", () => {
wow();
});
}
function changeMouth(newPoints) {
gsap.to(mouthPoints, {
leftX: newPoints.leftX,
leftY: newPoints.leftY,
rightX: newPoints.rightX,
rightY: newPoints.rightY,
midX: newPoints.midX,
midY: newPoints.midY,
duration: tweenDur,
ease: "sine.inOut",
onUpdate: () => {
updateMouth();
}
});
}
function changeEyebrow(newPoints) {
gsap.to(eyebrowPoints, {
leftX: newPoints.leftX,
leftY: newPoints.leftY,
rightX: newPoints.rightX,
rightY: newPoints.rightY,
midX: newPoints.midX,
midY: newPoints.midY,
duration: tweenDur,
ease: "sine.inOut",
onUpdate: () => {
updateEyebrows();
}
});
}
function changeEyes(newPoints) {
gsap.to(eyePoints, {
r: newPoints.r,
duration: tweenDur,
ease: "sine.inOut",
onUpdate: () => {
updateEyes();
}
});
}
function smile() {
changeMouth(mouthSmile);
changeEyebrow(eyebrowSmile);
changeEyes(eyesNormal);
}
function mad() {
changeMouth(mouthFrown);
changeEyebrow(eyebrowFrown);
changeEyes(eyesBeedie);
}
function sad() {
changeMouth(mouthFrown);
changeEyebrow(eyebrowSmile);
changeEyes(eyesNormal);
}
function meh() {
changeMouth(mouthMeh);
changeEyebrow(eyebrowMeh);
changeEyes(eyesNormal);
}
function evil() {
changeMouth(mouthSmile);
changeEyebrow(eyebrowFrown);
changeEyes(eyesBeedie);
}
function wow() {
changeMouth(mouthWow);
changeEyebrow(eyebrowWow);
changeEyes(eyesWideOpen);
}
function updateMouth() {
const pathString = `M ${mouthPoints.leftX},${mouthPoints.leftY} Q ${mouthPoints.midX},${mouthPoints.midY} ${mouthPoints.rightX},${mouthPoints.rightY}`;
mouf.setAttribute("d", pathString);
}
function updateEyebrows() {
const pathString = `M ${eyebrowPoints.leftX},${eyebrowPoints.leftY} Q ${eyebrowPoints.midX},${eyebrowPoints.midY} ${eyebrowPoints.rightX},${eyebrowPoints.rightY}`;
eyebrow.setAttribute("d", pathString);
}
function updateEyes() {
leftEye.setAttribute("r", eyePoints.r);
rightEye.setAttribute("r", eyePoints.r);
}