Crazy Eyes Day 5



It’s day five, and this time I want something fun. So I thought, why not make a face that resembles mine, and looks judgmentally at me [given yesterdays fiasco of a website]. The start was fun until that dreaded pen tool came along [oh pen tool when will you love me?]. Now, the best thing about this is the setting. What I mean about that, where I was sitting and who was around me. You see, I do not call myself a designer at all because let’s face it, I am not. However, my sister [adwa] is and a perfectionist might I add. Now imagine with me, You’re sitting, trying [yet failing but you think you’re succeeding] in drawing a vector graphic. Yet you can’t shake off that feeling that you’re being watched. Do you dare to turn around and see? It’s that dilemma every character in a horror movie faces… Out of the blue, you hear a voice “The alignment isn’t right! and damn it fix the hair it’s bugging me”. lulz! I love Adwa’s remarks I swear it would be much entertaining to have filmed our back and forth rather than typing about it. However, with Adwa’s guidance, it actually turned out okay. look!

Now, I move on to the coding part [yepee]. structuring is fine. CSS is good. I then came up with the idea, why not have the eyes follow the mouse! yup, that would be much more fun [me and my stupid thoughts]. Besides, I have some jQuery acquired now. So I try and boy oh boy it turned out to be a mess.

then I try some more. And at least now, it moves with the mouse and has a transition effect.

But I want the movement to be restrained to something of a bounding box. After some googling, I came across something called getBoundingClientRect() so with that, I figured out my bounding box

And here is where I hit a slump. For the first time logic is messing with me. After reading some more, I realized it has a bit or trigonometry and that was the moment where I had a mini crying session [it’s been a while since I last used trig all I remember is Sin 0 = 0 sigh]

Instead of reinventing the wheel, and reading a whole trig book, I looked at other peoples code, and some StackOverflow answers. I’ll list below a couple that helped me out if you want to check them out (their work/ and are better)

  • And this jsFiddle. I wish I new the name of the person because that’s the one that helped me the most!



Okay because my dimensions are not the same scale as the jsFiddles, so the eye movement is crazy, hence the name crazy eyes check it out. Disclaimer it works on 1400px resolution wide. (I truly tried with media quires but their not responding even yesterday. I need to check this problem out.) [DOUBLE DISCLAIMER: I just checked it, and the alignment of the eyes are messed up, it’s not grabbing my latest files .-. contacted my hosting, and they said it will take up to 24 hours to update. [booo] It’s still crazy though if not crazier since the eyes are popping out] But for now adjust your screens to 1270px and show me the crazy eyes you get.

I’ll try to work on it more, and be better at angles and degrees. What do you think? Lets add a bit of interaction. If any of you are reading this, Hi! Do you code? How crazy are those crazy eyes?

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *