Started a blog under HexHoot

-
I think it is for the best to start a separate blog under HexHoot. This will help me promote the project by making lots of content related to it, which could eventually drive traffic into the page. I really am betting on HexHoot taking off. I see a lot of potential in the project. Check it out:  https://blog.hexhoot.com/
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

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

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

Bought a new domain - chickfort.com

-
A couple of days ago, I bought a domain named 'chickfort.com'. I have been wanting to own a '.com' domain for quite a while now, and I didn't want to buy one from a reseller. Every now and then, I used to go to one of the domain registrants and search for interesting names that would come into my mind. This has been going on for quite a while, and I finally found a domain name that is short enough and is a combination of two simple English words. The aforementioned is not the main reason why I chose to buy this domain. The words 'chick' and 'fort' coupled together could be loosely translated into the endonym of my hometown, Kozhikode. Additionally, I believe that the domain name could be potentially used for a wide-variety of purposes. The interesting thing is that, I have been receive calls from a few software and web development companies after I made this purchase. I wonder if the domain registrar is secretly sending the data to the marketing team
Read more