DEV Community: QLabs

Setting Up and Configuring WSL

QLabs — Wed, 28 Jul 2021 20:51:25 +0000

Linux is by far the best operating system for developers, but, people still use Windows and other operating systems, or have another personal computer which for some reason uses Windows, and so you don't use Linux. Of course, you could literally install Linux onto your computer, but, if you can't, or, just want to have windows for accessibility, enter WSL - Windows Subsystem for Linux. WSL allows you to run a Linux Virtual Machine on your windows machine to run Linux commands and run .deb or .rpm files, depending on the distribution you choose.

Our steps

Install WSL
Install a Linux Distribution
Configure our Linux Distribution
- Install VSCode, Python, and other development tools

Let's get started with install wsl.

1. Install WSL

First things first, we need to install WSL. Open your settings app on Windows, and click "Apps."

Once at the Apps menu, the right sidebar has a "Related Settings" section, which includes Programs and Features, which you need to go to. Once there, there should be a sidebar, where you should click "Turn Windows features on or off."

From this, you should have a screen like this:

Check the "Window Subsystem for Linux" box, and select Ok. After that, you should have a Restart now button, and click that.

2. Install a Linux Distribution

Now, we can install our Linux Distribution. You can install which ever distribution you want, but I'll be showing you the Ubuntu distribution. Go to aka.ms/wslstore, which will open up the Microsoft Store, showing you Linux Distributions. In the store, click "Ubuntu" and then "Install." Once installed, open up your command prompt, and run:



Ubuntu

If that doesn't work, you can open up the Ubuntu app, which should output something like this:

From here, it will prompt you to enter your username and password, which can be anything, not your windows username and password, though, you could put that. Make sure you remember it, because we'll be using sudo to install, which requires you to enter your password. If you do lose it, you can run:



passwd <username>

which will reset your password.

3. Configure our Linux Distribution

Next thing we need to do is configure our distribution, and before we get into install VSC and Python, or anything else, we first need to configure our .bashrc with some useful aliases and other important scripts. Before any of this, create a new directory called Coding/ or Projects/, and clone all your repos there.

Next, we need to configure our .bashrc. First, run:



curl https://getmic.ro | bash
sudo mv micro /usr/bin

This will install micro and move it into the /usr/bin directory. For those of you who don't know, micro is a command line editor useful for editing small files from the terminal, like .bashrc, with keyboard shortcuts and other useful things. Now that we have it installed, you can run:



micro ~/.bashrc

to open .bashrc, and start editing it. You can add:



alias activate-<PROJECT>="cd <PROJECT_DIR>"

To quickly switch between projects. From here, you can also add other aliases or any other command you want to run on startup.

Now, we can start to install the tools we want to run. If you have Visual Studio Code, then normally you'd run:



code

to up VSC, but we need to do some extra configurations. Launch VSC- not from your linux distribution- and install the Visual Studio Code Remote - WSL extension. This will allow you to manage your Linux and Windows projects independently. Now, we can run:



code

to launch up VSC, and there might be some output which updates your Visual Studio Code, which is for your Linux distribution to install.

Anaconda

If you're like me and use anaconda, then you can use:



wget https://repo.anaconda.com/miniconda/Miniconda3-latest-Linux-x86_64.sh 
bash Miniconda3-latest-Linux-x86_64.sh

Now, whereis python should give you an output like /home/user/anaconda3/bin/python. If it doesn't, then anaconda isn't on path, so you can add to your .bashrc:



# ~/.bashrc

# Add to end of your bashrc.
export PATH=/home/user/anaconda3/bin:$PATH

This installs miniconda, but if you'd like all the built-in-packages, there are detailed instructions here.

Other great tools

I created this small gist which installs some basic stuff to get you going, including:

ZSH/
Git and others.

However, there's also starship which is an amazing shell, and I had a bit of trouble with the installation, so I'll bear you the trouble and show you how I installed it.

Starship

Fist, we need to install the binary:



sh -c "$(curl -fsSL https://starship.rs/install.sh)"

The next step varies on which shell your using. The previous gist installed ZSH, and if you'd like to use ZSH, then add the following line to .zshrc:



# ~/.zshrc

eval "$(starship init zsh)"

For bash users:



# ~/.bashrc

eval "$(starship init bash)"

And if you plan on using fish, you can add this to your fish config:



# ~/.config/fish/config.fish

starship init fish | source

There's a whole lot of other configurations out there, and you can view them here.
And you have starship!

But... if you want to make your starship stand out, like the one below, things get a little harder.

We first need to configure starship. Run:



mkdir -p ~/.config && touch ~/.config/starship.toml

to create the config file, and open it up however you want:



code ~/.config/starship.toml # With VSC
micro ~/.config/starship.toml # With micro

Now, before we edit the config file, you need to download any Nerd Font, I chose FiraCode. You can download them from here- and move the zip file into \\wsl$\Ubuntu\home\{USERNAME}\. Extract the files, and then run:



mkdir ~/.fonts/
mv *.ttf ~/.fonts/
fc-cache -f -v

Now, extract the same file, just on your windows system, and then on file explorer, select all the TrueType Font Files, or .ttf files, and right-click them, and select the install button, which should install the font. Now, in Visual Studio Code, change the "Terminal.Integrated.Font Family" to "FiraCode Nerd Font", Monaco. Now, use the config from here and paste it into your starship config file. After that launch up your terminal in any project, and it'll show you something like this:

That's WSL! Comment any other cool things you added to starship, zsh, bash, or anything else related to the post that you think I might have missed!

Epispot v3.0.0-alpha

QLabs — Tue, 29 Jun 2021 21:56:00 +0000

Epispot v3.0.0 alpha is out, and we have a whole lot to talk about.

New Plots

Epispot is getting new plots with plotly, and graph styling from science plots if you use matplotlib, not to mention a whole redesign of the plots module, which is now a sub-module, including the epispot.plots.native for native plots w/ matplotlib and epispot.plots.web for web-based interactive plotting w/ plotly. Plotly web chart (stacked area graph of the SEIR model)

The CLI

We introduced this in the nightly package a while ago, and now it’s here in the alpha of v3.0.0.

epispot about

Don’t worry, 3.0.0 will have much more than just that command.

With more coming soon…

As far as we are concerned, v3.0.0-alpha is only the start, with the beta, rc, and of course, the 3.0 release, you can expect bug fixes and more coming to epispot.

The Brilliance of the Compartmental Models

QLabs — Fri, 11 Jun 2021 17:57:33 +0000

We’re stuck in the middle of a pandemic and a lockdown, and being a programmer, one of the first things that came to mind was to create a dashboard for people to use. And so I did. However, the dashboard isn’t really that unique. There are thousands. Nothing really makes my dashboard special. There’s this one, this one, and this one. What got me interested however was this 3b1b video, which used something called a SIR model, which helped predict a outbreak. So, I made one. Once again, this isn’t the only tool, and there are others. For example, CovaSim is made specifically for COVID-19. So, how does these models work?

All of these models are build on top of the SIR model, which stands for Susceptible, Infected, and Removed. You might see the R as Recovered, but for this case, we’ll use Removed, because this better represents an outbreak. The R could include both dead and recovered, where we assume people can’t be re-infected. Now, the susceptible class are people who don’t have the disease, and can be infected. The infected class are people who have the disease, and spread it. The Removed class are people who no longer have the disease and cannot catch it. Pretty straightforward, right? Now let’s get into the math.

Let’s define some variables:

γ - The recovery rate
β - The infection rate

In addition to this, we have other parameters which will come in handy later on:

R0 - The basic reproduction number, in other words, the amount of one infected infects

With this, we can form the basic equations for the model below:

Equations for the SIR Model

If you are confused by the equations above, don’t fret! It’s quite simple! This states that for the susceptible population, it loses β×S×I people each day. The infected population gains that many people each day, however loses γ×I people each day, which the recovered population gains.

With this in mind, we can start converting this into JavaScript code:

Notice, instead of having the user pass in the infection rate, we ask them to give us R0 and the recovery/removed rate, which when we multiply together, we get our infection rate.

So, now that we’ve got our JS code, let’s look at how we can expand this.

The brilliance of the SIR model is that it might be extremely simple on its own, but it’s almost built to be expanded. Here are some of the things we can expand it with:

Exposed, people who have the disease but can’t spread it. Like the incubation period in COVID-19. They do eventually become infected.
Dead, people who are dead.

Let’s see how we can turn these into equations:

Equations for a SEIRD model

This forms a SEIRD model, with the Susceptible, Exposed, Infected, Recovered, and Dead compartments. We now no longer have removed, it’s split up into the dead and recovered. However, as you might have noticed, we brought in some other parameters:

θ - The death rate.
α - The rate at which people in the exposed move to the . This is most likely 1/incubation period

I won’t get into the JS code for this, but, let’s think of other ways to expand this:

Hospitalized, people with the disease in a hospital.
Critical, people in critical condition, perhaps in an ICU.

We can continue on and on and on, expanding this model, to better represent the world, which is the true brilliance of compartmental models.

Stay tuned for my next article, where I’ll discuss how to use these equations to help model COVID-19, with data. In the meanwhile, you can play around with data on my EpiJS playground, which allows you to create a SEIRD model with your own customized parameters. If you want a SEIHCRD model, or other models, you can use the library itself in your HTML. You can view the docs here, and import it with your HTML with:

<script src="[https://cdn.jsdelivr.net/gh/Quantalabs/EpiJS/web/pre.min.js](https://cdn.jsdelivr.net/gh/Quantalabs/EpiJS/web/pre.min.js)"></script>
<script src="[https://cdn.jsdelivr.net/npm/chart.js@3.0.2/dist/chart.min.js](https://cdn.jsdelivr.net/npm/chart.js@3.0.2/dist/chart.min.js)"> <!-- Chart.js is required. -->

See you soon!

Upcoming epispot and epispot nightly features

QLabs — Mon, 12 Apr 2021 18:58:24 +0000

We're here to annonunce some new features that will be added (or hopefully added) over the next coming days to epispot nightly. Some of them include:
1) Exporting and Importing epispot models
2) A CLI
3) New Graphs!

Exporting and Importing Models

This feature is underway, and will allow users to quickly and easily share they're epispot models. When finished, it should look like the following for reading and writing.

Writing a model to a .yml file:

import epispot as epi

model = epi.models.Model([params])
epi.models.write(model, file_type='yml')

Reading a .yml file with a epispot model:

import epispot as epi

epi.models.read('model.yml', 'model.py')

The above will create a file named model.py with the code to the model.

A CLI

Epispot Nightly is getting a brand new CLI! Infact, the code for a very very basic CLI already has a PR. What can it do? Just the command epispot about which outputs metadata about the package. However, this will be extended to other uses, such as what we described earlier for importing and exporting models. The PR can be viewed here.

New Graphs

Epispot Nightly might get some new graphs, and will switch from matplotlib to plotly, with a much better interface. However, it's not final, so don't get too hooked up on this, but we for sure will be getting new graphs in epispot v3.0.

Other cool projects

Epispot developers are working on epidash, which is a interactive demo for epispot on the web. It's kind of like covasim's dashboard, but not for COVID-19, and much more customizable.
Epispot also got a neat new manual for a detailed guide on using epispot. The manual can be viewed here
Speaking of documentation, epispot documentation is going to get a overhaul with a new template for pdoc3 to use. Stay tuned for this, though it will come in a bit.

Everything you need to start developing in python

QLabs — Sat, 27 Mar 2021 21:37:58 +0000

This is a list of everything you need to have when developing in python, and some of these work for other languages (or even all!), and are things that you'll find you can't develop without after a while.

1. GitHub

Well, duh! GitHub is the most basic thing any developer has. Since GitHub also has the largest community of developers, going there makes sense, since your code will reach a larger audience. However, there are arguments that platforms such as GitLab or BitBucket are better. Here's GitLab's official comparison of GitHub and GitLab.

2. Git

No, don't go! But whether you use GitLab or GitHub, you obviously have to have Git. Git allows you to connect a "remote" (GitHub, GitLab, BitBucket, etc.) to your computer code, and commit changes you've made on your computer to the remote while saving all of the commits in the commit history. This way, if you stumble across a bug that was caused by the previous commit that could have been prevented, you can easily switch back to the commit. You can also create branches to seamlessly switch between different versions of your project, eg. I'd create a branch to work on a new feature, and then merge the branch with the main branch (often named "main" or "master"). I can also create releases, which git will save as tags, where you can also switch between to see previous versions. There are many more things that Git can do, but I won't go over it all now. You can download it here. Now, if you find Git too complex, but need the features, fret not! Git comes with a built-in GUI, which you can use, but, there are also git clients, such as GitHub Desktop, or Sourcetree. These supercharge git to allow you to be able to do things with a single click rather than multiple CLI commands.

3. A Code Editor

Code editors are important. Very, important. They allow you to speed up your coding with snippets, debugging, and more, vs. coding on your computer notepad, yeah, I know, not very friendly. There are several code editors. And, it really depends on what you want. For python, I think it really comes down to VSC and PyCharm. PyCharm is for pure python development, but VSC comes in handy with support for many other languages, and is extremely customizable, with a busload of extensions. Although PyCharm also has extensions, as I said, it's purely for python. However, there's also Atom and Sublime Text, but these aren't as good as VS Code and PyCharm.

4. Python Packages

There are most likely hundreds of different python packages that you'll use when developing, but, there are a couple you almost need.

Numpy, "the fundamental package for scientific computing with Python."
Pandas, although this is not a requirement, Pandas comes in handy with data science.
Matplotlib, for graphing and plotting data.
Pillow, a python imaging library.
Requests, for sending HTTP(s) requests.
Tkinter, can come preinstalled with python depending on the version, for graphics and GUI interfaces.
Pytest, a great testing library.
Coverage, a code coverage tool for python.
Pyinstaller, converts your python code to an executable to help you distribute it to your friends even if they don't have python.

You can install them all with this handy command:

pip install numpy pandas matplotlib pillow requests tkinter pytest coverage pyinstaller

5. A good idea and your trusty brain!

That's about it! Suggest anything else you think that you should be added, and I'll check it out in the comments!

Epispot on Anaconda

QLabs — Tue, 02 Feb 2021 17:34:58 +0000

Yes, that’s right. Epispot is on anaconda.

Okay, first, let’s go through the installation process.

conda config --add channels conda-forge
conda install epispot

Then, import it in your python project:

import epispot as epi

You can also use:

conda search epispot --channel conda-forge

to view all versions of epispot on anaconda (currently only 1).

We used the conda-forge library to publish the package, which you can check out here.

So, that’s it. epispot 2.0.1 is now on anaconda. You can install it with the instructions above! Once again, thanks to the conda-forge library for getting it published! Ready, steady, CODE!

Announcing epiblog

QLabs — Mon, 01 Feb 2021 00:05:58 +0000

Announcing epiblog, an all-new blog for epispot, epidemiology, or anything related to epispot! Now, if you’re reading this, I presume you already know about epiblog, so let me explain exactly what epiblog is. epiblog is a community of developers and fans of epispot, where you can share ideas and code through blogging. You can subscribe through RSS to get updates on epiblog.

How to Write

First, read the contributing guidelines, and submit a PR to the github repo. Yes, it’s that simple.

Release Notes

In addition to normal articles, in-depth info about new releases for the epispot package or any of our other creations will be published here, and announcements for epispot.

That’s it!

Yep, that’s it. You now know about epiblog. Ready, set, Blog!

What to code?

QLabs — Sun, 03 Jan 2021 03:13:53 +0000

I'm looking for something fresh, new, and exciting. Maybe not too complex, like a COVID-19 Dashboard. All ideas welcome!

Good Resources for creating a programming language

QLabs — Sun, 03 Jan 2021 02:53:10 +0000

A couple of months ago I had the idea to create a programming language. Yeah, crazy right?! Okay, but in all seriousness, learning to create programming languages helps you better understand computers.

“If you don’t know how compilers work, then you don’t know how computers work. If you’re not 100% sure whether you know how compilers work, then you don’t know how they work.”
— Steve Yegge

So, I went along googling "how to create a programming language" and "creating a programming language." You see, the problem here is that there are not too many proper tutorials that help you create a programming language, especially for beginners. I literally was about to switch my search engine to DuckDuckGo or even Bing! Now, I did find a couple of different resources, so I'll share them with you now, so you don't have to go through the long time it took me.

Resources

1.

Writing your own programming language and compiler with Python | by Marcelo Andrade | Noteworthy - The Journal Blog

Marcelo Andrade ・ Nov 12, 2020 ・
blog.usejournal.com

I found this one very helpful, and really was what I used in the end to create my programming language. This uses python to create a language.

2.

Writing a Simple Programming Language from Scratch - Part 1

Evan Typanski ・ Jul 7 '19 ・ 11 min read

#cpp #c #tutorial #compilers

This is also really good. It explains a lot of the concepts in a language, and also gives really helpful diagrams, code snippets, etc.

3. Let's Build a Programming Language

This is the first article in a series that walks you through the steps to create a language. This is another great resource to use and uses JS to create a language.

4.

alex / rply

An attempt to port David Beazley's PLY to RPython, and give it a cooler API.

dabeaz / ply

Python Lex-Yacc

These are both great resources for lexers and parsers. I personally like RPLY, which is a direct port of PLY.

5.

This is one in a 14 part series which really helps you create a programming language.

That's it! I hope this really helped you find resources to help!
Please comment if you have any other resources too!

Creating Apps with ElectronJS

QLabs — Mon, 07 Dec 2020 04:41:18 +0000

Twitch, Visual Studio Code, WhatsApp, and Microsoft Teams, just to name a few, are all apps that are created with Electron. But why use it? What is it? What makes it better than another framework? And finally, of course, how do you use it? Let's dive in deep with Electron to answer these questions.

What is ElectronJS, and why to use it?

ElectronJS is a JavaScript framework created to help you create apps, without you having to do all the hard parts. It has built-in crash reporting, debugging and profiling, and notifications among other things. It's open-source and free to use and takes around 5 minutes to convert a pre-existing HTML page or project to a desktop app.

Basic Electron

First, make sure you have NodeJS and NPM installed, as we'll be using them to install packages, test, and run our app. If you don't have it, you can install it here. Once it's installed, check it's installed correctly by running the following commands:

node -v
npm -v

A basic electron app will consist of the following files:

my-electron-app/
├── package.json
├── main.js
└── index.html

Let's first create the pacakge.json file:

npm init -y
npm i --save-dev electron

If you don't understand the previous commands, let me go through them right now. The first command, npm init -y, creates the package.json file, which stores the info of your NodeJS project, and we'll use commands which are stored in the file later on. The second command, npm i --save-dev electron, installs electron and saves it as a developer dependency. This means that we use the package to develop our project, but it isn't needed to be installed by the user.

Now that we have set up the package.json file, let's create the main.js. The main.js is the file which tells electron what to do. Put the following code into it:

const { app, BrowserWindow } = require('electron')

function createWindow () {
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true
    }
  })

  win.loadFile('index.html')
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})

Let's go through it.

First, we import the BrowserWindow and app modules of the electron package.
We now create a function to create a browser window and define the details of the window such as the width and height of the window. We load the index.html file as the body of the window.
- We then create the window once Electron is initialized.
- When all the windows are closed, we quit the application since the application should no longer be running.
- We then check whether to create a new window, which we do only if no browser windows are visible.

Okay, the hard part is done, let's get to the index.html file. This is where we'll create the body of our function. There's nothing really special about this, so just put in any HTML that you want in it and then you're good. To test, you could put in the following:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Hello there! Hello World!</title>
    </head>
    <body>
        Hello World!
    </body>
</html>

Now, go back to the package.json and we're going to modify it a little. It should look something like:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Change it to:

{
  "name": "my-electron-app",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "scripts": {
    "start": "electron ."
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

This now changes 2 things:

We changed the main script to main.js
We added a start script and removed the test script, so now when we run npm start, it will run our app.

We've done it! Open up your console and type npm start, and you're app should be up and running!

Now that we've covered creating a basic electron app, we can move on to more complex things such as testing, adding a custom menu, keyboard shortcuts, notifications, multiple windows, and even detecting wether the user is offline or online! We'll cover all of this in the next article of the series, so stay tuned!

Simple Differential Privacy

QLabs — Wed, 25 Nov 2020 01:40:36 +0000

Cover Photo by Franki Chamaki on Unsplash

Sorry, what are we coding again?

Differential privacy is really simple. Let’s say, I have a data set of info about people that I want to publish but still keep their data private. That’s where differential privacy comes in. It takes your data and alters it in a way that will keep overall facts about your data in the same area (with more complex algorithms you can alter how close you want it to be) while keeping individuals' data private.

The Random Response Mechanism

Okay, let’s get to the details of how we are going to alter this data. We want to start simple, so we’ll code the Random Response mechanism. This is the most simple mechanism for differential privacy. It flips a coin, if it is heads, then it keeps the same value. If it is tails, it flips it again, and if it is heads, it returns true, and if tails, then it returns false. Now, again, as I said before, this is a very simple algorithm so it only works with zeros and ones or true and false.

Coding The Random Response Mechanism

Our first step is to get a data set for our algorithm to run on. If you are going to use real data, you’ll need to convert it to an array. You can also use this sample data to test if your algorithm is working:

You could also run a for loop which generates random values and pushes them to an array.

Now that we have our data, let's start by creating a function called rand_response and use it as what we call to privatize our data. We create it with one parameter, data, for the data we created earlier.

Now, we call a for loop to go through the array:

for a in data:

Then we set a variable, b, as a random number and use if statements to tell if it is a 0 or 1. We’ll need NumPy for this so install it via pip if you haven’t already:

pip install numpy

and now import it into our code:

from numpy import random

We imported a specific file called random for the random number generation.

Now let’s generate the number:

b = random.randint(2);

This generates a random integer, either 0 or 1.

Next, we put the if statements to find the number and change the value accordingly:

if b == 0:        
   a[i] = 0
if b == 1:        
   b1 = random.randint(2)    

   if b1 == 0:            
      a[i] = 0  

   if b1 == 1:            
      a[i] = 1

And now we’ve finished! You should have something like this:

When you run rand_response(data) and then print data, you should see the data changed a little bit. Now, this isn’t very private, but it is the first step. Now that you know how differential privacy, try other mechanisms like the Exponential Mechanism and Laplace Mechanism. If you want to use these algorithms, you can use my python package DiffPriv.

Quantalabs / DiffPriv

A python package for differential privacy and encryption.

Simple Disease Outbreak Modeling - Inspired by a 3b1b video

QLabs — Tue, 24 Nov 2020 01:56:56 +0000

As the COVID-19 outbreak rages on, a good look at the outbreak would help. And when I saw a video by 3b1b on simulating epidemics, I tried to recreate what he did. So let's get started.

Since we need to put our graphics somewhere, we create a canvas in HTML and initialize it in JS.

<canvas id="c">
    Your browser does not support the canvas.
</canvas>

And our JS:

var cv = document.getElementById("canvas")   
var c = cv.getContext("2d")
cv.width = window.innerWidth   
cv.height = window.innerHeight

First, we need variables such as the population and infection rate
(quick note, we’ll be coding this in JS, so make sure you understand basic JS before taking this tutorial).

var population = 100   
var infected = 1 
var speed = 10   
var currentInfections = 1

Okay, so it’s pretty self-explanatory, but let's just go over it. The population variable is the amount of dots/people in the simulation. The infected variable is the start number of infections, and we have this because there can be 10 or 20 ‘patient zeros’ in an outbreak. The speed is how fast the dots move, and currentInfections is the number of infections. Now, the reason we have infected and currentInfections is because currentInfections is how many we have at any given time during the outbreak, while infected is how many we have to start with.

Next, we need an array where we will store each value, such as whether it is infected, susceptible, or recovered; the dots x and y; and its velocity, which I will explain in a moment.

Before I get to velocity, I want to explain what our model is. Our model is called a SIR model, which stands for susceptible, infected, and recovered. The susceptible population can get infected, the infected population can infect others, and the recovered population can no longer infect others, and, in this model, no longer can be re-infected.

Now, let’s get to velocity. This is the direction of the dots, such as left, right, up, or down. We will have two parts, velocity x, and velocity y. This way, dots don’t only go up, down, left, and right, but also in diagonals.

Because writing out all of this will take too long, we will use a for loop. We first define our array:

var dots = []

And now we will add to it:

for(var i = 0; i<population-infected;i++){
    dots.push([Math.random()*Math.min(cv.width,cv.height)*3/4,Math.random()*Math.min(cv.width, cv.height) * 3/4,0,speed *Math.random(),speed * Math.random()]
}

Let’s go over it. Since each dot has several parts to it, we create sub-arrays inside it. The first 2 parameters are x and y. We place them in a random position on our canvas, but to place them in the center of the screen, we multiply them by 3/4.

Next, we have its state: susceptible, infected, or recovered. We can add more states like dead or immune instead of recovered, but let’s keep it simple for now. We put 0 as susceptible, 1 as infected, and 2 as recovered.

We have our velocity values next. We multiply the speed with a random number to get our velocity.

Now, you might have noticed that the for loop only covers 99 people, not 100. This is because we need to have a new for loop for the infected population.

for(var i = 0; i<infected;i++){
    dots.push([Math.random()*Math.min(cv.width,cv.height)*3/4,Math.random()*Math.min(cv.width,cv.height)*3/4,1,speed*Math.random(),speed*Math.random()]
}

Now, we create a function called refresh() to do our animation.

var refresh = function () {
}

Before we get to the animation and drawing, make sure to draw the boundary of the “city”, which is a white rectangle.

ctx.fillStyle = "rgb(255,255,255)"
ctx.strokeRect(cv.width*1/4,cv.height*1/4,cv.width*3/4,cv.width*3/4)

Inside the function, we need to do our animation and drawing. We first draw circles for all the susceptible population, which will be blue, then the infected, which is red, and the removed/recovered population, which is grey. I’ll let you figure this one out.

Now, let’s animate them. We run a for loop which will go through the dots array and animates them.

for(var i = 0; i < population;i++){
  dots[i][3]+=Math.random()*2-1
  dots[i][4]+=Math.random()*2-1      
  if ( dots[i][3] >= speed ){dots[i][3] = 0}     
  if ( dots[i][3] <= -speed){dots[i][3] = 0}     
  if ( dots[i][4] >= speed ){dots[i][4] = 0}       
  if ( dots[i][4] <= -speed ){dots[i][4] = 0}      
  dots[i][0]+=dots[i][3]     
  dots[i][1]+=dots[i][4]      
  if(dots[i][0]>1*Math.min(cv.width,cv.height)*3/4){      
    dots[i][0]=1*Math.min(cv.width,cv.height)*3/4      
  }     
  if(dots[i][0]<0){
    dots[i][0]=0
  }
  if(dots[i][1]>1*Math.min(cv.width,cv.height)*3/4){
    dots[i][1]=1*Math.min(cv.width,cv.height)*3/4      
  }     
  if(dots[i][1]<0){
    dots[i][1]=0      
  }    
}

Now that we have that done, we need to start infecting others. To do this, we run a nested for loop which will find the infected dots. Once we find them, we will run a nested for loop to find other dots within the infection radius, which we put as 5. I’ll let you figure this one out too since it shouldn’t be too hard (HINT: there’s a double nested for loop).

Now, we’ve infected, we’ve drawn, and we’ve animated. We just need one more thing. Since people either die or recover, we should add that in. We add another element to the sub-arrays inside dots. At the beginning of the for loop (the first one) we put this:

dots[i][5]++

If you put a different variable in the for loop, replace i with that variable. At the end, put this:

if(dots[i][5] >= 200){dots[i][2] = 2}

This adds a “timer” to the infected ones and once it reaches 200, it changes to one of the removed dots.

We’ve now accomplished everything! To draw and completely animate, put this at the end of refresh():

window.requestAnimationFrame(refresh)

And then run the function:

refresh()

NOTE: This model does not represent the COVID-19 outbreak or any other outbreak, but it can be a very, very, very, very, very simple way to represent an outbreak.

What to Add

Several things you can add include:

Dead and Recovered dots, instead of just the removed population as a whole
Social distancing (this can be achieved by not moving some of the dots, and the idea was from a post by Harry Stevens)
Quarantining a portion of the sick dots (only a portion, because not everyone who is sick shows symptoms and gets tested)
Adding several communities where people travel from one to the other (idea from the 3b1b video I mentioned)
Graphs, charts, data, etc.
More customization in the parameters such as the infection rate, speed, recovery rate, etc
A central spot, like a shop (also from the 3b1b video) For more complex modeling, I suggest you check out q9i’s article on disease modeling — Reopening Safely: The Data Science Approach on Medium (link at the end)

Examples

Here are some good examples