An Interest In:
Web News this Week
- March 29, 2024
- March 28, 2024
- March 27, 2024
- March 26, 2024
- March 25, 2024
- March 24, 2024
- March 23, 2024
Make it flash in HTML Canvas
Hey guys, after the Make it Rain with HTML Canvas, I am back with another fun canvas experiment. This time I created flashes of lightning using the line method of canvas. The creativity of canvas is unlimited and it's up to you to explore the possibilities.
(If pen doesn't run or is windowed, please click re-run. Sometimes there is an issue where the pen doesn't run.)
I just used the same concept when we draw a squiggly line on a piece of paper.
- Draw a line.
- Use the ending point of the previous line as the start of the next line.
- Keep repeating this.
You can check out the code in the codepen above.
I added this configuration to play around with the types of bolts generated.
const interval = 3000;const lightningStrikeOffset = 5;const lightningStrikeLength = 100;const lightningBoltLength = 5;const lightningThickness = 4;
interval
- creates a lightning strike after the specified millisecondslightningStrikeOffset
- determines how angled each bolt is. The more the offset, the more slanted the bolts look. I found 5 to be a good enough value.lightningStrikeLength
- determines how many bolts the strike will have.lightningBoltLength
- determines the length of a single line.lightningThickness
- determines the thickness of each line.
For the fade effect, I am just looping through the bolt and decreasing the opacity and thickness of the bolt.
for (let i = 0 ; i < lightning.length ; i++) { lightning[i].opacity -= 0.01; lightning[i].thickness -= 0.05; if (lightning[i].thickness <= 2) { lightning[i].end.y -= 0.05; } lightning[i].draw();}
Original Link: https://dev.to/soorajsnblaze333/make-it-flash-lightning-with-canvas-43nh
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To