Glazing ribbon screensaver effect in HTML5 canvas

View code Play Walkthrough

Description

Randomly moving invisible particles connected with colored lines(strokes) produces this cool effect.

Blending the colors using globalCompositeOperation gives the glaze to the ribbons

Subscribe

Get updates about new walkthroughs, behind-the-scenes experiments, tips, tricks and more.

Add New Comment

16 Comments

(close)
Matt

Matt

LOVE IT LOVE IT LOVE IT *THIS* is the way I need to view code. Thank you so much, it really made several concepts clear for me.

Johnpel

Johnpel

This is cool!!!

Myth

Myth

It’s amazing

sandro abuel

sandro abuel

wow this is one of the best site, I ever seen this would he me alot, Great ! Thanks

bryan kimani

bryan kimani

This is the best html5 animation I have ever seen. very clear and inspiring. Thanks for sharing

angr3imir

angr3imir

Well that’s awesome.you can change the code in real time.
Thank for sharing.Realy useful!

Kendra

Kendra

This is the BEST site for code I have ever seen! The live code helps me to understand the process in a timely fashion :) This one in particular is VERY COOL!!! 100stars to you :D

ZanyMonk

ZanyMonk

Is there a way to erase totally the persistant traces ?
I need this to draw falling stars on a black background and they trouble me !
Thanks a lot and NICE WORK !!

Lyheang.ibell

Lyheang.ibell

great , i can not believe

Jellal

Jellal

Hi, this thing looks interesting but the player won’t work.

Romeo N. Bernardino IV

Romeo N. Bernardino IV

..- thank you so much guys.. i really really appreciate it ^_^ so many many thanks for you ^_^

Daniel

Daniel

should switch the distance calculation to remove square root.

var distance = xd*xd + yd*yd;
and then
if(distance < 200*200)

square root calculations are very costly, and the true distance is not needed

16 Comments

Description

5x 10x 15x 20x