I'm trying to remember when I first came across this "animated eyes follow cursor" effect. I'm fairly certain it was on the Amiga back in the last century. I searched Aminet - was it part of the MaxonMagic[1] screensaver suite?
I doubt the Amiga was the first computer to do this. Does anyone have any earlier examples?
The man page for xeyes [1] says that it's been derived from a demo shown in 1988. I seem to remember an even earlier toy on the Amiga which did the same, but I might be wrong.
I found this reference in the 1988 SIGGRAPH Art Show Review[1] - a possible candidate for the inspiration?
"Alan Rath had two works, Word Processor and Bird Cage (see Figure 21) in the show. Bird Cage is a kinetic work created from a microcomputer, digital frame store, and a speech synthesizer. A solenoid system moves the one-inch video monitor inside the cage. The amount of movement is controlled by the intensity of ambient light. The video bird displays a human eye, which looks about and blinks."
Note that the pupil is almost always at the very edge of the eyeball. It's actually more realistic-looking to simulate the cursor being some number of inches above the screen, so that it more smoothly transitions from center to edge.
I've resisted posting my effort at a moving eyes animation, but my resolve has crumbled[1].
In an attempt to make this comment slightly less spammy, I think that it's easier to create this effect in a web page if the code makes good use of radial gradients. Both SVG and the 2D canvas API use a 'two circles' approach to defining the gradient (interactive demo here[2]); the CSS approach, however, seems a lot less intuitive to me[3] - can I assume there were good reasons why the CSS committee chose to do it this way?
which made me realized that xeyes is still installed on vanilla ubuntu installation (22.04 LTS). type `xeyes` on the console and there you go. I does not follow the mouse when the mouse is outside the xeyes window though.
> I does not follow the mouse when the mouse is outside the xeyes window though.
Probably means that Ubuntu 22.04 LTS is using Wayland, and xeyes is running under Xwayland, and because of that xeyes is only getting access to cursor information when the cursor is over the window.
Found a bug, if you start an input form with multiple spaces it doesn't work as expected, it seems like only visible characters add to the calculated offset.
I would like to add about the text input: I expected that if I edit my text input e.g. put the caret (text cursor) in the beginning of the text, then the focus will change. This is not the case, even when typing.
It also ignores the cursor position in the entered text (i.e., it will always look at the last character). That's because the code creates a fake input element with the same font and input as the visible element and uses its size to determine the position to look at. Strange that it doesn't work for input with leading spaces, though.
I don’t think a modern computer user would stumble upon xeyes like we probably did: desperation, from there being only a few binaries pre-installed on the system.
I can imagine some utility, beyond the inherent benefits of making such a thing. For one, something like this could act as an accessibility device for locating the cursor.
Websites had fun stuff like this more commonly in the 90s, this kind of fun seems to be a bit lost today. The eyes closing in the password form example was pretty cute
I would like to show you an animation library I developed.
It can make your DOM look like an eye that can focus on anything!
## Features
- Ability to watch mouse or another DOM or even input values, watch anything you want!
- Because it is DOM-based, it is easy to support RWD
- Supports multiple frameworks
- Zero dependency (every framework is!)- Written in typescript
- The size of the core code is only 3kb after gzip compression
- If the element is not on the screen, it will automatically stop running
You can see more on the GitHub Repo!!
https://github.com/jj811208/watching-you