Rainbow Grid

Developer
Jack Rugile
Size
2,760 Kb
Views
22,264
  1. Rainbow Grid Previews
  2. Rainbow Grid HTML Codes
  3. Rainbow Grid CSS Codes
  4. Rainbow Grid JS Codes

How do I make an rainbow grid?

What is a rainbow grid? How do you make a rainbow grid? This script and codes were developed by Jack Rugile on 11 August 2022, Thursday.

Rainbow Grid Previews
IQ Test

Rainbow Grid - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Rainbow Grid</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Rainbow Grid - Script Codes CSS Codes

body {	background: #000;	overflow: hidden;
}
canvas {	display: block;
}

Rainbow Grid - Script Codes JS Codes

var canvas,	ctx,	width,	height,	size,	lines,	tick;
function line() {	this.path = [];	this.speed = rand( 10, 20 );	this.count = randInt( 10, 30 );	this.x = width / 2, + 1;	this.y = height / 2 + 1;	this.target = { x: width / 2, y: height / 2 };	this.dist = 0;	this.angle = 0;	this.hue = tick / 5;	this.life = 1;	this.updateAngle();	this.updateDist();
}
line.prototype.step = function( i ) {	this.x += Math.cos( this.angle ) * this.speed;	this.y += Math.sin( this.angle ) * this.speed;	this.updateDist();	if( this.dist < this.speed ) {	this.x = this.target.x;	this.y = this.target.y;	this.changeTarget();	}	this.path.push( { x: this.x, y: this.y } );	if( this.path.length > this.count ) {	this.path.shift();	}	this.life -= 0.001;	if( this.life <= 0 ) {	this.path = null;	lines.splice( i, 1 );	}
};
line.prototype.updateDist = function() {	var dx = this.target.x - this.x,	dy = this.target.y - this.y;	this.dist = Math.sqrt( dx * dx + dy * dy );
}
line.prototype.updateAngle = function() {	var dx = this.target.x - this.x,	dy = this.target.y - this.y;	this.angle = Math.atan2( dy, dx );
}
line.prototype.changeTarget = function() {	var randStart = randInt( 0, 3 );	switch( randStart ) {	case 0: // up	this.target.y = this.y - size;	break;	case 1: // right	this.target.x = this.x + size;	break;	case 2: // down	this.target.y = this.y + size;	break;	case 3: // left	this.target.x = this.x - size;	}	this.updateAngle();
};
line.prototype.draw = function( i ) {	ctx.beginPath();	var rando = rand( 0, 10 );	for( var j = 0, length = this.path.length; j < length; j++ ) {	ctx[ ( j === 0 ) ? 'moveTo' : 'lineTo' ]( this.path[ j ].x + rand( -rando, rando ), this.path[ j ].y + rand( -rando, rando ) );	}	ctx.strokeStyle = 'hsla(' + rand( this.hue, this.hue + 30 ) + ', 80%, 55%, ' + ( this.life / 3 ) + ')';	ctx.lineWidth = rand( 0.1, 2 );	ctx.stroke();
};
function rand( min, max ) {	return Math.random() * ( max - min ) + min;
}
function randInt( min, max ) {	return Math.floor( min + Math.random() * ( max - min + 1 ) );
};
function init() {	canvas = document.getElementById( 'canvas' );	ctx = canvas.getContext( '2d' );	size = 30;	lines = [];	reset();	loop();
}
function reset() {	width = Math.ceil( window.innerWidth / 2 ) * 2;	height = Math.ceil( window.innerHeight / 2 ) * 2;	tick = 0;	lines.length = 0;	canvas.width = width;	canvas.height = height;
}
function create() {	if( tick % 10 === 0 ) {	lines.push( new line());	}
}
function step() {	var i = lines.length;	while( i-- ) {	lines[ i ].step( i );	}
}
function clear() {	ctx.globalCompositeOperation = 'destination-out';	ctx.fillStyle = 'hsla(0, 0%, 0%, 0.1';	ctx.fillRect( 0, 0, width, height );	ctx.globalCompositeOperation = 'lighter';
}
function draw() {	ctx.save();	ctx.translate( width / 2, height / 2 );	ctx.rotate( tick * 0.001 );	var scale = 0.8 + Math.cos( tick * 0.02 ) * 0.2;	ctx.scale( scale, scale );	ctx.translate( -width / 2, -height / 2 );	var i = lines.length;	while( i-- ) {	lines[ i ].draw( i );	}	ctx.restore();
}
function loop() {	requestAnimationFrame( loop );	create();	step();	clear();	draw();	tick++;
}
function onresize() {	reset();
}
window.addEventListener( 'resize', onresize );
init();
Rainbow Grid - Script Codes
Rainbow Grid - Script Codes
Home Page Home
Developer Jack Rugile
Username jackrugile
Uploaded August 11, 2022
Rating 4.5
Size 2,760 Kb
Views 22,264
Do you need developer help for Rainbow Grid?

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!

Jack Rugile (jackrugile) Script Codes
Name
Canvas Orbital Trails v2
Scroll Progress as Canvas to Favicon
Fade and Blur on Hover Data Table
Snake Game - CSS Renderer
Canvas Sparkly Circle Loader
Canvas Simple Circle Loader
Canvas Parallax Skyline
Canvas Color Smoke
Canvas Waterfall
Rainbow Firestorm
Create amazing web content 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!