Bad Apple!! but its on the Discord Discovery page

Bad Apple!! but its on the Discord Discovery page.md

Was bored away from home and I kept on getting recommended Bad Apple!! videos, so I took a crack at it for fun.

View it on Youtube here.

If you want to recreate, PLEASE LOOK AT THE CODE, DO NOT RUN OR PASTE ANYTHING UNLESS YOU KNOW WHAT YOU ARE DOING. My code is safe, and I have ran it many times on my own account, but don't run it unless you have verified it yourself and you know what you are doing. These are not plug and play instructions, you gotta have some knowledge of what you are doing.

1. First download the video from youtube here as an mp4 and as an mp3
2. Download these scripts and put them into the same directory as you put that video.
3. Download the Discord page locally to an html file
4. Start a local server and navigate to your downloaded Discord page (works best in FireFox), push ctrl+shift+i and copy paste the code.
5. View the magic.

This was made by me, Wamy, if you like it join my Discord Server, I have other cool projects and a cool community there.

badapple.js

function setup() {
    document.getElementsByClassName("heading-xl-semibold-2Tt6Pc")[0].textContent = "Yes, this is in the Discord Discovery page on release Discord."
    document.getElementsByClassName("heading-xl-semibold-2Tt6Pc")[1].textContent = "Bad Apple!! but it's on the Discord Discovery page"
    document.getElementsByClassName("text-md-normal-304U3g")[0].textContent = "Seriously, you can try it yourself. Go to https://gist.github.com/Wamy-Dev/88e4a1be4aa81942403379fef63ede30"
    return "Text setup!"
}
function draw() {
    fetch('http://127.0.0.1:8080/data.json')
    .then(response => response.json())
    .then(data => {
        var audio = new Audio('http://127.0.0.1:8080/audio.mp3');
        audio.play();
        var frame = 0
        Object.keys(data).forEach(key => {
            Object.keys(data[key]).forEach((key2, i) => {
                setTimeout(() => {
                    Object.keys(data[key][key2]).forEach(key3 => {
                        Object.entries(data[key][key2][key3]).forEach(([key4, value]) => {
                            if (key4.split("_")[1] === "0") {
                                var images = document.getElementsByClassName("splashImageHeight-1mpt3D")
                                Array.from(images).forEach((el, index) => {
                                    if (index === parseInt(key4.split("_")[0])) {
                                        document.getElementsByClassName("cardHeader-1kPMOm")[index].style.marginBottom="0px"
                                        el.src=value
                                        el.style.width="320px"
                                    }
                                });
                            }
                            else {
                                var background = document.getElementsByClassName("guildInfo-PdhToW")
                                Array.from(background).forEach((el, index) => {
                                    if (index === parseInt(key4.split("_")[0])) {
                                        var img_tag = new Image();
                                        img_tag.onload = function() {
                                            document.getElementsByClassName("title-2vVOzt")[index].style.marginTop="32px"
                                            el.style.backgroundImage=`url('${value}')`
                                            el.style.backgroundSize="320px"
                                            el.style.backgroundPosition="left center"
                                            el.style.backgroundRepeat="no-repeat"
                                        }
                                        img_tag.src = value;
                                    }
                                });
                            }
                        })
                    })
                    document.getElementsByClassName("heading-lg-semibold-2Z_RS3")[0].textContent = `Frame: ${frame}`
                    frame++
                }, i * (1000/30));
            })
        })
    })
}
setup()
draw()

processing.py

from split_image import split_image
import cv2
import os
import json
from PIL import Image

for image in os.listdir("./images"):
    #delete all images in the images folder
    os.remove(os.path.join(os.getcwd(), "images", image))

obj = {}
obj["images"] = {}
vidcap = cv2.VideoCapture('Bad Apple!!.mp4')
success,image = vidcap.read()
frame = 0
root = os.getcwd()
while success:
    cv2.imwrite(f"./frames/frame{frame}.jpg", image)  
    success,image = vidcap.read()
    split_image("./frames/frame%d.jpg" % frame, 3, 3, False, False, True, f"./images")
    obj["images"][frame] = []
    for i in range(9):
        split_image(os.path.join(root, "images", f"frame{frame}_{i}.jpg"), 2, 1, False, True, True, f"./images")
        #now we have the 18 images
        for p in range(2):
            if (p % 2 == 0):
                #we are on bottom
                obj["images"][frame].append({f"{i}_1": f"http://127.0.0.1:8080/images/frame{frame}_{i}_1.jpg"})
            else:
                #we are on top
                obj["images"][frame].append({f"{i}_0": f"http://127.0.0.1:8080/images/frame{frame}_{i}_0.jpg"})
    print(f"Frame {frame} processed...")
    frame += 1

root = os.getcwd()
for image in os.listdir("./images"):
    new_name = image.split(".")[0] + ".webp"
    im = Image.open(os.path.join(root, "images", image))
    im.save(os.path.join(root, "images", new_name), format = "WebP", lossless = True)
    os.remove(os.path.join(root, "images", image))
with open("data.json", "w") as f:
    f.write(json.dumps(obj))

requirements.txt

split-image
opencv-python-headless