git2samus / reddit-comment-animation

A userscript to play text animations on reddit comments.
2 stars 0 forks source link

run-length encoding of padding/prepadding #1

Open gfixler opened 12 years ago

gfixler commented 12 years ago

More complex ASCII animations will often need quite a bit of white-space prepadding. Other animations may require areas filled with another character. It would be nice to specify a run-length for these to cut back substantially on the number of characters needed in each frame. The anim system would find these tagged RLEs and expand them back up when creating a frame.

In a test ASCII animation I posted - 5 frames of entertainer Alizee dancing, each 50 lines tall and often as many characters wide - each frame has on the order of 680-800 pre-padded spaces (trailing spaces were stripped). It's 3800+ pre-pad spaces over 5 frames, nearly 2/5ths the reddit 10k comment character budget. Admittedly, 1250 of those were unnecessary (they were more padded in than necessary), but that's still more than 2500 unnecessary characters, more than 1/4 the budget. Furthermore, this count doesn't include the 4 spaces needed per line to denote which lines are part of a given frame (similar to using 4 spaces to denote blocks of code in reddit's (and github's) markdown). It might work better to use a single character, such as . or > to denote a frame line to save 3 characters per line. That would drop my test frames down from 200 pre-pad spaces to 50 per frame, or about 250 fewer characters right off the bat.

Using a hastily-created format for denoting RLE - \#( 15) - I was able to drop the first frame's pre-padding count from 681 to 328, a savings of 353 characters (51.8%), which would be on the order of 1700-2000 characters saved over the 5 frames. The format is \#(), and in the parens goes a character to use for padding (space in this case) followed by the count. Please suggest ideas for alternative formats. It might work better to pick a less common character, like ~ and look for a sequence like ~50~ for 50 spaces (default pad), or ~#50~ for 50 # symbols. This would make the RLE even more compact. Whatever the format, I think it should be useful anywhere on a line, not just for pre-padding, and not something anyone would typically type.

git2samus commented 12 years ago

link to the Alizee animation

I think it's important to maintain an acceptable browsing experience for people who isn't using our script. the current approach goes from a readable comment to an animated one but if we allow this notation in order to save space for the animation the original comment becomes unreadable.

having said that, the Alizee animation is a good example of an annoying comment even when seen as static frames but at least it makes sense, having a comment that big which you can't even read properly without the script would be too much pain for the rest of the world imo.

I think we can do better, I propose the following: encode the entire animation as gzip+base64 and place it on the tooltip of a link (which may take you to the script to install).

this effectively hides the large unreadable comments from the rest of the users while achieving higher compression ratios and it's also standard which means there's probably some code out there which can be used.

the drawback is that a link which takes you to an installer and also has what looks like a binary script is extremely suspicious, and with good reason because if we have some vulnerability either on our code or at the decoding library it may be exploitable to inject code on the users' browsers but I'm willing to take that risk, the web is a dangerous place after all.

here's an example: install Reddit Comment Animation to view this post

and this is how it looks when writing it:

[install Reddit Comment Animation to view this post](https://github.com/git2samus/reddit-comment-animation/raw/master/reddit-comment-animation.user.js "H4sIAL406E8CA41awY4lqRG8z1fUByBkl22BQLIQd8SBA4gbB1vi4Av/f3BkwnvTsw31ulbbO1MdRSWQZERk7b+v/472v/+Y629///XrwiXnz+v7JU0O1Zr972t4X/cW0ULzPgQnGbuFhJxqq/f6ywET1ah+3fV7UA81lQxQuqXQqu1RI9ztdk4N1x9eaEKqJYUVlD2HpVVqzuAXo4YjKoSkXQivv/otaoSQQ7C21FKETM5uURUYp/AHIcyl9BYjWub1SMMoJQ4bi9lbPSSuS7V0iJzfiLdJIY0s47w/11VuM8dVBsshzsiE2Ql5SdXEvIGVCfv0a53mKXtU75X0tEYbsKidbsmytkxi0Oxj3kVRkhC9JBtmADdDs0eeum9ga8UlE8bO4ZKa8txlgPNm4H5h4rKtHedBveeBd9iBvyZOQZ9jJChfOGt/xZprYGnVXIOgtZ/jeh9D+itWXr0jF8trtSKC9RSwD/nb3JLs4rITe2mXnWMwsPU7VmBbReJhhdBNR0bGGPo3LBIFWaVnCDXeOuoKePTf90IMe4mr8SxpxWhdAfQbqEwJUDX4OEaNK9L0dN7ssNYGf7eSxvSZpqUrrlC+Q4XhGic5h+67tRp3u6sa7YG9aGbYCdQrevddW9gesGApc6+VLxnh+uPJCciGEjT2M9LM8f4jkGofoTAkZnUekS6sj6bxYqYDdkR6F/646rEQ5DrsH3t3QprR/1hh2dMJOi7TLJUXvoQRYtyngqVwXEeRrwsFsJ+CVRYV5jL4yUNjXGnaqXAJvlf6e1xhDvHKWeKkXSFTITPlQI3yS6UFdg96rbqPikc0qnoqcL/+/Sbo+wNBG2vigXyvL/u6ZyZfKdfBzjbsDgfOUMCJaLEvMt8uOOhNpepfzLmtzziyd4na84lPPW4DkkHfCWXiSjkRh5SwOwoUUhqe6VRQSdjPPnhf7jsXWn3j5di9EMGGRhpm/Wa/TC5EnBJUv2JpHYLZg7jkc4DYkO0a4FUzPdMY43jOiEqRsJdCcdmPM2scSoyRRqgi6e0HnGl91ixL5EQzPLwYBQ6/lzItAs3HpCkJOGNGLtdvmtljGQqure90nLy1weL9pltTZonhM8E8t8H2Iq5+F0OLWXjVmZF3MVg+VekrJedJsxuCkV1S/SGwizpzqFxANzFIQ+taOWmynhQ7490cVLAysUdlkRonx04RsZvcZQS2jf7Mhd7RGaVF253PYkhqrY3IoC/iRWLl3RJTBZWXSSTFU6vVaw3O35ItbUiRS85QaiOI4KrOOu6TQiXmcA4jVl8Rucb4e/BoFDHURCV6dBH0GE8pdMnGOSRE0LKlO1WSEwj8UHWZz7EU9iq1eRdhLXw41H5FtyASXI2O9pqotfr2cDJB6Z5Zeu3ig26mjCPtQ0lBGoC225/RFRZHcxD6TcmPYyetXzh3n5GX4JOcvizRU+3hUN4HgjmuP41+KWnjLUmm8xMoXEM94K0yJLTsm8MhxZ/GL5al2ZudURnNA16qyeZmrOAxvkhn/KCiR1mjFh5w8ZAA75ujy7NlVmtbYlIct1Et0nZ+YfV//MHqJ2lCg0CS2Ud2pywoB2d9ZyQJkVba554OrZTqxXKgcU/vd0FdefuqPSXfydUshR3XLfbl5yZPXSEBCjy6kXuyhaVoqmj3++UbEHUbkm8BlGZsqydQ9hVrg6FEKXJbinKgfUGN62aaqw0mEquriJsdJfPgp+OcYTF0jTNpE7XjiNhWHo43GW0wu2VmzydYUny7KLkaMeXQoiGOkKLotX+ULnvJShbT9B7b6rK4I6/3GyfL2Drm5gOZD7SemjW22z4mMMxCuJMrcNlS2jvISTjkLfc++1WZzDwAPCBz+l4EdTIB1oI2pm9adniLlaQ+pLr0qu/zif0WjAtOGz/BCIybPvvEYvCukn5eHV4UZhT/6gNNX8tny8GmK4HxwAhQJCEfey/0kIXp5BicA/PFeEociG/eNqRgvRO0SyDWOWajeTWuZpskwvTGfGjY0I3BBRVoVWK78Q8Z70NJFbotVxUgrYHNxO3xpGb7Jdax9V2htEE2ZI5dPDCIKgJEDBkV/Uqp/MSsPFNHBQ9qIDrOLeLPxydK8IOemMryoR362+lAgUFjTixvt/kQE+oUYftb6Fj1/ATsWvB/HBmRPjyxyopgViQqlA+1bO0J9Zsc5BkpbfLO8mNcZfDJoWcmRctePjyiyBAhxfkJZmnzvMCXHYKTBUJAXPwe+emRd3zslNayfdjGXO/RjUCNpSqjbmxp/srz/9zw/GHINpMhHr38u1PTD23mFMH2De5B78kghapK831R/75z5ZKCBn5i+4sMeKjxktDDQ+57RmQxio7p0lpe1Yo9R+dYRtXpA9v7EnMKfL+SjPgOikT2xOY4R/XeKgLD/XVwOZhrypHvwwwFuWDD4HPQty2Dawab7jFs6afsUBVJATqDADmdBgtvDDEAlke9P1WwntihDGVmS30P641lZo9y8rE7NNQlPD5c9h2XZHDE79tJaosiIFK9ftP2nqxKgWKwqS3VO8l4h7QN3pqUjWTSZhOFYrnJU9JikjpErxY60/tem7LaN4t8mbSpAJedBRedsdRqZz/m87Yzv2LgfnAk0sgrgKM/FdNCaPheXVtr2p99oSyv06HvBp5zXkPJnuhIRLvoxcFNe3hTh204l6S8PqmghgAayCY/UV2dxIMoMjQJdQSeBl9tBhtUjXeDhGk1PoxuB/edQjPE69Ncx4fuMkleynAJF4yhtZ9M3R/rb0duNqcrbf3UduGZ2yWZnARFwkpg9eyeWWGEDPGo40JT8ewfeASV+I7xN1vLZ4+76F1Bw5sXV4sPPprT46UdDC0dtbl/RnEmeWoyTfKFQS7980M4EOrG0XyZdjk+v0kOiqub+RBdpn18yIBOJSm9acbpbfXjQ8KSPiDZQr0iRn6ek+n82aGsbwS9oFh/pe5/Han7+DVDR5X04c3jQy9ehjo7P+rYrQ8q3cuIh1MXGgzv3ROdcice5x01duXqrlUY7pqQ9KZ4I33bH3Tn2j1uZm/5wN4V7K3CqiBlV8c7DmEjfUsM3PV2IBdIhgtuezPhf4c0IHCG6Hs13MS9r2V2VScLIj9Jblma7aYPVU6p15Q0SGxxD3dq0c+P10Kpcep1oAJbyc159VqqLRcr/jJ03y81tO+ujIu611m9lD/l0necSpCHxupXi3/6m+8LISrNb4rGt23fGGHM0tj0aq5PVvdu11zH+ZQpzC/MOZ6a8Ov4Krdol529Drtur+jEdsXl6dVngAfCYGjiafjInQB3pGia9YCcTGBEGMDY6plTKFhy9J67TQ3PnH003es5kEskX+mfmsejUsDw2pGMP31Bf/gSdPGXEA2+T63dterHtjT/fxqh+gqvUhvWop3RVtPnsxKM0LePdXVZDgWusGjqZOWLgxDC3jkWg2cSl4a+zQTl4SbgXRzJm49m26JQgsA11BllMHeWPnhnX4jB+aPS8s7pk9tWjRlcvvhY/oDCicEnfrpn0T/yXZgfH838+CaoOajUDzhc5Wwu8hiTV3/wJn5LR14xicvp7n/ylJXTRU/BQP/9wVOyk/224vVpX5IJ/PXr/z483Q94JgAA")

the original animation was 9848 bytes, with the run-length encoding I got 6946 bytes but the gzip+base64 gave me just 3660 bytes.

I haven't yet looked into pure-javascript gzip codecs but looks promising.

gfixler commented 12 years ago

This exactly why I'm glad you're the one writing this :)

Fantastic ideas, all around. So do you see this as either-or? I.e. you can use this base-64 method, OR the original one you worked up with the glasses animation? I like both.

git2samus commented 12 years ago

yeah I think they can work together, there's no ambiguity among the markups.

I'll see if there's some js compressor (gzip or whatever) and try it out.