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

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";

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%";
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";
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";
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";
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";
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";
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)";
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)";
This is how the whole thing would look like.

That's all folks.


Popular posts from this blog

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

Went into the University for the first time

Preparing my journey to Switzerland