Skip to content

Instantly share code, notes, and snippets.

@zeddash

zeddash/index.pug

Last active October 24, 2022 21:22
Show Gist options
  • Save zeddash/5d8217bd2866271fc0b0f590acf20b9d to your computer and use it in GitHub Desktop.
Save zeddash/5d8217bd2866271fc0b0f590acf20b9d to your computer and use it in GitHub Desktop.
Download ZIP
Emoting Eyes Exploration #codepen
Raw
index.pug
div.face-container
div.face
div.eye.left
div.lower
div.lid
div.upper
div.lid
div.eye.right
div.lower
div.lid
div.upper
div.lid
Raw
playground.json
{
"scripts": [
"jquery"
],
"styles": [
"https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.2/normalize.css"
]
}
Raw
script.js
console.clear();
let states = {
neutral: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:0
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:0
}
}
},
happy: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:20,
position:40
},
upper:{
rotation:0,
position:0
}
},
right: {
lower:{
rotation:-20,
position:40
},
upper:{
rotation:0,
position:0
}
}
},
sad: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:-20,
position:40
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:20,
position:40
}
}
},
close: {
face: {
rotationX:-20,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:45
},
upper:{
rotation:0,
position:45
}
},
right: {
lower:{
rotation:0,
position:45
},
upper:{
rotation:0,
position:45
}
}
},
angry: {
face: {
rotationX:-10,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:20,
position:40
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:-20,
position:40
}
}
},
confused: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:40
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:0
}
}
},
suspicious: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:-4,
position:20
},
upper:{
rotation:4,
position:20
}
},
right: {
lower:{
rotation:4,
position:20
},
upper:{
rotation:-4,
position:20
}
}
},
pain: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:10,
position:20
},
upper:{
rotation:-10,
position:20
}
},
right: {
lower:{
rotation:-10,
position:20
},
upper:{
rotation:10,
position:20
}
}
},
unamused: {
face: {
rotationX:0,
rotationY:0,
rotationZ:0
},
left: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:40
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:40
}
}
},
unsure: {
face: {
rotationX:0,
rotationY:0,
rotationZ:7
},
left: {
lower:{
rotation:10,
position:20
},
upper:{
rotation:-10,
position:20
}
},
right: {
lower:{
rotation:0,
position:0
},
upper:{
rotation:0,
position:0
}
}
}
}
const setState = state => {
console.log(state);
if(states[state] == undefined) return;
$(".face").attr("style", `
--left-lower-rotation:${states[state].left.lower.rotation}deg;
--left-lower-position:${states[state].left.lower.position}%;
--left-upper-rotation:${states[state].left.upper.rotation}deg;
--left-upper-position:${states[state].left.upper.position}%;
--right-lower-rotation:${states[state].right.lower.rotation}deg;
--right-lower-position:${states[state].right.lower.position}%;
--right-upper-rotation:${states[state].right.upper.rotation}deg;
--right-upper-position:${states[state].right.upper.position}%;
--face-rotation-x:${states[state].face.rotationX}deg;
--face-rotation-y:${states[state].face.rotationY}deg;
--face-rotation-z:${states[state].face.rotationZ}deg;
`);
}
console.log("Test");
let emotions = Object.keys(states);
//let index = 3;
let previous = [];
setState("happy");
const nextState = () => {
let ind = Math.floor(Math.random()*emotions.length);
if(previous.indexOf(ind) != -1) return nextState();
previous.push(ind);
previous = previous.slice(-4); //Save most recent 4 states to not use
return ind;
}
setInterval(() => {
setState(emotions[nextState()])
//setState(emotions[index%emotions.length]);
//index++;
}, 1500);
Raw
style.scss
:root {
--eye-size:8rem;
--eye-gap:7rem;
--eye-color:white;
--background:black;
}
body {
background: var(--background);
min-height: 100vh;
perspective: 25rem;
overflow: hidden;
.face-container {
width:100vw;
min-height: 100vh;
display: grid;
place-items: center;
background:#EC87C0;
@keyframes float {
0%, 100% {
transform:translateY(-5%);
}
50% {
transform:translateY(5%);
}
}
}
.face {
--left-lower-rotation:0deg;
--left-lower-position:0%;
--left-upper-rotation:0deg;
--left-upper-position:0%;
--right-lower-rotation:0deg;
--right-lower-position:0%;
--right-upper-rotation:0deg;
--right-upper-position:0%;
--face-rotation-x:0deg;
--face-rotation-y:0deg;
--face-rotation-z:0deg;
display:grid;
grid-template-columns: var(--eye-size) var(--eye-gap) var(--eye-size);
grid-template-rows: var(--eye-size);
grid-template-areas: "left . right";
filter: blur(0.25rem) contrast(8);
transform: translateZ(4rem) rotateX(var(--face-rotation-x)) rotateY(var(--face-rotation-y)) rotateZ(var(--face-rotation-z));// rotateX(var(--face-rotation));
transition: .75s cubic-bezier(.25, .5, .5, 1);
mix-blend-mode: lighten;
.eye {
position: relative;
background: white;
border-radius:100%;
overflow: hidden;
box-shadow: 0 0 0 1rem black;
&, * {
transition: .5s cubic-bezier(0.75, 0.25, 0.25, 0.75);
}
>div {
--rotation:0deg;
--position:0%;
position: absolute;
top:0;
left:0;
width:100%;
height:100%;
transform: rotate(var(--rotation));
.lid {
position: absolute;
width:100%;
height:100%;
background: black;
}
&.lower .lid {
top:calc(100% - var(--position));
}
&.upper .lid {
bottom:calc(100% - var(--position));
}
}
&.left {
grid-area: left;
.lower {
--rotation:var(--left-lower-rotation);
--position:var(--left-lower-position);
}
.upper {
--rotation:var(--left-upper-rotation);
--position:var(--left-upper-position);
}
}
&.right {
grid-area: right;
.lower {
--rotation:var(--right-lower-rotation);
--position:var(--right-lower-position);
}
.upper {
--rotation:var(--right-upper-rotation);
--position:var(--right-upper-position);
}
}
}
}
}
@zeddash
Copy link
Author

zeddash commented Jan 3, 2020

https://codepen.io/z-/full/wvBPvby

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment