Created a video to help people get started with HexHoot

-
Image
A few days ago, I decided to make version release for HexHoot on GitHub, as I think it is important to differentiate something that is more stable and something that is under development. Having versions that people can download seem to be the best move to do the same. Following the same, I shared it with people over LinkedIn, Facebook and Instagram. One of the feedbacks I received over private messages was asking me to provide more information on what it exactly is and how to use it. Although all these information are written in the documentation and the website, it appears to be that people like to watch videos explaining the same. Therefore, in the past couple of days, I have been performing screen recording and doing voice overs. Interestingly, during this process, I found a couple of issues with the software, and I fixed those. The following is the video. Please do provide your feedback on this project. It would be lovely if any of you are interested in contributing to the same. Y
Post a Comment

COVID-19 Disease Spreading Simulation

-
At the moment, the world is fighting COVID-19. There have been many scientists who made simulations to demonstrate how the disease would spread. There was one simulation which I liked. It was a video in which people were put up as a dot that moved around the canvas. I want to reproduce that in JavaScript and make it tunable.




 View this in a new tab: Click Here


First, let us create a canvas div, in which all the people would exist. I am feeling a bit lazy to create a separate stylesheet. I will keep all the styles within the HTML Tags.

<div id="canvas" style="position: absolute; width: 500px; height: 500px; background: #efefef"></div>
Next, let us define a class named Person. The person starts at a random coordinate and moves in a random direction.

const maxVel = 5;
class Person{
    constructor(){
        this.div = document.createElement("div");
        this.div.style.width = "4px";
        this.div.style.height = "4px";
        this.div.style.borderRadius = "50%";
        this.div.style.background = "#000000";
        this.div.style.position = "absolute";
     
        // Init position
        this.div.style.left = Math.random() * 500;
        this.div.style.top = Math.random() * 500;
     
        // Init velocity
        this.Velx = Math.random() * maxVel;
        this.Vely = Math.random() * maxVel;
     
        document.getElementById("canvas").appendChild(this.div);
     
        this.updatePosition(this);
    }
 
    updatePosition(that){
        setInterval(function(){
            that.div.style.left = that.div.offsetLeft + that.Velx;
            that.div.style.top = that.div.offsetTop + that.Vely;
         
            if((that.div.offsetLeft >= 500 && that.Velx > 0) || (that.div.offsetLeft <= 0 && that.Velx < 0))
                that.Velx = - that.Velx;
            if((that.div.offsetTop >= 500 && that.Vely > 0) || (that.div.offsetTop <= 0 && that.Vely < 0))
                that.Vely = - that.Vely;
        },50);
    }
}
Now, if we can simply create a few objects of the class Person and watch the animation.
for(var i = 0; i < 20; i++){
    new Person();
}



Now, let's bring in the disease factor. Let us make the following assumptions:
  • If a healthy person comes close to a sick person by a certain distance, the healthy person gets infected.
  • The person has a small probability of dying at every time step.
  • After a certain amount of time, the sick person gets cured.
  • Once cured, the person shall no longer get sick ever again as the person gained immunity.
I went ahead with implementing it. It would be hard to explain everything step by step, but just have a look at the final code.

The following is the final HTML part:
<div id="canvas" style="position: absolute; width: 500px; height: 500px; background: #efefef; z-index: 900"></div>
<div style="position:absolute;z-index: 999;">
    <div id="numHealthy" style="display:block;"></div>
    <div id="numSick" style="display:block;"></div>
    <div id="numCured" style="display:block;"></div>
    <div id="numDead" style="display:block;"></div>
</div>
And the JavaScript Part:
const numInitHealthyPeople = 30;
const numInitSickPeople = 2;
const maxVel = 5;
const curePeriod = 50;
const killProbability = 0.005;
const spreadRadius = 20;
const divHealthy = document.getElementById("numHealthy");
const divSick = document.getElementById("numSick");
const divCured = document.getElementById("numCured");
const divDead = document.getElementById("numDead");
class Person{
    static allPersons = [];
    constructor(isSick = false){
        this.div = document.createElement("div");
        this.div.style.width = "4px";
        this.div.style.height = "4px";
        this.div.style.borderRadius = "50%";
        this.div.style.background = "#000000";
        this.div.style.position = "absolute";
     
        // Init position
        this.div.style.left = Math.random() * 500;
        this.div.style.top = Math.random() * 500;
     
        // Init velocity
        this.Velx = Math.random() * maxVel;
        this.Vely = Math.random() * maxVel;
     
        document.getElementById("canvas").appendChild(this.div);
     
        if(isSick){
            this.getSick(this);
        }
        this.sickDuration = 0;
        this.isCured = false;
        this.isDead = false;
     
        this.update(this);
     
        Person.allPersons.push(this);
    }
 
    update(that){
        var updateVar = setInterval(function(){
            // Position and Velocity:
            that.div.style.left = that.div.offsetLeft + that.Velx;
            that.div.style.top = that.div.offsetTop + that.Vely;
         
            if((that.div.offsetLeft >= 500 && that.Velx > 0) || (that.div.offsetLeft <= 0 && that.Velx < 0))
                that.Velx = - that.Velx;
            if((that.div.offsetTop >= 500 && that.Vely > 0) || (that.div.offsetTop <= 0 && that.Vely < 0))
                that.Vely = - that.Vely;
         
            // Receive disease if sick people nearby
            if(!(that.isCured || that.isSick)){
                for(var i = 0; i < Person.allPersons.length; i++){
                    var person2 = Person.allPersons[i];
                    // if person is nearby
                    if(person2.isSick){
                        var dist = Math.sqrt(Math.pow(that.div.offsetLeft - person2.div.offsetLeft, 2) + Math.pow(that.div.offsetTop - person2.div.offsetTop, 2));
                        if(dist < spreadRadius){
                            that.getSick(that);
                            break;
                        }
                    }
                }
            }
         
            // Sickness
            if(that.isSick){
                that.sickDuration++;
                if(that.sickDuration > curePeriod){
                    that.getCured(that);
                } else {
                    // Kill with probability:
                    if(Math.random() < killProbability){
                        that.kill(that);
                        clearInterval(updateVar);
                    }
                }
            }
            // Statistics Display:
            divHealthy.innerText = "Healthy: " + numHealthyPeople;
            divSick.innerText = "Sick: " + numSickPeople;
            divCured.innerText = "Cured: " + numCuredPeople;
            divDead.innerText = "Dead: " + numDeadPeople;
         
        },100);
    }
 
    getCured(that){
        that.isSick = false;
        that.isCured = true;
        that.div.style.background = "#00ff00";
        numCuredPeople++;
        numSickPeople--;
    }
 
    getSick(that){
        that.isSick = true;
        that.div.style.background = "#ff0000";
        numSickPeople++;
        numHealthyPeople--;
    }
 
    kill(that){
        that.div.parentElement.removeChild(that.div);
        that.isDead = true;
        numDeadPeople++;
        numSickPeople--;
    }
}
var numHealthyPeople = numInitHealthyPeople + numInitSickPeople;
var numSickPeople = 0; // get sick is called in the constructor
var numCuredPeople = 0;
var numDeadPeople = 0;
for(var i = 0; i < numInitHealthyPeople; i++){
    new Person();
}
for(var i = 0; i < numInitSickPeople; i++){
    new Person(true);
}
You can open up this code in GitHub using the following link:

https://github.com/zenineasa/DiseaseSpreadSimulator

Comments

Post a Comment

Popular posts from this blog

Regarding a Covid-19 related project that I worked on a few months ago

-
Image
A little over a year ago, I had written a blog post in this blog titled " COVID-19 Disease Spreading Simulation ". That was something that I worked on in a very short time frame. A few months after that, during a conversation with an old professor of mine, Dr. Jimson Mathew, we discussed modifying it further to create something really interesting. We started working on creating "A Framework for COVID-19 Cure or Vaccine Distribution Modeling, Analysis and Decision Making" in October 2020 and finished creating it and drafting a research paper about it in the first week of November 2020. We had submitted this to the Journal of Simulation, but the reviewers rejected the paper citing more information recently. Of course, we will be editing the paper and re-submitting it; however, I thought it would be better if I uploaded the project in the public domain so that anyone who would like to use it can do the same without having to wait. I have made this available on GitHub.
Read more

P2P Zero-Knowledge-Proof based Opensource Social Network - HexHoot

-
I find that the domain name that I purchased on an impulse, hexhoot.com, would be the ideal name for the p2p social network; both of which I described in some of my previous posts. I have been working on it during my pasttime for about a month now, and I decided to make it opensource. You can have a look at the project using the following link: https://github.com/zenineasa/hexhoot I have attempted to follow all the best development practices as much as I can. I have written tests, and, enabled continuous integration feature in GitHub to run all the tests, lint and copyright checks for the code changes that is being made. I also have captured all the foreseeable tasks in a Trello dashboard. This helps me keep track of all the bugs that I have detected and all the important tasks that need to be completed. There are quite a lot of tasks left to make this bug-free and feature-rich. I hope I will find enough time and motivation to do the same in the coming days.
Read more

Went into the University for the first time

-
I went into the university for the first time today. It is less than a kilometer from the apartment. I had to go there to finalize certain documents regarding my accomodation. I arrived at the university during the lunch time and hence I had to wait for a couple of hours for the office staffs to return. During the time, I roamed around the campus. The place is aesthetically pleasing, however, it is pretty small, especially since where I did my bachelor's, IIT Patna, had a campus spread across over 500 acres. I also went to the nearby Lidl to get a few frozen pizzas. I had that for lunch, evening snack and dinner. I had thought about cooking something for dinner, but I felt a bit lazy to do the same. However, I did modify the last frozen pizza by adding some mushrooms, pizza sauce and pepper. I think this could be a good trick moving forward - buy a few frozen pizzas and chopped vegetables from Lidl and fuse them. I think this would make the pizzas a bit more healthier and the effor
Read more