<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 ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/plasm/pen/zwjMPy?depth=everything&limit=all&order=popularity&page=26&q=text&show_forks=false" />
<style class="cp-pen-styles">@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
position: fixed;
left: 20px;
bottom: 20px;
z-index: 10;
font-family: "Montserrat";
font-size: 12px;
}
a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
font-family: "Montserrat";
font-size: 12px;
text-decoration: none;
background: #212121;
padding: 4px 8px;
color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
background: #edf3f8;
color: #212121;
}
body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%;
background: #111111;
}
.title {
z-index: 10;
position: absolute;
left: 50%;
top: 50%;
height: 250px;
transform: translateX(-50%) translateY(-50%);
font-family: "Montserrat";
text-align: center;
width: 100%;
}
.title h3 {
position: absolute;
bottom: 0;
width: 100%;
text-align: center;
font-weight: 200;
font-size: 20px;
padding: 0;
margin: 0;
line-height: 1;
color: #EEEEEE;
letter-spacing: 2px;
}
</style></head><body>
<div class="title">
<h3>A N O T H E R <strong>C O D E P E N</strong></h3>
</div>
<div class="more-pens">
<a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
<a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
</div>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script >"use strict";
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
var particles = [];
var frequency = 20;
// Popolate particles
setInterval(function () {
popolate();
}.bind(undefined), frequency);
var c1 = createCanvas({ width: $(window).width(), height: $(window).height() });
var c2 = createCanvas({ width: $(window).width(), height: $(window).height() });
var c3 = createCanvas({ width: $(window).width(), height: $(window).height() });
var tela = c1.canvas;
var canvas = c1.context;
// $("body").append(tela);
$("body").append(c3.canvas);
writeText(c2.canvas, c2.context, "PARTICLES\nWRITE\nTEXT");
var Particle = function () {
function Particle(canvas, options) {
_classCallCheck(this, Particle);
var random = Math.random();
this.canvas = canvas;
this.x = options.x;
this.y = options.y;
this.s = 3 + Math.random();
this.a = 0;
this.w = $(window).width();
this.h = $(window).height();
this.radius = 0.5 + Math.random() * 20;
this.color = this.radius > 5 ? "#FF5E4C" : "#ED413C"; //this.randomColor()
}
Particle.prototype.randomColor = function randomColor() {
var colors = ["#FF5E4C", "#FFFFFF"];
return colors[this.randomIntFromInterval(0, colors.length - 1)];
};
Particle.prototype.randomIntFromInterval = function randomIntFromInterval(min, max) {
return Math.floor(Math.random() * (max - min + 1) + min);
};
Particle.prototype.render = function render() {
this.canvas.beginPath();
this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
this.canvas.lineWidth = 2;
this.canvas.fillStyle = this.color;
this.canvas.fill();
this.canvas.closePath();
};
Particle.prototype.move = function move() {
//this.swapColor()
this.x += Math.cos(this.a) * this.s;
this.y += Math.sin(this.a) * this.s;
this.a += Math.random() * 0.8 - 0.4;
if (this.x < 0 || this.x > this.w - this.radius) {
return false;
}
if (this.y < 0 || this.y > this.h - this.radius) {
return false;
}
this.render();
return true;
};
return Particle;
}();
function createCanvas(properties) {
var canvas = document.createElement('canvas');
canvas.width = properties.width;
canvas.height = properties.height;
var context = canvas.getContext('2d');
return {
canvas: canvas,
context: context
};
}
function writeText(canvas, context, text) {
var size = 100;
context.font = size + "px Montserrat";
context.fillStyle = "#111111";
context.textAlign = "center";
var lineheight = 70;
var lines = text.split('\n');
for (var i = 0; i < lines.length; i++) {
context.fillText(lines[i], canvas.width / 2, canvas.height / 2 + lineheight * i - lineheight * (lines.length - 1) / 3);
}
}
function maskCanvas() {
c3.context.drawImage(c2.canvas, 0, 0, c2.canvas.width, c2.canvas.height);
c3.context.globalCompositeOperation = 'source-atop';
c3.context.drawImage(c1.canvas, 0, 0);
blur(c1.context, c1.canvas, 2);
}
function blur(ctx, canvas, amt) {
ctx.filter = "blur(" + amt + "px)";
ctx.drawImage(canvas, 0, 0);
ctx.filter = 'none';
}
/*
* Function to clear layer canvas
* @num:number number of particles
*/
function popolate() {
particles.push(new Particle(canvas, {
x: $(window).width() / 2,
y: $(window).height() / 2
}));
return particles.length;
}
function clear() {
canvas.globalAlpha = 0.03;
canvas.fillStyle = '#111111';
canvas.fillRect(0, 0, tela.width, tela.height);
canvas.globalAlpha = 1;
}
function update() {
clear();
particles = particles.filter(function (p) {
return p.move();
});
maskCanvas();
requestAnimationFrame(update.bind(this));
}
update();
//# sourceURL=pen.js
</script>
</body></html>
