JSFiddle - React, Tailwind, and code Playground

by dievardump

JavaScript

const SIZE = 500;
const HALF = SIZE / 2;


const $canvas = document.createElement('canvas');
$canvas.width = SIZE;
$canvas.height = SIZE;

const ctx = $canvas.getContext('2d');


function getPointOnCircle(circleCenterX, circleCenterY, r, angle) {
	return {
  	x: circleCenterX + r * Math.sin(angle),
  	y: circleCenterY + r * Math.cos(angle),
  };
}

function moveTo(point, distance, angle) {
	return {
    ...point,
  	x: point.x + distance * Math.cos(angle),
		y: point.y + distance * Math.sin(angle),
	};
}


const startRadius = HALF;

const points = [];
for(let i = 0; i < 100; i++) {
	points[i] = getPointOnCircle(HALF, HALF, startRadius, Math.random() * 2 * Math.PI);
  
  points[i].leftTendancy = Math.random() * 0.1;
  points[i].rightTendancy = 0.2 - points[i].leftTendancy;
}

ctx.beginPath();
ctx.arc(HALF, HALF, HALF, 0, 2 * Math.PI);
ctx.stroke();
ctx.closePath();


let iteration = 0;


do {

	for(let i = 0; i < points.length; i++) {
    let point = points[i];
    if (point == null) continue;
    // draw
    ctx.beginPath();
    ctx.fillColor = 'red';
    ctx.arc(point.x, point.y, 3, 0, 2 * Math.PI);
    ctx.fill();

    // update
    if (undefined == point.angleTo) {
    	point.angleTo = Math.atan2(HALF - point.y, HALF - point.x);
    }
    
    let angleTo0 = Math.atan2(HALF - point.y, HALF - point.x);
    
    if (iteration == 0) {
    	console.log(point.angleTo, angleTo0);
    }
    let r = Math.random();
    if (r < point.leftTendancy) {
      point.angleTo -= (Math.random() * Math.PI / 16) ;
    } else if (r < point.rightTendancy) {
      point.angleTo += (Math.random() * Math.PI / 16) ;
    }
    
   // if (angleTo0 - point.angleTo > Math.PI / 2) {
    //	point.angleTo = angleTo0 + Math.PI / 2;
    //} else if (angleTo0 - point.angleTo < Math.PI / 2) {
    //	point.angleTo = angleTo0 - Math.PI / 2;
   // }

  	point = moveTo(point, 1, point.angleTo);
    
    if (point.x == HALF && point.y == HALF) {
    	points[i] = null;
    } else {
    	points[i] =...