Trippy perlin
How do I make an trippy perlin?
What is a trippy perlin? How do you make a trippy perlin? This script and codes were developed by David A. on 28 November 2022, Monday.
Trippy perlin - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>trippy perlin</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> <h1>PERLIN <script src='https://cdn.rawgit.com/josephg/noisejs/master/perlin.js'></script> <script src="js/index.js"></script>
</body>
</html>
Trippy perlin - Script Codes CSS Codes
body { overflow: hidden;
}
h1 { position: absolute; z-index: 2; margin: 0; font-size: 13.333vw; left: 50%; top: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); color: #00f; mix-blend-mode: color-dodge; background: #fff; line-height: 1; padding: 0.25em;
}
canvas { z-index: 1; position: absolute;
}
Trippy perlin - Script Codes JS Codes
'use strict';
var res = Math.ceil(window.innerHeight / 60);
var w = Math.ceil(window.innerWidth / res);
var h = Math.ceil(window.innerHeight / res);
var $b = document.querySelector('body');
var $c = document.createElement('canvas');
var ctx = $c.getContext('2d');
$c.width = window.innerWidth;
$c.height = window.innerHeight;
$b.appendChild($c);
var speed = 0.0005;
function setSize() { w = Math.ceil(window.innerWidth / res); h = Math.ceil(window.innerHeight / res); $c.width = window.innerWidth; $c.height = window.innerHeight;
}
var progress = 0;
noise.seed(Math.random());
function doit() { progress += speed; for (var x = 0; x < w; x++) { for (var y = 0; y < h; y++) { var sim = noise.simplex3((progress + x) / (w * 1.5), progress + y / (h * 1.5), progress); //const per = noise.perlin3((progress + x) / (w * 1.25), progress + y / (h * 1.25), progress); ctx.fillStyle = 'hsl(' + 1360 * Math.abs(sim) % 360 + ',100%,73%)'; ctx.fillRect(x * res, y * res, res, res); } } requestAnimationFrame(doit);
}
doit();
document.addEventListener('click', function () { noise.seed(Math.random());
});
setSize();
window.addEventListener('resize', setSize);
Developer | David A. |
Username | meodai |
Uploaded | November 28, 2022 |
Rating | 4 |
Size | 3,161 Kb |
Views | 34,408 |
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!
Name | Size |
Social color-namer | 6,112 Kb |
Textmask over random clouds animation | 3,929 Kb |
We Simplify animation | 48,169 Kb |
DOM explosions | 8,919 Kb |
All the 16k color names from the color-name-list API | 6,006 Kb |
Easy Parallax, 9 lines of vanilla JS | 156,603 Kb |
Color fan | 117,778 Kb |
Animated scroll timeline | 5,222 Kb |
Cymk logo generator | 4,415 Kb |
Infinite ping-pong | 3,266 Kb |
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!
Name | Username | Size |
Mosaic transition effect between two photos using jQuery | Stathisg | 2,518 Kb |
Feedback Page | TessDiNapoli | 2,836 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
A Pen by Alex Bergin | Abergin | 3,347 Kb |
A Pen by John Malc | F789gh | 1,420 Kb |
FreeCodeCamp - Simon Game | Ivhed | 8,481 Kb |
Horizontal scroll fixed element | HerrSerker | 0 Kb |
Ripples in water | Nobitagit | 2,704 Kb |
Wikipedia Viewer | Odylic | 2,333 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!