let img;
let x1, x2, x3, x4;
let y1, y2, y3, y4;

let attempt, stringer;
stringer = 'The Beatles';
attempt = stringer.split('');

function preload() {
    beatles = loadImage('uploads/alexmurphy1996/theBeatles.JPG');
}
function setup() {
    createCanvas(800, 680);
    background(0);
    x1 = width/2;
    y1 = 0;
    x2 = width/2;
    y2 = 0;
    x3 = width/2 + 20;
    y3 = 0;
    x4 = width/2;
    y4 = 0;
}

function draw() {
    background(0);
    image(beatles,((width/2)-beatles.width/2), 0);
    if(stringer == attempt.join('')) {
        let a = get(((width/2)-beatles.width/2), 0, (beatles.width/2), (beatles.height/2));
        image(a, x1, y1);
        let b = get(width/2, 0, (beatles.width/2), (beatles.height/2));
        image(b, x2, y2);
        let c = get(((width/2)-beatles.width/2), (beatles.height/2), (beatles.width/2), (beatles.height/2));
        image(c, x3, y3);
        let d = get(width/2, (beatles.height/2), (beatles.width/2), (beatles.height/2));
        image(d, x4, y4);
        /*
        fill(0);
        noStroke();
        rect(0, 0, beatles.width, beatles.height);
        */
        if(x1>20){
            x1--;
        }
        if(x2>(width/4)+20){
            x2--;
        }
        if(x4<(3*(width/4)+20)){
            x4++;
        }
        if(y1<height/2) {
            y1++;
            y2++;
            y3++;
            y4++;
        }
    }
}