Turning your phone into a virtual-joystick

-
Image
Update: I kept working on this and I have released it as a package for Windows, Linux and macOS. Check it out: https://github.com/zenineasa/joystick/releases/tag/v1.0.0 -- During the days when I was pursying my master's programme, my friends and I used to occasionally go to a classroom in the university, turn on a projector, connect devices like Nintento Switch or Gaming computers and loads of joysticks, and play different simple multiplayer games; MarioKart was my favourite. From time-to-time, when I get together with people, I ponder that it would be a good idea if I bought such devices. Indeed, I do have a laptop, which could easily run such games; SuperTuxKart is similar enough to MarioKart and it can run on Linux, Windows and Mac. However, I do not have joysticks with me at the moment. Therefore, I think it would be a good idea if I simply worked on a project that would enable using our phones as joysticks. From a high-level, the plan is to host APIs on a NodeJS server that wo...
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

First impression of Lugano - Mindblowing

-
Image
I started off from Zurich at around 7.30 in the morning. There was a direct train to Lugano from Zurich HB. I vaguely remember my internet searches on the cost to travel from Zurich to Lugano via train to be about 30 CHF, but in reality, taking the ticket from the station, it costed me double of that. I don't know if the tickets have surge prices or something. Anyway, the journey was nice as I was able to see some beautiful places along the way and I think I had a chance to go through Gotthard Base Tunnel, which is the longest tunnel in the world. Getting down at Lugano station and looking out, I saw one of the most beatiful scene that I have ever seen. I am not sure if I could describe that properly in words, nor do I think the following photograph that I took justifies how it looked to me in person. I had to walk down a lot of stairs from here with the heavy bags that I had, only to realize that I made a wrong turn at some point. I was informed that instead of going back up, it w...
Read more

Thinking about developing an opensource P2P social network

-
It has been a while since I made a blog post. I have been occupied by my academic work and I found using my past time on non-blogging related activities more rewarding. However, since it is summer break now, and I have mostly run out of things to do, I decided to get back to being creative and work on some project. Recently, I have been floating an idea about creating a social network that practically eliminates the requirement to have servers and databses. From a high-level, the idea is that users can host their profile on their phones and their connections can query data about the profile, send messages, form groups, and make wall post which can be viewed by anyone who is connected to the profile. I have seen a research paper summarising quite a few projects that has attempted to create something similar. However, I observed that these would at least have a server for authenticate a user; to tell confirm if the user is who he says he is. I believe this can be eliminated by allowing u...
Read more

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...
Read more