Random curve-pathed particles of rainbowness

Developer
Matei Copot
Size
2,576 Kb
Views
42,504
  1. Random curve-pathed particles of rainbowness Previews
  2. Random curve-pathed particles of rainbowness HTML Codes
  3. Random curve-pathed particles of rainbowness CSS Codes
  4. Random curve-pathed particles of rainbowness JS Codes

How do I make an random curve-pathed particles of rainbowness?

(fixed version of random lightnings of rainbowness)Here's the video of the original. What is a random curve-pathed particles of rainbowness? How do you make a random curve-pathed particles of rainbowness? This script and codes were developed by Matei Copot on 12 June 2022, Sunday.

Random curve-pathed particles of rainbowness Previews
IQ Test

Random curve-pathed particles of rainbowness - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>random curve-pathed particles of rainbowness</title> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ canvas { position:absolute; top:0; left:0; background-color:black;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <canvas id=c></canvas> <script src="js/index.js"></script>
</body>
</html>

Random curve-pathed particles of rainbowness - Script Codes CSS Codes

canvas { position:absolute; top:0; left:0; background-color:black;
}

Random curve-pathed particles of rainbowness - Script Codes JS Codes

var w = c.width = window.innerWidth, h = c.height = window.innerHeight, ctx = c.getContext('2d'), spawnProb = 1, numberOfMoves = [8, 16], //[min, max] distance = [50, 200], attenuator = 900, timeBetweenMoves = [6, 10], size = [.5, 3], lines = [], frame = (Math.random()*360)|0;
function rand(ar){ return Math.random() * (ar[1] - ar[0]) + ar[0];
}
function Line(){ this.x = Math.random() * w; this.y = Math.random() * h; this.vx = this.vy = 0; this.last = {}; this.target = {}; this.totalMoves = rand(numberOfMoves); this.move = 0; this.timeBetweenMoves = rand(timeBetweenMoves); this.timeSpentThisMove = this.timeBetweenMoves; this.distance = rand(distance); this.color = 'hsl(hue, 80%, 50%)'.replace('hue', frame%360); this.size = rand(size);
}
Line.prototype.use = function(){ ++this.timeSpentThisMove; if(this.timeSpentThisMove >= this.timeBetweenMoves){ ++this.move; this.timeSpentThisMove = 0; var rad = Math.random() * 2 * Math.PI; this.target.x = this.x + Math.cos(rad) * this.distance; this.target.y = this.y + Math.sin(rad) * this.distance; } this.last.x = this.x; this.last.y = this.y; this.vx += (this.x - this.target.x)/attenuator; this.vy += (this.y - this.target.y)/attenuator; this.x += this.vx; this.y += this.vy; ctx.lineWidth = this.size; ctx.strokeStyle = ctx.shadowColor = this.color; ctx.beginPath(); ctx.moveTo(this.last.x, this.last.y); ctx.lineTo(this.x, this.y); ctx.stroke();
}
function anim(){ window.requestAnimationFrame(anim); ++frame; ctx.shadowBlur = 0; ctx.fillStyle = 'rgba(0, 0, 0, .04)'; ctx.fillRect(0, 0, w, h); ctx.shadowBlur = 20; if(Math.random() < spawnProb) lines.push(new Line); for(var i = 0; i < lines.length; ++i){ lines[i].use(); if(lines[i].move >= lines[i].totalMoves){ lines.splice(i, 1); --i; } }
}
anim();
Random curve-pathed particles of rainbowness - Script Codes
Random curve-pathed particles of rainbowness - Script Codes
Home Page Home
Developer Matei Copot
Username towc
Uploaded June 12, 2022
Rating 4.5
Size 2,576 Kb
Views 42,504
Do you need developer help for Random curve-pathed particles of rainbowness?

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!

Matei Copot (towc) Script Codes
Name
Rainbow Firestorm recreation
This is just a test. Tests need no love
Pacman
Experiment with basic 3d on 2d canvas
Superimpositional garden
JS canvas 3d tree generator
Springing Particles
Progression of ideas through willpower and motivation
Rainbow rain
Webgl fireworks
Create amazing video scripts 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!