Skip to main content

gotosocial - Link to source

Ya boy was bored, so he decided to hand-decode some sprite data in Vim on his phone, because that's how we roll!

#LossyPNG

A screenshot of neovim in termux on an Android phone showing hexadecimal sprite data on top and the sprite graphically represented by hashes and spaces below.
#LossyPNG
This entry was edited (2 weeks ago)
in reply to R.L. Dane 🍵

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •

Another one!

#LossyPNG

A screenshot of neovim in termux on an Android phone showing hexadecimal sprite data on top and the sprite graphically represented by hashes and spaces below.
#LossyPNG
in reply to R.L. Dane 🍵

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• • 
@rock [ 3c4e 9ffd f962 3c00 ]
@character [ 3c7e 5a7f 1b3c 5a18 ]


3c4e 9ffd f962 3c00

 8 4 2 1  8 4 2 1
    #### ####      3c
  ##     ######    4e
##    ## ########  9f
######## ####  ##  fd
######## ##    ##  f9
  ####       ##    62
    #### ####      3c
                   00



3c7e 5a7f 1b3c 5a18
 8 4 2 1  8 4 2 1
    #### ####     3c
  ###### ######   7e
  ##  ## ##  ##   5a
  ###### ######## 7f
      ## ##  #### 1b
    #### ####     3c
  ##  ## ##  ##   5a
      ## ##       18

#uxn

#uxn
This entry was edited (2 weeks ago)
in reply to R.L. Dane 🍵

Amin Hollon 🏳
gotosocial - Link to source
Amin Hollon 🏳
• •
Have you ever looked into CSS sprites? Pretty cool, actually.
in reply to Amin Hollon 🏳

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •
I'm guessing they're just PNGs under the hood that you can arrange however you want on a page, or something?
I really don't know the first thing about #CSS, except for the acronym. ;)
#css
in reply to R.L. Dane 🍵

Bryan Redeagle
mastodon - Link to source
Bryan Redeagle
• •
They're any image type. You put all your images in one file, and then use a combo of the sizing and background position properties to only show one of the images in the sprite sheet.
in reply to Bryan Redeagle

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •
What are they used for? What's cool about them? I had no idea they were a thing. XD
in reply to R.L. Dane 🍵

Amin Hollon 🏳
gotosocial - Link to source
Amin Hollon 🏳
• •
Essentially you have one big combined image, then for each time you want to use a segment of it in your CSS, you specify the coordinates and it crops that bit in. It lets you, say, load one image for a whole icon set and then define the coordinates of each icon in that image.
in reply to Amin Hollon 🏳

Bryan Redeagle
mastodon - Link to source
Bryan Redeagle
• •
I doubt it. Its big benefit was downloading all images in one request.
in reply to R.L. Dane 🍵

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •
YO, LOOK AT THIS!!!!
rld@prometheus:~$ echo "3c4e 9ffd f962 3c00" |tr A-F a-f |tr -dc 0-9a-f |sed 's/0/    /g; s/1/   #/g; s/2/  # /g; s/3/  ##/g; s/4/ #  /g; s/5/ # #/g; s/6/ ## /g; s/7/ ###/g; s/8/#   /g; s/9/#  #/g; s/a/# # /g; s/b/# ##/g; s/c/##  /g; s/d/## #/g; s/e/### /g; s/f/####/g; s/ /  /g; s/#/##/g; s/\(................\)/\1\n/g'; echo
    ########    
  ##    ######  
##    ##########
############  ##
##########    ##
  ####      ##  
    ########    

rld@prometheus:~$ echo "3c7e 5a7f 1b3c 5a18" |tr A-F a-f |tr -dc 0-9a-f |sed 's/0/    /g; s/1/   #/g; s/2/  # /g; s/3/  ##/g; s/4/ #  /g; s/5/ # #/g; s/6/ ## /g; s/7/ ###/g; s/8/#   /g; s/9/#  #/g; s/a/# # /g; s/b/# ##/g; s/c/##  /g; s/d/## #/g; s/e/### /g; s/f/####/g; s/ /  /g; s/#/##/g; s/\(................\)/\1\n/g'; echo
    ########    
  ############  
  ##  ####  ##  
  ##############
      ####  ####
    ########    
  ##  ####  ##  
      ####      

rld@prometheus:~$ echo "0102 0488 d0e0 f0f8" |tr A-F a-f |tr -dc 0-9a-f |sed 's/0/    /g; s/1/   #/g; s/2/  # /g; s/3/  ##/g; s/4/ #  /g; s/5/ # #/g; s/6/ ## /g; s/7/ ###/g; s/8/#   /g; s/9/#  #/g; s/a/# # /g; s/b/# ##/g; s/c/##  /g; s/d/## #/g; s/e/### /g; s/f/####/g; s/ /  /g; s/#/##/g; s/\(................\)/\1\n/g'; echo
              ##
            ##  
          ##    
##      ##      
####  ##        
######          
########        
##########

#uxn #sprite #sprites #bash #OneLiners
#uxn #bash #sprites #sprite #oneliners
in reply to R.L. Dane 🍵

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •

Now I've got it working in BOTH directions!!!

Shell Scripting Mad Genius, here!! XD (or maybe mostly just mad)

rld@prometheus:~$ echo "0102 0488 d0e0 f0f8" |tr A-F a-f |tr -dc 0-9a-f |sed 's/0/    /g; s/1/   #/g; s/2/  # /g; s/3/  ##/g; s/4/ #  /g; s/5/ # #/g; s/6/ ## /g; s/7/ ###/g; s/8/#   /g; s/9/#  #/g; s/a/# # /g; s/b/# ##/g; s/c/##  /g; s/d/## #/g; s/e/### /g; s/f/####/g; s/ /  /g; s/#/##/g; s/\(................\)/\1\n/g' |grep -E "^[ #]{16}$" |sed -E 's/(^[# ]{8})/\1\n/' |sed 's/        /0/g; s/      ##/1/g; s/    ##  /2/g; s/    ####/3/g; s/  ##    /4/g; s/  ##  ##/5/g; s/  ####  /6/g; s/  ######/7/g; s/##      /8/g; s/##    ##/9/g; s/##  ##  /a/g; s/##  ####/b/g; s/####    /c/g; s/####  ##/d/g; s/######  /e/g; s/########/f/g' |tr -d "\n" |sed -E 's/([0-9a-f]{4})/\1 /g'; echo
0102 0488 d0e0 f0f8

#uxn #sprites
#uxn #sprites
in reply to R.L. Dane 🍵

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •
Here ya go, #hackers:
function hextosprite() {
    tr A-F a-f |tr -dc 0-9a-f |sed 's/0/    /g; s/1/   #/g; s/2/  # /g; s/3/  ##/g; s/4/ #  /g; s/5/ # #/g; s/6/ ## /g; s/7/ ###/g; s/8/#   /g; s/9/#  #/g; s/a/# # /g; s/b/# ##/g; s/c/##  /g; s/d/## #/g; s/e/### /g; s/f/####/g; s/ /  /g; s/#/##/g; s/\(................\)/\1\n/g'
}

function spritetohex() {
    sed -E 's/(^[# ]{8})/\1\n/' |sed 's/        /0/g; s/      ##/1/g; s/    ##  /2/g; s/    ####/3/g; s/  ##    /4/g; s/  ##  ##/5/g; s/  ####  /6/g; s/  ######/7/g; s/##      /8/g; s/##    ##/9/g; s/##  ##  /a/g; s/##  ####/b/g; s/####    /c/g; s/####  ##/d/g; s/######  /e/g; s/########/f/g' |tr -d "\n" |sed -E 's/([0-9a-f]{4})/\1 /g'
    echo
}
#hackers
in reply to R.L. Dane 🍵

mirabilos
gotosocial - Link to source
mirabilos
• •
don’t use both function (ksh-style function) and () (POSIX-style function) together, that’s a bashism (and will result in POSIX-style function)
in reply to mirabilos

R.L. Dane 🍵
gotosocial - Link to source
R.L. Dane 🍵
• •

What's the difference between a ksh and POSIX function, other than the declaration?

I like making it look vaguely C-ish 😁

I've even threatened to alias void=function before 🤣

in reply to R.L. Dane 🍵

mirabilos
gotosocial - Link to source
mirabilos
• •

RTFM ;)

Only ksh-style functions can have locals in ksh93, but they don’t at all work in sh, and in many ksh-ish shells they open a local scope for shell flags like set -o noglob.

in reply to R.L. Dane 🍵

mirabilos
gotosocial - Link to source
mirabilos
• • 
~ $ function hextosprite {
>  local x=$1 
>  typeset -Uui2 -Z10 v
>  while [[ -n $x ]]; do
>   v=16#${x::2}
>   x=${x#??}
>   print -r -- "${v#2#}"
>  done | sed -e 'y/01/ #/' -e 's/./&&/g'
> }
~ $ hextosprite 4711cafebabebeefdeadacab                                                                
  ##      ######
      ##      ##
####    ##  ##  
##############  
##  ######  ##  
##  ##########  
##  ##########  
######  ########
####  ########  
##  ##  ####  ##
##  ##  ####    
##  ##  ##  ####
in reply to mirabilos

mirabilos
gotosocial - Link to source
mirabilos
• • 
~ $ spritetohex() {                                                                                     
>  { echo obase=16; echo ibase=2                                                                                
>    sed -e 's/\(.\)./\1/g' -e '1s/^/####/' -e 'y/ #/01/' | tr -d \\n
>    echo; } | bc | sed -e 's/^F//' -e 's/..../ &/g'
> }
~ $ hextosprite 4711cafebabebeefdeadacab | spritetohex                                                  
 4711 CAFE BABE BEEF DEAD ACAB
in reply to R.L. Dane 🍵

Jonathan Lamothe
friendica (DFRN) - Link to source
Jonathan Lamothe
•
@R.L. Dane 🍵 I can tell I'm getting tired. I was trying to do the math in my head by looking at it and it took me longer than I care to admit to realize that your pixels/bits were two characters wide. That explains why none of the math was working out for me.
@R.L. Dane 🍵

This website uses cookies. If you continue browsing this website, you agree to the usage of cookies.

⇧