Random walkers
How do I make an random walkers?
What is a random walkers? How do you make a random walkers? This script and codes were developed by Khalkeus on 11 November 2022, Friday.
Random walkers - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>random walkers</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <p>click or press space to restart</p>
<canvas id="c"></canvas> <script src="js/index.js"></script>
</body>
</html>
Random walkers - Script Codes CSS Codes
body, html{ width: 100%; height: 100%; margin: 0px; padding: 0px; overflow: hidden; font-family: courier; font-size: 12px;
}
canvas{ width: 100%; height: 100%;
}
p{ position: fixed; left: 0; right: 0; margin: 2% auto; text-align: center;
}
Random walkers - Script Codes JS Codes
function randomFloat(a, b){ var r = (Math.random() * (b - a) + a); return r;
}
function vectorMagnitude2D(vect){ return Math.sqrt(vect[0]*vect[0] + vect[1]*vect[1]);
}
function normalizeVector2D(vect){ var mag = vectorMagnitude2D(vect); return [vect[0]/mag, vect[1]/mag];
}
var c = document.getElementById("c");
var ctx = c.getContext("2d");
ctx.canvas.width = window.innerWidth - 10;
ctx.canvas.height = window.innerHeight - 10;
window.onclick = function(){ reload();
}
window.onkeydown = function(e){ if(e.keyCode === 32){ reload(); }
}
window.onresize = function(){ ctx.canvas.width = window.innerWidth; ctx.canvas.height = window.innerHeight; reload();
}
function drawer(x, y, color, dir) { this.x = x; this.y = y; this.color = color; this.direction = dir; this.speed = randomFloat(.1, 1); this.size = randomFloat(.1, 20); this.heatDeath = randomFloat(1, maxAge); this.heat = 0; offset = .1; this.active = true; this.draw = function(){ if(this.active){ this.heat++; this.direction = [this.direction[0] + randomFloat(-offset, offset), this.direction[1] + randomFloat(-offset, offset)];; this.x += this.direction[0] * this.speed; this.y += this.direction[1] * this.speed; ctx.fillStyle = 'rgb(' + (this.color[0] + 50) + ',' + (this.color[1] + 50) + ',' + (this.color[2] + 50)+ ')'; ctx.fillRect(this.x, this.y - this.size/2, this.size, this.size) ctx.fillStyle = 'rgb(' + this.color[0] + ',' + this.color[1] + ',' + this.color[2] + ')'; ctx.fillRect(this.x, this.y, this.size, this.size) if(this.x > c.width || this.x < 0 || this.y > this.height || this.y < 0){ this.active = false; } // if(this.heat > this.heatDeath){ // this.active = false; // } } }
}
var drawers = [];
var maxAge;
function reload(){ drawers = []; maxAge = randomFloat(99, 999) var baseColor = [Math.floor(randomFloat(150, 250)), Math.floor(randomFloat(150, 250)), Math.floor(randomFloat(150, 250))]; var d = normalizeVector2D([randomFloat(-1, 1), randomFloat(0, 1)]); var numGuys = randomFloat(50, 200); ctx.fillStyle = 'white'; ctx.fillRect(0, 0, window.innerWidth, window.innerHeight); for(var i = 0; i < numGuys; i ++){ d = normalizeVector2D([randomFloat(-1, 1), randomFloat(-1, 1)]); drawers.push(new drawer(window.innerWidth/2, window.innerHeight/2, baseColor, d)); baseColor = [Math.floor(baseColor[0] + randomFloat(-10, 10)), Math.floor(baseColor[1] + randomFloat(-10, 10)), Math.floor(baseColor[2] + randomFloat(-10, 10))]; }
}
reload();
function update(){ for(var i = 0; i < drawers.length; i++){ drawers[i].draw(); }
}
window.setInterval(update, 10);
Developer | Khalkeus |
Username | khalkeus |
Uploaded | November 11, 2022 |
Rating | 3 |
Size | 2,512 Kb |
Views | 6,072 |
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 |
Metaballs | 2,277 Kb |
Particle smoke | 2,887 Kb |
Square loading icons | 2,249 Kb |
Fish pond | 3,799 Kb |
Planet Generator | 2,984 Kb |
Boids iii | 2,947 Kb |
Binary clock | 2,039 Kb |
Flowers | 2,588 Kb |
Capybaras | 2,775 Kb |
Live pixel sorting | 2,314 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 |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Animated skewed panes | NyX | 4,462 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
Coburg Banks SVG Logo | Mjtweaver | 3,875 Kb |
Mario | Takaneichinose | 3,902 Kb |
Animated SVG stroke-dasharray | Netsi1964 | 3,179 Kb |
How to add Css Fold Notes In Blogger By Askwithloud.com | Askwithloud | 2,280 Kb |
Canvas stripes | Adrianparr | 1,948 Kb |
Right Click Menu | Anodpixels | 2,252 Kb |
Knockout Lists | Marinru | 2,531 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!