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.
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.
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 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.
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.
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'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."
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?
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.
63 comments
[ 3.3 ms ] story [ 120 ms ] threadI 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
You might like my library: https://creepyface.io. Similar concept. Also written in TypeScript with no dependencies.
"DOM look like an eye" means "DOM appears similar to an eye". I was expecting that you turned the whole page circular or something.
when "wathcing-you" watching mouse, it really does look like `xeyes`.
It's possible to fetch the cursor position in the input.
wait until the project is a little more stable (more testing). I will do some refactoring and look into looking at this
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.
- Wayland is the default in Ubuntu 22.04
- You can still choose to use an X11 session instead
- The XFCE4 window manager xfwm only works with X11
https://askubuntu.com/a/1421682
This is consistent with why xeyes works the way for you the way it always did, while it works differently for someone else.
I doubt the Amiga was the first computer to do this. Does anyone have any earlier examples?
[1] - http://aminet.net/package/util/misc/MaxonMAGIC - uploaded in 1993
[1] https://www.x.org/releases/X11R7.5/doc/man/man1/xeyes.1.html
"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."
[1] - https://history.siggraph.org/wp-content/uploads/2017/03/SIGG... (page 23)
https://codepen.io/mnsh/pen/BaYxvxo
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?
[1] - https://codepen.io/kaliedarik/pen/XWgoLjE
[2] - https://scrawl-v8.rikweb.org.uk/demo/canvas-004.html
[3] - https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/ra...
https://adrianlyjak.com
If we're getting technical, it does not really look like breasts either!
You not familiar with how eyes close?
Here's an example: https://peeryview.org/about