Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

logo-o-matic

  • Loading branch information...
commit 0ce8a2f0952dfb4efd7f8797e64191bae59f1076 0 parents
@codepo8 authored
BIN  allfonts.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 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>
64 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}
98 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');
+ };
+ }
+})();
BIN  ollie.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  qpd3c.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  rrr1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN  rrr2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Please sign in to comment.
Something went wrong with that request. Please try again.