Experimental graphic library from scratch, with reference implementation of computer graphics algorithms.
The purpose of this graphic engine is to be able to generate images in a computational way, with minimal dependencies, such that the readable graphical algorithms shine instead of opaque graphical APIs. The engine should also be capable to create videos and interactive demos or games.
Playground usage:
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script type="module">
import { Canvas, Animation, Color } from "https://cdn.jsdelivr.net/npm/tela.js/dist/web/index.js";
// You can also import from local file
// import { Canvas, Animation, Color} from "./node_modules/tela.js/dist/web/index.js";
const width = 640;
const height = 480;
const canvas = Canvas.ofSize(640, 480);
Animation
.loop(({ time, dt }) => {
document.title = `FPS: ${(Math.floor(1 / dt))}`;
canvas.map((x, y) => {
return Color.ofRGB(
((x * time) / width) % 1,
((y * time) / height) % 1
)
})
})
.play();
document.body.appendChild(canvas.DOM);
</script>
</html>Install tela.js it using npm install tela.js / bun add tela.js.
import { Animation, Color } from "tela.js/dist/node/index.js";
import Window from "tela.js/src/Tela/Window.js";
const width = 640;
const height = 480;
const window = Window.ofSize(640, 480);
Animation
.loop(({ time, dt }) => {
window.setTitle(`FPS: ${Math.floor(1 / dt)}`);
window.map((x, y) => {
return Color.ofRGB(
((x * time) / width) % 1,
((y * time) / height) % 1
)
})
})
.play();And run it: node index.mjs / bun index.js
Install tela.js it using npm install tela.js / bun add tela.js.
Create a file:
// index.js
import { Color, video } from "tela.js/dist/node/index.js";
const width = 640;
const height = 480;
const FPS = 25;
const maxVideoTime = 10; // time in seconds
function animation({ time, image }) {
return image.map((x, y) => {
return Color.ofRGB(
((x * time) / width) % 1,
((y * time) / height) % 1
)
})
}
video(
"hello_world.mp4",
animation,
{ width, height, FPS }
)
.until(({ time }) => time < maxVideoTime);And run it: node index.mjs / bun index.js
To generate videos and images tela.js needs ffmpeg in your system, in a way that it is possible to write on the console:
ffmpeg -version
# it should output something like: fmpeg version 4.4.2-0ubuntu0.22.04.1...
# maybe with a different OS...
Node is preferred when running the demos (it is faster, opened a bug in bun), bun is needed to build the library.