Glazing ribbon screensaver effect in HTML5 canvas

Developer
Stan Williams
Size
2,841 Kb
Views
52,624
  1. Glazing ribbon screensaver effect in HTML5 canvas Previews
  2. Glazing ribbon screensaver effect in HTML5 canvas HTML Codes
  3. Glazing ribbon screensaver effect in HTML5 canvas CSS Codes
  4. Glazing ribbon screensaver effect in HTML5 canvas JS Codes

How do I make an glazing ribbon screensaver effect in html5 canvas?

Randomly moving invisible particles connected with colored lines(strokes) produces this cool effect.Blending the colors using globa lComposite Operation gives the glaze to the ribbons. What is a glazing ribbon screensaver effect in html5 canvas? How do you make a glazing ribbon screensaver effect in html5 canvas? This script and codes were developed by Stan Williams on 08 September 2022, Thursday.

Glazing ribbon screensaver effect in HTML5 canvas Previews
IQ Test

Glazing ribbon screensaver effect in HTML5 canvas - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Glazing ribbon screensaver effect in HTML5 canvas</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Lets make some ribbon effects -->
<canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Glazing ribbon screensaver effect in HTML5 canvas - Script Codes CSS Codes

 HTML CSS JS
/*Some basic styles*/
* { margin: 0; padding: 0;}
#canvas { display: block; /*Fill canvas with black by default*/ background: #f00;
}

Glazing ribbon screensaver effect in HTML5 canvas - Script Codes JS Codes

window.onload = function(){	var canvas = document.getElementById("canvas");	var ctx = canvas.getContext("2d");	//Lets make the canvas occupy the full page	var W = window.innerWidth, H = window.innerHeight;	canvas.width = W;	canvas.height = H;	//Lets make some particles	var particles = [];	for(var i = 0; i < 25; i++)	{	particles.push(new particle());	}	function particle()	{	//location on the canvas	this.location = {x: Math.random()*W, y: Math.random()*H};	//radius - lets make this 0	this.radius = 0;	//speed	this.speed = 3;	//steering angle in degrees range = 0 to 360	this.angle = Math.random()*360;	//colors	var r = Math.round(Math.random()*255);	var g = Math.round(Math.random()*255);	var b = Math.round(Math.random()*255);	var a = Math.random();	this.rgba = "rgba("+r+", "+g+", "+b+", "+a+")";	}	//Lets draw the particles	function draw()	{	//re-paint the BG	//Lets fill the canvas black	//reduce opacity of bg fill.	//blending time	ctx.globalCompositeOperation = "source-over";	ctx.fillStyle = "rgba(0, 0, 0, 0.02)";	ctx.fillRect(0, 0, W, H);	ctx.globalCompositeOperation = "lighter";	for(var i = 0; i < particles.length; i++)	{	var p = particles[i];	ctx.fillStyle = "white";	ctx.fillRect(p.location.x, p.location.y, p.radius, p.radius);	//Lets move the particles	//So we basically created a set of particles moving in random direction	//at the same speed	//Time to add ribbon effect	for(var n = 0; n < particles.length; n++)	{	var p2 = particles[n];	//calculating distance of particle with all other particles	var yd = p2.location.y - p.location.y;	var xd = p2.location.x - p.location.x;	var distance = Math.sqrt(xd*xd + yd*yd);	//draw a line between both particles if they are in 200px range	if(distance < 200)	{	ctx.beginPath();	ctx.lineWidth = 1;	ctx.moveTo(p.location.x, p.location.y);	ctx.lineTo(p2.location.x, p2.location.y);	ctx.strokeStyle = p.rgba;	ctx.stroke();	//The ribbons appear now.	}	}	//We are using simple vectors here	//New x = old x + speed * cos(angle)	p.location.x = p.location.x + p.speed*Math.cos(p.angle*Math.PI/180);	//New y = old y + speed * sin(angle)	p.location.y = p.location.y + p.speed*Math.sin(p.angle*Math.PI/180);	//You can read about vectors here:	//http://physics.about.com/od/mathematics/a/VectorMath.htm	if(p.location.x < 0) p.location.x = W;	if(p.location.x > W) p.location.x = 0;	if(p.location.y < 0) p.location.y = H;	if(p.location.y > H) p.location.y = 0;	}	}	setInterval(draw, 30);
}
//original author: https://twitter.com/thecodeplayer
Glazing ribbon screensaver effect in HTML5 canvas - Script Codes
Glazing ribbon screensaver effect in HTML5 canvas - Script Codes
Home Page Home
Developer Stan Williams
Username Stanssongs
Uploaded September 08, 2022
Rating 3.5
Size 2,841 Kb
Views 52,624
Do you need developer help for Glazing ribbon screensaver effect in HTML5 canvas?

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!

Stan Williams (Stanssongs) Script Codes
Name
HTML5 Player with Flash fallback for non supporting browsers.
3D Hover Effect for Images
Background Image Slideshow Menu
Jquery and CSS3 powered Lightbox Gallery
CSS social buttons and icons
Pure CSS3 breadcrumb navigation, pixel perfect
Animated button effects using jquery, css, javascript and effeckts.js
Record Player with CSS3 Anims and HTML5 Audio
Circular rotating music player with menu on back with html5 javascript and css3
Draggy Bits
Create amazing Facebook ads with AI!

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!