7 ms·
Realtime Responsive Typography Based on Viewing Distance via Webcam
- bluetidepro 14y agoThis is really awesome, although a bit spastic at times. I'm not sure if this is the proper way to use this concept, but I could see how this concept could be used in similar fashions for setting settings. Like set it once, and then have that size apply to whole site or something. Either way, never clever idea, and well done! :)
- edent 14y agoBrilliant! Couldn't get it running in FF, but works like a dream in Chrome. Very useful for interfaces which may run on, say, a TV. Knowing the physical size, or the viewport dimensions, doesn't tell you how far away the user is.
- nicholassmith 14y agoI was going to comment to say the same thing. I've been playing Dust 514 on my PS3 recently, it's enjoyable but most of the text is too small for me to read comfortably, if they could detect a player being sat further away and increase it then it'd make life a lot easier. Definitely a cool concept.
- robin_reala 14y agoI’m using Firefox Aurora and it worked fine, so it is at most 7 weeks away from release.
- daralthus 14y agoGreat idea, however you should use a transform rather than font-size, so the line breaks won't change.
- MrDrone 14y agoCool idea but it just blew up the font to an unreadably huge size for me. Using an external camera mounted on the monitor in front of me.
- jhgaylor 14y agoThis is really slick. I think it'd be great as a browser plugin so I could use it almost like an accessibility tool on sites with horrid typography. It seems better than cmd++.
- AUmrysh 14y agoThis is awesome. The algorithm seems to have some trouble with glasses and headphones, but works pretty well otherwise. It's such a simple idea, and with the new web technologies becoming widespread, I expect that we will see more of this sort of thing in the future.
- deleted 14y ago[deleted]
- FraaJad 14y agohow does one enable webcam for this to work?
- synor 14y agoWhat do you have to assume about e.g. user monitor ppi and webcam field of view to make this work?
- columbo 14y agoI don't have a webcam installed on this machine so I can't test the implementation but what a BRILLIANT idea. This is exactly how cellphones should work; judge distance and then resize the reading pane to accommodate.
- bentcorner 14y agoMaybe (like other comments mention). Sometimes I bring my phone closer to my face because I'm having trouble reading something because of my eyesight. Making the text smaller in response can be counter-productive.
- sciencerobot 14y agoThis is an impressive demo however I usually move my face closer to the screen because the font is too small. It would be neat to see a demo of parallax using a webcam.
- matsiyatzy 14y agoCheck out http://auduno.github.com/headtrackr/examples/targets.html http://auduno.github.com/headtrackr/examples/targets.html (though you'll need webgl support)
- lifeisstillgood 14y agoAnd this is the answer to the "race against the machine" - how will automation that is destroying jobs provide value no-one ever thought of. Total "cat-flap" moment - its not something you ever think of, but once you see it, its obvious.
- fredley 14y agoGreat idea, a couple of small improvements would make it even better: * Use a moving average, to avoid flickery transitions * Animate the text to the target size rather than changing in steps. This would mitigate the flickering problem too.
- matsiyatzy 14y agoHi, creator of the headtrackr library here. As far as the headtrackr library goes, it does include a smoother (moving average) to avoid jittering of the tracking. It's set pretty low by default though, since heavy smoothing will lead to lag in tracking sudden movements. Any kind of moving average is a trade-off between responsiveness and smoothness, unfortunately...
- Retric 14y agoOne of the best ways to deal with this is to create a minimum lag for changes in direction which is dependent on the magnitude of change. AKA, assuming you just bumped v from 10 - 11 based on a change from 100.9cm to 101cm then going back to 100.9cm will not change things for say 1second, going to 99cm changes things in 100ms second, 98cm changes in 100ms.
- matsiyatzy 14y agoHmm, that's interesting. Is there any name for that kind of method? I might look at implementing it.
- shalmanese 14y agoHysteresis
- Ao7bei3s 14y agoYes, but Kalman filter.
- brianbreslin 14y agoThis is pretty cool! does something like this exist for eye-tracking? i.e. have it zoom areas of text you are looking at? could be great for people with poor vision
- mjn 14y agoNeat, clicking through the attributions, Headtrackr (https://github.com/auduno/headtrackr/ https://github.com/auduno/headtrackr/) by auduno of Opera Software looks quite useful. That's in turn based on ccv (https://github.com/liuliu/ccv https://github.com/liuliu/ccv), which I knew about, but Headtrackr looks much nicer to use if you just want headtracking out of the box. It does some trigonometry, based on some assumptions about field of view, to provide the 3d coordinate estimates needed for demos like this, whereas ccv focuses on object identification/tracking within the 2d image (and is much more general, so more complex to use out of the box). The Headtrackr guy also put up a demo of a game controlled using head movement: http://www.shinydemos.com/facekat/ http://www.shinydemos.com/facekat/
- mlader 14y agoThis is very neat! The main issue I could see implementing this is that you'd have to constantly get permission from the user to use their webcam. I'm not sure I'd trust a site to just use my mug for improved readability. Could be great for games though!
- worldsayshi 14y agoI'm mostly impressed by the image analysis. Performance and the fact that it runs on javascript. Well I've heard of ccv.js before but not seen it's capabilities for pixel analysis. Now I have even less excuses to reimplement that broken real time image analysis app that I made for my bachelor thesis. Hmm, there are no explicit licence terms in the repositories of ccv or headtrackr though. :/
- benmanns 14y agoI see open source licenses in both repositories. [0][1] [0] https://github.com/liuliu/ccv/blob/unstable/COPYING https://github.com/liuliu/ccv/blob/unstable/COPYING [1] https://github.com/auduno/headtrackr/#license https://github.com/auduno/headtrackr/#license
- zekenie 14y agoThat's so cool! I wonder if anything like this will ever be standard. I imagine people would be creeped out if their webcam was always on, but its a really cool concept.
- burpee 14y agoCool, another potential tool against poorly readable sites. I just created http://cantheysee.it/ http://cantheysee.it/ for web developers to (roughly) simulate and test for users with poor eyesight.
- buro9 14y agoWhatever that font is (Source Pro Sans), it's fairly unreadable to me (Chrome on Ubuntu). My eyesight is not great, but having a font that is too thin doesn't help either. I wish body text just stayed in either serif or sans-serif at 1em. Use custom fonts for headers, but let my browser preferences determine the body text.
- gregwebs 14y agovery neat. Perspective bug: nodding your head down or up or turning it to the side makes your face appear smaller to the camera which will increase the text size.
- DoubleCluster 14y agoNeat, but this completely ignores the real reason people have trouble with small fonts: bad eyesight. The size the font needs to be is a factor of distance and eyesight. The real solution is to just use the default font size and have users adjust that to their preferences.
- Mvandenbergh 14y agoI wonder if, with a good enough camera, you could detect people with non-ideal vision by watching their eyes and "anti-blur" the screen in such a way that it's perfectly in focus for their eyes and head position?
- Osmium 14y agoThis is a really interesting thought! It's something that probably wasn't viable before the advent of High-DPI displays. Making it worth the effort in a real-world (rather than lab-based) setting is probably insanely difficult though.
- DoubleCluster 14y agoThat only works if your screen can produce a lightfield. Maybe future 3D screens will have such a feature.
- davej 14y ago> The size the font needs to be is a factor of distance and eyesight. And the PPI of the monitor/viewing device.
- DoubleCluster 14y agoand the ambient light conditions, the amount of sleep someone has had, color blindness (could be classified as bad eyesight), the actual size of the screen (for scrolling/line length), the font itself, the amount of experience the reader has with the latin script, the quality of font hinting, the quality of sub-pixel rendering, the quality of kerning.
- bliker 14y agooh please, someone make a extension for chrome so I can scroll just by nodding. Thank you!
- Skoofoo 14y agoThe face tracking didn't work well at all for me. Maybe I have an odd face.
- matsiyatzy 14y agoLighting is pretty important for the quality of the face tracking. If it doesn't work first time, try reinitializing a couple of times, the face detector tends to lock onto other objects than the face some times.
- kumarharsh 14y agoWow! Just WOW!!! Although, of course, there is a lot to improve, like jittery zooms. Love the idea though!
- Wintamute 14y agoCool experiment! But maybe I'm not understanding something. When a human can't see an object in sufficient detail they lean forwards to increase its apparent size in their optical field. This breaks that fundamental interaction. When you lean forward it stays the same size. Argh! In other words if your eyes are good enough to read the large text, they'll be good enough to read the small text when you lean in - nothing has changed, the system maintains the text's apparent size. If on the other hand your eyesight isn't good enough to read the large text leaning in won't help!
- Eduard 14y agoTo solve this, the responsive website should first calibrate on you as a user (either by a user supplying his eyesight quality or by going through some simple OK/NOTOK tests). As a workaround, change the font-size to suite you (on desktop browsers, Ctrl+Mousewheel)
- rjvin 14y agoI don't think the application of this technology would be the way it is on this page: likely it would detect your face and then set the text accordingly, and then leave it alone. A constantly changing text size is bad interaction anyway.
- saalweachter 14y agoIt also shouldn't be in websites. This would make an awesome browser plug-in, which would also let you calibrate it (as mentioned by someone else) to be the "right size" for your vision. I think a U-shaped curve could also be good: big text when you're far away, small text when you're at normal viewing distances, and zoom further [esp for full-page zoom] when you lean in very close.
- mistercow 14y agoWell obviously we can solve that by detecting how far the user is from the camera and increasing the "root size" as they get closer. /s
- trumbitta2 14y agoNice experiment... If only my laptop-mounted webcam wasn't next to me instead of in front of me together with my laptop 'cause I always use it with external monitor, keyboard, and mouse :p
- mcintyre1994 14y agoCool experiment! It works especially well if you substitute a face for an optical illusion poster (http://www.popartuk.com/g/l/lgpp0906+cogs-twisting-cogs-mind-warp-illusion-poster.jpg http://www.popartuk.com/g/l/lgpp0906+cogs-twisting-cogs-mind...) In all seriousness, it seems to lock onto that poster quite often.
- maratz 14y agoHi everyone, thanks for your feedbacks! :) More ideas https://twitter.com/markodugonjic/status/301013228463476736 https://twitter.com/markodugonjic/status/301013228463476736
- mrdub 14y agoNice, I built something similar with a buddy using a kinect a couple month ago. Think poster not website. http://youtu.be/Xy8oRmoV8Ag http://youtu.be/Xy8oRmoV8Ag
- gojomo 14y agoNeato! Does the emerging browser camera support allow requesting permission for a single snap (to calibrate distance) as opposed to constant-video?
- maratz 14y agoJust use the “Onload” demo option http://webdesign.maratz.com/lab/responsivetypography/onload/ http://webdesign.maratz.com/lab/responsivetypography/onload/
- Uchikoma 14y agoJust wow
- jastanton 14y agoI took it one step further and integrated rotation into the mix: check it out. http://codepen.io/JAStanton/pen/meDLB http://codepen.io/JAStanton/pen/meDLB too far?