Rainbow Grid
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 - 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();
Developer | Jack Rugile |
Username | jackrugile |
Uploaded | August 11, 2022 |
Rating | 4.5 |
Size | 2,760 Kb |
Views | 22,264 |
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 |
SpacePi js13k | 19,847 Kb |
Canvas Simple Circle Loader | 2,946 Kb |
Bubble Sketch.js Test | 3,437 Kb |
Canvas Wave | 2,902 Kb |
Fade and Blur on Hover Data Table | 3,399 Kb |
Canvas Orbital Trails v2 | 3,421 Kb |
Hearthstone Style Card Hover | 4,264 Kb |
Canvas Orbital Trails | 3,697 Kb |
Rainbow Loader | 2,022 Kb |
Glowing Pulse Form | 2,542 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 |
A Pen by Anoop | Anoopjohn | 330,760 Kb |
Sony Xperia Z3 Flat MockUp | Dapinitial | 4,379 Kb |
Apex Calculator | Michaelwnelson | 2,370 Kb |
A Pen by Mohomed Anees | Mohomedanees | 12,597 Kb |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Angular Sandbox | Alexgurrola | 1,616 Kb |
Custom Select Element | Agrayson | 3,616 Kb |
Responsive Advert | James_zedd | 2,354 Kb |
Exploding Text | Jjmartucci | 4,749 Kb |
A Pen by Eka Risyana | Risyana | 3,705 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!