Skip to content

Instantly share code, notes, and snippets.

@schimini
Created December 14, 2018 15:22
Show Gist options
  • Save schimini/149c1513f38435c29fc11d94cce060b7 to your computer and use it in GitHub Desktop.
Save schimini/149c1513f38435c29fc11d94cce060b7 to your computer and use it in GitHub Desktop.
Particles write text
<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>
let particles = [];
let frequency = -1;
let p_n = 0;
let sig = 1;
// Popolate particles
setInterval(
function(){
popolate()
}.bind(this),
frequency
)
let c1 = createCanvas({width: $(window).width(), height: $(window).height()})
let c2 = createCanvas({width: $(window).width(), height: $(window).height()})
let c3 = createCanvas({width: $(window).width(), height: $(window).height()})
let tela = c1.canvas;
let canvas = c1.context;
// $("body").append(tela);
$("body").append(c3.canvas);
writeText(c2.canvas, c2.context, "QUANTA\nPLÁSTICOS")
class Particle{
constructor(canvas, options){
let 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.randomColor(p_n += sig)
}
randomColor(rad) {
console.log(rad)
let colors = ["#808080", "#877979","#8e7273","#956b6c",
"#9d6365","#a45c5f", "#ab5558","#b24e51",
"#b9474b", "#c13f44", "#c8383d","#cf3137",
"#d62a30"
];
if(Math.abs(p_n) == colors.length - 1) {
sig *= -1;
}
return colors[colors.length -1]
//return colors[this.randomIntFromInterval(0,colors.length-1)];
}
randomIntFromInterval(min,max){
return Math.floor(Math.random()*(max-min+1)+min);
}
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();
}
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
}
}
function createCanvas(properties){
let canvas = document.createElement('canvas');
canvas.width = properties.width;
canvas.height = properties.height;
let context = canvas.getContext('2d');
return {
canvas: canvas,
context: context
}
}
function writeText(canvas, context, text){
let size = 100
context.font = size + "px Montserrat";
context.fillStyle = "#111111";
context.textAlign = "center";
let lineheight = 70
let lines = text.split('\n');
for(let 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()
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
@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
&: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%
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
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment