MetsuOS

Construyendo la plena inclusión a través del videojuego

Creación de un lienzo (canvas) en PixiJS 🟡③

Instrucciones para crear un lienzo den PixiJS

PixiJS es una biblioteca JavaScript versátil y potente que permite crear gráficos interactivos y experiencias visuales en la web de manera eficiente. En este artículo, te guiaremos paso a paso para configurar un lienzo (canvas) con PixiJS, preparando el escenario para tus proyectos gráficos.

Configuración del lienzo

Tras instalar PixiJS (consulta el artículo anterior sobre instalación), ya dispondrás de un html con un lienzo básico, y un main.js con el codigo de la app, analicemos este código:

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<link rel="icon" type="image/png" href="/favicon.png" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<link rel="stylesheet" href="/style.css">
	<title>PixiJS - Template</title>
</head>

<body>
	<div id="app">
		<div id="pixi-container"></div>
	</div>
	<script type="module" src="/src/main.js"></script>
</body>
</html>

Aqui nada novedoso, un simple html basico que incorpora la css, el coigo de la app (main.js) y listo.

Lo unico aqui es que quiero poder integrar programas (en plural) dentro de esta web, sin que interfiera con el resto de la web ni requerir servidores especializados para node ... eso lo exploraré en el próximo capítulo.

Veamos el js, he cambiado los comentarios del codigo originales por los mios, creo que es el modo más eficaz de explicarlo:

import { Application, Assets, Sprite } from "pixi.js";
// Importación de los módulos necesarios para el funcionamiento de pixi.js

(async () => {
  // Crea una nueva aplicación
  const app = new Application();

  // Inicializa la app con el colog de fondo y asignando el tamaño del lienzo a toda la ventana.
  await app.init({ background: "#1099bb", resizeTo: window });

  // Añade la app en el contenedor que habiamos creado en el html para ello.
  document.getElementById("pixi-container").appendChild(app.canvas);

  // Carga la textura del conejo que viene por defecto.
  const texture = await Assets.load("/assets/bunny.png");

  // Crea, usando la textura, el Sprite que manejaremos
  const bunny = new Sprite(texture);

  // Centra el sprite anclandolo a un punto concreto.
  bunny.anchor.set(0.5);

  // Situa el sprite en el centro de la pantalla
  bunny.position.set(app.screen.width / 2, app.screen.height / 2);

  // Añade el sprite del conejo a la escena
  app.stage.addChild(bunny);

  // Bucle principal de animación 
  app.ticker.add((time) => {
    // Como ejemplo, rotamos el conejo en pantalla
    // * Delta sera 1 si se ejecuta al 100% de rendimiento *
    // * Crea la rotación mediante una transformación que lo gira poco  a poco *
    bunny.rotation += 0.1 * time.deltaTime;
  });
})();

Si quieres jugar con los parametros, aquí tienes una lista de lo que puedes asignar a un lienzo Parametros de Application > Init (en Inglés)

No voy a enseñar Javascript aquí, hay muchos tutoriales y cursos online que seguramente sean mucho mejores que lo que yo pueda aportar, en cambio me centraré en crear con pixi.js

Visualización del lienzo

Tan simple como ejecutar nuestro proyecto con:

npm run dev

En el proximo capítulo veremos como voy a integrar esta tecnología directamente en MetsuOS, mi idea es crear un script build-mos para asi faciliar, en el futuro distribuir tambien en abirto algunos de los proyectos via github, ¡pero eso será en el próximo!

Referencias bibliográficas que apoyan el contenido

Referencias bibliográficas que podrían refutar el contenido

One More Thing

Un escenario de retrocomputación del siglo 24

¡Desbloquea el poder de MetsuOS y descubre que la privacidad y la seguridad son la clave para desencadenar tu verdadero potencial en línea!

Contenido registrado en Safe Creative

Logo Safe Creative
¡Usa el código de promocional 7ZYM4Z y ahorrate unos eurillos en tu suscripcion de Safe Creative!

MetsuOS Needs You!

Apoyanos en este proyecto difundiendolo en tus redes, o mejor, haznos una donación a la cuenta paypal para poder dedicar más tiempo y recursos a el. No olvides comentarnos que parete te interesa más junto con tu donación.

En este momento, además de mantener los servicios, estoy centrado en crear la siguiente iteración del software que me permite hacer todo esto y creando una biblioteca personal física para poder contrastar contenido.

Sobre el sistema de validez de un contenido en MetsuOS

Empezando a incorporar los niveles de validación de un contenido (también llamada sabiduría o niveles de conocimiento) ⚫🔴 🟡 🟢 🔵⚪ ¿Qué són?

Sobre la categorización de los tipos de conocimiento

La Metsukeología (de Metsuke vision global y logos conocimiento) es la ciencia que estudia el conocimiento como un conjunto potencial de conocimiento del que podemos obtener, procesar o percibir partes concretas dentro de un marco contextual específico, y cuyo contexto general real está muy por encima de lo que somos capaces, como especie, de percibir, procesar e integrar de forma completa (definición en progreso).

La Metsucología (de Metsu aniquilación - en este contexto en forma de colapso - , logos conocimiento) es la ciencia que estudia como extraemos verdades percibidas - colapsadas - como conocimiento desde nuestra perspectiva real (tanto epistemológico como gnoseológico) al tomar una parte específica del conocimiento metsukeológico potencial enmarcado en un contexto concreto, obligando a colapsar el conocimiento potencial en conocimiento específico (definición en progreso).

Mas sobre el contexto

DISCLAIMER: Mi consideración de anticientífico respecto al consenso científico es una hipotesis de trabajo propia, que supone que toda asignación de validez, incluso aquella derivada de la conclusión por acumulación de evidencia NO debe ser supeditada a debate, ni acuerdo, debe ser algo probabilistico sin intervención del ego humano. Podría estar equivocado y, en este punto, es donde se aplicaría entonces ese mismo consenso que ahora considero no valido (incluso dañino)

Existen indicadores para algunas cuestiones adicoinales como los siguientes:

Cuando hablamos de un contenido que incluye un texto que hace referencia a otro.

También aplicaremos el Sistema de fiabilidad de fuentes y credibilidad de contenidos de la OTAN 🔴②, este sistema incluye una valoración de la fiabilidad de la fuente de A a F (siendo A la de mayor fiabilidad) y una varloración de credibilidad del contenido de 1 a 6 (siendo 1 la mayor credibilidad).

En MetsuOS la agregaremos al final uniendo amos valores como si fuera una coordenada. Por ejemplo: ⚫①-D4 o 🟡③-B2. Esto ayudarña a contextualizar la información sobre la solidez del conocimiento al que se hace referencia en cada momento.

Hay que tener en cuenta que, cuando hay elementos subjetivos o parcialmente subjetivos, el punto de referencia seré yo mismo. Quizá más adelante pueda objetivizar esto más (seria lo deseable), pero en tanto no tenga herramientas que me lo permitan, debo ceñirme al principio de honestidar intelectual, y esperar que mis sesgos dañen lo menos posible la información (en parte este es el nudo gordiano que pretendo resolver, y por ello es dificil resolverlo a priori).

Así de forma resumida, podríamos decir que esta definición es nivel 🔴② (Rojo2 xD) ¿Crees que me dejo algo? Si es así por favor ayudame a mejorarlo contactándome a través de X (Twitter) en mi cuenta, @metsuke 🌐

Consulta la versión completa de la descripcion en ⚫🔴🟡🟢🔵⚪ (🔴②) Un poco más de detalle

Bibliografía de referencia

⚫🔴🟡🟢🔵⚪ | ①②③④⑤⑥ | ⚫① 🔴② 🟡③ 🟢④ 🔵⑤ ⚪⑥