p5jsでpngをBase64文字列にしてコードに埋め込んでspriteに

Blogger上でp5jsでsprites用の画像を扱うのが面倒そうなので

文字列にして埋め込んでみる

変換コードもコピペしたので残す 

imageで読み込む際に文字列の頭にこれをつける'data:image/png;base64,'

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.5.0/p5.js"></script>
<div id="p5canvas"></div>
<script>   

let img;
let spx=10;
let spy=10;
let timer=0;

function setup() {
  createCanvas(400, 200).parent("p5canvas");
  frameRate(30);
  img = loadImage('data:image/png;base64,'+
  'iVBORw0KGgoAAAANSUhEUgAAACAAAAAQCAMAAABA3o1rAAADAFBMVEUAiACIAIi7u7uqzO4AAAAzIiJEMzOId2aZiIi7qqrdzLv/7t3///9VEQB3EQCqIgDMMwD/RAD/dxH/uxH/3SL/7ncRIndEVf9mzP+I3f+7//+ZzO677v8zRBEzZhGI3QC7/wARmXciAEREEVXMZojumar/zN27RFXuu8x3MyKZRETMd2b/mZkzIhFVMyKIVUSZd1W7iGbMqnfuzKr/3cwiEQBEIhGqZiLMdzPdiETumVX/u2b/3Yjd3VURMzMRd3cRu7sR//93ZruZd+4zM2ZmZpmZiLvMu+7//+6ZmaqIiIj/AP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP8AAP+9hPPFAAAAAXRSTlMAQObYZgAAAAd0SU1FB+YKGQQ3OaNj0msAAAFZSURBVHjaZVFdSwJBFD3jbpbrVysLPWwamKyW9AX2kOgfsN9bL73agxDRB7Ti2hayllIQtBuVrU53RqOvC3PnzNxzDvfOIJGAjNkmQ1XV6ZanFBAjmJZLbZH3Ow70pEC+ZCGo2xskWDiiGg5QkB6TbzcYk+LElnj1EhmGw4YDrdCl85ZIqgHO06/bvGM8NhXk4eouwF6EIJAOFhFQ9+6K7Mt2mHnm9/CwPBCnCO94Y6DrO5wkwXRBiExOicwMKyV1JxizvETXeJorwd4BYp5LTeIhdoo1wLLB2RXWBSc7gH4LJEU7GaRzQC+t8TaynMbRFHqAPenVd8WYWAG80eIFXRgsh4/zEWD2Zo8QggFxPYxw/y0EasM+zKUmVHM2UF8Qqi7zd9ul0TFq86RQw/fmj29BhJpUUo4ipjxTb1ottPA3tAr9REUgi3Ij/o9QLgPFqkDRKK3N39VPI2h1VzbxKN4AAAAASUVORK5CYII=');
}

function draw() {
	background(0);
	img.resize(32*4,16*4);
	
    if(spx>mouseX)spx--;else if(spx<mouseX) spx++;
    if(spx<0)spx=0;if(spx>350)spx=350;
    if(spy>mouseY)spy--;else if(spy<mouseY)  spy++;    
    if(spy<0)spy=0;if(spy>150)spy=150;
    timer++;
    if(timer>5000)timer=0;
    let flg=parseInt(timer/8)%2;
    image(img, 10, 10, 10*4, 16*4, 10*4, 0, 10*4,16*4);
    image(img, 90, 15, 10*4, 16*4, 0, 0, 10*4,16*4);
    image(img, 150, 30, 10*4, 16*4, 20*4, 0, 10*4,16*4);
    if(flg==0)
    	image(img, spx, spy, 10*4, 16*4, 0, 0, 10*4,16*4);
    else
    image(img, spx, spy+4, 10*4, 15*4, 0, 0, 10*4,16*4);    	
}
</script>