Perlin noise animation

Developer
Yukulélé
Size
3,948 Kb
Views
64,768
  1. Perlin noise animation Previews
  2. Perlin noise animation HTML Codes
  3. Perlin noise animation CSS Codes
  4. Perlin noise animation JS Codes

How do I make an perlin noise animation?

What is a perlin noise animation? How do you make a perlin noise animation? This script and codes were developed by Yukulélé on 26 August 2022, Friday.

Perlin noise animation Previews
IQ Test

Perlin noise animation - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Perlin noise animation</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas></canvas> <script src='https://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/fpsmeter/0.3.1/fpsmeter.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Perlin noise animation - Script Codes CSS Codes

html,
body { width: 100%; height: 100%; margin: 0; padding: 0; overflow: hidden; background-color: #000;
}
canvas { vertical-align: top;
}

Perlin noise animation - Script Codes JS Codes

'use strict';
var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');
var τ = 2 * Math.PI;
var count = 5000;
var init = Date.now();
var w = undefined;
var h = undefined;
var m = undefined;
var mx = null;
var my = null;
var size = undefined;
var round = true;
var zoom = 0.75;
var meter = new FPSMeter({ graph: 1
});
noise.seed(Math.random());
function resize() { w = window.innerWidth; h = window.innerHeight; m = Math.min(w, h); size = Math.sqrt(w * w + h * h) / 35; canvas.width = w; canvas.height = h; place();
}
window.addEventListener('resize', resize);
resize();
function mousemove(e) { mx = e.pageX; my = e.pageY;
}
window.addEventListener('mousemove', mousemove);
window.addEventListener('mouseout', function () { return mx = my = null;
});
window.addEventListener('click', function () { return round = !round;
});
window.addEventListener('wheel', function (e) { e.preventDefault(); zoom *= e.deltaY == 0 ? 1 : e.deltaY < 0 ? .8 : 1.25;
});
function place() { var now = Date.now() - init; var n = now / 10000 + Math.cos(now / 2000) * 3; var c = (Math.cos(now / 2000) / 2 - .5) / 3 + 1; ctx.clearRect(0, 0, w, h); var mc = Math.cos(now / 300) / 3 + 1; //for(let x=0x<1x+=0.05) // for(let y=0y<1y+=0.05){ for (var i = 0; i < count && Date.now() - init < now + 1000 / 40; i++) { var x = Math.random(); var y = Math.random(); var ang = noise.perlin3((x - .5) * m / h * zoom, (y - .5) * m / w * zoom, n); if (ang * ang > .2) continue; var rot = 0; var dist = undefined; if (mx !== null) { var _dist = Math.pow(Math.pow(mx - x * w, 2) + Math.pow(my - y * h, 2), .5); var limit = m / 5 * mc; if (_dist < limit) rot = 1 - _dist / limit; } var cos = Math.cos(ang * τ); var sin = Math.sin(ang * τ); var hue = round ? rot * 180 + Math.round(ang * 5 + now / 500) * 100 - now / 7 : rot * 180 + (ang * 5 + now / 500) * 100 - now / 7; var lum = 50 + rot * 65; ctx.strokeStyle = 'hsl(' + hue + ',100%,' + lum + '%)'; ctx.beginPath(); ctx.lineWidth = c + Math.pow(rot, 2.5) * 75; ctx.moveTo(x * w + cos * size, y * h + sin * size); ctx.lineTo(x * w - cos * size, y * h - sin * size); ctx.stroke(); }
}
;(function loop() { requestAnimationFrame(loop); place(); meter.tick();
})();
Perlin noise animation - Script Codes
Perlin noise animation - Script Codes
Home Page Home
Developer Yukulélé
Username yukulele
Uploaded August 26, 2022
Rating 4.5
Size 3,948 Kb
Views 64,768
Do you need developer help for Perlin noise animation?

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!

Yukulélé (yukulele) Script Codes
Name
Pure CSS Dancing Tree
SVG Function Plotter
CSS Vortex
Table reverse
Shepard Piano
CSS torus
Pure css responsive Shadow of the Beast
Nested divs animated by CSS
Acid swiming pool
Pure CSS machine arm articulated
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!