Out of the blue
How do I make an out of the blue?
What is a out of the blue? How do you make a out of the blue? This script and codes were developed by Pogany on 09 November 2022, Wednesday.
Out of the blue - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Out of the blue</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="c"></canvas> <script src="js/index.js"></script>
</body>
</html>
Out of the blue - Script Codes CSS Codes
body { margin: 0; overflow: hidden; background-color:hsl(0,100%,5%);
}
Out of the blue - Script Codes JS Codes
var c = document.getElementById("c");
var ctx = c.getContext("2d");
var cw = c.width = window.innerWidth;
var ch = c.height = window.innerHeight;
var cx = cw / 2, cy = ch / 5;
var rad = Math.PI / 180;
var frames = 0;
var requestId = null;
var colors = [170, 180, 190, 200, 210];
var frames = 0;
var requestId = null;
var rad = (Math.PI / 180);
var particlesRy = [];
var howMany = 70;
var D = 150; //max dist
ctx.lineWidth = .5;
ctx.strokeStyle = "white";
function Particle() { this.rand = Math.random() + .25; this.pm = Math.random() < 0.5 ? -1 : 1; //plus or minus this.drift = this.pm * Math.round(Math.random() * 5) + 1; this.rise = -1 * Math.round(Math.random() * 5) + 1; this.x = randomIntFromInterval(0, cw); this.y = randomIntFromInterval(0, ch); this.hue = colors[Math.round(Math.random() * colors.length) + 1]
}
function buildParticle() { var p = new Particle(); particlesRy.push(p);
}
for (var i = 0; i < howMany; i++) { buildParticle();
}
function Draw() { ctx.clearRect(0, 0, cw, ch); for (var i = 0; i < particlesRy.length; i++) { var a = particlesRy[i]; a.y += a.rise; a.x += a.drift; if (a.drift == 0) { a.drift += 2 * a.pm; } if (a.rise == 0) { a.rise += 2 * a.pm; } if (a.y <= 0 || a.y >= ch) { a.rise = -1 * a.rise; } if (a.x <= 0 || a.x >= cw) { a.drift = -1 * a.drift; } } compare() requestId = window.requestAnimationFrame(Draw);
}
requestId = window.requestAnimationFrame(Draw);
function Init() { if (requestId) { window.cancelAnimationFrame(requestId); requestId = null; } cw = c.width = window.innerWidth, cx = cw / 2; ch = c.height = window.innerHeight, cy = ch; //D = cw/10; //max dist Draw();
}
setTimeout(function() { Init(); window.addEventListener('resize', Init, false);
}, 15);
function compare() { for (var i = 0; i < particlesRy.length; i++) { var a = particlesRy[i]; for (var j = i + 1; j < particlesRy.length; j++) { var b = particlesRy[j]; var dist = distance(a, b); if (dist < D) { var c = {}; c.x = Math.min(a.x, b.x) + dist * a.rand; c.y = Math.min(a.y, b.y) + dist * b.rand; var alp = (D - dist) / D; var hue = a.hue; ctx.fillStyle = "hsla(" + hue + ",87%, 44%," + alp + ")"; ctx.beginPath(); ctx.moveTo(a.x, a.y); ctx.lineTo(b.x, b.y); ctx.lineTo(c.x, c.y); ctx.closePath(); ctx.fill(); ctx.globalCompositeOperation = "lighter"; } } }
}
function distance(a, b) { var ac = b.y - a.y; var bc = b.x - a.x; var ab = Math.sqrt(ac * ac + bc * bc); return ab;
}
function randomIntFromInterval(mn, mx) { return ~~(Math.random() * (mx - mn + 1) + mn);
}
Developer | Pogany |
Username | giaco |
Uploaded | November 09, 2022 |
Rating | 3.5 |
Size | 2,537 Kb |
Views | 10,120 |
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 |
Out of the blue | 2,537 Kb |
Mountains | 2,389 Kb |
Circles | 2,621 Kb |
Tiles | 2,018 Kb |
Matrix Falling Code | 52,476 Kb |
Swim Smooth | 2,897 Kb |
Tiles nr.2 | 2,030 Kb |
Fuzzies | 2,338 Kb |
Basket | 2,297 Kb |
Helianthus | 1,995 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 |
Nice textured background | Hans | 2,659 Kb |
Blog | Rottingroom | 1,430 Kb |
Lazy Load for Background Images | The_ruther4d | 2,977 Kb |
IPhone5S SVG Space Grey | Onlinechris | 75,035 Kb |
Blackberry Mock | Zacharyolson | 1,865 Kb |
A Pen by Kenny Mark | Kennymark | 5,574 Kb |
Review test | Otro_user_gil | 4,054 Kb |
Resize image | Happyhj | 1,892 Kb |
Addthis_button | Esambino | 1,691 Kb |
Magnus 3 | ARocketfish | 7,944 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!