logo-o-matic

codepo8 · Jun 21, 2011 · 0ce8a2f · 0ce8a2f
commit 0ce8a2f
Show file tree

Hide file tree

Showing 8 changed files with 195 additions and 0 deletions.
diff --git a/allfonts.png b/allfonts.png
diff --git a/index.html b/index.html
@@ -0,0 +1,33 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>C-64 charset logo generator</title>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+  <link rel="stylesheet" href="logogen.css" type="text/css" charset="utf-8">
+</head>
+<body>
+  <header><h1>C-64 charset logo generator</h1></header>
+  <section>
+  <div id="container">
+  <ul id="nav">
+    <li><span>1:</span> Choose your font:</li>
+    <li><img src="qpd3c.png" alt="Cupid/Padua/Hitmen" id="qpd"></li>
+    <li><img class="current" src="rrr1.png" alt="RRR/Oxyron #1" id="rrr1"></li>
+    <li><img src="rrr2.png" alt="RRR/Oxyron #2" id="rrr2"></li>
+    <li><img src="ollie.png" alt="Ollie/Pride" id="ollie"></li>
+  </ul>
+  <form>
+    <p><span>2:</span> Type your text (lower case a-z only)</p>  
+  <div class="inputs"><input type="text" name="text" id="text"></div>
+  <div id="save"></div>
+  </form>
+  <canvas></canvas>
+  <div id="out"></div>
+</div>
+</section>
+<footer><p>Written by <a href="http://wait-till-i.com">Chris Heilmann</a> - <a href="http://twitter.com/codepo8">@codepo8</a></p></footer>
+<img src="allfonts.png" alt="" id="fonts">
+<script src="logogen.js"></script>
+</body>
+</html>
diff --git a/logogen.css b/logogen.css
@@ -0,0 +1,64 @@
+* { margin: 0; padding:0; font-family:calibri,sans-serif;} 
+canvas,#fonts { left:-9999px; display: block; opacity:0;position:absolute;}
+#nav{float:left;height:370px;background:#000}
+#nav li{
+ list-style:none;
+ text-align:center;
+ background:#000;
+ padding:5px;
+ color:#fff;
+}
+li,p,input{font-size:20px;}
+span{
+  text-align:center;
+  background:lime;
+  color:#000;
+  border-radius:30px;
+  width:30px;
+  height:30px;
+  margin-right:10px;
+  display:block;
+  float:left;
+}
+#nav img{
+  display:block;
+  display:block;
+  margin:0 auto;
+  border:2px solid #000;
+  -moz-transition:all .2s;
+  -webkit-transition:all .2s;
+  -o-transition:all .2s;
+  transition:all .2s;
+  -moz-transform:scale(.8);
+  -webkit-transform:scale(.8);
+  -o-transform:scale(.8);
+  transform:scale(.8);
+}
+#nav img:hover{
+  -moz-transform:scale(1);
+  -webkit-transform:scale(1);
+  -o-transform:scale(1);
+  transform:scale(1);
+}
+
+
+#nav img.current{
+  border:2px solid #999;
+  border-radius:10px;
+  -moz-transform:scale(1);
+  -webkit-transform:scale(1);
+  -o-transform:scale(1);
+  transform:scale(1);
+}
+#save img{display:block;margin:10px 0}
+#save{overflow:auto;height:150px;width:450px}
+.inputs{padding:10px 0}
+form{padding:5px 0 5px 20px;float:left;}
+#container{width:700px;height:370px;background:#999;margin:10px auto;overflow:hidden;}
+section,header,footer{
+  width:700px;
+  margin:10px auto;
+}
+h1{text-align:right;text-transform:uppercase;color:#060}
+footer a{color:#000}
+footer p{font-size:10px;text-align:right}
diff --git a/logogen.js b/logogen.js
@@ -0,0 +1,98 @@
+(function(){
+  if(document.querySelector){
+    var fonts = {
+          ollie:{
+            height:52,a:[4,40],b:[45,38],c:[86,37],d:[123,40],e:[163,40],
+            f:[203,33],g:[246,36],h:[286,36],i:[335,13],j:[365,32],k:[405,39],
+            l:[455,15],m:[486,61],n:[550,39],o:[590,39],p:[630,39],q:[670,37],
+            r:[708,41],s:[756,30],t:[790,37],u:[833,36],v:[871,37],w:[910,65],
+            x:[983,30],y:[1015,40],z:[1063,34],offset:200
+          },
+          qpd:{
+            height:33,a:[3,24],b:[27,24],c:[51,24],d:[75,24],e:[99,24],
+            f:[123,24],g:[147,24],h:[171,24],i:[195,24],j:[219,24],k:[243,24],
+            l:[267,24],m:[291,24],n:[315,24],o:[339,24],p:[363,24],q:[387,24],
+            r:[411,24],s:[435,24],t:[459,24],u:[483,24],v:[507,24],w:[531,24],
+            x:[555,24],y:[581,24],z:[605,24],offset:80
+          }, 
+          rrr1:{
+            height:74,a:[3,32],b:[35,32],c:[67,32],d:[99,32],e:[131,32],
+            f:[163,32],g:[195,32],h:[227,32],i:[259,16],j:[275,16],k:[291,32],
+            l:[323,16],m:[339,48],n:[387,32],o:[419,32],p:[451,32],q:[486,32],
+            r:[520,18],s:[539,32],t:[571,32],u:[603,32],v:[635,32],w:[667,48],
+            x:[715,32],y:[747,32],z:[779,32],offset:0
+          }, 
+          rrr2:{
+            height:58,a:[3,32],b:[35,32],c:[67,32],d:[99,32],e:[131,32],
+            f:[163,32],g:[195,32],h:[227,32],i:[259,16],j:[275,32],k:[307,32],
+            l:[339,32],m:[372,48],n:[419,32],o:[451,32],p:[482,32],q:[515,32],
+            r:[547,32],s:[579,32],t:[611,32],u:[643,32],v:[676,32],w:[707,48],
+            x:[755,32],y:[789,32],z:[820,32],offset:120
+          }
+        },
+        n = document.querySelector('#nav'),
+        ctx = document.querySelector('canvas').getContext('2d'),
+        srcimg = document.querySelector('#fonts'),
+        save = document.querySelector('#save'),
+        input = document.querySelector('#text'),
+        old = document.querySelector('.current'),
+        set = fonts[old.id],
+        valid = /^[a-z]+$/,
+        rep = /[^a-z]+/g,
+        url = document.location.href.split('?text=')[1];
+
+    if(url){
+      sanitise(url);
+    }; 
+
+    n.addEventListener('click',function(e){
+      var t = e.target;
+      if(t.tagName==='IMG'){
+        set = fonts[t.id];
+        old.className = '';
+        t.className = 'current';
+        old = t;
+        sanitise(input.value);
+      }
+      e.preventDefault();
+    },false);
+
+    input.addEventListener('keyup',function(e){
+      sanitise(input.value);
+      e.preventDefault();
+    },false);
+
+    function sanitise(s){
+      s = s.toLowerCase();
+      if(!valid.test(s)){ s = s.replace(rep,''); }
+      input.value = s;
+      if(s){
+        draw(s);
+      }
+    };
+
+    function draw(s){
+      var str = s.split(''), w = 0, h = 0, i = 0, j = str.length;
+      var destX = 5;
+      var destY = 5;
+      for(i=0;i<j;i++){ 
+        w += set[str[i]][1]; 
+      }
+      ctx.canvas.width = w + 10;
+      ctx.canvas.height = set.height + 10;
+      ctx.fillStyle = 'rgb(0, 0, 0)';
+      ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+      for(i=0;i<j;i++){
+        ctx.drawImage(
+          srcimg, set[str[i]][0], set.offset, set[str[i]][1], 
+          set.height, destX, destY, set[str[i]][1], set.height
+        );
+        destX += set[str[i]][1];
+      }
+      var img = document.createElement('img');
+      save.innerHTML = '';
+      save.appendChild(img);
+      img.src = ctx.canvas.toDataURL('image/png');
+    };    
+  }
+})();
diff --git a/ollie.png b/ollie.png
diff --git a/qpd3c.png b/qpd3c.png
diff --git a/rrr1.png b/rrr1.png
diff --git a/rrr2.png b/rrr2.png