moji

code:code.js

$('<div id="howto"><input id="message" type="search" placeholder="文字を入力" style="background-color:#666; font-size:12px; color:#ccc; border-color:#333;"></div>').appendTo($('body'));

$("#message").change(function(){ inputFinished() });

var moji;

var mojiretu;

var messageBox = $("#message");

function setup(){

createCanvas(windowWidth,windowHeight);

fill(255);

frameRate(10);

smooth();

textFont("serif");

textAlign(CENTER, CENTER);

fill(0, 35, 45);

rect(0, 0, width, height);

}

function draw(){

fill(0, 35, 45, 20); // adds halo or transparecy

rect(0, 0, width, height);

}

function inputFinished(){ //入力が終わった時に実行

var nyuryoku = getMessageBox(); //文字列を取ってくる

drawText(nyuryoku); //取ってきた文字列を描画させる

setMessageBox(""); //テキストボックスをリセットする

}

function getMessageBox(){ //テキストボックスに入力されている文字列を取る

return messageBox.val();

}

function setMessageBox(some){ //テキストボックスに指定した文字列を入れる

messageBox.val(some);

}

function drawText(nyuryoku){ //文字列をランダムな位置、ランダムな大きさで表示する

fill(255);

textSize(random(10,100)); //文字の大きさをランダムに決める

var mojiHaba = textWidth(nyuryoku); //文字列の幅を計算させる

var mojiX = (random(width-mojiHaba/2)); //表示位置は文字が画面からはみ出さない範囲

text(nyuryoku, mojiX, random(height/2)); //文字を表示

}