Show HN: Emoji to Scale
javier.xyzThey missed this at the end:
and this at the other end:
Not quite at the end.
Ah the ReactJS emoji!
So, is the emoji “tiny” like an atom, or “huge” like React?
React is like 35 KB gzipped. Pretty huge in terms of JavaScript bundle size, but still physically very very small!
Oh, for sure. React is pretty small on its own. It's when the whole site is bundled into an SPA that's over 1 MB is it an issue. I wasn't making a jab at React so much as a jab at people using React (IMO) irresponsibly.
OK, I guess that's technically understandable and all, but in this case I hope they understand their chart is completely and utterly unusable now.
It would be better to set the data anyway, and let the code that shows the emojis determine whether to skip the emoji or not.
agreed! they could just use an arbitrary scale.
Projects like this remind me why I love the web. So cute!
This is an open source project, so everyone commenting with suggestions can just open up a PR: https://github.com/javierbyte/emoji-to-scale
What is the yellow smiley face that's twice as large as Japan but smaller than the earth and oh god I can see it in the sky it's look--
oh nm that's the moon
It's the moon from Majora's Mask, clearly
Definitely had the same question, and the exact same realisation. We must be Android users!
I wrote the first comment before I realized what it was. I thought it was a joke where the author intentionally mis-sized an object.
Only after I submitted did it occur to me that the size could be similar to the moon's
I'm tempted to submit the clownface emoji at twice the scale of the sun, in reference to both the large clown boss in Super Bomberman[0], and more loosely to Sinistar[1]
Neat concept.
As someone not very up-to-date in Web UI techniques, I was curious as to how the array was being advanced on scroll. Unfortunately, it looks like the answer is basically polling. The code constantly calls window.requestAnimationFrame(), checking window.pageYOffset. This means that the page is constantly doing work, even at idle.
Surely the more correct way is to install an onscroll handler or something, right?
The correct way would be a mix of those two strategies: an onscroll handler that schedules an update through requestAnimationFrame (ensuring that it only gets scheduled once until the next frame update actually executes).
The correct way is the way that works, which this does.
Well, perhaps, but it's unnecessarily inefficient.
I mean, it's inefficient as for the 120 seconds you play with it. I don't think it's worth spending more time trying to perfect something like this.
it barely works for me on mobile. very jittery
Request animation frame exists specifically to avoid ‘traditional’ polling. You’re thinking more of setInterval() which is the old way of doing it. The requestAnimationFrame docs are a good read, there are lots of performance benefits.
Goat: 45cm
Duck: 50cm
Might as well say “shuffled emojis with random data attached”
I managed to force this data to sort-of work by using a pygmy goat at 40-50cm tall, and a mallard deck at 50-65cm long (even larger than the site suggests). So, sure.
But if you use a more typical domestic goat, like an Irish Goat, you get a height of 80-90cm. The length is even longer.
laden or unladen?
African or European?
Also, the "running man" being bigger than a cow and about the same size as a horse...
But what really bugs me is that it simply uses some font it finds on your system, so on my slightly outdated Linux version it only shows about 70% of the emojis. I mean, if there was ever a perfect use case for webfonts, it would be this page...
The average man is taller in height than the average cow and shorter in total height than the average horse.
His cow is about the average total height of a cow at 160cm.
He has an oddly short man though at 165cm / 5'5".
And he says the horse is the same size, but that would be only 16 hands. That would be the withers size of an average horse, but the total height of only a pony.
Arm: 30cm. I think my arm is bigger than that. And fire: 40cm. This seems somewhat arbitrary lol
Let's play picky:
In anatomy, the arm is the part between the elbow and the shoulder. Below the elbow is the forearm.
With that in mind, 30cm for the arm is definitively a sound measure... and the name of the emoji is wrong. On every phone, keyboard and app.
tl;dr; what is commonly called arm is in fact arm + forearm. Don't blame the author for being correct.
The emoji isn't called "arm" though, it's "flexed biceps". Alternative names are: biceps | comic | flex | flexed biceps | muscle. [0]
And every popular implementation shows arm + forearm + fist. [1] Giving only one part of that as the length is just wrong.
Even if it were called arm, I would argue that that should be shoulder to wrist, since that's what commonly called an arm. It's also the definition that Merriam Webster has. [2]
[0] https://unicode.org/emoji/charts/emoji-list.html#1f4aa
Just so you know, I'm fine with calling "arm" what is between shoulder and wrist.
I was just annoyed that GP seemed to diminish OP's efforts in building their page by nitpicking chosen lengths and terms, and I chose to enter the game rather than nothing.
Your comments are welcome and informative, thank you for that. Dictionaries are descriptive and not normative, which confirms the common use of arm as "wrist to shoulder".
> Just so you know, I'm fine with calling "arm" what is between shoulder and wrist.
Great. Since that's actually what it means, in ordinary English. What you call "actually correct" "in anatomy" is professional sub-language and has no bearing on this forum. (Or any other, besides fora for professional anatomists.)
Edit: Sorry, replied to your first paragraph before even reading the rest and noticing that you actually agree... I was already slightly annoyed by your previous post, so wrote hastily. I apologize.
Well it says "to scale" not "to realistic scale" so it could be a made-up scale
Yeah my mouth isn't 15cm/6in wide, definitely around half that
I was half-expecting there to be a gigantic jump to the sun emoji and then the galaxy emoji, but that might have presented rather interesting engineering challenges at that point.
I love the idea, but the algorithm for scaling seems a bit off. For example, it shows the human as much larger than the car.
I think it’s by height in which case it makes sense… maybe.
Some seem by height and some by width, and some make no sense at all.
Maybe it’s one of those tiny Smart Cars.
Reminds me of an old favorite
https://joshworth.com/dev/pixelspace/pixelspace_solarsystem....
That, and OP, reminded me of the Eames "Powers of 10" film https://www.youtube.com/watch?v=0fKBhvDjuy0
A better way to enjoy that is with a soundtrack by Gas: https://www.youtube.com/watch?v=NvG-jqGsWSk
4-leaf clover larger than a credit card?
Measured from the base of the stalk, maybe? Rather than the diameter of the leaves
don't get it either
Why is the mermaid so huge? The flamingo dancer and running male are smaller. The mermaid is apparently an Amazonian Mermaid, able to hurl the bison next to her to the ground with a flick of her tail.
Two meter mermaid incl. the tail seems reasonable to me, however I have never met one in person.
Either way, a two metre Amazonian mermaid is kinda hot.
Is japan the only country that has its own map as a unicode symbol? If so, is there a story behind it? I would bet on compatibility with some regional encoding that had it to begin with.
Emoji was basically created to add graphics to Japanese mobile websites in the late nineties when people paid by the byte.
Back then the supplier of the websites also made the phones, and you could only access specific mobile webs depending on your carrier.
The original emoji were mostly create to facilitate online shopping for train tickets for vacation and ringtones. So a lot of these represent travel, food and landmarks.
Edit: this is for Japanese handsets and carriers. That was pretty unclear before the edit
The original set of emoji was created by one Japanese person in a weekend for a Japanese mobile operator. So these images, like the blood types, the astrology signs and the cats and later the rice ball and the pile of poo are images Japanese people would want to use in their communication.
The Wikipedia page of the creator has some links to the origin story:
Emoji were created in Japan.
The other day I was running a web version of Townscapes on my smartphone, and it worked beautifully and smooth. But this one is so laggy and slow that I barely could scroll to Laptop (24cm), and then just stopped.
How come a real-time 3D rendering is faster then just displaying a few 2D pictures side by side on a screen? Tech these days is weird.
Because the page is mutating the CSS "left" property which is known to be extremely slow (should have used translate), and also creating/removing the dom elements, which is also slow. That Townscapes you saw was probably running over WebGL, you can use 2D over WebGL for the speed benefits with libraries like PixiJS (or from scratch but that's not recommended)
I had the opposite experience with both of those. Can’t run townscapes beyond the first frame render, but this site is perfectly smooth on iOS.
It seems to run with native framerate in firefox while chromium gets maybe 20fps on my laptop
Funny idea, but lot of these seem off.
- A chicken egg is taller than 5cm.
- I would say a tulip is bigger than a phone.
- The okay hand sign says it's 21 cm.My hands are larger than average, but definitely smaller than 21cm.
- A duck isn't bigger than a goat.
- An elephant is smaller than a house.
I think some measurements are widths and some are heights.
I think they're actually all by height, and if you google them the OP actually matches up. e.g. googling
"duck height": 20 – 30 in (51 – 76 cm)
"goat height": 16 – 23 in (40 – 58 cm)
Maybe it would be better to do them by mass.
Goats average 75cm https://www.dimensions.com/element/goats Ducks average 12cm https://targetstudy.com/nature/animals/duck.html
A little unfortunate if they just used the automatic Google info results. The duck one is the Indian Runner duck - a Mallard would make more sense per the emoji.
Is your mouth height 15cm/6in?
I'm curious how he determined that fire is 40cm
Obviously didn't measure a California wildfire...
The one that most confused me was lips bigger than the heart
Cool idea, but since one one dimension (height?) was considered, you get some weird things like a cactus (12m) being way bigger than a house (7m).
Even more confusingly, it's not consistent about the measured dimension. The car is 1.8m (wide), the firetruck is 2.3m (wide), the tractor is 5m (long), the bus is 12m (long), the statue of liberty is 46m (high), the astrodome is 66m (high).
It would have made more sense to stay with either height or the largest dimension (but that would have been weird for mountains, which often are far wider than high).
According to Wikipedia, Saguaro cacti "can grow to be over 12 meters (40 feet) tall". So, a real old and real huge Saguaro can be bigger than your average house (or palm tree): https://en.wikipedia.org/wiki/Saguaro#/media/File:Saguaro_wi.... But I would say 99% of them aren't...
Oh yeah, I looked it up too and was really surprised, being from Cetral Europe and having never seen a cactus outside of a pot before :)
Not to mention the bigger than the Hippopotamus :D
Very cool project tho!
I meant to say the woman, forgot the word :D
Ok on my emoji set the Gorilla (Silverback) is just it's head. So it seems to imply a Gorilla has a head the size of a Llama.
The mosquito looks too small compared to the ant. I guess both can vary in size, but mosquitos I've seen have been larger than ants I've seen. Here's a video with a mosquito and an ant:
Likely just a regional thing. Ants where I live tend to be slightly larger than our mosquitos, and they certainly have far more volume.
Ants where I live tend to be far larger than our mosquitos.
When you say "far larger", is that twice as big? 10 times bigger? 1000 times bigger? I might have to avoid where you live.
The ladybug one must be way off, where do they have 1cm large ladybugs? That sounds terrifying. I'd say our mosquitos are closer to 1cm, although they're long but thin.
There's more of these which are really weird, like the 12m cactus.
It's probably a seven-spot ladybird; those average about 10mm. I can assure you that they aren't terrifying at all.
Cute! Using SVG to render the emoji might make this look even better, see https://smilecraft.net/emoji.html for a simple example.
It's really laggy by the time you get to Tokyo Tower. My computer is hot.
Huh? I was about to comment the exact opposite, I was super impressed by how smooth it was! And that's running on a 3 year old low-end ryzen 3 laptop processor, on firefox in fedora.
That's what I found too, in Firefox. I then switched to Safari and it was buttery smooth everywhere (MBP 16", not M1). Haven't tried in Chrome yet. I wonder why the performance varies so wildly...
This page was running at about 3fps on my M1 macbook.
Great idea! Why vertical scrolling though?
12m Cactus
I thought this was a mistake but it checks out.
Visualize emojis to scale. The chicken is not bigger than the car anymore!
Is it rendering the Emojis using the local emoji set so for example if I'm on an Android phone I will see the Android emojis and if I'm on an iPhone I will see the iPhone emojis?
Yes! Author here, the emojis text with css transforms.
Unfortunately the side effect is that some emojis, live the gorilla, are only a head in my font. Still, it's cute, despite the weird scales (your mouth is 12cm??)
Should put an eggplant at the end :)
Holy shit that's a really big clover
Some of these don't show up for me (like Saturn). This might work better with a web-font? Although then you'd lose the harmonious platform emojis. I wonder if there's a way to check if a unicode character exists in a font and dynamically substitute, without using canvas.
Quick and dirty idea: maybe try rendering it to an offscreen span/div, get its size and compare it to a well known size of what gets substituted for a generic symbol if it doesn't exist, and if the size matches that, replace with something else.
I want to know why the Astrodome has a soccer field instead of baseball and more importantly, no dome!
They even have 6 flags on the stadium ( which I'm assuming is a reference to Six Flags over Texas, could be wrong though) but no baseball field?!?
Weekend ruined!
Awesome project OP!
Slightly tangential to the author's intent, but is there any way in modern web front ends to discover accurate DPI info of the screen you're on, and therefore at least attempt to create correct physical sizes for UI elements?
The fact we still are using bitmap icons seems really weird to me by the way. We should have switched to SVG as soon as screen resolutions and DPIs (e.g. on handheld devices) started growing.
I’m honestly impressed by how detailed most of the emojis are (on iOS at least), even though they’re mostly just shown at tiny sizes. Nice attention to detail.
I didn't know that we could get a 5.5cm credit card...
Everything is by height.
V2 should try everything by mass.
Can someone please tell me why I was hypnotised by this? Do you think this ethical to do to another human being looking for a productive afternoon!???!?!?!
/s
Would be interesting to see this in a (log scaled?) histogram. Probably a lot of things in the 1 metre order of magnitude.
So the emojis go left to right, but you have to scroll frop top to bottom, strange decision.
This is fun!
What is the biggest size jump in this database by percentage growth between one emoji and the next?
My guess is Mt Fuji (8 km) to map of Japan (1527 km).
Curiously, a map is not this size, Japan is. A map is closer to 1m.
That was super fun. Best use of unconventional scrolling I've ever seen, I think.
Should have "banana for scale" checkbox
Oh my Emoji feel like Chinese writing system!
I didn't know goats were so tiny (45 cm)
That's the new M1 Goat Mini.
last I checked, the astrodome has, y'know, a dome on top. That's clearly an open air stadium.
What a badass 12m cactus !
the emoji is usually depicted as a saguaro, which can easily be that tall!
How is a goat 45 cm?
never knew i needed this until i tried
that was fun :)
why couldn't this be done with SVG?
The popularity of Emoji to me is not good for communication.
Instead of careful and clarity in writing, people choose Emoji to respond to what needs to be more clarified.
So, if it's hard to express your thought, let's pick an Emoji!?
At work, this leads to more trouble in writing. Most of JIRA tickets are mostly non-existent that it's badly written, confusing to the developers and rest of the team.
Emoji might be just one reason for that. But anyway, it just shows the trouble on how people have problem in writing communication.
Do people overuse Emoji ? I don't think this is about overuse or not, it's about people failed at expressing their thought through writing.
Emojis are fast, easy and universally understood, especially across language barriers.
Not all responses between humans need to be written in prose. Using images has been and will continue to be a significant way for humans to communicate with.
You missed the point here. Instead of a clear explanation in written form, people think an emoji is enough, which is a problem. As the author doesn't want to know how other 're feeling , they want to know their thoughts instead.
Perhaps they missed whatever point you were making, but your comment is largely offtopic.
People also use gestures and facial expressions while talking (see Italy for a frequently portrayed nation for this), why not use the next best thing in (non-formal) communication?