Skip to content

Instantly share code, notes, and snippets.

@z-------------

z-------------/bob-is-awesome.html

Created March 20, 2014 06:45
Show Gist options
  • Save z-------------/9658521 to your computer and use it in GitHub Desktop.
Save z-------------/9658521 to your computer and use it in GitHub Desktop.
Download ZIP
Substitute `person` with someone's name and watch the awesomeness
Raw
bob-is-awesome.html
<!DOCTYPE html>
<html>
<head>
<style>
* {
font-family:"Helvetica Neue",Helvetica,sans-serif;
}
html,body {
height:100%;
width:100%;
margin:0;
}
canvas {
background-color:black;
}
span {
position:absolute;
font-weight:700;
margin:-75px -400px;
}
</style>
<script>
var texts = ["is awesome","is cool","is a nice person"];
var person = "Bob";
var delay = 1;
function writeText(){
ctx.font = Math.round((Math.random()*(700-100)+100)/100)*100 + " " + Math.round(Math.random()*200) + "px Helvetica";
ctx.fillStyle = "rgba("+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+","+Math.round(Math.random()*255)+",.7)";
var _thisString = person + " " +texts[Math.round(Math.random()*(texts.length-1))];
ctx.fillText(_thisString,Math.random()*innerWidth-400,Math.random()*innerHeight+50);
document.title = _thisString;
}
document.addEventListener("DOMContentLoaded",function(){
document.querySelector("canvas").setAttribute("width",window.innerWidth);
document.querySelector("canvas").setAttribute("height",window.innerHeight);
window.ctx = document.querySelector("canvas").getContext("2d");
window.main = setInterval(writeText,delay);
})
addEventListener("resize",function(){
document.querySelector("canvas").setAttribute("width",window.innerWidth);
document.querySelector("canvas").setAttribute("height",window.innerHeight);
});
</script>
</head>
<body><canvas></canvas></body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment