Underwater particles

Developer
Massimo
Size
3,401 Kb
Views
42,504
  1. Underwater particles Previews
  2. Underwater particles HTML Codes
  3. Underwater particles CSS Codes
  4. Underwater particles JS Codes

How do I make an underwater particles?

Canvas + turbulence filter. Feel free to change frequency and scale in jade for different effects. Click to add new particle. What is a underwater particles? How do you make a underwater particles? This script and codes were developed by Massimo on 17 September 2022, Saturday.

Underwater particles Previews
IQ Test

Underwater particles - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>underwater particles</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="c"></canvas>
<svg xlmns="http://www.w3.org/2000/svg" version="1.1"> <defs> <filter id="turbulence"> <feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="1" result="noice"></feTurbulence> <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="20" in="SourceGraphic"></feDisplacementMap> </filter> </defs>
</svg> <script src="js/index.js"></script>
</body>
</html>

Underwater particles - Script Codes CSS Codes

body { margin: 0; overflow: hidden; background: #000;
}
body canvas { -webkit-filter: url("#turbulence"); filter: url("#turbulence");
}

Underwater particles - Script Codes JS Codes

var c = document.getElementById('c'), ctx = c.getContext('2d'), points = [], count = 30, size = 3, delta = 4, distance = 170;
window.requestAnimFrame = (function () { return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (callback) { window.setTimeout(callback, 1000/60); };
})();
function checkDistance (x1, y1, x2, y2) { return Math.sqrt(Math.pow(x1-x2, 2) + Math.pow(y1-y2, 2));
}
function setColor () { return 'rgb(' + Math.round(255*Math.random()) + ',' + Math.round(255*Math.random()) + ',' + Math.round(255*Math.random()) + ')';
}
function Point (x, y, dx, dy, color) { this.x = x; this.y = y; this.dx = dx; this.dy = dy; this.color = color;
}
function initPoint (x, y) { var x = x || c.width*Math.random(), y = y || c.height*Math.random(), dx = - delta/2 + delta*Math.random(), dy = - delta/2 + delta*Math.random(), color = setColor(); points.push(new Point (x, y, dx, dy, color));
}
function drawPoint (point) { ctx.fillStyle = point.color; ctx.beginPath(); ctx.arc(point.x, point.y, size, 0, 2*Math.PI); ctx.fill();
}
function drawLines (point, index) { for (var i = 0; i < index; i++) { var opacity = 1 - checkDistance( point.x, point.y, points[i].x, points[i].y ) / distance; if (opacity > 0) { var grad = ctx.createLinearGradient( point.x, point.y, points[i].x, points[i].y ); grad.addColorStop(0, point.color); grad.addColorStop(1, points[i].color); ctx.strokeStyle = grad; ctx.globalAlpha = opacity; ctx.beginPath(); ctx.moveTo(point.x, point.y); ctx.lineTo(points[i].x, points[i].y); ctx.stroke(); ctx.globalAlpha = 1; } }
}
function updatePosition () { for (var i = 0; i < points.length; i++) { var xDx = points[i].x + points[i].dx, yDy = points[i].y + points[i].dy; if (xDx - size < 0 || xDx + size > c.width) { points[i].dx = - points[i].dx; } if (yDy - size < 0 || yDy + size > c.height) { points[i].dy = - points[i].dy; } points[i].x += points[i].dx; points[i].y += points[i].dy; drawPoint(points[i]); drawLines(points[i], i); }
}
function init () { points.length = 0; for (var i=0; i<count; i++) { initPoint(); }
}
function resize () { c.width = window.innerWidth; c.height = window.innerHeight; init();
}
function draw () { ctx.clearRect(0, 0, c.width, c.height); updatePosition(); window.requestAnimFrame(draw);
}
window.addEventListener("resize", resize);
c.addEventListener("mouseup", function (e) { initPoint(e.pageX - c.offsetLeft, e.pageY - c.offsetTop);
});
resize();
draw();
Underwater particles - Script Codes
Underwater particles - Script Codes
Home Page Home
Developer Massimo
Username _massimo
Uploaded September 17, 2022
Rating 4.5
Size 3,401 Kb
Views 42,504
Do you need developer help for Underwater particles?

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!

Massimo (_massimo) Script Codes
Name
Pacman
Run T-REX run in CSS
ASCII art
Cat loader
Pathfinder
Css tabs
Whale pixel art animation
Record button
Css wave
Spinner
Create amazing captions with AI!

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!