radialDash

let t;
let tDiv = 200;
let rStep = 3;
let rArray = [];
function setup() {
	createCanvas(windowWidth, windowHeight);
	angleMode(DEGREES);
	noFill();
	rArray.push(new RingSpot(0, 0));
}
function draw() {
	background(0);
	t = frameCount / tDiv;
	strokeWeight(rStep / 5);
	translate(width / 2, height / 2);
	for (let j = 0; j < rArray.length; j++) {
		rings(rArray[j].x, rArray[j].y);
	}
	cornerL(width / 2 - 30, height / 2 - 30);
}

function dotsDash(r) {
	d = 10;
	n = round(360 / d);
	for (let i = 0; i < n; i++) {
		if (i % 2) {
			arc(0, 0, r, r, i * 2 * d, i * 2 * d + d);
		} else {
			arc(0, 0, r, r, i * 2 * d + d / 2, i * 2 * d + d / 2 + 0.5);
		}
	}
}
function cornerL(x, y) {
	push();
	strokeWeight(3);
	translate(x, y);
	scale(0.2);
	for (let j = 1; j < 15; j++) {
		stroke(j * 8 + 100, 205 - j * 2, 235 - j);
		push();
		rotate(j * 10);
		dotsDash(j * 8);
		pop();
	}
	pop();
}
function rings(x, y) {
	push();
	translate(x, y);
	cnt = min(200, round(width / 1.5 / rStep));
	for (let j = 1; j < cnt; j++) {
		stroke(j / 5 + 50, 265 - j / 2, 255 - j / 4);
		push();
		if (j % 2) {
			rotate(t * j);
		} else {
			rotate(-t * j);
		}
		dotsDash(j * rStep);
		pop();
	}
	pop();
}

function mousePressed() {
	if (rArray.length < 3) {
		x = mouseX - width / 2;
		y = mouseY - height / 2;
		rArray.push(new RingSpot(x, y));
	} else {
		rArray = [];
		rArray.push(new RingSpot(0, 0));
	}
}
class RingSpot {
	constructor(x, y) {
		this.x = x;
		this.y = y;
	}
}
function keyPressed() {
	if (keyCode === UP_ARROW) {
		if (rStep < 80) {
			rStep += 1;
		}
	} else if (keyCode === DOWN_ARROW) {
		if (rStep > 1) {
			rStep -= 1;
		}
	} else if (keyCode === RIGHT_ARROW) {
		if (tDiv > -500.1) {
			tDiv -= 105;
		}
	} else if (keyCode === LEFT_ARROW) {
		if (tDiv < 1000) {
			tDiv += 100;
		}
	}
}