A2x2 · November 26, 2023 16:35 · blahajcoding · Feb 13, 2021 · sudo-gecko · Feb 13, 2021
diff --git a/badapple.txt b/badapple.txt
 this video was created earlier in january from a stupid idea and was driven by sheer determination
 despite lacking programming skill. here's a decent description of how it was made (because i am
 too lazy to write a github readme):

 1. the video
 i downloaded the pv off youtube and used ffmpeg to resize it down to 70x54 dimensions (for easy
 math calculations, i used 27 firefox windows, 7 tabs each, so it divided nicely). i then used
 ffmpeg (again) to splice the source video into 15-second segments to reduce desyncing and cpu load.

 2. the frames
 each video segment was converted into a set of .png frames (at 20fps) using a ffmpeg command. the
 frames were then fed into a python script (edited from an existing repo -
 https://gist.github.com/A2x2/b1b27b15b0590d36351b9b19ce25a04e) to turn images into text strings
 reminiscent of old-school ANSI art.

 for reference, the symbols used were 
 - ░ (U+2591 LIGHT SHADE)
 - ▒ (U+2592 MEDIUM SHADE)
 - ▓ (U+2593 DARK SHADE)

 the full block symbol (█ U+2588) was not used as the character heights were different. i also chose
 to modify firefox's userChrome.css (yes you can do that) to change the ui font to Triplicate (a 
 monospace font which presented the three shade symbols quite well).

 each segment's text strings were stored directly as an array in a raw.js file.
 (https://gist.github.com/A2x2/9d94b0c80d723b5e6029d70a1be99daf)
 yes, no file i/o at all - i was that lazy. the raw.js file was simply declared before the main
 script in the html.

 3. the script
 https://gist.github.com/A2x2/eaa89492ff7702e831e0fc65c947b0a3
 it's actually really simple. it just reads from the huge raw array, and depending on the two values
 stored in the url ("n" and "t") each tab picks one piece of each frame in the array to render.
 this script uses javascript's setInterval (horribly inaccurate with so many processes and i should've
 known better) which unfortunately resulted in the extremely glitchy effect of the video. 
 maybe it gives it character. i dunno

 4. the tabs
 no, i did not create each tab by hand. i opened up firefox's devtools in each window and just input
 a short command that created the 7 tabs for that window. i did however arrange each window by hand.
 fun fact: the windows got fucked up three times while recording the video. i had to stare at a screen-
 shot and position each window in their pixel-perfect location on the screen whenever that happened.

 if you're thinking of creating similar animations, good luck!
	this video was created earlier in january from a stupid idea and was driven by sheer determination
	despite lacking programming skill. here's a decent description of how it was made (because i am
	too lazy to write a github readme):

	1. the video
	i downloaded the pv off youtube and used ffmpeg to resize it down to 70x54 dimensions (for easy
	math calculations, i used 27 firefox windows, 7 tabs each, so it divided nicely). i then used
	ffmpeg (again) to splice the source video into 15-second segments to reduce desyncing and cpu load.

	2. the frames
	each video segment was converted into a set of .png frames (at 20fps) using a ffmpeg command. the
	frames were then fed into a python script (edited from an existing repo -
	https://gist.github.com/A2x2/b1b27b15b0590d36351b9b19ce25a04e) to turn images into text strings
	reminiscent of old-school ANSI art.

	for reference, the symbols used were
	- ░ (U+2591 LIGHT SHADE)
	- ▒ (U+2592 MEDIUM SHADE)
	- ▓ (U+2593 DARK SHADE)

	the full block symbol (█ U+2588) was not used as the character heights were different. i also chose
	to modify firefox's userChrome.css (yes you can do that) to change the ui font to Triplicate (a
	monospace font which presented the three shade symbols quite well).

	each segment's text strings were stored directly as an array in a raw.js file.
	(https://gist.github.com/A2x2/9d94b0c80d723b5e6029d70a1be99daf)
	yes, no file i/o at all - i was that lazy. the raw.js file was simply declared before the main
	script in the html.

	3. the script
	https://gist.github.com/A2x2/eaa89492ff7702e831e0fc65c947b0a3
	it's actually really simple. it just reads from the huge raw array, and depending on the two values
	stored in the url ("n" and "t") each tab picks one piece of each frame in the array to render.
	this script uses javascript's setInterval (horribly inaccurate with so many processes and i should've
	known better) which unfortunately resulted in the extremely glitchy effect of the video.
	maybe it gives it character. i dunno

	4. the tabs
	no, i did not create each tab by hand. i opened up firefox's devtools in each window and just input
	a short command that created the 7 tabs for that window. i did however arrange each window by hand.
	fun fact: the windows got fucked up three times while recording the video. i had to stare at a screen-
	shot and position each window in their pixel-perfect location on the screen whenever that happened.

	if you're thinking of creating similar animations, good luck!