Skip to content

Conversation

@tmck-code
Copy link
Owner

@tmck-code tmck-code commented Dec 4, 2024

TL;DR

Accidentally, this is the biggest visual upgrade that this project has ever had

Context

This started off as an attempt to remove "duplicate" sprite images - I was a little suspicious when I saw that there were 1,000+! (out of ~5000 total images)

Upon further inspection, I noticed that there could possibly even be more duplictes, as many images look similar but are positioned slightly differently in the original PNG (due to padding).

I created a command to "autocrop" the images first to deal with this, and now the sprites look a lot more bright and detailed! 🎉

The benefit of cropping the PNGs first in the conversion pipeline seems to be twofold:

  1. The images are centred better, and converted more consistently.
    Previously, for 2 images that are almost exactly the same, but positioned differently on the backend, could have been different text characters after conversion
  2. img2xterm seems to like converting the images without all the white/transparent background, it appears to have been adjusting the contrast accordingly
gen7x version gen8 version
IMG IMG
         ▄▄▄▄▄▄▄
       ▄▄▄▄ ▄▄  ▄▄     ▄▄▄▄
        ▄  ▄    ▄    ▄▄▄    
     ▄▄▄▄▄▄▄    ▄▄▄▄▄▄   ▄▀
    ▀▄▄   ▄▄▄▄▄▄ ▄▄▄▄  ▄▀
        ▄▄▄ ▄▄▄   ▄▄▀▄   
       ▄▄▄▄        ▄▄▄▄▀
        ▀▀▀▄ ▄▄▄ ▄  ▄ ▄▀
           ▀▄  ▄▄   ▄ 
             ▀▀▀▄▄ ▄▀
                  ▀
           ▄▄▄
        ▄▄▄▄▄▄▄▄▄       ▄▄
        ▄▄▄  ▄▄       ▄▄▄ ▄▄
      ▄▄▄▄▄▄   ▄  ▄▄▄▄▄   ▄▀
    ▄▄  ▄▄▄▄▄▄▄▄▄ ▄  ▄  ▄▀
     ▀▀▄▄▄▄▄▄▄▄  ▄ ▀▄  ▄▄
       ▀▄▄   ▄▄▄   ▄▄▄ ▄▀
       ▀▄▄▄▄▄ ▄▄   ▄▄▄▄▄
              ▄▄▄▄  ▄▄▀
            ▀▄▄▄    ▄▀
                ▀▀▄▀

Changes

  • Install imagemagick in docker image
  • Use convert command to "trim" the background automatically
  • Then convert PNG -> terminal format
  • Then add some padding, and remove empty lines

Examples

  • All examples are created side-by-side in the same terminal program and session. I opened 2 tmux panes and called the old (left) and new (right) versions of pokesay. These examples roughly represent the impact of the visual upgrade that users will experience
example img
ivysaur image
pikachu image
charmander image

@tmck-code tmck-code changed the title Remove duplicate sprites Cowfile Visual Improvement Dec 4, 2024
@tmck-code tmck-code marked this pull request as ready for review December 4, 2024 21:44
@tmck-code tmck-code merged commit 4fcfe88 into master Dec 4, 2024
1 check passed
@tmck-code tmck-code deleted the remove-duplicate-sprites branch December 4, 2024 22:18
@tmck-code tmck-code added aesthetic Related to how pokesay looks enhancement New feature or request labels Dec 4, 2024
@tmck-code
Copy link
Owner Author

Screenshot_20241205-120317

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

aesthetic Related to how pokesay looks enhancement New feature or request

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants