Made on
Tilda
<canvas id="canvas"></canvas>
<style>
.dg.ac {
display: none !important;
}
.aon {
position: absolute;
top: 0px;
left: 0px;
}
.aon a {
position: relative;
display: inline-block;
outline: none;
margin: 0 0px;
padding: 15px 10px;
color: #fff;
text-decoration: none;
font-family: Cinzel;
text-align: center;
text-transform: uppercase;
letter-spacing: 1px;
font-weight: 400;
text-shadow: 0 0 1px rgba(255, 255, 255, 0.3);
font-size: 1em;
}
.aon a:focus::before, .aon a:hover::before {
height: 6px;
}
.aon a:hover::before, .aon a:hover::after, .aon a:focus::before, .aon a:focus::after {
opacity: 1;
-webkit-transform: translateY(0px);
-moz-transform: translateY(0px);
transform: translateY(0px);
}
.aon a:hover span:last-child, .aon a:focus span:last-child {
opacity: 1;
-webkit-transform: translateY(0%);
-moz-transform: translateY(0%);
transform: translateY(0%);
}
.aon a span {
color: #fff !important;
}
.aon a span:first-child {
z-index: 2;
display: block;
font-weight: 300;
}
.aon a span:last-child {
z-index: 1;
display: block;
padding: 8px 0 0 0;
color: rgba(0, 0, 0, 0.4);
text-shadow: none;
text-transform: none;
font-style: italic;
font-size: 1.2em;
font-family: Cinzel Decorative;
font-weight: 600;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-100%);
-moz-transform: translateY(-100%);
transform: translateY(-100%);
}
.aon a::before, .aon a::after {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #fff;
content: "";
opacity: 0.2;
-webkit-transition: opacity 0.3s, height 0.3s;
-moz-transition: opacity 0.3s, height 0.3s;
transition: opacity 0.3s, height 0.3s;
}
.aon a::after {
top: 100%;
opacity: 0;
-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
-moz-transition: -moz-transform 0.3s, opacity 0.3s;
transition: transform 0.3s, opacity 0.3s;
-webkit-transform: translateY(-10px);
-moz-transform: translateY(-10px);
transform: translateY(-10px);
}
.aon a:hover {
outline: none;
}
</style>
<script src="https://codepen.io/Tibixx/pen/BbBxRG.js"></script>
<script src="https://codepen.io/Tibixx/pen/rRBKBm.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.5/dat.gui.min.js"></script>
<script>
let canvas, ctx, field, w, h, fieldSize, columns, rows, noiseZ, particles, hue;
(noiseZ = 0);
particleCount = 150;
particleBCount = 1500;
particleSize = 25;
particleSizeB = 25;
fieldSize = 25;
fieldForce = 0.1;
noiseSpeed = 0.003;
sORp = false;
trailLength = 0.2;
hueBase = 0;
hueRange = 20;
maxSpeed = 0.2;
maxSpeedB = 0.03;
enableGUI = true;
glow = true;
var ui = new function() {
this.particleCount = particleCount;
this.particleBCount = particleBCount;
this.fieldSize = fieldSize;
this.fieldForce = fieldForce;
this.noiseSpeed = noiseSpeed;
this.simplexOrPerlin = sORp;
this.trailLength = trailLength;
this.maxSpeed = maxSpeed;
this.maxSpeedB = maxSpeedB;
this.hueBase = hueBase;
this.hueRange = hueRange;
this.glow = glow;
this.change = function() {
fieldSize = ui.fieldSize;
fieldForce = ui.fieldForce;
noiseSpeed = ui.noiseSpeed;
maxSpeed = ui.maxSpeed;
maxSpeedB = ui.maxSpeedB;
hueBase = ui.hueBase;
hueRange = ui.hueRange;
fieldColor = ui.fieldColor;
glow = ui.glow;
ui.simplexOrPerlin?sORp=1:sORp=0;
}
this.reset = function() {
particleCount = ui.particleCount;
particleBCount = ui.particleBCount;
reset();
}
this.bgColor = function(){
trailLength = ui.trailLength;
}
}();
if(enableGUI){
var gui = new dat.GUI();
f1 = gui.addFolder("Color");
f2 = gui.addFolder("Particle");
f3 = gui.addFolder("Flowfield");
f1.add(ui, "hueBase", 0, 360).onChange(ui.change);
f1.add(ui, "hueRange", 0, 40).onChange(ui.change);
f1.add(ui, "glow").onChange(ui.change);
f2.add(ui, "particleCount", 30, 300).step(5).onChange(ui.reset);
f2.add(ui, "particleBCount", 200, 2000).step(10).onChange(ui.reset);
f2.add(ui, "trailLength", 0.05, 0.60).onChange(ui.bgColor);
f2.add(ui, "maxSpeed", 0.05, 0.5).onChange(ui.change);
f2.add(ui, "maxSpeedB", 0.02, 0.1).onChange(ui.change);
f3.add(ui, "fieldSize", 10, 100).step(1).onChange(ui.change);
f3.add(ui, "fieldForce", 0.05, 1).onChange(ui.change);
f3.add(ui, "noiseSpeed", 0.001, 0.005).onChange(ui.change);
f3.add(ui, "simplexOrPerlin").onChange(ui.change);
}
class Particle {
constructor(x, y) {
this.pos = new Vector(x, y);
this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
this.acc = new Vector(0, 0);
this.hue = Math.random()*30-15;
this.rad = Math.random()*(particleSize - 5) + particleSize;
}
move(acc) {
if (acc) {
this.acc.addTo(acc);
}
this.vel.addTo(this.acc);
this.pos.addTo(this.vel);
if (this.vel.getLength() > maxSpeed) {
this.vel.setLength(maxSpeed);
}
this.acc.setLength(0);
}
wrap() {
if (this.pos.x > w) {
this.pos.x = 0;
} else if (this.pos.x < -this.fieldSize) {
this.pos.x = w - 1;
}
if (this.pos.y > h) {
this.pos.y = 0;
} else if (this.pos.y < -this.fieldSize) {
this.pos.y = h - 1;
}
}
}
class ParticleB {
constructor(x, y) {
this.pos = new Vector(x, y);
this.vel = new Vector(Math.random() - 0.5, Math.random() - 0.5);
this.acc = new Vector(0, 0);
this.hue = Math.random()*30-15;
this.rad = Math.random()*(particleSizeB - 5) + particleSizeB;
}
move(acc) {
if (acc) {
this.acc.addTo(acc);
}
this.vel.addTo(this.acc);
this.pos.addTo(this.vel);
if (this.vel.getLength() > maxSpeedB) {
this.vel.setLength(maxSpeedB);
}
this.acc.setLength(0);
}
wrap() {
if (this.pos.x > w) {
this.pos.x = 0;
} else if (this.pos.x < -this.fieldSize) {
this.pos.x = w - 1;
}
if (this.pos.y > h) {
this.pos.y = 0;
} else if (this.pos.y < -this.fieldSize) {
this.pos.y = h - 1;
}
}
}
canvas = document.querySelector("#canvas");
ctx = canvas.getContext("2d");
reset();
window.addEventListener("resize", reset);
function initParticles() {
particles = [];
particlesB = [];
for (let i = 0; i < particleCount; i++) {
let particle = new Particle(Math.random() * w, Math.random() * h);
particles.push(particle);
}
for (let i = 0; i < particleBCount; i++) {
let particleB = new ParticleB(Math.random() * w, Math.random() * h);
particlesB.push(particleB);
}
}
function initField() {
field = new Array(columns);
fieldB = new Array(columns);
for (let x = 0; x < columns; x++) {
field[x] = new Array(rows);
for (let y = 0; y < rows; y++) {
let v = new Vector(0, 0);
field[x][y] = v;
}
}
}
function calcField() {
if (sORp) {
for (let x = 0; x < columns; x++) {
for (let y = 0; y < rows; y++) {
let angle = noise.simplex3(x / 20, y / 20, noiseZ) * Math.PI * 2;
let length = noise.simplex3(x / 40 + 40000, y / 40 + 40000, noiseZ) * fieldForce;
field[x][y].setLength(length);
field[x][y].setAngle(angle);
}
}
} else {
for (let x = 0; x < columns; x++) {
for (let y = 0; y < rows; y++) {
let angle = noise.perlin3(x / 20, y / 20, noiseZ) * Math.PI * 2;
let length = noise.perlin3(x / 40 + 40000, y / 40 + 40000, noiseZ) * fieldForce;
field[x][y].setLength(length);
field[x][y].setAngle(angle);
}
}
}
}
function reset() {
w = canvas.width = window.innerWidth;
h = canvas.height = window.innerHeight;
//ctx.strokeStyle = fieldColor;
noise.seed(Math.random());
columns = Math.round(w / fieldSize) + 1;
rows = Math.round(h / fieldSize) + 1;
initParticles();
initField();
}
function draw() {
requestAnimationFrame(draw);
calcField();
noiseZ += noiseSpeed;
drawBackground();
drawParticles();
}
function drawBackground() {
ctx.shadowBlur = 0;
ctx.clearRect(0, 0, w, h);
ctx.fillStyle = "rgba(0,0,0,1)";
ctx.fillRect(0, 0, w, h);
}
function drawParticles() {
ctx.globalCompositeOperation = "lighter";
particlesB.forEach(p => {
var ps = p.fieldSize = Math.abs(p.vel.x + p.vel.y) * p.rad;
ctx.beginPath();
ctx.shadowBlur = 0;
ctx.fillStyle = "hsl("+(hueBase + p.hue + ((p.vel.x + p.vel.y)*hueRange))+", 100%, 50%)";
ctx.arc(p.pos.x, p.pos.y, ps, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
let pos = p.pos.div(fieldSize);
let v;
if (pos.x >= 0 && pos.x < columns && pos.y >= 0 && pos.y < rows) {
v = field[Math.floor(pos.x)][Math.floor(pos.y)];
}
p.move(v);
p.wrap();
});
particles.forEach(p => {
var ps = p.fieldSize = Math.abs(p.vel.x + p.vel.y) * p.rad;
ctx.beginPath();
if(glow){
ctx.shadowBlur = p.rad;
}
ctx.shadowColor = "hsl("+(hueBase + p.hue + ((p.vel.x + p.vel.y)*hueRange))+", 100%, 50%)";
ctx.fillStyle = "hsl("+(hueBase + p.hue + ((p.vel.x + p.vel.y)*hueRange))+", 100%, 50%)";
ctx.arc(p.pos.x, p.pos.y, ps, 0, Math.PI * 2);
ctx.fill();
ctx.closePath();
let pos = p.pos.div(fieldSize);
let v;
if (pos.x >= 0 && pos.x < columns && pos.y >= 0 && pos.y < rows) {
v = field[Math.floor(pos.x)][Math.floor(pos.y)];
}
p.move(v);
p.wrap();
});
}
draw();
</script>