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

Attempt to Draw a Clip Art of a person using JavaScript

-
I have been thinking a lot on what to blog about. I have not been able to find some interesting topic to write about. So, I have been reading through the news and different online content and until I observed a clip art of a person. It was an image and storing and retreiving an image takes more data to be transfered from the server to the client. I bet it would be much more efficient if we simply programmed it in.

In this post, I am going to attempt to draw a person in using JavaScript. Creation of HTML DIVs and adding the styles shall also be taken care of from the JavaScript side.

First let's set up the drawing canvas. I will be using DIVs in this attempt and not going to use any of the SVG related tags.

var canvas = document.createElement("div");
canvas.style.background = "#efefef";
canvas.style.width = "500px";
canvas.style.height = "500px";
document.body.appendChild(canvas);

Now, let's create the head. The head may be a perfect circle with a diameter of 50px. It should be positioned at the center laterally.

var head = document.createElement("div");
head.style.background = "#00aaff";
head.style.width = "50px";
head.style.height = "50px";
head.style.position = "absolute";
head.style.left = "225px";
head.style.top = "30px";
head.style.borderRadius = "50%";
canvas.appendChild(head);
The body may be represented by a rounded rectangle. It should have a width only slightly larger than the head and quite a bit more height.

var body = document.createElement("div");
body.style.background = "#00aaff";
body.style.width = "60px";
body.style.height = "150px";
body.style.position = "absolute";
body.style.left = "220px";
body.style.top = "90px";
body.style.borderRadius = "16px";
canvas.appendChild(body);
Now, lets get started with drawing the arms and legs.

var leg1 = document.createElement("div");
leg1.style.background = "#00aaff";
leg1.style.width = "25px";
leg1.style.height = "150px";
leg1.style.position = "absolute";
leg1.style.left = "220px";
leg1.style.top = "250px";
leg1.style.borderRadius = "16px";
canvas.appendChild(leg1); 
var leg2 = document.createElement("div");
leg2.style.background = "#00aaff";
leg2.style.width = "25px";
leg2.style.height = "150px";
leg2.style.position = "absolute";
leg2.style.left = "255px";
leg2.style.top = "250px";
leg2.style.borderRadius = "16px";
canvas.appendChild(leg2); 
var arm1 = document.createElement("div");
arm1.style.background = "#00aaff";
arm1.style.width = "20px";
arm1.style.height = "140px";
arm1.style.position = "absolute";
arm1.style.left = "190px";
arm1.style.top = "95px";
arm1.style.borderRadius = "16px";
canvas.appendChild(arm1); 
var arm2 = document.createElement("div");
arm2.style.background = "#00aaff";
arm2.style.width = "20px";
arm2.style.height = "140px";
arm2.style.position = "absolute";
arm2.style.left = "290px";
arm2.style.top = "95px";
arm2.style.borderRadius = "16px";
canvas.appendChild(arm2);
Observe that much of the code is pretty similar. Just a few values have been changed here and there. One could simply write a function with these values as parameter and render them even more effectively. Well, I am not doing that in this post. Instead, I would like add in a bow tie to the person.

var tie = document.createElement("div"); 
var tiepart1 = document.createElement("div");
tiepart1.style.background = "#0011ff";
tiepart1.style.width = "15px";
tiepart1.style.height = "15px";
tiepart1.style.position = "absolute";
tiepart1.style.left = "235px";
tiepart1.style.top = "95px";
tiepart1.style.transform = "rotate(45deg)";
tie.appendChild(tiepart1); 
var tiepart1 = document.createElement("div");
tiepart1.style.background = "#0011ff";
tiepart1.style.width = "15px";
tiepart1.style.height = "15px";
tiepart1.style.position = "absolute";
tiepart1.style.left = "250px";
tiepart1.style.top = "95px";
tiepart1.style.transform = "rotate(45deg)";
tie.appendChild(tiepart1);
canvas.appendChild(tie);
This is how the whole thing would look like.
























That's all folks.

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

From Correlation to Causation through stories and math

-
Image
Correlation and causation are two concepts that people often mixup in their minds. I must admit that I myself have been guilty about this, and it unlikely that I would ever entirely grow out of it as it is wired deeply into our psychology. Let me use this article to briefly emphasise what the concepts of correlation and causation means, some interesting stories that have emerged from people misunderstanding these concepts and an algorithm that attempts to find causal relationship using correlation information. Here is a story that I heard a professor of mine, Prof. Dr. Ernst-Jan Camiel Wit, tell us during a lecture. There was a school that was involved in a study to see if providing free mid-day meals to students, which they could choose to be subscribed to this or not. At the end of the study, both the students who subscribed to it and did not where tested for different health indicators. It was observed that the students who chose to have meals from the programme had poorer health
Read more