8 ms·
I made a talking emoji using regular emojis and JavaScript
- giancarlostoro 9y agoMakes me think of Microsoft Comic Chat[0] this is kind of cool looking though, and definitely different. [0]: https://en.wikipedia.org/wiki/Microsoft_Comic_Chat https://en.wikipedia.org/wiki/Microsoft_Comic_Chat
- _nalply 9y agoI'm Deaf and read lips. Thanks for this extremely intriguing idea to use emoji to depict a talking person visually. You know, some animated films get it right. Sometimes I clearly see utterances like «Thank you!», «Okay», but more often not. Especially older animations don't care and just let the character move the mouth in very simplistic ways: «Babbabbabaa Baababba ba baaa.» Similarly for that emoji. It is moving the mouth in quite arbitrary ways. It looks like: «Sobbabbabee be <grin> seebee <grin> <frown> babbaa». To solve this problem we need about twelve emoji for utterances: «ah», «ay», «ee», «oh», «oo», «b», «d», «f», «l», «n», «r» and «s». The «r» emoji must be animated (so we see the trilling tongue). The other sounds are either invisible like «k» or cover several different sounds like «b» also covering «m» and «p». «Okay» would be rendered by: «oh», «oo», «oo» (standing for «k» wich is invisible) «ay» and «ee». Edit: Add «th». This is an extremely simple sound to lipread. I remember my delight when I learnt English in my youth and in an movie suddenly realised that an actor said «Thank you».
- twiss 9y agoHalfway through the article, he shows a picture with mouths for a-z, sh and th: https://cdn-images-1.medium.com/max/1600/0*gwbWfYm-iQIPEXXP%2E https://cdn-images-1.medium.com/max/1600/0*gwbWfYm-iQIPEXXP%... There are others if you search images for "lip sync animation". It would be interesting to see if the result is understandable if you simply replace the emojis with those images.
- _nalply 9y agoLipreading is different. For example the «sh» sound is made by slightly pursing the lips but not all speakers do this. In German it gives a very clear visual picture.
- falsedan 9y agoI would only purse my lips if I were performing a shush. In words like ‘hash’ I’d just close my mouth slightly & leave lips parted and wide from the ‘ha’ sound. I agree that the mouth shapes are garbage in this demo. A shame because that is the most interesting & important part of animating speech.
- maury91 9y agoThis demo is done with my nearly 0 knowledge in lips reading, the effect I was searching was to make it more realistic, but with the limited amount of usable emojis I cannot have it very realistic, just better than random. At the end of the article I propose some gotchas to improve it: use better images, use a better map. I'm happy that this article has triggered some people curiosity and can maybe evolve in something more advanced
- _nalply 9y agoThat's why I am bad at lipreading in English. People have mouth shapes all over the place. I'm sure I could learn lipreading a friend I meet often well, however this doesn't help lipreading a stranger. When traveling in the US I always have a notebook ready.
- nurettin 9y agoThat image does not map to letters, it maps to the phonetic alphabet. English has different phonetics for words when compared to their written counterparts. For example "money" needs to be converted to "mahnee" before being converted to emoji counterpart. Otherwise it is gibberish.
- yesenadam 9y ago
- k__ 9y agoI once read lipreading doesn't work very reliable, even for very skilled lipreaders. Maybe that's why most animation studios don't bother.
- _nalply 9y agoSome do bother, because even some hearing people can tell the mouth movements are off. This adds to the authenticity of a movie.
- k__ 9y agoI see, didn't think of that :)
- kuschku 9y ago> Maybe that's why most animation studios don't bother. Dubs. 90% of your viewers will see it in a foreign language, dubbed, where all your lipsyncing effort is useless anyway. In fact, lipsyncing ut to english makes it look worse in the dub than having random nonsense movements.
- maury91 9y agoThat's false, I'm from Italy and our dubbing is made with big effort, and lips syncing is an important part, so important that sometimes they don't use literal translation, so they can choose words that have a similar pronunciation to the English ones and the lips look in sync
- icebraining 9y agoSame here, but that's a reverse process (syncing the script to the animation, rather than the animation to the script).
- kuschku 9y agoI’m from Germany, and there’s a lot of effort spent on lip syncing, but it’s not even close to what you get with the native language. As child (due to deafness until I was almost 5) I relied a lot on lip reading, and it was very noticeable if something was dubbed.
- evanb 9y agoYou could actually propose a whole set of Unicode characters that are making realistic-for-lip-reading movements.
- orbital-decay 9y agoThat would be a rabbit hole though, if you consider that Unicode isn't English or even Indo-European centric. *(just another rabbit hole actually, Unicode got plenty of them already)
- evanb 9y agoNo reason not to have one for each IPA character.
- scrollaway 9y agoThe entire IPA is available in unicode. You could treat those as ligatures with a special combinator character, which would work a lot like flags, skintones etc work. eg: [special begin character] + NEUTRAL FACE (U+1F610) + [IPA characters] + (special end character) = talking face! hurray! "text engine developers hate him"
- frik 9y agoJesus man, have some respect for other humans, and some leniency where it's warranted.
- chrisseaton 9y ago> Unicode isn't English or even Indo-European centric It definitely is! The Latin alphabet gets a special place at the start of the range, in order to be compatible with ASCII, an English-language character set.
- throwanem 9y agoThat doesn't say Unicode is English-centric. That just says it sought backwards compatibility with a then-dominant character set that was. Seeing as otherwise Unicode would likely have been regarded as a pointless exercise in ocean-boiling in many more quarters than it initially was, and would have faced a commensurately steeper slope to reach wide adoption, I'm not sure what better alternative you see the initial designers having forgone to choose as they did.
- ajanuary 9y agoI always thought an interesting project would be to use facial recognition to detect key mouth shapes to make better gifs of people talking.
- falsedan 9y agoOnly a few sounds use lip shapes. Most sounds are based on tongue positioning. Compare ‘m’ & ‘n’ to… not making any sound with your lips together or slightly parted. The only sounds I would be very confident at recovering sounds from images for ‘th’, ‘w’, ‘o’, & indistinguishable voiced/unvoiced pairs like ‘b’/‘p’ or ‘v’/‘f’. Basically, the sounds a ventriloquist has to cheat.
- thrownhwn 9y agoInteresting, thanks for the insight!
- ggggtez 9y agoI don't read lips but it's painfully obviously that emoji animation is not right. I seriously looked at it and thought: wow that looks terrible.
- exogen 9y agoOne improvement might be to use a pronunciation dictionary and map the emojis to actual sounds rather than characters. Having recently needed such a thing, I found that there are two widely available datasets: CMUdict and Moby Pronunciator: http://onlinebooks.library.upenn.edu/webbin/gutbook/lookup?num=3205 http://onlinebooks.library.upenn.edu/webbin/gutbook/lookup?n... https://github.com/cmusphinx/cmudict https://github.com/cmusphinx/cmudict The problem is that they'd be pretty hefty payloads to load on the client, so you'd want to do the text -> phone mapping elsewhere. Then use your character mapping as backup for words that aren't in the dictionaries.
- cornholio 9y agoGood God, copy-pasting emoji in production code is now a thing. Damn you, millennials, damn you to code maintenance Hell!
- dewey 9y agoIt’s just Unicode?
- deleted 9y ago[deleted]
- throwanem 9y agoYour editor can't type emoji?
- deleted 9y ago[deleted]
- cornholio 9y agoycombinator can't: There should be emoji after the colon, I can type them fine in Chrome. Truth be told, they would make up great return values, making yourself indispensable to your employer.
- throwanem 9y agoThe HN platform deliberately discards characters beyond IIRC 0xFF - it's been a while since I looked at the source, I'm probably wrong about where it cuts off. An odd design choice, but a design choice all the same - it doesn't bear on anything else in any way I can see.
- nitrogen 9y agoThere was a time when people discovered a lot of text renderers break down with lots of stacked combining characters, and people were posting strings to HN that IIRC either drew a stack of accents all the way up and down the page, or crashed the browser. Maybe that has something to do with the character range limits. Not all non-ASCII is forbidden, though: Français should work AFAIK, and I've seen Chinese and Japanese.
- DiThi 9y ago> Instead iterating through every byte like ""[n] Pedantic note: JS iterates through UTF-16 2-byte code units. It's that way for compatibility reasons (used to be UCS-2), but it's the worst of both worlds: not as good as UTF-8 for ASCII, can't do operations in O(1) time like UTF-32.
- IshKebab 9y agoYeah and this means VSCode's language server protocol uses UTF-16 indices for positions too. Pain in the arse.
- chrismorgan 9y agoCalling it UTF-16 code units as distinct from UCS-2 is dubious. The water is very muddy there, because bad surrogates are allowed, thus the strings are arguably better considered UCS-2 rather than UTF-16. See https://mathiasbynens.be/notes/javascript-encoding https://mathiasbynens.be/notes/javascript-encoding for a discussion of the topic. I’m perpetually sad that a couple of big players decided to go all in on UCS-2/UTF-16 when it should already have been apparent that UTF-8 was roughly uniformly superior and that UCS-2/UTF-16 would have major issues. (I speak as one who was a child at the time, but has read a fair bit about the state of things back then. So don’t trust my yearning optimism.) The worst part about UTF-16 is how it poisoned Unicode with surrogate pairs. UTF-32 and UTF-8 are both good because they didn’t need any special consideration from Unicode to make them work. But UTF-16, extending UCS-2 as it does… ugh.
- bathtub 9y agoSuch a nice idea paired with a descriptive and non-click-baity title.
- chrismorgan 9y ago> an emoji, in reality, looks like this: “\xF0\x9F\x98\x81” … well, that’s one encoding of the UTF-8 encoding of the Unicode code point. > This is because setInterval(_=>{ },99) executes the function every 99ms This is categorically wrong. You can’t trust setInterval to heed your request precisely at all: it’s a request that browsers take as a minimum only. Most browsers will call your function after the number of milliseconds you requested plus up to 16ms more, but some might wait even more than that (I think Safari in power saving mode doubles its tick time, to operate at 30fps; and background tabs typically won’t fire more than once a second these days). Try running this snippet in your dev tools; it logs the number of milliseconds between calls: t=Date.now();setInterval(()=>console.log(-t+(t=Date.now())), 99) On Firefox I’m getting mostly 108–111, with the odd one a little higher, and a couple of 99s after running it for a few minutes. (Some trivia on similar techniques for this measurement: `+new Date` is rather slow, `Date.now()` is about 7× faster in at least Firefox and Chrome, and `performance.now()` gets you microsecond precision (it returns a floating-point number in milliseconds, tied to an unspecified epoch instead of real-world time), and is a little slower than Date.now().)
- maury91 9y agoHi Chris, thanks for the corrections, I know you cannot trust the browser, but for the sake of simplicity, and because the purpose of the intro was describing the code I found on the internet, I opt for a simple "this is the trick", doesn't always work, but this is the idea
- chrismorgan 9y agoThe problem is that that part is completely wrong and dangerously misleading.
- didymospl 9y agoBesides that 99 % 6 = 3, so if the browser fired the setInterval function precisely every 99 ms, only two emojis would be displayed.
- 9y ago
- iverjo 9y agoThis idea originated in the jsgolf community and dwitter (a site where you post 140 character js snippets that generate interesting visuals). See https://www.dwitter.net/u/aemkei https://www.dwitter.net/u/aemkei
- gdiocarez 9y agoThis is an interesting take on making javascript do animations.