文字絵を動かす(JavaScript, p5.js) 　このページの下で動いています。

漢字のデータは　http://ichihashi.jimdo.com/freemat２/絵文字で描画/　　のプログラムを修正して作成したのをコピーして貼り付けました。

index.htmlファイル

Mojiga.jsファイル

var dataS = [
"　","　","　","　","　","　","　","　","　","　","　","　","　","　","　","　","　",
"立","立","立","立","立","立","立","立","立","立","休","森","休","　","車","　","　",

（省略）

"立","立","立","立","立","休","立","立","立","立","　","車","車","中","　","立","休",
"　","　","立","立","立","立","立","立","立","立","　","車","立","立","立","　","中",
];
var d=0; var cc=0; var rr=0;
function preload() {
//img = loadImage("P10007078.jpg");
img = loadImage("https://image.jimcdn.com/app/cms/image/transf/dimension=210x1024:format=jpg/path/sf5d368e95ee23ef6/image/if28f9bd2cf3bcd18/version/1447034099/image.jpg");
}
function setup() {
    createCanvas(400, 500);
   }
function draw() {
   background(240); d +=5;
   if(mouseX>300 && mouseY>400){
   image(img, 0, 0, 80, 80); // tint(255, 150);
   }
   fill(255); rect(310,410,50,50);
   fill(255,255,0);
ellipse(mouseX, mouseY, 10, 30);      ellipse(mouseX, mouseY-20, 10, 10);
ellipse(mouseX-2, mouseY+25, 5, 30); ellipse(mouseX+5, mouseY+25, 5, 30);
ellipse(mouseX+7, mouseY-2, 3, 15);   ellipse(mouseX-7, mouseY-10, 20, 3);
     for (var r = 0; r < 39; r++) {
     for (var c = 0; c < 32; c++) {
      textSize(10); var e = dataS[r*33+c];
      if (r*10+d>600){d=-70;}
      if(abs(mouseX-(c*10+40))<20 && abs(mouseY-(r*10+d))<20) {
      fill(255, 0, 0);
      cc=c*10+40-random(40); rr=r*10+d-random(40)
      }
      else{
      fill(0, 0, 0);
      cc=c*10+40; rr=r*10+d;
      }
      text(e,cc,rr);
       }
    }
}

文字のところにマウスを持って行くと字が飛び散り、右下の箱に持って行くと写真が左上に出ます。スマホではタッチしてください。

文字絵を動かす(JavaScript, p5.js) このページの下で動いています。

文字絵を動かす(JavaScript, p5.js) 　このページの下で動いています。