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 ] ) }
Ой… Мои дорогие Адам и Ева. Это все на сегодня. Мы начнем перемещать их по миру в следующей части.