"text"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <canvas id = "kannwas" width="900" height="350"> </canvas> <input type="text" id="text" value="hello" /> <script> var particles = new Array(2500), pi2 = Math.PI * 2; var can, ctx, map; window.onload = function() { can = document.getElementById('kannwas'); ctx = can.getContext('2d'); map = new Array(can.width * can.height); for (var i = 0; i < particles.length; i++) particles[i] = new Particle(); makeMap(document.getElementById('text').value); document.getElementById('text').onkeyup = function() { makeMap(document.getElementById('text').value); } loop(); } function makeMap(text) { var canT = document.createElement('canvas'); canT.width = can.width; canT.height = can.height; var ctxT = canT.getContext('2d'); ctxT.fillStyle = 'rgb(255,255,255)'; ctxT.font = '300px sans-serif'; ctxT.textAlign = 'left'; ctxT.textBaseline = 'middle'; ctxT.fillText(text, 20, canT.height / 2); var pixT = ctxT.getImageData(0, 0, canT.width, canT.height).data; for (var i = 0, n = canT.width * canT.height; i < n; i++) { map[i] = pixT[i * 4] > 0; } } function Particle() { this.x = Math.random() * can.width; this.y = Math.random() * can.height; this.vx = Math.random() * 3 - 1.5; this.vy = Math.random() * 3 - 1.5; this.c = 'rgba(0,0,0,.5)'; this.r = 0; this. in =false; } Particle.prototype.update = function() { this.x += this.vx; this.y += this.vy; if (this.x < 0 || this.x > can.width) this.vx = -this.vx; if (this.y < 0 || this.y > can.height) this.vy = -this.vy; this.in =map[~~this.y * can.width + ~~this.x]; if (this. in &&this.r < 12) this.r++; else if (!this. in &&this.r > 0) this.r--; if (this.r) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r, 0, pi2, true); ctx.closePath(); ctx.fill(); } } Particle.prototype.drawinset=function(){ if (this.r) { ctx.beginPath(); ctx.arc(this.x, this.y, this.r*.8, 0, pi2, true); ctx.closePath(); ctx.fill(); } } function loop() { can.width = can.width; ctx.shadowColor = '#88b'; ctx.shadowBlur = 4; ctx.shadowOffsetX = 2; ctx.shadowOffsetY = 2; ctx.fillStyle = '#888'; for (var i = 0, n = particles.length; i < n; i++) particles[i].update(); ctx.fillStyle = '#fff'; ctx.shadowColor="transparent"; for (var i = 0, n = particles.length; i < n; i++) particles[i].drawinset(); setTimeout(loop, 20); } </script>
*{ margin:0; } body{ background-color:#eee; } #text{ display:block; margin:10px auto; background-color:#eee; border:1px solid #888; } #kannwas{ display:block; margin:10px auto; }

Related: See More


Questions / Comments: