moji2

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() });

socket.on('message', recieveMessage);

var moji;

var messageBox = $("#message");

var saveMojiretsu = []; //入力された文字列を保存する配列

var particles = []; //文字列を粒子として保存する配列

var mojiretsu = "左上のボックスに入力してみよう";

var pMinMass = 20;

var pMaxMass = 30;

var mojiBaseSize = 20;

function setup(){

createCanvas(windowWidth,windowHeight);

fill(255);

//frameRate(10);

smooth();

textFont("serif");

textAlign(CENTER, CENTER);

colorMode(HSB);

fill(200, 255, 30);

rect(0, 0, width, height);

}

function draw(){

fill(200, 255, 30, 0.3); // adds halo or transparecy

rect(0, 0, width, height);

if(saveMojiretsu.length > 0){

saveMojiretsu.splice(0,1); //取り出した文字列を消去

console.log(mojiretsu.length);

var mojiretsuHaba = mojiretsu.length * mojiBaseSize; //文字列の幅を計算

var leftX = random(0, width - mojiretsuHaba); //文字列の左端の位置を決める

var displayColor = color(random(160, 200), 160, 255, 0.8);

for(var i=0; i<mojiretsu.length; i++){

var mass = random(pMinMass, pMaxMass);

var mojiSize = mojiBaseSize + map(mass, pMinMass, pMaxMass, -mojiBaseSize*0.5, mojiBaseSize*0.75);

var mojiPosX;

if(i==0) mojiPosX = leftX;

var newParticle = new Particle(moji, mojiSize, leftX+i*mojiBaseSize, 60, mass, displayColor);

particles.push(newParticle);

}

}

for (var i = particles.length-1; i > -1; i--) {

// Delete if it's out of bounds.

particles.splice(i, 1);

}

}

}

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

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

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

saveMojiretsu.push(nyuryoku); //取ってきた文字列を配列に保存

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

submitMessage(nyuryoku); //サーバにメッセージを飛ばす

}

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)); //文字を表示

}

function submitMessage(nyuryoku){ //メッセージを送る

var data = { mojiretsu: nyuryoku };

socket.emit('message', data);

}

function recieveMessage(data){ //メッセージを受け取る

var mojiretsu = data.mojiretsu;

saveMojiretsu.push(mojiretsu);

}

function Particle(char, mojiSize, x, y,mass, displayColor) {

this.pos = new p5.Vector(x, y);

this.vel = new p5.Vector(0, 0);

this.acc = new p5.Vector(0, 0);

this.mass = mass;

this.mojiSize = mojiSize;

this.char = char;

this.displayColor = displayColor;

this.fallRate = map(this.mass, pMinMass, pMaxMass, 0.015, 0.007);

this.move = function() {

var gravity = new p5.Vector(0, this.fallRate);

this.acc.add(gravity);

this.vel.add(this.acc);

this.pos.add(this.vel);

this.acc.mult(0);

}

this.display = function() {

fill(displayColor);

textSize(this.mojiSize);

text(this.char, this.pos.x, this.pos.y);

}

}