JSFiddle - React, Tailwind, and code Playground

dla

by schrodingers

CSS

h1 {
  display: none;
}

body {
  display: flex;
  justify-content: center;
  align-content: center;
  align-items: center;
  overflow: hidden;
}

JavaScript

/*
  Diffusion-limited aggregation
  By Johan Karlsson, DonKarlssonSan
  
  Thanks to Paul Bourke!
  http://paulbourke.net/fractals/dla/
*/

function createCanvas() {
  canvas = document.createElement("canvas");
  ctx = canvas.getContext("2d");
  //w = canvas.width = 800;
  //h = canvas.height = 600;
  w = canvas.width = window.innerWidth;
  h = canvas.height = window.innerHeight;
  document.body.appendChild(canvas);
  ctx.fillStyle = "#333";
  ctx.fillRect(0, 0, w, h);
}
createCanvas();



// Build a matrix that corresponds 
// to all pixels on the canvas.
var matrix = [];
for (var x = 0; x < canvas.width; x++) {
  matrix[x] = [];
  for (var y = 0; y < canvas.height; y++) {
    matrix[x][y] = 0;
  }
}

// Place the start point
var midX = Math.round(canvas.width / 2);
var midY = Math.round(canvas.height / 2);
matrix[midX][midY] = 1;
ctx.fillRect(midX, midY, 1, 1);

var counter = 0;
ctx.fillStyle = "#000022";
ctx.fillRect(0, 0, canvas.width, canvas.height);

var Particle = function() {
  // Pick a random point on the 
  // border of the canvas
  var random = Math.random();
  if (random > 0.5) {
    this.x = Math.random() * canvas.width;
    this.y = 0;
  } else {
    this.y = Math.random() * canvas.height;
    this.x = 0;
  }
  this.speed = 1;
  this.angle = Math.random() * 2 * Math.PI;
}
Particle.prototype.move = function() {
  this.angle += Math.random() - 0.5;
  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++) {
    //...