Diffusion-Limited Aggregation - Line

Developer
Johan Karlsson
Size
2,550 Kb
Views
48,576
  1. Diffusion-Limited Aggregation - Line Previews
  2. Diffusion-Limited Aggregation - Line HTML Codes
  3. Diffusion-Limited Aggregation - Line CSS Codes
  4. Diffusion-Limited Aggregation - Line JS Codes

How do I make an diffusion-limited aggregation - line?

Thanks to Paul Bourke! http://paulbourke.net/fractals/dla/. What is a diffusion-limited aggregation - line? How do you make a diffusion-limited aggregation - line? This script and codes were developed by Johan Karlsson on 26 July 2022, Tuesday.

Diffusion-Limited Aggregation - Line Previews
IQ Test

Diffusion-Limited Aggregation - Line - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Diffusion-Limited Aggregation - Line</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <canvas id="canvas"></canvas> <script src="js/index.js"></script>
</body>
</html>

Diffusion-Limited Aggregation - Line - Script Codes CSS Codes

html, body { background: #000022;
}

Diffusion-Limited Aggregation - Line - Script Codes JS Codes

/* Diffusion-limited aggregation By Johan Karlsson Thanks to Paul Bourke! http://paulbourke.net/fractals/dla/
*/
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");
canvas.width = 600; //window.innerWidth;
canvas.height = 600; //window.innerHeight;
// Build a matrix that corresponds
// to all pixels on the canvas.
var matrix = new Array(canvas.width);
for(var x = 0; x < canvas.width; x++) { matrix[x] = new Array(canvas.height); for(var y = 0; y < canvas.height; y++) { matrix[x][y] = 0; } matrix[x][canvas.height-1] = 1; ctx.fillRect(x, canvas.height-1, 1, 1);
}
var counter = 0;
ctx.fillStyle = "#000022";
ctx.fillRect(0, 0, canvas.width, canvas.height);
function Particle() { // Pick a random point on the // border of the canvas this.x = Math.random()*canvas.width; this.y = 0; this.speed = 1; this.angle = Math.random() * 2 * Math.PI; this.move = function () { this.angle += Math.random() - 0.5; // Make sure angle is down if(this.angle > Math.PI) { this.angle = Math.PI; } else if (this.angle < 0) { this.angle = 0; } this.x += Math.cos(this.angle) * this.speed; this.y += Math.sin(this.angle) * this.speed; // Wrap around the screen if(this.x >= canvas.width) { this.x = 0; } else if(this.x < 0) { this.x = canvas.width - 1; } if(this.y >= canvas.height) { this.y = 0; } else if(this.y < 0) { this.y = canvas.height - 1; } }
}
function isCollition(x, y) { if(x >= matrix.length || x < 0 || y >= matrix[x].length || y < 0) { return false; } return matrix[x][y] === 1;
}
var p = new Particle();
var x, y;
// Brownian walk
function walk() { for(var i = 0; i < 50; i++) { // Walk around till we hit something do { p.move(); x = Math.round(p.x); y = Math.round(p.y); } while(!( isCollition(x-1, y-1) || isCollition(x , y-1) || isCollition(x+1, y-1) || isCollition(x-1, y ) || isCollition(x , y ) || isCollition(x+1, y ) || isCollition(x-1, y+1) || isCollition(x , y+1) || isCollition(x+1, y+1) )); if(x >= 0 && x < canvas.width && y >= 0 && y < canvas.height) { // We have a collition // Put a mark in the matrix matrix[x][y] = 1; ctx.fillStyle = "hsl(" + counter/300 + ", 100%, 50%)"; // ...and on the canvas ctx.fillRect(p.x, p.y, 1, 1); // Spawn a new particle p = new Particle(); x = Math.round(p.x); y = Math.round(p.y); counter++; } } requestAnimationFrame(walk);
}
walk();
Diffusion-Limited Aggregation - Line - Script Codes
Diffusion-Limited Aggregation - Line - Script Codes
Home Page Home
Developer Johan Karlsson
Username DonKarlssonSan
Uploaded July 26, 2022
Rating 3
Size 2,550 Kb
Views 48,576
Do you need developer help for Diffusion-Limited Aggregation - Line?

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!

Johan Karlsson (DonKarlssonSan) Script Codes
Name
Wayward Walker Worms
Circle Fractal
Brownian Gnats
Apply Filter Effects to Music
Random Fractal
In Tribute to Simon Plouffe
Rainbow 6-fold Pentille
Particle Text
Antenna Generator
Portrait by Brownian Motion
Create amazing SEO 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!