Letter fountain
How do I make an letter fountain?
A simple experiment with canvas particle systems. What is a letter fountain? How do you make a letter fountain? This script and codes were developed by Aurer on 03 August 2022, Wednesday.
Letter fountain - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Letter fountain</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ html, body{ background: #000; width: 100%; padding: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id="c"></canvas> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Letter fountain - Script Codes CSS Codes
html, body{ background: #000; width: 100%; padding: 0;
}
Letter fountain - Script Codes JS Codes
// shim layer with setTimeout fallback
window.requestAnimFrame = (function(){ return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || function( callback ){ window.setTimeout(callback, 1000 / 60); };
})();
var anim = { init: function(){ var canvas = document.getElementById('c'); canvas.width = window.innerWidth; canvas.height = window.innerHeight; this.c = canvas.getContext('2d'); this.letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ"; this.gravity = 0.1; this.maxParticles = 100; this.cw = canvas.width, this.ch = canvas.height, this.particles = [] }, render: function(){ this.fadeCanvas(); var particle = { x: anim.cw/2, y: anim.ch, xSpeed: (Math.random()*20)-10, ySpeed: (Math.random()*20)-10, size: 10, character: anim.letters[Math.floor( Math.random() * anim.letters.length )], color: [155, 100, 50, .7] } this.particles.push(particle); this.tidyParticles(); this.drawParticles(); }, drawParticles: function(){ var paritcleCount = this.particles.length; var c = this.c; for(var i=0; i < paritcleCount; i++){ var particle = this.particles[i]; var h = particle.color[0], s = particle.color[1] + '%', l = particle.color[2] + '%', a = particle.color[3]; var hsla = 'hsla(' + h + ',' + s + ',' + l + ',' + a + ')'; c.font = "12px sans-serif"; c.fillStyle = hsla; c.fillText(particle.character, particle.x, particle.y); particle.x += particle.xSpeed; particle.y += particle.ySpeed; particle.size *= 0.96; particle.y *= 0.98; particle.color[2] *= 0.99; particle.color[0] += 1; if(particle.color[0] > 253){ particle.color[2] = 100; particle.color[3] = 1; } } }, tidyParticles: function(){ if( this.particles.length > this.maxParticles ){ this.particles.shift(); } }, fadeCanvas: function(){ this.c.fillStyle = 'rgba(0,0,0,0.1)'; this.c.fillRect(0, 0, this.cw, this.ch); }
}
anim.init();
(function animloop(){ requestAnimFrame(animloop); anim.render();
})();
![Letter fountain - Script Codes](http://shots.codepen.io/aurer/pen/Jszok-512.jpg)
Developer | Aurer |
Username | aurer |
Uploaded | August 03, 2022 |
Rating | 4 |
Size | 2,607 Kb |
Views | 50,600 |
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Name | Size |
Homepage layout | 3,855 Kb |
Webkit CSS Scrollbars | 3,180 Kb |
A Pen by Aurer | 3,919 Kb |
SVG Loading icons | 3,610 Kb |
Fixed banners and parallax backgrounds | 3,526 Kb |
IOS style checkbox concept | 2,656 Kb |
Learning canvas drawing | 2,204 Kb |
Vue form theme | 3,755 Kb |
Tomcat chrome extension UI | 2,979 Kb |
CSS cube experiment | 3,172 Kb |
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Name | Username | Size |
Barber Shop | Bhlaird | 6,270 Kb |
Expandable Left Side Bar with jQuery animate | Retrofuturistic | 2,483 Kb |
Elon Musk - Tribute Page - FreeCodeCamp | Yunnimun | 8,615 Kb |
A Pen by Jonas Bjork | Jonasbjork | 3,115 Kb |
Bloomberg Style Link Hover | Gil-- | 1,609 Kb |
Subtle site navigation with description | Necks | 3,206 Kb |
Blog Concept - Single Post | Marionebl | 9,603 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Animated bar chart | CreativePunch | 3,124 Kb |
A Pen by Brendan Skousen | Bskousen | 2,954 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!