Permalink
Browse files

logo-o-matic

  • Loading branch information...
0 parents commit 0ce8a2f0952dfb4efd7f8797e64191bae59f1076 @codepo8 committed Jun 21, 2011
Showing with 195 additions and 0 deletions.
  1. BIN allfonts.png
  2. +33 −0 index.html
  3. +64 −0 logogen.css
  4. +98 −0 logogen.js
  5. BIN ollie.png
  6. BIN qpd3c.png
  7. BIN rrr1.png
  8. BIN rrr2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@@ -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>
@@ -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}
@@ -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');
+ };
+ }
+})();
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 0ce8a2f

Please sign in to comment.