jnobuyuki/index.html Secret

## index.html
<!DOCTYPE html>

<html>
<head>
  <title>fontChange</title>

  <meta charset = "utf-8">
  <script src = "http://d3js.org/d3.v3.min.js"></script>
</head>

<body>
  <form>
    <textarea placeholder = "ここに好きな言葉を書いてください" cols = "40" maxlength = "72" id = "inputtxt"></textarea>
    <input type = "button" id = "startbutton" value = "START">

  </form>
  <div id="greeting"></div>
  <div id="stage"></div>

  <script src="main.js"></script>
</body>
</html>

## main.js
var fontarr = ['sans-serif','serif','cursive','monospace'];

document.getElementById("startbutton").addEventListener("click",charparse);

function charparse(){
  var tex = document.getElementById("inputtxt").value;
        var parsedlist = tex.split("");
        console.log(parsedlist);
        var cumlen = Math.floor(window.innerWidth * 0.05);
        var regionheight = 60;
        var regionstarty = 200;
        var chararr = new Array();
        var xunit = Math.floor(window.innerWidth * 0.05);
        for (i = 0; i < +parsedlist.length; i ++){
            console.log(parsedlist[i].length);
            var len = Math.floor(+parsedlist[i].length * xunit);

            //font size
            var charsize = Math.floor(Math.random() * xunit * 0.7) + Math.floor(xunit * 0.3);

            //x and y position
            if(i % 18 == 0){
              regionstarty = regionstarty + regionheight;
              cumlen = Math.floor(window.innerWidth * 0.05);
              startpoint = cumlen;
              cumlen = cumlen + len;
            } else {
              startpoint = cumlen;
              cumlen = cumlen + len;
            }
            //font
            var fontp = Math.floor((Math.random()*100)) % 4;
            var currentfont = fontarr[fontp];

            //angle
            var currentangle = Math.floor(Math.random() * 20) - 10;

            chararr[i] = new Object({item: parsedlist[i], startx: startpoint, starty: regionstarty, size: charsize, font: currentfont, angle: currentangle});
            console.log(chararr[i]);
        }
        show(chararr);
}

function show(arr){
  document.getElementById("startbutton").style.visibility = "hidden";
  document.getElementById("inputtxt").style.visibility = "hidden";
  document.body.style.backgroundColor = "#000000";
  var svg = d3.select("#stage").append("svg").attr("width","100%").attr("height",800);

  var text = svg.append("g").selectAll("text").data(arr).enter().append("text").attr("width",function(){ return Math.floor(window.innerWidth * 0.05);}).attr("height",function(){ return Math.floor(window.innerWidth * 0.05);}).attr("x",function(d){return d.startx;}).attr("y",function(d){return d.starty;}).style("font-size",function(d){return d.size;}).style("fill","white").text(function(d){return d.item;}).style('font-family',function(d){return d.font;}).style("opacity",0).transition().delay(function(d,i){ return 1000 + i * 1000;}).duration(800).style("opacity",1).attr("transform",function(d){ return "rotate(" + +d.angle +　", " + (d.startx + Math.floor(window.innerWidth * 0.025)) + ", " + (d.starty + Math.floor(window.innerWidth * 0.025)) + ")";});
}
	<!DOCTYPE html>

	<html>
	<head>
	<title>fontChange</title>

	<meta charset = "utf-8">
	<script src = "http://d3js.org/d3.v3.min.js"></script>
	</head>

	<body>
	<form>
	<textarea placeholder = "ここに好きな言葉を書いてください" cols = "40" maxlength = "72" id = "inputtxt"></textarea>
	<input type = "button" id = "startbutton" value = "START">

	</form>
	<div id="greeting"></div>
	<div id="stage"></div>

	<script src="main.js"></script>
	</body>
	</html>
	var fontarr = ['sans-serif','serif','cursive','monospace'];

	document.getElementById("startbutton").addEventListener("click",charparse);

	function charparse(){
	var tex = document.getElementById("inputtxt").value;
	var parsedlist = tex.split("");
	console.log(parsedlist);
	var cumlen = Math.floor(window.innerWidth * 0.05);
	var regionheight = 60;
	var regionstarty = 200;
	var chararr = new Array();
	var xunit = Math.floor(window.innerWidth * 0.05);
	for (i = 0; i < +parsedlist.length; i ++){
	console.log(parsedlist[i].length);
	var len = Math.floor(+parsedlist[i].length * xunit);

	//font size
	var charsize = Math.floor(Math.random() * xunit * 0.7) + Math.floor(xunit * 0.3);

	//x and y position
	if(i % 18 == 0){
	regionstarty = regionstarty + regionheight;
	cumlen = Math.floor(window.innerWidth * 0.05);
	startpoint = cumlen;
	cumlen = cumlen + len;
	} else {
	startpoint = cumlen;
	cumlen = cumlen + len;
	}
	//font
	var fontp = Math.floor((Math.random()*100)) % 4;
	var currentfont = fontarr[fontp];

	//angle
	var currentangle = Math.floor(Math.random() * 20) - 10;

	chararr[i] = new Object({item: parsedlist[i], startx: startpoint, starty: regionstarty, size: charsize, font: currentfont, angle: currentangle});
	console.log(chararr[i]);
	}
	show(chararr);
	}

	function show(arr){
	document.getElementById("startbutton").style.visibility = "hidden";
	document.getElementById("inputtxt").style.visibility = "hidden";
	document.body.style.backgroundColor = "#000000";
	var svg = d3.select("#stage").append("svg").attr("width","100%").attr("height",800);

	var text = svg.append("g").selectAll("text").data(arr).enter().append("text").attr("width",function(){ return Math.floor(window.innerWidth * 0.05);}).attr("height",function(){ return Math.floor(window.innerWidth * 0.05);}).attr("x",function(d){return d.startx;}).attr("y",function(d){return d.starty;}).style("font-size",function(d){return d.size;}).style("fill","white").text(function(d){return d.item;}).style('font-family',function(d){return d.font;}).style("opacity",0).transition().delay(function(d,i){ return 1000 + i * 1000;}).duration(800).style("opacity",1).attr("transform",function(d){ return "rotate(" + +d.angle +　", " + (d.startx + Math.floor(window.innerWidth * 0.025)) + ", " + (d.starty + Math.floor(window.innerWidth * 0.025)) + ")";});
	}