[HN Gopher] Make your DOM look like an eye that can focus on any...
___________________________________________________________________
Make your DOM look like an eye that can focus on anything
Author : jj811208
Score : 175 points
Date : 2022-11-06 08:32 UTC (14 hours ago)
(HTM) web link (github.com)
(TXT) w3m dump (github.com)
| yubiox wrote:
| I wrote an xeyes java applet when java was first released in the
| 90s.
| jj811208 wrote:
| Hello, I'm Ryan.
|
| 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 - vanilla.js
| - react - vue
|
| - 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
| remram wrote:
| You mean "DOM look with an eye"?
|
| "DOM look like an eye" means "DOM appears similar to an eye". I
| was expecting that you turned the whole page circular or
| something.
| 4lejandrito wrote:
| Hey Ryan! Pretty cool!
|
| You might like my library: https://creepyface.io. Similar
| concept. Also written in TypeScript with no dependencies.
| lolc wrote:
| Funny how it closes its eyes when entering the password in this
| example: https://jj811208.github.io/watching-you/#/example/login
| yetanother-1 wrote:
| It just collapses the circles. It would be much better to just
| hide the inner circle and paint an outer circle with the same
| color of the skin.
| chrisseaton wrote:
| > It just collapses the circles.
|
| You not familiar with how eyes close?
| odo1242 wrote:
| I think they're saying it would be more natural if the eyes
| closed from the top, I guess?
| [deleted]
| jj811208 wrote:
| I'm sorry for the bad reading experience, I seem to have used the
| wrong word, please forgive my poor English .
| hmmmmno wrote:
| Looks like a swinging breast with moving nipple. No-one has eyes
| like tits.
| throwaway744678 wrote:
| It copies a well known "eyes" design, such as that of xeyes.
| Arguably, cartoon eyes.
|
| If we're getting technical, it does not really look like
| breasts either!
| ReactiveJelly wrote:
| Technically I think it's fixating, not focusing
| https://en.wikipedia.org/wiki/Fixation_(visual)
| throwaway744678 wrote:
| You are technically correct, which is...
| affgrff2 wrote:
| I knew how to finish this sentence, however I didn't know
| why, so I googled: It's a Futurama quote ...
| [deleted]
| bagels wrote:
| How does the DOM "look like an eye"? It appears that there are
| drawings on a page that look like eyes, but does the DOM itself
| look like an eye?
| legohead wrote:
| By the title, I was imagining the whole webpage becoming
| 3d-like and shifting and swaying as your cursor moved around.
| gibolt wrote:
| I would guess that the 'look' is the verb. The Dom is now able
| to actively look, as if it were an eye.
| hsbauauvhabzb wrote:
| I thought this would add white space to the html source such
| that it would render an ascii eye.
| physPop wrote:
| Sounds like ESL issue
| TobyTheDog123 wrote:
| Yeah, I honestly thought this was like a heatmap/analytics
| thing before clicking on it.
| midasuni wrote:
| Shouldn't this be a "show HN"?
| mkarliner wrote:
| Xeyes revisited
| eddyfromtheblok wrote:
| and xsnow revisited when?
| Cockbrand wrote:
| I personally miss [EDIT: a Mac or www implementation of]
| xroach. IMHO it was the funniest of the default X toys.
| melicerte wrote:
| 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.
| codetrotter wrote:
| > 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.
| iso1631 wrote:
| My laptop is on 2204 and xeyes works the same way it's
| worked for decades. I'm running Xorg/xfce
| throwaway744678 wrote:
| It's an easy tool to quickly check that X11 works (eg. when
| messing with X settings, such as redirection over ssh, etc.).
| jeffbee wrote:
| surely xdpyinfo is quicker.
| nells wrote:
| A bit odd that there isn't a single reference to xeyes in the
| readme.
| jj811208 wrote:
| Thanks for letting me know, just did a google search on this
| keyword.
|
| when "wathcing-you" watching mouse, it really does look like
| `xeyes`.
| groffee wrote:
| Everything old is new again! Nice job!
| nomel wrote:
| 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.
| frou_dh wrote:
| That's an enduring memory of mine of using pre-home-internet
| PCs: foraging the entire filesystem for anything novel.
| revskill wrote:
| But why ?
| cercatrova wrote:
| https://justforfunnoreally.dev/
| Aardwolf wrote:
| 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
| notRobot wrote:
| Because.
| oneeyedpigeon wrote:
| 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.
| konfusinomicon wrote:
| would be great to force websites that track you to embed this to
| show the reality of the situation
| toomim wrote:
| 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.
|
| Here's an example: https://peeryview.org/about
| rikroots wrote:
| 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?
|
| [1] - http://aminet.net/package/util/misc/MaxonMAGIC - uploaded
| in 1993
| Cockbrand wrote:
| 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.
|
| [1]
| https://www.x.org/releases/X11R7.5/doc/man/man1/xeyes.1.html
| rikroots wrote:
| 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."
|
| [1] - https://history.siggraph.org/wp-
| content/uploads/2017/03/SIGG... (page 23)
| jkestner wrote:
| This was a whole genre on classic Macs, too.
| https://happymacs.wordpress.com/2015/06/16/the-eyes-have-it-...
| [deleted]
| mattigames wrote:
| 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.
| tralarpa wrote:
| 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.
| samwillis wrote:
| It's probably either trimming the string, or the dom is
| collapsing the spaces to a single space (as is standard).
|
| It's possible to fetch the cursor position in the input.
| manbash wrote:
| 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.
| jj811208 wrote:
| I like the idea of watching the text cursor! Maybe it could
| be an option
|
| wait until the project is a little more stable (more
| testing). I will do some refactoring and look into looking at
| this
| jj811208 wrote:
| I will look into this, thanks for letting me know
| mnsh wrote:
| I made something similar for my personal site, except it didn't
| track cursor, no JS, & blinked too. Made with pure CSS
|
| https://codepen.io/mnsh/pen/BaYxvxo
| bil7 wrote:
| "i made something similar, except it shares almost no
| similarities"
| mbostleman wrote:
| It shares the same behavior with a completely different
| implementation.
| tomschwiha wrote:
| To be fair its both about eyes and both are fancy.
| rikroots wrote:
| 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?
|
| [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...
| mnsh wrote:
| Well, I thought it was about depicting eyes on a webpage
| -\\_(tsu)_/-
| lyjackal wrote:
| Here I thought I was being original when I made this face on my
| webpage track the cursor
|
| https://adrianlyjak.com
___________________________________________________________________
(page generated 2022-11-06 23:00 UTC)