Skip to content

Instantly share code, notes, and snippets.

@f8lrebel

f8lrebel/index.html

Created July 1, 2012 05:07
Show Gist options
  • Save f8lrebel/3026899 to your computer and use it in GitHub Desktop.
Save f8lrebel/3026899 to your computer and use it in GitHub Desktop.
Download ZIP
A web page created at CodePen.io
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Interactive Canvas Text &middot; CodePen</title>
<style>
body { margin:0px;}
</style>
<style>
#codepen-footer, #codepen-footer * {
-webkit-box-sizing: border-box !important;
-moz-box-sizing: border-box !important;
box-sizing: border-box !important;
}
#codepen-footer {
display: block !important;
position: fixed !important;
bottom: 0 !important;
left: 0 !important;
width: 100% !important;
padding: 0 10px !important;
margin: 0 !important;
height: 30px !important;
line-height: 30px !important;
font-size: 12px !important;
color: #eeeeee !important;
background-color: #505050 !important;
text-align: left !important;
background: -webkit-linear-gradient(top, #505050, #383838) !important;
background: -moz-linear-gradient(top, #505050, #383838) !important;
background: -ms-linear-gradient(top, #505050, #383838) !important;
background: -o-linear-gradient(top, #505050, #383838) !important;
border-top: 1px solid black !important;
border-bottom: 1px solid black !important;
border-radius: 0 !important;
border-image: none !important;
box-shadow: inset 0 1px 0 #6e6e6e, 0 2px 2px rgba(0, 0, 0, 0.4) !important;
z-index: 300 !important;
font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, sans-serif !important;
letter-spacing: 0 !important;
word-spacing: 0 !important;
}
#codepen-footer a {
color: #a7a7a7 !important;
text-decoration: none !important;
}
#codepen-footer a:hover {
color: white !important;
}
</style>
<script>
// Kill alerts, confirmations and prompts
window.alert = function(){};
window.confirm = function(){};
window.prompt = function(){};
window.open = function(){};
window.print = function(){};
</script>
<script src="http://codepen.io/javascripts/libs/prefixfree.min.js"></script>
</head>
<body>
<canvas id='canvas'></canvas>
<script src="http://codepen.io/javascripts/libs/modernizr.js"></script>
<script>
(function() {
function Banner(){
var keyword = "HEY";
var canvas;
var context;
var bgCanvas;
var bgContext;
var denseness = 10;
//Each particle/icon
var parts = [];
var mouse = {x:-100,y:-100};
var mouseOnScreen = false;
var itercount = 0;
var itertot = 40;
this.initialize = function(canvas_id){
canvas = document.getElementById(canvas_id);
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
bgCanvas = document.createElement('canvas');
bgContext = bgCanvas.getContext('2d');
bgCanvas.width = window.innerWidth;
bgCanvas.height = window.innerHeight;
canvas.addEventListener('mousemove', MouseMove, false);
canvas.addEventListener('mouseout', MouseOut, false);
start();
}
var start = function(){
bgContext.fillStyle = "#000000";
bgContext.font = '300px impact';
bgContext.fillText(keyword, 85, 275);
clear();
getCoords();
}
var getCoords = function(){
var imageData, pixel, height, width;
imageData = bgContext.getImageData(0, 0, canvas.width, canvas.height);
// quickly iterate over all pixels - leaving density gaps
for(height = 0; height < bgCanvas.height; height += denseness){
for(width = 0; width < bgCanvas.width; width += denseness){
pixel = imageData.data[((width + (height * bgCanvas.width)) * 4) - 1];
//Pixel is black from being drawn on.
if(pixel == 255) {
drawCircle(width, height);
}
}
}
setInterval( update, 40 );
}
var drawCircle = function(x, y){
var startx = (Math.random() * canvas.width);
var starty = (Math.random() * canvas.height);
var velx = (x - startx) / itertot;
var vely = (y - starty) / itertot;
parts.push(
{c: '#' + (Math.random() * 0x949494 + 0xaaaaaa | 0).toString(16),
x: x, //goal position
y: y,
x2: startx, //start position
y2: starty,
r: true, //Released (to fly free!)
v:{x:velx , y: vely}
}
)
}
var update = function(){
var i, dx, dy, sqrDist, scale;
itercount++;
clear();
for (i = 0; i < parts.length; i++){
//If the dot has been released
if (parts[i].r == true){
//Fly into infinity!!
parts[i].x2 += parts[i].v.x;
parts[i].y2 += parts[i].v.y;
//Perhaps I should check if they are out of screen... and kill them?
}
if (itercount == itertot){
parts[i].v = {x:(Math.random() * 6) * 2 - 6 , y:(Math.random() * 6) * 2 - 6};
parts[i].r = false;
}
//Look into using svg, so there is no mouse tracking.
//Find distance from mouse/draw!
dx = parts[i].x - mouse.x;
dy = parts[i].y - mouse.y;
sqrDist = Math.sqrt(dx*dx + dy*dy);
if (sqrDist < 20){
parts[i].r = true;
}
//Draw the circle
context.fillStyle = parts[i].c;
context.beginPath();
context.arc(parts[i].x2, parts[i].y2, 4 ,0 , Math.PI*2, true);
context.closePath();
context.fill();
}
}
var MouseMove = function(e) {
if (e.layerX || e.layerX == 0) {
//Reset particle positions
mouseOnScreen = true;
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
}
var MouseOut = function(e) {
mouseOnScreen = false;
mouse.x = -100;
mouse.y = -100;
}
//Clear the on screen canvas
var clear = function(){
context.fillStyle = '#333';
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.closePath();
context.fill();
}
}
var banner = new Banner();
banner.initialize("canvas");
})();
</script>
<div id="codepen-footer">
<a style="color: #f73535 !important;" href="https://codepen.wufoo.com/forms/m7x3r3/def/field14=" onclick="window.open(this.href, null, 'height=517, width=680, toolbar=0, location=0, status=1, scrollbars=1, resizable=1'); return false">Report Abuse</a>
&nbsp;
<a href="/f8lrebel/pen/3/1">Edit this Pen</a>
</div>
</body>
</html>
Raw
index.js
function Banner(){
var keyword = "HEY";
var canvas;
var context;
var bgCanvas;
var bgContext;
var denseness = 10;
//Each particle/icon
var parts = [];
var mouse = {x:-100,y:-100};
var mouseOnScreen = false;
var itercount = 0;
var itertot = 40;
this.initialize = function(canvas_id){
canvas = document.getElementById(canvas_id);
context = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
bgCanvas = document.createElement('canvas');
bgContext = bgCanvas.getContext('2d');
bgCanvas.width = window.innerWidth;
bgCanvas.height = window.innerHeight;
canvas.addEventListener('mousemove', MouseMove, false);
canvas.addEventListener('mouseout', MouseOut, false);
start();
}
var start = function(){
bgContext.fillStyle = "#000000";
bgContext.font = '300px impact';
bgContext.fillText(keyword, 85, 275);
clear();
getCoords();
}
var getCoords = function(){
var imageData, pixel, height, width;
imageData = bgContext.getImageData(0, 0, canvas.width, canvas.height);
// quickly iterate over all pixels - leaving density gaps
for(height = 0; height < bgCanvas.height; height += denseness){
for(width = 0; width < bgCanvas.width; width += denseness){
pixel = imageData.data[((width + (height * bgCanvas.width)) * 4) - 1];
//Pixel is black from being drawn on.
if(pixel == 255) {
drawCircle(width, height);
}
}
}
setInterval( update, 40 );
}
var drawCircle = function(x, y){
var startx = (Math.random() * canvas.width);
var starty = (Math.random() * canvas.height);
var velx = (x - startx) / itertot;
var vely = (y - starty) / itertot;
parts.push(
{c: '#' + (Math.random() * 0x949494 + 0xaaaaaa | 0).toString(16),
x: x, //goal position
y: y,
x2: startx, //start position
y2: starty,
r: true, //Released (to fly free!)
v:{x:velx , y: vely}
}
)
}
var update = function(){
var i, dx, dy, sqrDist, scale;
itercount++;
clear();
for (i = 0; i < parts.length; i++){
//If the dot has been released
if (parts[i].r == true){
//Fly into infinity!!
parts[i].x2 += parts[i].v.x;
parts[i].y2 += parts[i].v.y;
//Perhaps I should check if they are out of screen... and kill them?
}
if (itercount == itertot){
parts[i].v = {x:(Math.random() * 6) * 2 - 6 , y:(Math.random() * 6) * 2 - 6};
parts[i].r = false;
}
//Look into using svg, so there is no mouse tracking.
//Find distance from mouse/draw!
dx = parts[i].x - mouse.x;
dy = parts[i].y - mouse.y;
sqrDist = Math.sqrt(dx*dx + dy*dy);
if (sqrDist < 20){
parts[i].r = true;
}
//Draw the circle
context.fillStyle = parts[i].c;
context.beginPath();
context.arc(parts[i].x2, parts[i].y2, 4 ,0 , Math.PI*2, true);
context.closePath();
context.fill();
}
}
var MouseMove = function(e) {
if (e.layerX || e.layerX == 0) {
//Reset particle positions
mouseOnScreen = true;
mouse.x = e.layerX - canvas.offsetLeft;
mouse.y = e.layerY - canvas.offsetTop;
}
}
var MouseOut = function(e) {
mouseOnScreen = false;
mouse.x = -100;
mouse.y = -100;
}
//Clear the on screen canvas
var clear = function(){
context.fillStyle = '#333';
context.beginPath();
context.rect(0, 0, canvas.width, canvas.height);
context.closePath();
context.fill();
}
}
var banner = new Banner();
banner.initialize("canvas");
Raw
markup.html
<canvas id='canvas'></canvas>
Raw
style.css
body { margin:0px;}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment