Last active
November 22, 2015 20:36
-
-
Save Mavromatika/8dcd07d2e70ee618b4d1 to your computer and use it in GitHub Desktop.
Lebowsky Ransom
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
font | |
Arial | |
Arial Black | |
Arial Bold | |
Arial Bold Italic | |
Arial Italic | |
Comic Sans MS | |
Comic Sans MS Bold Courier | |
Courier New | |
Courier New Bold | |
Courier New Bold Italic | |
Courier New Italic | |
Estrangelo Edessa | |
Franklin Gothic Medium | |
Franklin Gothic Medium | |
Italic | |
Gautami | |
Georgia | |
Georgia Bold | |
Georgia Bold Italic | |
Georgia Italic Impact | |
Latha | |
Lucida Console | |
Lucida Sans Unicode | |
Microsoft Sans Serif | |
Modern MS Sans Serif | |
MS Serif | |
Mv Boli | |
Palatino Linotype | |
Palatino Linotype Bold | |
Palatino Linotype Bold Italic | |
Palatino Linotype Italic | |
Roman | |
Script | |
Small Fonts | |
Symbol | |
Tahoma | |
Tahoma Bold | |
Times New Roman | |
Times New Roman Bold | |
Times New Roman Bold Italic | |
Times New Roman Italic | |
Trebuchet MS | |
Trebuchet MS Bold | |
Trebuchet MS Bold Italic | |
Trebuchet MS Italic | |
Tunga | |
Verdana | |
Verdana Bold | |
Verdana Bold Italic Verdana Italic | |
Webdings | |
WingDings |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<head> | |
<meta charset="utf-8"> | |
<title>Ransom note - Mavromatika</title> | |
</head> | |
<style> | |
body{ | |
background-color:grey; | |
font-family: sans-serif; | |
} | |
#container{ | |
width: 800px; | |
margin: auto; | |
background-color:white; | |
box-shadow: 10px 10px 5px #343434; | |
} | |
tspan{ | |
font-size:28px; | |
} | |
#entree{ | |
position : fixed; | |
width: 200px; | |
top: 7px; | |
left:7px; | |
} | |
#entree p{ | |
margin-left: 5px; | |
} | |
textarea { | |
width: 200px; | |
height: 300px; | |
} | |
button { | |
width:200px; | |
} | |
#right{ | |
font-size: 80%; | |
font-style: italic; | |
} | |
</style> | |
<body> | |
<div id="entree"> | |
<textarea>We have bunnie, gather one million dollars in unmarked non-consecutive twentyies! Await instructions. No funny stuff</textarea><br> | |
<button>Update</button> | |
<p>Enter your own text above and click "update" to create your ransom note.</p> | |
<p>Be aware that kidnapping Bunny Lebowsky and asking for a ransom is most likely a crime in your country.</p> | |
<p id="right">Made by Mavromatika, 2015.</p> | |
</div> | |
<div id="container"> | |
</div> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
<script type="text/javascript"> | |
var w = 800, h = 600; | |
var svg = d3.select("#container") | |
.append("svg") | |
.attr("width",w) | |
.attr("height",h); | |
var texte = "We have bunnie, gather one million dollars in unmarked non-consecutive twentyies! Await instructions. No funny stuff"; | |
var letterspace = 24, lineheight = 66; | |
var paddingTop = 60, paddingRight = 50; | |
var numCol = Math.floor((w - (paddingRight*2)) / letterspace); | |
var couleurs = ["#626262","#505050","#797979","#c40b0b","#ff4141"]; | |
var coulScale = d3.scale.quantize() | |
.range(couleurs) | |
.domain([0,1]); | |
var norm = d3.random.normal(); | |
d3.csv("fonts.csv", function(data){ | |
function makeLetter(texte){ | |
var word = []; | |
var wordList = []; | |
var donnees = []; | |
// List of punctuation signs | |
var ponctuation = [" ",",","?",";",".",":","/","=","+","~","*","!","&","#","(",")","{","}","[","]","-","_","\n"]; | |
// Line and column counters | |
var comptLig = 0; | |
var comptCol = 0; | |
// Variables for the attributes of each letter | |
var fontVal = 0, colVal = 0, yVal = 0, upperVal = 0, boldVal = 0, italicVal =0, outVal = 0; | |
var compteur = 0; | |
// Make array of words (separated bu punctuation | |
for (var i = 0; i < texte.length; i++){ | |
if (ponctuation.indexOf(texte[i]) > -1){ | |
wordList.push(word); | |
word = [{'index':i, 'letter':texte[i]}]; | |
wordList.push(word); | |
word = []; | |
} | |
else { | |
word.push({'index':i,'letter':texte[i]}); | |
} | |
} | |
// Last word if not punctuation | |
if (word != []){ | |
wordList.push(word); | |
} | |
// Loop through list of words... | |
for (i = 0; i < wordList.length; i++){ | |
// Create new line when necessary... | |
if (wordList[i].length > 0){ | |
if ((comptCol > numCol) || (comptCol + wordList[i].length > numCol || wordList[i][0].letter == "\n")){ | |
comptLig += 1; | |
comptCol = 0; | |
} | |
} | |
// Loop through each words and compute attributes | |
compteur = 0; | |
for (j = 0; j < wordList[i].length; j++){ | |
if (wordList[i][j].letter != '\n'){ | |
if (compteur == 0){ | |
// Calculate counter | |
compteur = Math.floor( Math.random() * d3.min([(wordList[i].length - j - 1), 6]) ); | |
console.log(compteur); | |
fontVal = Math.floor(Math.random() * data.length) | |
colVal = Math.random(); | |
yVal = comptLig * lineheight + paddingTop + (norm() * 5); | |
upperVal = norm() > 0.5 ? 1:0; | |
boldVal = norm() > 0.5 ? 1:0; | |
italicVal = norm() > 0.5 ? 1:0; | |
outVal = norm() > 0.5 ? 1:0; | |
console.log(compteur); | |
} | |
donnees.push({"letter":wordList[i][j].letter, | |
"font":data[fontVal].font, | |
"y": yVal, | |
"x": comptCol * letterspace + paddingRight, | |
"color": colVal, | |
"upper": upperVal, | |
"bold": boldVal, | |
"italic": italicVal, | |
"out": outVal | |
}); | |
comptCol += 1; | |
compteur -= 1; | |
} | |
} | |
} | |
svg.attr("height", comptLig * lineheight + paddingTop + 50); | |
var contenant = svg.append("text"); | |
contenant.selectAll("tspan") | |
.data(donnees) | |
.enter() | |
.append("tspan") | |
.text(function(d){ | |
if(d.upper){ | |
return d.letter.toUpperCase(); | |
} | |
else{ | |
return d.letter; | |
} | |
}) | |
.attr("x",function(d,i){return d.x;}) | |
.attr("y",function(d){return d.y;}) | |
.style("font-family",function(d){return d.font;}) | |
.style("font-style",function(d){ | |
if(d.bold){return "bold";} | |
else{return "normal";} | |
}) | |
.style("font-style",function(d){ | |
if(d.italic){return "italic";} | |
else{return "normal";} | |
}) | |
.attr("stroke",function(d){ | |
if(d.out){ | |
return "black"; | |
} | |
else{return coulScale(d.color);} | |
}) | |
.attr("fill",function(d){ | |
if (d.out){ | |
return "white"; | |
} | |
else { | |
return coulScale(d.color); | |
} | |
}); | |
} | |
makeLetter(texte); | |
d3.select("button").on("click",function(d){ | |
d3.select("text").remove(); | |
makeLetter(d3.select("textarea").node().value); | |
}); | |
}); | |
</script> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment