Particle Wave
Particle Wave
This is a really awesome Particle Wave effect created using Javascript
*Featured Code Created by Morpheus
HTML with CSS and JavaScript
<html>
<head>
<title>Particle Wave</title>
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
#a{
height:700px;
width:500px;}
body {
margin: 0;
background: black;
position: relative;
}
canvas {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
#fps, #waveGap, #angleDiv, #particleRadius{
color: lime;
font-size: 18px;
position: absolute;
right: 0;
top: 0;
z-index: 100;
}
#waveGap{
right:auto;
left:0;
}
#angleDiv{
top:auto;
bottom: 0;
}
#particleRadius{
right: auto;
top: auto;
bottom:0;
left:0;
}
</style>
</head>
<body>
<span id="fps"></span>
<input type="range" max="100" min="1" value="50" step="1" id="waveGap">
<input type="range" max="480" min="1" value="360" step="10" id="angleDiv">
<input type="range" max="10" min="1" value="2" step="1" id="particleRadius">
<script>
var particleWave = (function() {
'use strict';
var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var ctx = canvas.getContext('2d');
var W = window.innerWidth;
var H = window.innerHeight;
var durMillis = 1000000;
canvas.width = W;
canvas.height = H;
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var cancelAnimationFrame = window.cancelAnimationFrame || window.mozCancelAnimationFrame;
var SIDE = 20;
var PARTICLE_RADIUS = 2;
var PI_TWICE = Math.PI * 2;
var RADIUS = Math.round( (SIDE * Math.sqrt(2)) / 2 );
var offset = SIDE / 2;
var start = null;
var lastTimeCalled = undefined, timeDiff, fps, myFrames;
var angle = 0;
var angularVelocity = 0;
var angleDiv = 360;
var waveGap = 30;
var angleOffset = (PI_TWICE / angleDiv) * waveGap;
var rotateVelocity = PI_TWICE / angleDiv ;
var particleArray = [];
ctx.fillStyle = "lime";
function Particle(posX, posY, angle){
this.posX = posX;
this.posY = posY;
this.angle = angle;
this.particleX = this.posX + (RADIUS * Math.cos(this.angle));
this.particleY = this.posY + (RADIUS * Math.sin(this.angle));
}
Particle.prototype.draw = function(){
ctx.beginPath();
ctx.arc(this.particleX, this.particleY, PARTICLE_RADIUS, 0, PI_TWICE, false );
ctx.fill();
}
Particle.prototype.update = function(){
this.angle += rotateVelocity;
this.particleX = this.posX + (RADIUS * Math.cos(this.angle));
this.particleY = this.posY + (RADIUS * Math.sin(this.angle));
this.draw();
}
//populate the particleArray
function populateArray(){
for (var i = 0; i < W; i += SIDE) {
for (var j = 0; j < H; j += SIDE) {
angle = ((i +j)/SIDE) * angleOffset;
particleArray.push( new Particle(
i + offset,
j + offset,
angle
));
}
}
}
// Update the current slider value (each time you drag the slider handle)
document.getElementById("waveGap").oninput = function() {
particleArray = [];
waveGap = this.value;
angleOffset = (PI_TWICE / angleDiv) * waveGap;
populateArray();
}
// Update the current slider value (each time you drag the slider handle)
document.getElementById("angleDiv").oninput = function() {
particleArray = [];
angleDiv = this.value;
rotateVelocity = PI_TWICE / angleDiv;
populateArray();
}
document.getElementById("particleRadius").oninput = function() {
particleArray = [];
PARTICLE_RADIUS = this.value;
populateArray();
}
function animate(timestamp) {
if (!start) start = timestamp;
var progress = timestamp - start;
//console.log(progress + " , " + durMillis);
/******FPS CALCULATION START******/
if (!lastTimeCalled) {
lastTimeCalled = Date.now();
fps = 0;
}
timeDiff = (Date.now() - lastTimeCalled) / 1000;
lastTimeCalled = Date.now();
fps = Math.round(1 / timeDiff);
document.getElementById('fps').textContent = "FPS : " + fps;
/******FPS CALCULATION END******/
/************Animation Logic starts*************/
ctx.clearRect(0, 0, W, H);
particleArray.forEach(function(item){
item.update();
});
/************Animation Logic ends*************/
if (progress < durMillis) {
myFrames = requestAnimationFrame(animate);
} else {
cancelAnimationFrame(myFrames);
}
}
function generateMap(){
var canvas2 = document.createElement('canvas');
document.body.appendChild(canvas2);
var ctx2 = canvas2.getContext('2d');
canvas2.width = W;
canvas2.height = H;
canvas2.style.zIndex = "5";
var isClicked = false;
canvas2.addEventListener('click', function(){
if(!isClicked){
drawMap();
isClicked = true;
} else {
ctx2.clearRect(0, 0, W, H);
isClicked = false;
}
});
ctx2.strokeStyle = "pink";
ctx2.lineWidth = 1.2;
function drawMap(){
for (var i = 0; i < W; i += SIDE) {
for (var j = 0; j < H; j += SIDE) {
ctx2.beginPath();
ctx2.arc(i + offset, j + offset, RADIUS, 0, PI_TWICE, false );
ctx2.stroke();
}
}
}
}
populateArray();
generateMap();
requestAnimationFrame(animate);
}());
</script>
</body>
</html>
Comments
Post a Comment