no audio because image load times are too random to work fluidly in realtime but the visuals are there
https://studio.code.org/projects/applab/B--_SwBElbZqbESRSQC-ZJHa70vgYYb0pdSjpCkrkeM
this is just the first version. Soon, ill have it all on the project and will draw it out with the canvas tool but for now, at least I can say I got bad apple to play on the code.org applab

    to do this, I used ffmpeg to turn the video into a set of pngs at about 30 fps. This gave me roughly 6100 frames to deal with. The canvas tool can load individual images from the web so I hosted them all on my website and then wrote a script to load each one in order individually. This is no different than putting them on a slideshow and has inconsistent load times which means the video will desync from audio pretty fast. My hope is that with the version i plan on making, I can play it as fast or slow as i want with limited slowdowns/skipping

    my plan for v2 is to compress the video to 25X25 pixels, lower the saturation so that its all black and white, and then map out each pixels color as either "b" for black and "w" for white. Then ill just write a loop to iterate through each pixel color and then draw it to the screen if its "B" and move 25 pixels to the right if its "w". every 25 iterations, the x coordinate for where to draw gets reset to 0 and the y coordinate increases by 1. This is by no means the most efficient way to do this but the canvas tool is relatively fast and by my testing it can handle moving up to 1000 squares at 60 frames a second so this should work better. Ill be able to add audio too!

    this was the original goal but i was trying to store it in a csv file and code.org has trouble loading those if they are over a megabyte. Mine was about 28 megabytes :(

    miztis im making it even better rn. This ones gonna be realtime and with audio

      Alright, some sad news. I will not be able to get it to work in real time with the new method. Javascript is just too abstracted to move fast enough through the list. I created my own compression algorithm to turn the songs data from 28 megs all the way down to 366kb but even that is too many. Ill see what i can do with the first (more boring) method.

      https://studio.code.org/projects/applab/7F5r5kZhzoQdEDiSuZRp9hmp1793IJLn_kMBSgbnwOM/edit

      here is the project in its current state

      peptobepto Soo you basically did what i did with the rick roll? lmao i could've just shown you that if that's what you were planning to do, no need to host the images separately if you just let CDO host them themselves unless you really want to put that kind of burden on your domain

          Varrience i have no idea who you are so i couldnt have copied it. Also, i dont feel like uploading 6000 images by hand, nor do i feel like writing a script to do it for me cuz js sucks

              Letti42 I have no idea who you are. I came up with this method myself and if you had the same idea at some point, then it is pure coincidence. Besides, you didn't do bad apple (which is lame)

                  peptobepto you can just put all the pngs into a folder and upload em like thousands at a time, sure the website may freeze but that's the fun of it, you should have some idea of who i am though.... if you ever looked through my posts

                  peptobepto ah yea just looked more into it, you should probably load them all in first though since browsers cache requests like that so you won't get stutters in between your video btw

                        peptobepto Hmm... are you new to cdo? or do you just not check the code of any actually good project on cdo?

                            Chat