Dibujar en canvas. Inspirado en p5js

ACore.js

/* 
Codigo reducido
inspirado en p5js
v 20221114
*/
"use strict";
let _stroke = true,
	_fill = true,
	__shadow = false,
	__cx,
	key,
	width,
	height,
	frame = 0,
	frate = 60,
	__looping = true,
	__fps = 60,
	__st = 0,
	__et = 0,
	__cf = 0,
	PI = Math.PI,
	TAU = PI * 2,
	abs = Math.abs,
	round = Math.round,
	floor = Math.floor,
	ceil = Math.ceil,
	sin = Math.sin,
	cos = Math.cos;
function errCX() {
	if (!__cx) {
		throw new Error("There is no canvas element");
	}
}
function colorRGB(r = 255, g = 255, b = 255, a = 1) {
	return "rgba(" + r + "," + g + "," + b + "," + a + ")";
}
function colorHSB(h = 0, s = 100, l = 50, a = 1) {
	const _s = s + "%";
	const _l = l + "%";
	return "hsla(" + h + "," + _s + "," + _l + "," + a + ")";
}
function print(m) {
	console.log(m);
}
function push() {
	errCX();
	__cx.save();
}
function pop() {
	errCX();
	__cx.restore();
}
function bg(c) {
	errCX();
	push();
	__cx.fillStyle = c;
	__cx.fillRect(0, 0, width, height);
	pop();
}
function map(v, l1, h1, l2, h2) {
	return l2 + ((h2 - l2) * (v - l1)) / (h1 - l1);
}
function fill(c = "#fff") {
	errCX();
	_fill = true;
	__cx.fillStyle = c;
}
function stroke(c = "#000") {
	errCX();
	_stroke = true;
	__cx.strokeStyle = c;
}
function createLGradient(x1 = 0, y1 = 0, x2 = 999, y2 = 999, g = {}) {
	g = {
		0.0: "#000",
		1.0: "#fff",
		...g,
	};
	const grad = __cx.createLinearGradient(x1, y1, x2, y2);
	Object.entries(g).forEach((kv) => {
		grad.addColorStop(kv[0], kv[1]);
	});
	return grad;
}

function createRGradient(
	x1 = 0,
	y1 = 0,
	r1 = 0,
	x2 = 200,
	y2 = 200,
	r2 = 200,
	g = {},
) {
	g = {
		0.0: "#000",
		1.0: "#fff",
		...g,
	};
	const grad = __cx.createRadialGradient(x1, y1, r1, x2, y2, r2);
	Object.entries(g).forEach((kv) => {
		grad.addColorStop(kv[0], kv[1]);
	});
	return grad;
}
function translate(x, y) {
	errCX();
	__cx.translate(x, y);
}
function rotate(g) {
	errCX();
	__cx.rotate(g);
}
function scale(x, y) {
	errCX();
	__cx.scale(x, y);
}
function noStroke() {
	_stroke = false;
}
function noFill() {
	_fill = false;
}
function strokeWeight(w) {
	errCX();
	__cx.lineWidth = w;
}
function saveJPG(c = 0.75) {
	let a = document.createElement("a");
	a.href = c.toDataURL("image/jpeg", c);
	a.download = "file.jpeg";
	a.click();
	a.remove();
}
function savePNG() {
	let a = document.createElement("a");
	a.href = c.toDataURL("image/png");
	a.download = "file.jpeg";
	a.click();
	a.remove();
}
function snap(v, s) {
	return Math.floor(v / s) * s;
}
function circle(x, y, d) {
	errCX();
	__cx.beginPath();
	__cx.arc(x, y, d, 0, 2 * Math.PI, true);
	__cx.closePath();
	if (_fill && _stroke) {
		__cx.fill();
		push();
		noShadow();
		__cx.stroke();
		pop();
	} else if (_fill) {
		__cx.fill();
	} else if (_stroke) {
		__cx.stroke();
	}
}
function rect(x, y, w, h) {
	errCX();
	__cx.beginPath();
	__cx.rect(x, y, w, h);
	if (_fill && _stroke) {
		__cx.fill();
		push();
		noShadow();
		__cx.stroke();
		pop();
	} else if (_fill) {
		__cx.fill();
	} else if (_stroke) {
		__cx.stroke();
	}
}
function line(x1, y1, x2, y2) {
	errCX();
	__cx.beginPath();
	__cx.moveTo(x1, y1);
	__cx.lineTo(x2, y2);
	__cx.stroke();
}

function quadCurve(x1, y1, x2, y2, cpx, cpy) {
	errCX();
	__cx.beginPath();
	__cx.moveTo(x1, y1);
	__cx.quadraticCurveTo(cpx, cpy, x2, y2);
	if (_fill && _stroke) {
		__cx.fill();
		push();
		noShadow();
		__cx.stroke();
		pop();
	} else if (_fill) {
		__cx.fill();
	} else if (_stroke) {
		__cx.stroke();
	}
}
function shadow(x = 0, y = 0, b = 10, c = "#000") {
	errCX();
	__shadow = true;
	__cx.shadowColor = c;
	__cx.shadowOffsetX = x;
	__cx.shadowOffsetY = y;
	__cx.shadowBlur = b;
}
function noShadow() {
	errCX();
	__shadow = false;
	__cx.shadowColor = "rgba(0,0,0,0)";
	__cx.shadowOffsetX = 0;
	__cx.shadowOffsetY = 0;
	__cx.shadowBlur = 0;
}

// Control loop animation
function loop() {
	__looping = true;
}
function noLoop() {
	__looping = false;
}
function frameRate(r = 0) {
	if (r > 0 && r <= 60) {
		__fps = r;
		return __fps;
	} else {
		return __fps;
	}
}
function createRandom(seed = "") {
	let r = _createRandom(seed);
	return function (a, b) {
		if (arguments.length == 0) {
			return r();
		}
		return r() * (b - a) + a;
	};
}
function time() {
	return __et;
}
// Canvas
function initCanvas(w, h) {
	const cv = document.createElement("canvas");
	cv.width = w;
	cv.height = h;
	width = w;
	height = h;
	__cx = cv.getContext("2d");
	__cx.fillStyle = "#fff";
	document.body.appendChild(cv);
	return cv;
} // Context
function getContext() {
	errCX();
	return __cx;
}
// Core functions maintain p5js names
(function () {
	"use strict";
	// Animation frame ----------------------------------------------
	window.requestAnimationFrame =
		window.requestAnimationFrame ||
		window.mozRequestAnimationFrame ||
		window.webkitRequestAnimationFrame ||
		window.msRequestAnimationFrame;
	window.cancelAnimationFrame =
		window.cancelAnimationFrame || window.mozCancelAnimationFrame;
	// ---------------------------------------------------------------

	// SETUP
	function _setup() {
		const to = setInterval(function () {
			if (typeof setup === "function") {
				try {
					setup();
				} catch (e) {
					console.error(e);
				}
				_draw();
				_keyDown();
				_keyUp();
				__st = Date.now();
				clearInterval(to);
			}
		}, 100);
	}

	// DRAW
	function _draw() {
		let __nt = Date.now();
		__et = __nt - __st;
		try {
			if (typeof draw === "function") {
				frame++;
				draw();
			}
			window.requestAnimationFrame(_draw);
		} catch (e) {
			console.error(e);
		}
		__cf++;
	}

	//
	function _keyDown() {
		try {
			if (typeof onKeyDown === "function") {
				window.addEventListener("keydown", (evt) => {
					key = evt.key;
					onKeyDown(evt);
				});
			}
		} catch (e) {
			console.error(e);
		}
	}
	function _keyUp() {
		try {
			if (typeof onKeyUp === "function") {
				window.addEventListener("keyup", (evt) => {
					key = evt.key;
					onKeyUp(evt);
				});
			}
		} catch (e) {
			console.error(e);
		}
	}
	_setup();
})();