amatiasq/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script type="module" src="run.js"></script>
    <style>
      html,
      body,
      canvas {
        margin: 0;
        padding: 0;
        display: flex;
        flex: 1;
      }
      body {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <canvas></canvas>
  </body>
</html>

## run.js
const canvas = initialize();

const cell = {
  components: [],

  addComponent(component) {
    this.components.push(component);
  },

  tick(map) {
    this.components.forEach(x => x.tick(map, cell));
  },
};

const osmosis = {
  tick() {

    // for each elemento químico
    // calcular diferencia
    // transpasar la diferencia para equilibrar
    // la velocidad depende de la distancia
  }
}

function initialize() {
  const canvas = document.querySelector('canvas');
  let width, height;

  resize();
  addEventListener('resize', resize);

  return canvas;

  function resize() {
    width = canvas.width = window.innerWidth;
    height = canvas.height = window.innerHeight;
  }
}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<script type="module" src="run.js"></script>
	<style>
	html,
	body,
	canvas {
	margin: 0;
	padding: 0;
	display: flex;
	flex: 1;
	}
	body {
	background-color: black;
	}
	</style>
	</head>
	<body>
	<canvas></canvas>
	</body>
	</html>
	const canvas = initialize();

	const cell = {
	components: [],

	addComponent(component) {
	this.components.push(component);
	},

	tick(map) {
	this.components.forEach(x => x.tick(map, cell));
	},
	};

	const osmosis = {
	tick() {

	// for each elemento químico
	// calcular diferencia
	// transpasar la diferencia para equilibrar
	// la velocidad depende de la distancia
	}
	}

	function initialize() {
	const canvas = document.querySelector('canvas');
	let width, height;

	resize();
	addEventListener('resize', resize);

	return canvas;

	function resize() {
	width = canvas.width = window.innerWidth;
	height = canvas.height = window.innerHeight;
	}
	}