Guía de un Principiante para Dibujar Gráficos en 2D Con Two.js

() translation by (you can also view the original English article)

Two.js una API que facilita la creación de formas 2D con código. Siga a lo largo de y usted aprenderá cómo crear y animar formas de JavaScript.

Two.js es independiente del procesador, por lo que puede confiar en la misma API para dibujar con Canvas, SVG o WebGL. La biblioteca tiene muchos métodos que puede utilizar para controlar cómo diferentes formas aparecen en la pantalla o cómo están animados.

Instalación

La versión sin comprimir de la biblioteca tiene un tamaño de alrededor de 128 KB, mientras que la versión comprimida es de 50 KB. Si usas la última versión, puede reducir aún más el tamaño de la biblioteca utilizando una estructura de encargo.

Puede descargar la versión miniaturizada de la biblioteca de GitHub o puede vincular directamente a la versión CDN alojado. Una vez que haya agregado a la biblioteca a su página web, puede empezar dibujar y animar formas u objetos.

Creación de Formas Básicas

En primer lugar, usted necesita a Two.js sobre el elemento que desea dibujar y animar las formas. Puede pasar algunos parámetros al constructor Two para configurar cosas.

Establecer el tipo de procesador utiliza la propiedad type. Se pueden especificar un valor como svg, webgl, lona, etcetera. El type se establece en svg por defecto. La anchura y la altura del espacio de dibujo se pueden especificar utilizando los parámetros width y height. También puede establecer el espacio de dibujo en la pantalla completa disponible mediante el parámetro de fullscreen. Cuando fullscreen se establece en true, los valores de width and height carecerá.

Por último, puede decir Two.js que una animación se inicie automáticamente con la ayuda del parámetro booleano autostart.

Después de pasar todos los parámetros deseados para el constructor, puede iniciar el dibujo de líneas, rectángulos, círculos y elipses.

Se puede dibujar una línea usando two.makeLine (x1, y1, x2, y2). Aquí, (x 1, y1) son las coordenadas del primer punto final y (x2, y2) son las coordenadas del segundo punto final. Esta función devuelve un objeto Two.Line, que puede ser almacenado en una variable para manipular aún más en un momento posterior.

De manera similar, puede dibujar rectángulos redondeados y normales usando two.makeRectangle(x, y, width, height) y two.makeRoundedRectangle(x, y, width, height, radius) respectivamente. Recuerde que x y y determinar el centro del rectángulo, en vez de su parte superior izquierda coordenadas como muchas otras bibliotecas. Los parámetros width y height determina el tamaño del rectángulo. El parámetro radius se utiliza para especificar el valor del radio de la esquina redondeada.

También pueden hacer círculos y elipses en una página web usando two.makeCircle(x, y, radius) y two.makeEllipse(x, y, width, height) respectivamente. Los rectángulos, x e y como parámetros especifican el centro del círculo o elipse. Ajuste de la width y height con el mismo valor en el caso de una elipse se representará como un círculo.

Un método útil en Two.js que se usan con frecuencia es two.makeGroup(objects). Puede pasar una lista de diferentes objetos o pasar una matriz de objetos, trayectorias o grupos como parámetro a este método. También devuelve un objeto Two.Group.

Manipulación de Objetos en un Grupo

Después de haber creado un grupo, puede manipular a todos sus hijos a la vez utilizando propiedades que el grupo pone a su disposición.

Las propiedades de stroke y fill pueden utilizarse para establecer el color de trazo y relleno para todos los niños en un grupo. Se aceptan todas las formas válidas en las que puede representar un color en CSS. Esto significa que usted es libre de usar la notación hexadecimal, RGB y HSL. También simplemente puede utilizar el nombre del color, como orange, red, o blue. Del mismo modo, puede definir valores para todas las otras propiedades como linewidth, opacity, miter, y cap. Es posible quitar el relleno y el trazo de todos los niños de un grupo utilizando los métodos noFill() y noStroke().

También puede aplicar otras transformaciones físicas como la scale, rotation, and translation. Estas transformaciones se aplica sobre objetos individuales. Agregar nuevos objetos a un grupo y quitarlas es fácil con métodos como add(), remove().

Definición de Gradientes y Escribir Texto

Puede definir gradientes lineales y radiales en Two.js. Definir un gradiente no significa que se mostrará automáticamente en la pantalla, pero estará disponible para su uso cuando los valores de fill o stroke de varios objetos.

Se puede definir un degradado lineal con two.makeLinearGradient(x1, y1, x2, y2, stops). Los valores x1 y y1 determinan las coordenadas de inicio del degradado. Del mismo modo, los valores x2 y y2 determinan las coordenadas del extremo de la gradiente. El parámetro de stops es una matriz de instancias de Two.Stop. Definen los colores de cada parte de la matriz y donde las transiciones de cada color en el siguiente. Puede definir mediante new Two.Stop(offset, color, opacity), donde el offset determina el punto en el gradiente donde ese color particular tiene que ser totalmente rendido. El parámetro de color determina el color del degradado en el punto particular. Puede utilizar cualquier representaciones de color válidas de CSS como su valor. Por último, el parámetro opacity determina la opacidad del color. La opacidad es opcional, y puede tener cualquier valor entre 0 y 1.

Gradientes radiales se pueden definir de una manera similar usando two.makeRadialGradient(x, y, radius, stops, fx, fy). En este caso, los valores de x y y determinar el centro del degradado. El parámetro radius especifica hasta dónde debe extenderse el gradiente. También puede pasar una matriz de paradas a este método para fijar la composición de color de los degradados. Los parámetros fx y fy son opcionales, y pueden ser utilizados para especificar la posición focal para el gradiente.

Revisa algunos de los tipos de degradado y su código en el CodePen abajo.

Recuerde que x e y la posición de los gradientes son con respecto al origen de la forma están tratando de llenar. Por ejemplo, siempre tendrá un degradado radial que tiene que para llenar una forma del centro x e y en cero.

Two.js también le permite escribir texto en el área de dibujo y actualizarlo más adelante según sus necesidades. Esto requiere el uso del método two.makeText(message, x, y, styles). Puede ser evidente en el nombre de los parámetros de este message es el texto que desea escribir. Los parámetros x e y son las coordenadas del punto que actuará como centro para escribir el texto. El parámetro de styles es un objeto que puede utilizarse para establecer los valores de un conjunto grande de propiedades.

Puede utilizar estilos para definir los valores de propiedades como family, size, y alignment. También puede especificar el valor de las propiedades como fill, stroke, opacity, rotation, scale, y translation.

Creación de un Proyecto de Two.js

Después de aprender sobre todos estos métodos y propiedades, es hora de aplicarlos a un proyecto. En este tutorial, les mostraré cómo usar Two.js para representar los diez primeros elementos de la tabla periódica con los electrones girando alrededor del núcleo. El núcleo también tendrá algún leve movimiento para mejorar el atractivo visual de nuestra representación.

Empezaremos por definir algunas variables y funciones que se utilizará más adelante.

var centerX = window.innerWidth / 2;
var centerY = window.innerHeight / 2;

var elem = document.getElementById("atoms");

var elementNames = [
  "",
  "Hydrogen",
  "Helium",
  "Lithium",
  "Beryllium",
  "Boron",
  "Carbon",
  "Nitrogen",
  "Oxygen",
  "Fluorine",
  "Neon"
];

var styles = {
  alignment: "center",
  size: 36,
  family: "Lato"
};

var nucleusCount = 10;
var nucleusArray = Array();

var electronCount = 10;
var electronArray = Array();

function intRange(min, max) {
  return Math.random() * (max - min) + min;
}

El código anterior almacena las coordenadas del centro de la ventana en la variables centerX y centerY. Estos se utilizarán más adelante para colocar nuestro átomo en el centro. El array elementNames contiene los nombres de los diez primeros elementos de la tabla periódica. El índice de cada nombre corresponde al número de electrones y protones de ese elemento, y comienza con una cadena vacía. El objeto de styles contiene las propiedades de estilo del objeto de texto.

También hemos definido una función intRange() para obtener un valor entero aleatorio dentro da extremos.

var two = new Two({ fullscreen: true }).appendTo(elem);

var protonColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "red", 1),
  new Two.Stop(1, "black", 1)
);

var neutronColor = two.makeRadialGradient(
  0,
  0,
  15,
  new Two.Stop(0, "blue", 1),
  new Two.Stop(1, "black", 1)
);

for (i = 0; i < nucleusCount; i++) {
  nucleusArray.push(two.makeCircle(intRange(-10, 10), intRange(-10, 10), 8));
}

nucleusArray.forEach(function(nucleus, index) {
  if (index % 2 == 0) {
    nucleus.fill = protonColor;
  }
  if (index % 2 == 1) {
    nucleus.fill = neutronColor;
  }
  nucleus.noStroke();
});

Esto crea una instancia de dos y define dos gradientes radiales. Los gradientes radiales de rojo/negro representará protones y neutrones representará a degradados de azul/negro.

Hemos utilizado la función intRange() para colocar todos estos neutrones y protones dentro de 20 píxeles de cada uno. El método makeCircle() establece también el radio de estos protones y neutrones en 10 píxeles. Después de eso, iterar sobre nucleusArray y rellenar cada círculo con un diverso gradiente alternativamente.

for (var i = 0; i < 10; i++) {
  if (i < 2) {
    var shellRadius = 50;
    var angle = i * Math.PI;
    electronArray.push(
      two.makeCircle(
        Math.cos(angle) * shellRadius,
        Math.sin(angle) * shellRadius,
        5
      )
    );
  }
  if (i >= 2 && i < 10) {
    var shellRadius = 80;
    var angle = (i - 2) * Math.PI / 4;
    electronArray.push(
      two.makeCircle(
        Math.cos(angle) * shellRadius,
        Math.sin(angle) * shellRadius,
        5
      )
    );
  }
}

Colocación de neutrones y protones dentro del núcleo fue fácil. Sin embargo, colocar correctamente los electrones en una distancia uniforme requiere matemáticas un poco. Utilizamos la variable shellRadius para especificar la distancia de cáscaras de electrones distintos del núcleo. Un círculo entero cubre un ángulo igual a 2 radianes de PI. Podemos colocar diferentes electrones uniformemente distribuyendo igualmente las 2 radianes de PI entre ellos.

Las funciones Math.cos() y Math.sin() se utilizan para separar los componentes horizontales y verticales del vector de posición de electrones diferentes basado en su ángulo.

var orbitA = two.makeCircle(centerX, centerY, 50);
orbitA.fill = "transparent";
orbitA.linewidth = 2;
orbitA.stroke = "rgba(0, 0, 0, 0.1)";

var orbitB = two.makeCircle(centerX, centerY, 80);
orbitB.fill = "transparent";
orbitB.linewidth = 2;
orbitB.stroke = "rgba(0, 0, 0, 0.1)";

var groupElectronA = two.makeGroup(electronArray.slice(0, 2));
groupElectronA.translation.set(centerX, centerY);
groupElectronA.fill = "orange";
groupElectronA.linewidth = 1;

var groupElectronB = two.makeGroup(electronArray.slice(2, 10));
groupElectronB.translation.set(centerX, centerY);
groupElectronB.fill = "yellow";
groupElectronB.linewidth = 1;

var groupNucleus = two.makeGroup(nucleusArray);
groupNucleus.translation.set(centerX, centerY);

Esta parte del código pone electrones de diferentes así como neutrones y protones en sus propios grupos separan. También establece los colores de relleno para todos los electrones en una órbita concreta a la vez.

two
  .bind("update", function(frameCount) {
    groupElectronA.rotation += 0.025 * Math.PI;
    groupElectronB.rotation += 0.005 * Math.PI;
    groupNucleus.rotation -= 0.05;
  })
  .play();

var text = two.makeText("", centerX, 100, styles);

nucleusArray.forEach(function(nucleus, index) {
  nucleus.opacity = 0;
});

electronArray.forEach(function(electron, index) {
  electron.opacity = 0;
});

Esta parte del código define la opacidad de los electrones y protones a cero. También se dice Two.js para girar los electrones y protones a velocidades específicas.

visible = 0;

document.addEventListener("click", function(event) {
  if (visible < nucleusArray.length) {
    nucleusArray[visible].opacity = 1;
    electronArray[visible].opacity = 1;
    visible++;
    text.value = elementNames[visible];
  }
  else {
    nucleusArray.forEach(el => el.opacity=0);
    electronArray.forEach(el => el.opacity=0);
    visible = 0;
    text.value = elementNames[0];
  }
});         


La parte final del código nos permite recorrer en iteración los elementos haciendo clic en el ratón o tapping. Para cargar el siguiente elemento, hacemos visible un electrón y un protón o neutrón más y actualizamos el nombre del elemento. Después de hacer clic en el último elemento, todas las partículas se ocultan nuevamente para que podamos comenzar de nuevo. La variable visible realiza un seguimiento de la cantidad de partículas atómicas que están disponibles para que pueda mostrarlas u ocultarlas en consecuencia.

Intente hacer clic o tocar en la próxima demostración de CodePen para ver los primeros diez elementos de la tabla periódica.

Pensamientos Finales

Comenzamos este tutorial con una breve introducción a la biblioteca Two.js y cómo se puede usar para dibujar formas como rectángulos, círculos y elipses. Después de eso, discutimos cómo podemos agrupar diferentes objetos para manipularlos todos a la vez. Usamos esta capacidad para agrupar elementos para traducirlos y rotarlos en sincronización. Todas estas herramientas se combinaron en nuestra animación de los átomos de los primeros diez elementos en la tabla periódica.

Como puede ver, crear gráficos 2D animados es muy fácil usando Two.js. El objetivo de esta publicación fue ayudarlo a comenzar rápidamente, por lo que solo cubrimos los conceptos básicos. Sin embargo, ¡leer la documentación oficial para aprender más sobre la biblioteca!