ya basic counter

let baseN = 10;
let n = 10;
let num = 0;
let playBool = true;
let d = 1;
function setup() {
	createCanvas(500, 200);
	frameRate(10);
	textAlign(CENTER);
	rectMode(CENTER);
}
function draw() {
	textSize(24);
	if (playBool) {
		num += d;
	}
	background(155, 155, 180);
	text("Base: " + baseN, width / 2, 50);
	nbox();
	tnum();
	if (num > pow(baseN, 9)) {
		num = 0;
	}
	textSize(12);
	text(
		"Arrow keys to change Base. Click to pause. Space to reset.",
		width / 2,
		height - 30
	);
	text("w/s keys will change step = " + d, width / 2, height - 15);
	text(num, width / 2, height - 50);
}

function nbox() {
	for (let i = 0; i < n; i++) {
		fill(75);
		rect(
			35 + (i * (width - 20)) / n + 2,
			height / 2,
			(width - 40) / n + 2,
			52,
			5,
			5
		);
		fill(255);
		rect(35 + (i * (width - 20)) / n, height / 2, (width - 40) / n, 50, 5, 5);
	}
	fill(0);
}

function tnum() {
	num1 = num;
	let p = [];
	for (let i = n - 1; i >= 0; i--) {
		p[i] = floor(num1 / pow(baseN, i));
		num1 = num1 - p[i] * pow(baseN, i);
		text(p[i], 30 + ((n - 1 - i) * (width - 20)) / n, height / 2 + 10);
	}
}

function mousePressed() {
	playBool = !playBool;
}

function keyPressed() {
	if (keyCode === 38) {
		if (baseN < 99) {
			baseN++;
		} else {
			baseN = 2;
		}
	}
	if (keyCode === 40) {
		if (baseN > 2) {
			baseN--;
		} else {
			baseN = 99;
		}
	}
	if (keyCode === 32) {
		num = 0;
		d = 1;
	}
	if (keyCode === 87) {
		d = d * 2;
	}
	if (keyCode === 83) {
		d = max(1, floor(d / 2));
	}
}