Skip to content

Instantly share code, notes, and snippets.

@jnobuyuki

jnobuyuki/index.html Secret

Last active August 29, 2015 14:14
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jnobuyuki/cdcbf4a1a7da40e7471b to your computer and use it in GitHub Desktop.
Save jnobuyuki/cdcbf4a1a7da40e7471b to your computer and use it in GitHub Desktop.
Download ZIP
文字ごとに属性の値を変えるChanging font properties by each character
Raw
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>
Raw
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)) + ")";});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment