tela.js
v1.2.22
Published
Graphic library from scratch
Maintainers
pedrothReadme
tela.js
Experimental graphic library from scratch(software-only), with reference implementation of computer graphics algorithms.
Purpose
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:
Table of Contents
Quick start
In the browser
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
</body>
<script type="module">
import { Canvas, Color, loop } from "https://cdn.jsdelivr.net/npm/tela.js/src/index.js";
// You can also import from local file, e.g using `npm install tela.js`
// import { Canvas, Color, loop } from "./node_modules/tela.js/src/index.js";
const width = 640;
const height = 480;
const canvas = Canvas.ofSize(width, height);
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
)
}).paint()
}).play();
document.body.appendChild(canvas.DOM);
</script>
</html>On the desktop
Install tela.js it using npm install tela.js.
import { loop, Color, Window } from "tela.js/src/index.node.js";
const width = 640;
const height = 480;
const window = Window.ofSize(width, height);
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
)
}).paint();
})
.play();And run it: node index.mjs / bun index.js
Note: Attention to running node with ES6 imports module Note: If you're using
bunand theWindow, which uses@kmamal/sdlas dependency, make sure to runbun pm trust @kmamal/sdl.
Generate images and videos
Install tela.js it using npm install tela.js.
Create a file:
// index.js
import { Color, video } from "tela.js/src/index.node.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 }
).while(({ time }) => time < maxVideoTime);And run it: node index.mjs / bun index.js
Note on generating videos
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...
More examples
You can find more examples of usage in:
Dependencies
Node is preferred when running the demos (it is faster, opened a bug in bun).
Acknowledgements
TODOs
Serialize meshes not only triangles
Optimize data serialization in parallel ray tracer
Refactor geometric objects to have shader function
Refactor parallel raytracing to be just parallel canvas map
Add Phong shading to raster graphics
Read glb and gltf files
Add lorentz attractors demo
Add Iterated map fractals demo
Add Volumetric fluid sim
Megaman rag doll physics
Black hole demo