let pixelSkip = 8; //Edit this to make the image more detailed, but will take longer to render

let alphabetArray = 'qwertyuiopasdfghjklzxcvbnmQWERTYUIOPASDFGHJKLZXCVBNM'.split('');

​

//Style 2

//let pixelSkip = 40; //Edit this to make the image more detailed, but will take longer to render

//let alphabetArray = '汉皇重色思倾国御宇多年求不得杨家有女初长成养在深闺人未识天生丽质难自弃一朝选在君王侧回眸一笑百媚生六宫粉黛无颜色春寒赐浴华清池温泉水滑洗凝脂侍儿扶起娇无力始是新承恩泽时云鬓花颜金步摇芙蓉帐暖度春宵春宵苦短日高起从此君王不早朝承欢侍宴无闲暇春从春游夜专夜后宫佳丽三千人三千宠爱在一身金屋妆成娇侍夜玉楼宴罢醉和春姊妹弟兄皆列土可怜光采生门户遂令天下父母心不重生男重生女骊宫高处入青云仙乐风飘处处闻缓歌慢舞凝丝竹尽日君王看不足渔阳鼙鼓动地来惊破霓裳羽衣曲九重城阙烟尘生千乘万骑西南行翠华摇摇行复止西出都门百余里六军不发无奈何宛转蛾眉马前死花钿委地无人收翠翅金雀玉搔头君王掩面救不得回看血泪相和流黄埃散漫风萧索云栈萦纡登剑阁峨嵋山下少人行旌旗无光日色薄蜀江水碧蜀山青圣主朝朝暮暮情行宫见月伤心色夜雨闻铃肠断声天旋地转回龙驭到此踌躇不能去马嵬坡下泥土中不见玉颜空死处君臣相顾尽沾衣东望都门信马归归来池苑皆依旧太液芙蓉未央柳芙蓉如面柳如眉对此如何不泪垂春风桃李花开夜秋雨梧桐叶落时西宫南苑多秋草落叶满阶红不扫梨园弟子白发新椒房阿监青娥老夕殿萤飞思悄然孤灯挑尽未成眠迟迟钟鼓初长夜耿耿星河欲曙天鸳鸯瓦冷霜华重翡翠衾寒谁与共悠悠生死别经年魂魄不曾来入梦临邛道士鸿都客能以精诚致魂魄为感君王辗转思遂教方士殷勤觅排空驭气奔如电升天入地求之遍上穷碧落下黄泉两处茫茫皆不见忽闻海上有仙山山在虚无缥缈间楼阁玲珑五云起其中绰约多仙子中有一人字太真雪肤花貌参差是金阙西厢叩玉扃转教小玉报双成闻道汉家天子使九华帐里梦魂惊揽衣推枕起徘徊珠箔银屏迤逦开云髻半偏新睡觉花冠不整下堂来风吹仙袂飘飖举犹似霓裳羽衣舞玉容寂寞泪阑干梨花一枝春带雨含情凝睇谢君王一别音容两渺茫昭阳殿里恩爱绝蓬莱宫中日月长回头下望人寰处不见长安见尘雾惟将旧物表深情钿合金钗寄将去钗留一股合一扇钗擘黄金合分钿但教心似金钿坚天上人间会相见临别殷勤重寄词词中有誓两心知七月七日长生殿夜半无人私语时在天愿作比翼鸟在地愿为连理枝天长地久有时尽此恨绵绵无绝期'.split('');

​

var playerTurn = 1;

let img ;

​

function preload() {

  img = loadImage('art/art1.png');

}

​

function setup() {

    createCanvas(windowWidth, windowHeight);

    noStroke();

    console.log(img);

    frameRate(2);

}

​

function draw() {

​

    background(0);

  //Text format

    for (let i = 0; i < width; i++) {

    let r = random(5,20);

    textSize(r);

    }

    for (var y = 0; y < img.height; y += pixelSkip) {

        for (var x = 0; x < img.width; x += pixelSkip) {

            let c = img.get(x, y);

            fill(c);

​

                        let randomNumber = Math.round(random(51));

            let randomLetter = alphabetArray[randomNumber];

            text(String(randomLetter), x, y);

        }

    }

        image(img, windowWidth, 0)

}

​

function mousePressed() {

    if(playerTurn == 1){

        image(img);

        playerTurn = 2

        img=loadImage('art/art2.png');

    }

    else if(playerTurn == 2){

        image(img);

        playerTurn = 3

        img=loadImage('art/art3.png');

    }

    else if(playerTurn == 3){

        image(img);

        playerTurn = 4

        img=loadImage('art/art4.png');

    }

        else if(playerTurn == 4){

        image(img);

        playerTurn = 5

        img=loadImage('art/art5.png');

    }

    else if(playerTurn == 5){

        image(img);

        playerTurn = 6

        img=loadImage('art/art6.png');

    }

        else if(playerTurn == 6){

        image(img);

        playerTurn = 7

        img=loadImage('art/art7.png');

    }

        else if(playerTurn == 7){

        image(img);

        playerTurn = 8

        img=loadImage('art/art8.png');

    }

        else if(playerTurn == 8){

        image(img);

        playerTurn = 9

        img=loadImage('art/art9.png');

    }

        else if(playerTurn == 9){

        image(img);

        playerTurn = 10

        img=loadImage('art/art10.png');

    }

        else if(playerTurn == 10){

        image(img);

        playerTurn = 11

        img=loadImage('art/art11.png');

    }

        else if(playerTurn == 11){

        image(img);

        playerTurn = 12

        img=loadImage('art/art12.png');

    }

        else if(playerTurn == 12){

        image(img);

        playerTurn = 13

        img=loadImage('art/art13.png');

    }

        else if(playerTurn == 13){

        image(img);

        playerTurn = 14

        img=loadImage('art/art14.png');

    }

        else if(playerTurn == 14){

        image(img);

        playerTurn = 15

        img=loadImage('art/art15.png');

    }

        else if(playerTurn == 15){

        image(img);

        playerTurn = 26

        img=loadImage('art/art26.png');

    }

        else if(playerTurn == 16){

        image(img);

        playerTurn = 17

        img=loadImage('art/art17.png');

    }

        else if(playerTurn == 17){

        image(img);

        playerTurn = 18

        img=loadImage('art/art18.png');

    }

        else if(playerTurn == 18){

        image(img);

        playerTurn = 19

        img=loadImage('art/art19.png');

    }

        else if(playerTurn == 19){

        image(img);

        playerTurn = 20

        img=loadImage('art/art20.png');

    }

        else if(playerTurn == 20){

        image(img);

        playerTurn = 21

        img=loadImage('art/art21.png');

    }

        else if(playerTurn == 21){

        image(img);

        playerTurn = 22

        img=loadImage('art/art22.png');

    }

        else if(playerTurn == 22){

        image(img);

        playerTurn = 1

        img=loadImage('art/art1.png');

    }

}