Skip to content

Instantly share code, notes, and snippets.

@Mavromatika

Mavromatika/fonts.csv

Last active November 22, 2015 20:36
Show Gist options
  • Save Mavromatika/8dcd07d2e70ee618b4d1 to your computer and use it in GitHub Desktop.
Save Mavromatika/8dcd07d2e70ee618b4d1 to your computer and use it in GitHub Desktop.
Download ZIP
Lebowsky Ransom
Raw
fonts.csv
We can make this file beautiful and searchable if this error is corrected: No commas found in this CSV file in line 0.
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
Raw
index.html
<!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