TLDR: Я сделал симуляцию вспышки эпидемии, в которую можно поиграть здесь.

Мой холст, моя сцена

Мой HTML — это всего лишь один div с классом stage, и вот как я настроил на нем свой объект canvas с помощью JavaScript. Холст — это, по сути, место, где происходит волшебство, чертежная доска, на которой происходит мое моделирование. Причина, по которой я решил использовать холст, а не просто элементы, перемещающиеся по сцене, исключительно из соображений оптимизации. Я пробовал делать эффекты частиц с реальными HTML-элементами раньше, это намного проще, но по мере увеличения количества частиц все начинает отставать, и вы услышите, как фанат вашего компьютера начинает жаловаться.

 // setup variables
 const
 myStage = document.querySelector( '.stage' ),
 myCanvas = document.createElement( 'canvas' ),
 ctx = myCanvas.getContext( '2d' )
 // setup sizes
 myCanvas.width = myStage.offsetWidth
 myCanvas.height = myStage.offsetHeight
 ctx.width = myCanvas.width
 ctx.height = myCanvas.height
 // load into dom
 myStage.appendChild( myCanvas )

Создание моих первых людей

Затем я создаю людей как объекты и сохраняю их в массиве мира.

const 
// size of each human being
size = 2,
// total number of human beings
total = 2
let world
function makeBean() {
  const
  // my human being is a bean object
  bean = {},
  minX = size,
  minY = size,
  maxX = ctx.width - size,
  maxY = ctx.height - size
  // position my humans on random spots within my canvas size
  bean.x = random( minX, maxX )
  bean.y = random( minY, maxY )
  // load this human into the world
  world.push( bean )
 }
function genesis() {
  world = []
  for ( let i = 0; i < total; i++ ) {
   makeBean()
  }
 }
genesis()

При этом у нас должно быть ровно 2 человека с размером тела 2 пикселя, случайно расположенные на моем холсте. Давайте также нарисуем их, чтобы мы могли видеть, где мои Адам и Ева.

function draw( me ) {
  ctx.beginPath()
  ctx.fillStyle = `rgba( 0, 0, 0, 1 )`
  ctx.arc( me.x, me.y, size, 0, Math.PI * 2 )
  ctx.closePath()
  ctx.fill()
 }
for ( let i = 0; i < world.length; i++ ) {
  draw( world[ i ] )
}

Ой… Мои дорогие Адам и Ева. Это все на сегодня. Мы начнем перемещать их по миру в следующей части.