Project S.O.S. — Save Our Smilies!

  • Thread starter Jordan
  • 86 comments
  • 3,408 views

VBR

Meme Dissident in Exile...
Premium
7,624
England
London
ScapeGoat4U
@Jordan and co - has anyone tried using AI upscaling on the original smileys such as Gigapixel AI, or ERSGAN, etc? It might look more natural if they were upscalled by a dedicated AI, just a thought. Gigapixel AI is one of the best and I think you can get a free trial of it to play around with. https://www.topazlabs.com/gigapixel-ai

Great project, I was missing seeing the original smileys too.


👍


EDIT: Gigapixel AI can upscale x6, so you will probably need to put the image through several times to get the required resolution, then clean up any artifacts in photo editing software afterwards.
 
Last edited:

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
Four new ones from me today:

Yuck: :yuck:
Irked: :irked:
Guilty: :guilty:
Crazy: :crazy:

We all seem to be strategically avoiding the more difficult ones. :lol:

If the animations seem too difficult, just create the "base" version of the smiley (what you'd see in the "first frame" of the current animation), then I can help animate it. Might have to call in professional help for the flag, though. 😳
VBR
@Jordan and co - has anyone tried using AI upscaling on the original smileys such as Gigapixel AI, or ERSGAN, etc? It might look more natural if they were upscalled by a dedicated AI, just a thought. Gigapixel AI is one of the best and I think you can get a free trial of it to play around with. https://www.topazlabs.com/gigapixel-ai

Great project, I was missing seeing the original smileys too.


👍


EDIT: Gigapixel AI can upscale x6, so you will probably need to put the image through several times to get the required resolution, then clean up any artifacts in photo editing software afterwards.
I did experiment with upscaling, but I think the software struggled a bit due to the very small dimensions of these files. Since they are going to take some work no matter what, I figured it would be best to just future-proof them and go all-in on hand-built vector SVGs with unlimited resolution.
 
Last edited:

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
Dj Khaled And Another One GIF


Dunce: :dunce:
GTPlanet Logo: :gtplanet:

And yes, :gtplanet:'s color changes between Light and Dark modes. :D
 

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
Oh, you thought I was done?!

:eek: by @Seebsma
:odd: by me (animated by hand!)
:embarrassed: by me (animated by hand!)
:rolleyes: by me (animated with SVGator!)

So :rolleyes: ended up being surprisingly complex. It lived up to its emotion and started a long adventure into understanding the nuance of browser support for curved animation paths (don't even think of trying them). :crazy: I figured out a workaround, though.
 
Last edited:
155
United States
United States
Here it is nervous. I made two versions: one is shivering, and the other, trembling. The second one may cause eye strain during long periods.
 

Attachments

  • nervous_15_animated_intense.svg
    1.2 KB · Views: 8
  • nervous_15_animated.svg
    1.2 KB · Views: 9

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
Awesome, thanks @Seebsma. :)

The "intense" was a bit too intense for me, and I even slowed down the other one by another 50ms so it didn't feel quite so manic. If you don't mind, I also used that face as a base to build the crying frown as well.

They're live!

:nervous:
:(

Looking over the table in the OP, we are getting close but the remaining ones are definitely the most challenging. I've given up on "bang head"; there's just too many details in each frame and animating all those are beyond my skill level. The most practical solution is probably drawing each frame and then displaying one after another, as the GIF works now, but that's a lot of work too. The same goes for "bow down", but at least it's just two frames. Neither are used particularly often so we could just stick with the GIFs, but as noted the latter doesn't work in Dark Mode at all in its current form.

We'll also probably have to leave :gtpflag: as a GIF. From what I have learned since starting this project, I don't think it's possible to create a cross-browser compatible SVG version of that animation. It was originally created by @eclipsee and shared here. I might reach out to him to see if he still has the source file and could render a 2x or 3x GIF again.
 

Wolfe

Physics Critic
Premium
13,456
United States
Wisconsin
Wolfe2x7
We'll also probably have to leave :gtpflag: as a GIF. From what I have learned since starting this project, I don't think it's possible to create a cross-browser compatible SVG version of that animation. It was originally created by @eclipsee and shared here. I might reach out to him to see if he still has the source file and could render a 2x or 3x GIF again.
I was considering asking if 10x would be good enough. I've got a start if anyone has good ideas on the animated part -- no anti-aliasing (for this base resolution) or gradients yet. I couldn't find any flag animation generators that gave the right effect. It's only 10 frames, but it still wouldn't be very simple.

gtp_flag.png
 
155
United States
United States
I've given up on "bang head"; there's just too many details in each frame and animating all those are beyond my skill level. The most practical solution is probably drawing each frame and then displaying one after another, as the GIF works now, but that's a lot of work too.
Sure thing. I took me so long to get these 2 of 5 frames done. There's a way to "morph" the path, so the animation would look smoother, but it'd demand me a lot of work and time to barely get a prototype.
 

Attachments

  • Captura de pantalla 2021-07-25 205202.png
    Captura de pantalla 2021-07-25 205202.png
    27.1 KB · Views: 12

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
Sure thing. I took me so long to get these 2 of 5 frames done. There's a way to "morph" the path, so the animation would look smoother, but it'd demand me a lot of work and time to barely get a prototype.
Wow, that frame looks great, though! :eek:

And yeah, I don't think morphs would work, anyway. We don't have the "full" range of SVG animation tools available to us for these because the smilies are all embedded into posts with <img> tags (that's just how the forum software does it, and I'm not going to go down the rabbit hole of modifying that).

That means Javascript animations won't be executed inside the SVG files, only the most basic CSS animations are supported, and browser support on the CSS animations is inconsistent to top it all off. That's one reason :rolleyes: ended up taking me two hours — it took me that long to discover that curved CSS animation paths in SVGs aren't supported by Safari when it's embedded in an img tag... :ouch:
 
155
United States
United States
Wow, that frame looks great, though! :eek:
Thanks!

And yeah, I don't think morphs would work, anyway. We don't have the "full" range of SVG animation tools available to us for these because the smilies are all embedded into posts with <img> tags (that's just how the forum software does it, and I'm not going to go down the rabbit hole of modifying that).

That means Javascript animations won't be executed inside the SVG files, only the most basic CSS animations are supported, and browser support on the CSS animations is inconsistent to top it all off. That's one reason :rolleyes: ended up taking me two hours — it took me that long to discover that curved CSS animation paths in SVGs aren't supported by Safari when it's embedded in an img tag... :ouch:
It's okay. IIRC, the morphs could work with both CSS and Javascript code:

However, it could execute step-out animations with the 5 frames to simplify the process.

EDIT: Here's a test with animated steps.
 

Attachments

  • banghead_steps.svg
    11.9 KB · Views: 10
Last edited:

TB

Watching. Waiting.
Moderator
32,946
United States
NoDak
Cy-Fi
Every time I insert one of these new smilies, I'm shocked at how clean they look! :drool:

I haven't had much of a chance to figure out how to do the moving ones and I completely forgot about the Christmas versions. :embarrassed:
 

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
However, it could execute step-out animations with the 5 frames to simplify the process.

EDIT: Here's a test with animated steps.
My apologies, @Seebsma, I lost track of your most recent post here. :ouch:

I think the step-out animation technique works perfectly for our use case and it looks great too. Your Bang Head test looks so good I've just made it the latest addition to our library:

:banghead:

I think we can easily use that technique to finish up the remaining animated smileys. :D

TB
Every time I insert one of these new smilies, I'm shocked at how clean they look! :drool:
I feel the same way. They went from looking dated to looking more modern and fresh than any emoji set — especially with the animations. It definitely sets GTPlanet apart. :cool:

TB
I haven't had much of a chance to figure out how to do the moving ones and I completely forgot about the Christmas versions. :embarrassed:
Don't worry about figuring out the animations. Just try to replicate each frame of the GIF and post them here as separate files. @Seebsma or myself can easily take care of the rest. This is a collaborative process, after all. :D
 
Last edited:
4,709
United States
The US of A
Dang, I have been forgetting to reply here.
TB
I was already working on that. Made the text a little taller, too. :D

censored.JPG
Eh, the border around the word is still uneven on the sides. :P
I was really glad to see that old link. Lots of familiar old faces on that page. :) We don't need to bring all of them back but there are a few interesting ones on there for consideration. Let's stick to getting our primary line-up updated first, though. We have a lot of challenges still ahead of us.
I understand, I definitely think the standard ones should be our first priority, but theirs a few from that link I think are worthy of recognition.

I really need to take a stab at this some time.
 
155
United States
United States
My apologies, @Seebsma, I lost track of your most recent post here. :ouch:
It's all right. I also took some time off, but will try to catch up with the rest.

Don't worry about figuring out the animations. Just try to replicate each frame of the GIF and post them here as separate files. @Seebsma or myself can easily take care of the rest. This is a collaborative process, after all. :D
Sure thing!
 

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
BIG NEWS, smiley fans! 🎉

Over the past few weeks I have been in contact with @eclipsee, who created the original "GTP Flag" smiley all the way back in 2009.

After digging through one of his old hard drives from 12 years ago (!), he was able to locate the original 3D animation files to render our beloved smiley in higher resolution. Although it did not translate well to SVG due to the complexity of the waving flag, I was able to create an APNG (Animated PNG) file with the newly rendered frames. APNGs include support for 8-bit alpha transparency, so there is no ugly dithering visible around the edge of the graphic in Dark Mode, as we would have seen in a GIF.

It looks so good, I decided to double the size of the smiley so there is more detail visible in the flag itself, and a 2x version will load automatically if you are using a high-pixel-density screen. I think the HiDPI version looks especially amazing, so be sure to check it out if you have a supported device.

Here is the new one and the old one, side-by-side... As you can see, it's quite the upgrade. :D

:gtpflag:
gtpflag-gif.1067807


I got a bit carried away and also created a 10x version for GIPHY, too...



It might seem like a simple thing, but this one took a lot of work, and it is amazing that it happened at all. The fact I was still able to contact @eclipsee, the fact that he still had the 12-year-old 3D animation files, and the fact that he was willing to help us update the beloved smiley is a bit of a miracle. It's the sort of thing that can only happen in a community like GTPlanet.

Needless to say, a huge thanks goes out to @eclipsee for taking his time to make this possible! :cheers:

There are now just three remaining smilies from our original collection left to be restored, then we can start on the Christmas hat versions...
 

TB

Watching. Waiting.
Moderator
32,946
United States
NoDak
Cy-Fi
I'm getting a bit of an outline on the mega version but the smaller one looks as amazing as all of the other new smilies! :drool:

Great job on the original and I appreciate the work on the upgrade, @eclipsee! :cheers:

:gtpflag:
 

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
TB
I'm getting a bit of an outline on the mega version but the smaller one looks as amazing as all of the other new smilies! :drool:
Yeah, that one is just for fun. GIPHY requires a GIF, so you'll see the dithering I was referring to.
 

IfAndOr

Still here.
Premium
5,588
Seychelles
Shropshire, UK.
IfAndOr
XB1:Yes. XBL:No
When you guys have finished working wonders by waving your magic over our old smilies, are you going to remove access to all the new ones @Jordan ?

I only ask because it takes 4 to 6 seconds to load them up every time I click on the icon. Not an age I know, but the delay sometimes causes me to think I haven't clicked properly, so click again, they then appear briefly and disappear again! I then have to repeat.

I find I'm using less smilies now, which is a shame because the originals are looking so good. The little chaps have polished up very nicely :) < 3½ seconds
 
3,707
Singapore
On the move
SomePlayaDude
Oh wow, look at all this progress! I know I sort of dropped off after a while, but real life obligations got the best of me, I'm afraid. Learning Android app development is taking the toll on me these days.

Unsure if I want to come back into this, but I'm sure you dudes got this.
 

Jordan

Site Founder
Administrator
23,665
United States
United States
GTP_Jordan
GTP_Jordan
When you guys have finished working wonders by waving your magic over our old smilies, are you going to remove access to all the new ones @Jordan ?

I only ask because it takes 4 to 6 seconds to load them up every time I click on the icon. Not an age I know, but the delay sometimes causes me to think I haven't clicked properly, so click again, they then appear briefly and disappear again! I then have to repeat.

I find I'm using less smilies now, which is a shame because the originals are looking so good. The little chaps have polished up very nicely :) < 3½ seconds
No, emoji support will not be removed, and they also should definitely not take 4-6 seconds to load. They appear pretty much instantly on all the devices and internet connections I've tested with.

However, now that we do have our original smilies back, I am considering dropping the JoyPixels set we currently use, so devices can fall back to the operating system's default set. Those would load instantly for everyone, but that has its own set of drawbacks.

Great job Jordan!! :cheers:👍

If we can see the flag gradients in the upgraded version is because of you. :D
I refuse to be the only author of the upgraded version, this is 50% @Jordan 50% @eclipsee
Thanks again, @eclipsee. Without you we never would have had such a cool, unique custom smiley in the first place!

:gtpflag:
 

TB

Watching. Waiting.
Moderator
32,946
United States
NoDak
Cy-Fi
they also should definitely not take 4-6 seconds to load. They appear pretty much instantly on all the devices and internet connections I've tested with.
Mine take about 4 seconds to display, too. 🤷‍♂️
 
22,443
United States
Here to Eternity
TexRex72
That's really awesome. I saw one of the plus size GTP flag smileys and I wasn't quite sure what to make of it, but now I understand. It really is amazing that everything fell into place the way it did to make this happen.