How Do I Create Eyes Following Your Cursor

Question

1.00/5 (4 votes)

See more:

Hey There I am a graphic design student who loves Illustrator and hand letttering but must finish some coding classes to graduate. much more difficult then expected! I have a final assignment that i was hoping i might be able to get some help with. Using clientX and clientY ( or the mouseX and mouseY variables in shapes.js, an external js file that i can send to you), create a head whose eyes will follow the mouse. The body/head/eyes should be created using 2D Primitives only, and you do not need to use classes / global variables for this assignment unless you want to. eyes must be maintained along with the shape behavior shown above. I hoping I can find a tutor and or somebody who might be able to shoot me a quick template for what's might look like. needs to be a canvas element can't use java has to be made with javascript css html language

below is what the final file should look like

https://post.craigslist.org/imagepreview/00P0P_8KmWrmLUCTM_600x450.jpg

I am new to the site and the coding as a whole so I apologize for being such a newb!

Posted 1-Aug-15 3:02am

Member 11878688

Updated 1-Aug-15 5:02am

v8

Add a Solution

Comments

Sergey Alexandrovich Kryukov 1-Aug-15 9:31am

This is easier than cursor following your eyes. Yes, such work have been done, as one of the new revolutionary input method.

As to your question... What, no platform, language, application type, no information?

—SA

Member 11878688 1-Aug-15 10:45am

im sorry for not clarifying! I would have to make sure i use Javascript and Css html can't use Java. It needs to be a canvas Element

Sergey Alexandrovich Kryukov 1-Aug-15 13:35pm

Thank you for this clarification.

Right, that's enough to solve this problem. Handle the mouse move event on canvas element and do your calculations and rendering. You don't even need animation frames. What's the problem?
What have you tried so far?

—SA

jgakenhe 2-Aug-15 10:38am

2 links should get you in the correct direction
js: http://www.javascriptkit.com/script/script2/xeye.shtml
css: http://davidwalsh.name/css-custom-cursor

The JS file is almost exactly what you need, though you'll have to rename things and move it around so you don't get caught plagiarizing.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)