Show HN: Emoji to Scale

Author: javierbyte

Score: 708

Comments: 124

Date: 2021-12-03 01:58:22

Web Link

________________________________________________________________________________

tshaddox wrote at 2021-12-03 04:43:36:

They missed this at the end:

https://emojipedia.org/milky-way/

joe5150 wrote at 2021-12-03 06:36:11:

and this at the other end:

https://emojipedia.org/microbe/

tshaddox wrote at 2021-12-03 06:56:39:

Not quite at the end.

https://emojipedia.org/atom-symbol/

joshxyz wrote at 2021-12-03 08:56:28:

Ah the ReactJS emoji!

colejohnson66 wrote at 2021-12-03 18:20:17:

So, is the emoji “tiny” like an atom, or “huge” like React?

tshaddox wrote at 2021-12-03 22:53:22:

React is like 35 KB gzipped. Pretty huge in terms of JavaScript bundle size, but still physically very very small!

colejohnson66 wrote at 2021-12-04 14:54:41:

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.

joe5150 wrote at 2021-12-03 06:38:43:

alas:

https://github.com/javierbyte/emoji-to-scale/commit/b7b54d7e...

jug wrote at 2021-12-03 13:20:35:

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.

Jyaif wrote at 2021-12-03 09:13:25:

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.

joe5150 wrote at 2021-12-03 19:32:08:

agreed! they could just use an arbitrary scale.

phailhaus wrote at 2021-12-03 03:50:35:

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

AceJohnny2 wrote at 2021-12-03 02:39:27:

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--

AceJohnny2 wrote at 2021-12-03 02:40:35:

oh nm that's the moon

spiderice wrote at 2021-12-03 02:53:27:

It's the moon from Majora's Mask, clearly

tim-- wrote at 2021-12-03 02:45:40:

Definitely had the same question, and the exact same realisation. We must be Android users!

AceJohnny2 wrote at 2021-12-03 03:22:07:

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

ljm wrote at 2021-12-03 13:03:58:

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]

[0]

https://bomberman.fandom.com/wiki/Clown_Mask

[1]

https://en.wikipedia.org/wiki/Sinistar

valleyer wrote at 2021-12-03 02:41:28:

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?

have_faith wrote at 2021-12-03 08:31:19:

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.

vincentriemer wrote at 2021-12-03 02:48:37:

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).

goatherders wrote at 2021-12-03 04:22:23:

The correct way is the way that works, which this does.

osrec wrote at 2021-12-03 04:49:36:

Well, perhaps, but it's unnecessarily inefficient.

tekromancr wrote at 2021-12-03 04:56:01:

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.

framecowbird wrote at 2021-12-03 04:57:07:

it barely works for me on mobile. very jittery

cunthorpe wrote at 2021-12-03 03:21:48:

Goat: 45cm

Duck: 50cm

Might as well say “shuffled emojis with random data attached”

dhritzkiv wrote at 2021-12-03 03:50:07:

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.

lvturner wrote at 2021-12-03 04:38:06:

laden or unladen?

mattowen_uk wrote at 2021-12-03 08:56:32:

African or European?

rob74 wrote at 2021-12-03 11:03:46:

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...

mminer237 wrote at 2021-12-03 14:51:15:

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.

King-Aaron wrote at 2021-12-03 03:52:49:

Arm: 30cm. I think my arm is bigger than that. And fire: 40cm. This seems somewhat arbitrary lol

xcambar wrote at 2021-12-03 05:58:25:

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.

wartijn_ wrote at 2021-12-03 11:53:12:

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

[1]

https://emojipedia.org/flexed-biceps/

[2]

https://www.merriam-webster.com/dictionary/arm

xcambar wrote at 2021-12-03 12:37:30:

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".

CRConrad wrote at 2021-12-04 15:27:37:

> 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.

cjohansson wrote at 2021-12-03 06:03:58:

Well it says "to scale" not "to realistic scale" so it could be a made-up scale

hanniabu wrote at 2021-12-03 05:54:38:

Yeah my mouth isn't 15cm/6in wide, definitely around half that

dwohnitmok wrote at 2021-12-03 02:18:58:

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.

catern wrote at 2021-12-03 02:22:27:

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.

tracedddd wrote at 2021-12-03 02:47:56:

I think it’s by height in which case it makes sense… maybe.

hanniabu wrote at 2021-12-03 05:55:39:

Some seem by height and some by width, and some make no sense at all.

irrational wrote at 2021-12-03 02:23:40:

Maybe it’s one of those tiny Smart Cars.

toqy wrote at 2021-12-03 05:31:09:

Reminds me of an old favorite

https://joshworth.com/dev/pixelspace/pixelspace_solarsystem....

mvexel wrote at 2021-12-03 05:42:57:

That, and OP, reminded me of the Eames "Powers of 10" film

https://www.youtube.com/watch?v=0fKBhvDjuy0

aasasd wrote at 2021-12-03 13:20:07:

A better way to enjoy that is with a soundtrack by Gas:

https://www.youtube.com/watch?v=NvG-jqGsWSk

Vadoff wrote at 2021-12-03 07:33:59:

4-leaf clover larger than a credit card?

whylo wrote at 2021-12-03 10:57:09:

Measured from the base of the stalk, maybe? Rather than the diameter of the leaves

croisillon wrote at 2021-12-03 10:33:59:

don't get it either

travisgriggs wrote at 2021-12-03 06:29:46:

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.

folli wrote at 2021-12-03 06:59:23:

Two meter mermaid incl. the tail seems reasonable to me, however I have never met one in person.

mattowen_uk wrote at 2021-12-03 08:57:50:

Either way, a two metre Amazonian mermaid is kinda hot.

rosetremiere wrote at 2021-12-03 08:52:20:

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.

wodenokoto wrote at 2021-12-03 09:31:01:

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

tinus_hn wrote at 2021-12-03 10:03:32:

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:

https://en.wikipedia.org/wiki/Shigetaka_Kurita

createunderrate wrote at 2021-12-03 08:56:16:

Emoji were created in Japan.

Andrew_nenakhov wrote at 2021-12-03 06:43:58:

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.

mattigames wrote at 2021-12-03 07:04:29:

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)

tobyjsullivan wrote at 2021-12-03 07:01:13:

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.

bmicraft wrote at 2021-12-03 08:12:15:

It seems to run with native framerate in firefox while chromium gets maybe 20fps on my laptop

wartijn_ wrote at 2021-12-03 02:26:58:

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.

adzm wrote at 2021-12-03 02:33:29:

I think some measurements are widths and some are heights.

fastball wrote at 2021-12-03 03:07:17:

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.

d13 wrote at 2021-12-03 08:03:48:

Goats average 75cm

https://www.dimensions.com/element/goats

Ducks average 12cm

https://targetstudy.com/nature/animals/duck.html

Nition wrote at 2021-12-03 09:30:35:

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.

hanniabu wrote at 2021-12-03 05:56:37:

Is your mouth height 15cm/6in?

hbn wrote at 2021-12-03 03:09:16:

I'm curious how he determined that fire is 40cm

CRConrad wrote at 2021-12-04 15:33:35:

Obviously didn't measure a California wildfire...

nkozyra wrote at 2021-12-03 03:26:03:

The one that most confused me was lips bigger than the heart

franga2000 wrote at 2021-12-03 10:25:10:

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).

wongarsu wrote at 2021-12-03 13:15:20:

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).

rob74 wrote at 2021-12-03 11:16:11:

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...

franga2000 wrote at 2021-12-03 11:22:16:

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 :)

duiker101 wrote at 2021-12-03 10:38:02:

Not to mention the bigger than the Hippopotamus :D

Very cool project tho!

duiker101 wrote at 2021-12-03 12:43:33:

I meant to say the woman, forgot the word :D

Thorrez wrote at 2021-12-03 08:30:23:

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:

https://www.youtube.com/watch?v=aW_RUnjLv6c

traes wrote at 2021-12-03 09:27:26:

Likely just a regional thing. Ants where I live tend to be slightly larger than our mosquitos, and they certainly have far more volume.

onion2k wrote at 2021-12-03 09:29:39:

_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.

vultour wrote at 2021-12-03 10:29:33:

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.

scatters wrote at 2021-12-03 11:09:22:

It's probably a seven-spot ladybird; those average about 10mm. I can assure you that they aren't terrifying at all.

trissylegs wrote at 2021-12-03 04:09:46:

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.

bko wrote at 2021-12-03 11:32:08:

12m Cactus

I thought this was a mistake but it checks out.

https://www.dimensions.com/collection/cactus-cacti

Scaevolus wrote at 2021-12-03 02:21:02:

Cute! Using SVG to render the emoji might make this look even better, see

https://smilecraft.net/emoji.html

for a simple example.

1270018080 wrote at 2021-12-03 02:26:22:

It's really laggy by the time you get to Tokyo Tower. My computer is hot.

schmorptron wrote at 2021-12-03 11:03:21:

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.

x3ro wrote at 2021-12-03 09:07:43:

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...

Gigachad wrote at 2021-12-03 04:22:26:

This page was running at about 3fps on my M1 macbook.

mdoms wrote at 2021-12-03 03:19:25:

Great idea! Why vertical scrolling though?

javierbyte wrote at 2021-12-03 01:58:22:

Visualize emojis to scale. The chicken is not bigger than the car anymore!

orliesaurus wrote at 2021-12-03 02:31:53:

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?

javierbyte wrote at 2021-12-03 02:35:07:

Yes! Author here, the emojis text with css transforms.

lopis wrote at 2021-12-03 08:03:03:

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??)

is-is-odd wrote at 2021-12-03 03:54:11:

Should put an eggplant at the end :)

boondaburrah wrote at 2021-12-03 08:34:06:

Holy shit that's a really big clover

0x456 wrote at 2021-12-03 03:23:23:

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.

can16358p wrote at 2021-12-03 10:00:02:

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.

rigrassm wrote at 2021-12-03 11:45:37:

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!

thom wrote at 2021-12-03 11:27:04:

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?

nephrite wrote at 2021-12-04 14:28:35:

So the emojis go left to right, but you have to scroll frop top to bottom, strange decision.

qwerty456127 wrote at 2021-12-03 11:54:29:

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.

leodriesch wrote at 2021-12-03 12:27:56:

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.

authed wrote at 2021-12-03 02:56:09:

I didn't know that we could get a 5.5cm credit card...

fastball wrote at 2021-12-03 03:09:52:

Everything is by height.

V2 should try everything by mass.

fagnerbrack wrote at 2021-12-03 03:51:09:

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

_han wrote at 2021-12-03 11:21:17:

Would be interesting to see this in a (log scaled?) histogram. Probably a lot of things in the 1 metre order of magnitude.

reginold wrote at 2021-12-03 17:32:00:

This is fun!

What is the biggest size jump in this database by percentage growth between one emoji and the next?

reginold wrote at 2021-12-03 17:34:14:

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.

tempestn wrote at 2021-12-03 10:42:54:

That was super fun. Best use of unconventional scrolling I've ever seen, I think.

bagacrap wrote at 2021-12-04 14:24:52:

last I checked, the astrodome has, y'know, a dome on top. That's clearly an open air stadium.

deepstack wrote at 2021-12-03 10:18:03:

Oh my Emoji feel like Chinese writing system!

gungsukma2 wrote at 2021-12-03 04:01:52:

Should have "banana for scale" checkbox

moss2 wrote at 2021-12-03 07:35:06:

I didn't know goats were so tiny (45 cm)

can16358p wrote at 2021-12-03 10:01:10:

That's the new M1 Goat Mini.

pjerem wrote at 2021-12-03 06:27:34:

What a badass 12m cactus !

joe5150 wrote at 2021-12-03 06:37:51:

the emoji is usually depicted as a saguaro, which can easily be that tall!

k_sze wrote at 2021-12-03 06:00:53:

How is a goat 45 cm?

ushakov wrote at 2021-12-03 02:25:08:

never knew i needed this until i tried

fnord77 wrote at 2021-12-03 07:13:29:

that was fun :)

noduerme wrote at 2021-12-03 04:17:58:

why couldn't this be done with SVG?

redconfetti wrote at 2021-12-03 10:16:55:

I really wish they put a woman emoji at the end, labelled "Your Mom"

revskill wrote at 2021-12-03 05:05:14:

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.

halfmatthalfcat wrote at 2021-12-03 05:25:22:

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.

revskill wrote at 2021-12-03 05:40:32:

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.

hoten wrote at 2021-12-03 07:41:59:

Perhaps they missed whatever point you were making, but your comment is largely offtopic.

skipnup wrote at 2021-12-03 05:33:23:

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?