Lightrays v2
How do I make an lightrays v2?
Added some colour. Update: Added colour shift for sun-rise/set.. What is a lightrays v2? How do you make a lightrays v2? This script and codes were developed by Tristan on 25 August 2022, Thursday.
Lightrays v2 - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Lightrays v2</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Lightrays v2 - Script Codes CSS Codes
*{margin:0;padding:0;-moz-box-sizing:border-box;-webkit-box-sizing:border-box}
body{font-size:75%;background:#222;font-family:arial;padding:20px 0 0 20px}
canvas{border:1px solid #181818;display:block;box-shadow:0 0 10px #111;background:rgba(20,20,20,1)}
Lightrays v2 - Script Codes JS Codes
var canvas, c, w, h, twoPI = Math.PI * 2, mX, mY, resize = true, mousemove = true, per = { x: 0, y: 0 }, mtn, trackmouse = false;
window.onload = function(){ canvas = document.createElement('canvas') w = canvas.width = window.innerWidth - 40; h = canvas.height = window.innerHeight - 40; c = canvas.getContext('2d'); document.body.appendChild(canvas); !resize || window.addEventListener('resize', function(e){ w = canvas.width = window.innerWidth - 40; h = canvas.height = window.innerHeight - 40; }); !mousemove || canvas.addEventListener('mousemove', function(e){ trackmouse = true; mX = e.pageX-20; mY = e.pageY-20; per = { x: mX, y: mY }; }); mX = w/2; mY = w/2; per = { x: w/2, y: h/2, step: 1 } mtn = new Mountains(300,"10"); window.setInterval(animate,17);
} function newGradient(gradient){ var grad; switch(gradient.type){ case "radial": grad = c.createRadialGradient(gradient.x1, gradient.y1, gradient.r1, gradient.x1, gradient.y1, gradient.r2); break; case "linear": grad = c.createLinearGradient(gradient.x1, gradient.y1, gradient.x2, gradient.y2); break; } for(var i = 0; i < gradient.stops.length; i++){ grad.addColorStop(gradient.stops[i].s, gradient.stops[i].c); } return grad; }
function animate(){ if(!trackmouse){ per.x = mX = w/2 + Math.round(Math.cos(per.step)*w/2); per.y = mY = h/2 + Math.round(Math.sin(per.step)*h/2); per.step += 0.03; if(per.step > twoPI) per.step = 0; } c.save(); c.globalCompositeOperation = "source-over"; c.fillStyle = newGradient( { type: "radial", x1: mX, y1: mY, r1: 0, r2: w, stops: [ { s: 0, c: "rgba("+ (h-mY) +","+ (h-mY) +","+ (h-mY) +",0.5)" }, { s: 0.05, c: "rgba("+ (h-mY) +","+ (h-mY-128) +",128,0.5)" }, { s: 1, c: "rgba(0,"+ (h-mY-128) +","+ (h-mY) +",0.5)" } ] } ); c.fillRect(0,0,w,h); mtn.draw();
}
function Mountains(peaks,seed){ var points = []; this.init = function(){ var step = w / peaks, y = 0; points.push({x: 0, y: y}); for(var i = 1; i <= peaks; i++){ y = y + (Math.random() * 20)-10; points.push({x: i * step, y: y}); } }; this.draw = function(){ c.save(); //c.fillStyle = "rgba(20,20,20,1)"; c.fillStyle = newGradient({type:"linear", x1: 0, y1: 0, x2: 0, y2: h, stops: [{s:1, c:"rgba(0,0,0,1)"},{s:0, c:"rgba(80,80,80,1)"}]}); c.beginPath(); c.moveTo(points[0].x, h/2-points[0].y); for(var p = 1; p < points.length; p++){ c.lineTo(points[p].x, h/2 - points[p].y); } c.lineTo(w,h); c.lineTo(0,h); c.closePath(); c.fill(); c.restore(); c.globalCompositeOperation = "lighter"; c.fillStyle = "rgba("+(h-mY)+","+(h-mY)+","+(h-mY)+",0.03)"; for(var p = 0; p < points.length-1; p++){ var va1 = Math.atan2(h/2-points[p].y - per.y, points[p].x - per.x), va2 = Math.atan2(h/2-points[p+1].y - per.y, points[p+1].x - per.x); c.beginPath(); c.moveTo(points[p ].x, h/2-points[p].y); c.lineTo(points[p+1].x, h/2-points[p+1].y); c.lineTo(points[p+1].x + Math.cos(va2)*w, h/2-points[p+1].y + Math.sin(va2)*w); c.lineTo(points[p ].x + Math.cos(va1)*w, h/2-points[p].y + Math.sin(va1)*w); c.closePath(); c.fill(); } }; this.init();
}
Developer | Tristan |
Username | sinthetyc |
Uploaded | August 25, 2022 |
Rating | 4.5 |
Size | 2,903 Kb |
Views | 32,384 |
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 |
Light rays | 2,677 Kb |
A Better Colour Picker | 18,308 Kb |
Julia Vertex Shader | 3,012 Kb |
Higgs-Boson | 2,782 Kb |
Hovering a Hexagon | 2,254 Kb |
Line Segment Intersection | 3,148 Kb |
Zodiac | 120,243 Kb |
Particle Interaction | 3,058 Kb |
Geese | 4,750 Kb |
Nebular | 3,189 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 |
Tumblr API | Juanv911 | 2,436 Kb |
Toggling Divs with jQuery | Yying6 | 1,967 Kb |
Twinner Spinner II | Katydecorah | 2,974 Kb |
CSS Variables | Jdsteinbach | 4,759 Kb |
Using Flickr API | MoyArt | 6,761 Kb |
A Pen by Ben Babics | Benbabics | 2,957 Kb |
Button shaking | SusanneLundblad | 2,227 Kb |
Simple Accordion | Wearebold | 3,683 Kb |
Fellowship of the Ring | Aussieyang | 2,639 Kb |
Sticky menu on scroll | Senff | 2,869 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!