Elementele grafice 2D/3D, animate sau nu oferă întotdeauna un plus oricărui site web. În rândurile următoare vom analiza câteva librării JS concepute pentru a adăuga aceste elemente vizuale: Three.js, Pixi.js și Chart.js.
Este o librărie care a fost publicată prima oară în 2010 pe GitHub. Folosește WebGL pentru afișarea elementelor grafice. Remarcăm simplicitatea și folosirea redusă a procesorului în randarea diferitelor scene.
Exemplul de mai jos va anima un cub 3D pe ecran. Se remarcă cele trei elemente principale: scena, camera și rendererul.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>My three.js app</title>
<style>
body { margin: 0; }
</style>
</head>
<body>
<script src=”https://threejs.org/build/three.js”>
</script>
<script>
const scene = new THREE.Scene();
const camera = new THREE
.PerspectiveCamera( 75,
window.innerWidth /
window.innerHeight, 0.1, 1000 );
const renderer = new THREE
.WebGLRenderer();
renderer.setSize( window
.innerWidth, window.innerHeight );
document.body.appendChild(
renderer.domElement );
const geometry = new THREE
.BoxGeometry();
const material = new THREE
.MeshBasicMaterial( { color: 0x00ff00 } );
const cube = new THREE.Mesh(
geometry, material );
scene.add( cube );
camera.position.z = 5;
const animate = function () {
requestAnimationFrame( animate );
cube.rotation.x += 0.01;
cube.rotation.y += 0.01;
renderer.render( scene, camera );
};
animate();
</script>
</body>
</html>Similar cu Three.js, Pixi.js folosește WebGL pentru dezvoltarea animațiilor 2D în javascript. În exemplul de mai jos se demonstrează o animație de rotire a siglei TSM.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Pixi.js app</title>
</head>
<body>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/pixi.js/5.1.3/pixi.min.js”></script>
<script>
const app = new PIXI.Application(
{
width: 800,
height: 600,
backgroundColor: 0x1099bb,
resolution: window
.devicePixelRatio || 1,
});
document.body.appendChild(app.view);
const container = new PIXI
.Container();
app.stage.addChild(container);
// Create a new texture
const texture = PIXI.Texture.from(‚logo.png’);
const bunny = new PIXI.Sprite(texture);
bunny.anchor.set(0.5);
bunny.x = 300+(1 % 8) * 40;
bunny.y = Math.floor(1 / 8) * 40;
container.addChild(bunny);
// Move container to the center
container.x = app.screen.width / 2;
container.y = app.screen.height / 2;
// Center bunny sprite in local container coordinates
container.pivot.x = container.width / 2;
container.pivot.y = container.height / 2;
// Listen for animate update
app.ticker.add((delta) => {
// rotate the container!
// use delta to create frame-independent transform
container.rotation -= 0.01 * delta;
});
</script>
</body>
</html>Este o librărie pentru generarea graficelor JS și animarea acestora. Acestea pot fi un element de efect și practice pentru orice website. Exemplul următor afișează un grafic cu valori predefinite.
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8”>
<title>Chart.js app</title>
</head>
<body>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.min.js”></script>
<canvas id=”myChart” width=”800” height=”400”>
</canvas>
<script>
var ctx = document.getElementById(‚myChart’).getContext(‚2d’);
var myChart = new Chart(ctx, {
type: ‚bar’,
data: {
labels: [‚Red’, ‚Blue’, ‚Yellow’, ‚Green’,
‚Purple’, ‚Orange’],
datasets: [{
label: ‚# of Votes’,
data: [12, 19, 3, 5, 2, 3],
backgroundColor: [
‚rgba(255, 99, 132, 0.2)’,
‚rgba(54, 162, 235, 0.2)’,
‚rgba(255, 206, 86, 0.2)’,
‚rgba(75, 192, 192, 0.2)’,
‚rgba(153, 102, 255, 0.2)’,
‚rgba(255, 159, 64, 0.2)’
],
borderColor: [
‚rgba(255, 99, 132, 1)’,
‚rgba(54, 162, 235, 1)’,
‚rgba(255, 206, 86, 1)’,
‚rgba(75, 192, 192, 1)’,
‚rgba(153, 102, 255, 1)’,
‚rgba(255, 159, 64, 1)’
],
borderWidth: 1
}]
},
options: {
scales: {
y: {
beginAtZero: true
}
}
}
});
</script>
</body>
</html>Acestea pot rula direct prin deschiderea fișierului html într-un browser web. Alternativ se poate instala în folderul acestora un server http:
npm install http-server -g
http-server . -p 8000Exemplele de mai sus s-au dorit să fie o sursă de inspirație pentru programatorii web și nu numai. În condițiile în care majoritatea acțiunilor au acum și o latură online, oferirea unui conținut bogat și interactiv este necesar pentru orice serviciu de calitate.
de Dan Suciu
de Ovidiu Mățan
de Ovidiu Mățan
