Lightning
How do I make an lightning?
Base for lightning balls pen http://codepen.io/findoff/pen/DnhGp/?editors=001. What is a lightning? How do you make a lightning? This script and codes were developed by Findoff on 03 October 2022, Monday.
Lightning - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>lightning</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas1"></canvas> <script src="js/index.js"></script>
</body>
</html>
Lightning - Script Codes CSS Codes
#canvas1 { border: 1px solid #000;
}
Lightning - Script Codes JS Codes
var canvas = document.getElementById('canvas1'), ctx = canvas.getContext('2d');
canvas.width = 700;
canvas.height = 300;
function drawPoint(p, r, color) { ctx.fillStyle = color || '#000'; ctx.beginPath(); ctx.arc(p[0], p[1], r || 3, 0,Math.PI*2, 0); ctx.fill();
}
function vec2Len(a, b) { var x = b[0] - a[0]; var y = b[1] - a[1]; return Math.sqrt(x*x + y*y);
}
function vec2Lerp(a, b, p) { return [ (b[0]-a[0])*p+a[0], (b[1]-a[1])*p+a[1] ];
}
function vec2LerpShift(a, b, p, s) { var x = b[0] - a[0]; var y = b[1] - a[1]; var r = s/Math.sqrt( x*x + y*y ); var x2 = 0 * x - r * y; var y2 = 0 * y + r * x; return [ a[0] + x*p + x2, a[1] + y*p + y2 ];
}
function drawLightning(a, b) { var ps = []; var sx,sy; sx = sy = -500 for( var i=0 ; i<8 ; ++i ) { ps.push([Math.random(),Math.random()]); } ps.sort(); var t, l = vec2Len(a,b), sf = l*0.25, sf2; ctx.beginPath(); ctx.moveTo(a[0]+sx,a[1]+sx); for( var i=0 ; i<ps.length ; ++i ) { sf2 = (1 - Math.abs(ps[i][0]-0.5) * 2) * sf; t = vec2LerpShift( a,b,ps[i][0], ps[i][1]*sf2-sf2*0.5 ); ctx.lineTo(t[0]+sx,t[1]+sx); } ctx.lineTo(b[0]+sx,b[1]+sx); ctx.lineWidth = l/20; ctx.shadowBlur = l/8; ctx.shadowColor = 'rgba(64,0,255,1)'; ctx.shadowOffsetX = -sx; ctx.shadowOffsetY = -sy; ctx.strokeStyle = 'rgba(200,200,255,1)'; ctx.stroke(); ctx.beginPath(); ctx.moveTo(a[0],a[1]); for( var i=0 ; i<ps.length ; ++i ) { sf2 = (1 - Math.abs(ps[i][0]-0.5) * 2) * sf; t = vec2LerpShift( a,b,ps[i][0], ps[i][1]*sf2-sf2*0.5 ); ctx.lineTo(t[0],t[1]); } ctx.lineTo(b[0],b[1]); ctx.lineWidth = 1; ctx.stroke(); ctx.lineTo(b[0],b[1]);
}
var a = [100,100];
var b = [500,100];
/*var c = lerpShift(a,b,0.25,10);
drawPoint(c);*/
var render = function() { ctx.fillStyle = '#fff'; ctx.globalAlpha = 0.3; ctx.fillRect(0,0, canvas.width,canvas.height); ctx.globalAlpha = 1; drawLightning(a, b); drawPoint(a); drawPoint(b); setTimeout(render, 100);
};
render();
Developer | Findoff |
Username | findoff |
Uploaded | October 03, 2022 |
Rating | 3.5 |
Size | 2,284 Kb |
Views | 38,456 |
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 |
Through penises... | 2,057 Kb |
Connected levers | 2,758 Kb |
Let it snow | 2,600 Kb |
Deflectors vs asteroids | 3,565 Kb |
Curved fractal | 2,430 Kb |
Something with rockets | 3,513 Kb |
Stick waves 2 | 2,827 Kb |
Screeps body calculator | 6,315 Kb |
Flawed text | 2,280 Kb |
Ant | 2,365 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 |
React Recipe Box | Krokodill | 5,347 Kb |
Pruebas de d3.js | Juanmanuelcarnerero | 2,485 Kb |
Alter bg opacity on hover... | Chrisboon27 | 2,054 Kb |
SVG Animation | Thepheer | 4,793 Kb |
Material design - button rainbow circle | Kunukn | 3,652 Kb |
DFF Website | Hawcubite | 10,123 Kb |
Loader | MikitaLisavets | 3,321 Kb |
Tumblr API | Juanv911 | 2,436 Kb |
Simple Login Form Template | Banunn | 3,571 Kb |
Twinner Spinner II | Katydecorah | 2,974 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!