TSM - Librării grafice în JS

Ovidiu Mățan - Fondator @ Today Software Magazine

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.

Three.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>

Pixi.js

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>

Chart.js

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>

Rularea exemplelor

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 8000

Concluzie

Exemplele 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.