Somethings Anew

Change is the law of nature. It is indeed.

I write this post today to document some prominent changes that’s been happening recently in my life. Changes that embark the beginning of my humble journey ahead.

I’m in my senior year of college now. Well technically I would be a senior once the classes commence on 1st August. But anyway let me take just one chance to say it out loud. Also with senior year, comes my final opportunity to assimilate whatever this pilgrimage of technology has to offer.

Ok. So the first thing first.

 A new dorm!

This would be the one thing on my list which I was seriously longing for. A new hostel dorm finally! Individual room – I’m on my own here completely. Also a bigger & silent space than my previously shared dorm, I could engage in my work in much better way.

 

Home 2.0 and my workspace!

I moved here on July 1st.

Yeah I should have written about it earlier but wouldn’t it have been a mere proclamation of my unshared excitement? Anyway I had more things to tell you, so I was accumulating content to write about at once.

Outside view from my room at 2nd floor

If you see my blog-post frequency this July, then it’s my 3rd post here. 3 posts-15 days : 1 post per 5 days. Well that’s a reasonable frequency considering my other engagements. Internship work is also on peak. But I should have proper justification for where I’ve been investing my time these days, if not for the readers than for myself.

Wall Art  – 

As soon I set my things up in the new dorm, I had few ideas to customize it. To breath life in the long-abandoned space that resonates with my living style. And what could have been a better way than art to showcase that.

So I started making few paper arts because I love it. I wanted to choose something that was easy to make and looks good while it goes on the wall. It’s been quite a while since I drew anything. Animated characters seemed the reasonable choice.

I was a huge cartoon fan in my childhood – well who wasn’t? The first character that came in my mind was Dexter, for it well signified things that I generally deal with as a student – Science & Technology. So I drew this –

IMG_20160706_192113

Umm..A mad scientist!

And this is how it looked on the wall –

IMG_20160706_191135_1467812538809

Ok good!

I couldn’t take my eyes off from this picture the next day 🙂 When I woke up and realized – hmm…I’ve a companion here. When I came back from my work and there was Dexter asking me – So how was your day today?

It was all in my head 😛

But Mr. Dexter was feeling lonely and needed a companion himself. No not a human one (which he had) but someone from his own species. So I thought of keeping him entertained with funky Johnny Bravo –

IMG_20160708_020452_1467923746310

Were you asking for me?

And then he went on the wall too, alongside Dexter –

IMG_20160708_054848_1467937180098_1467937237322

It’s Long Distance Entertainment (LDE)!

I was careful not to keep Johnny too near to Dexter. I don’t want him distracted from his scientific endeavor. And there I had one more companion to stare at after waking up the next morning.

Few days later I sent in Mario to investigate how these two were doing –

IMG_20160711_202838

Hey guys! What’s up? Mario here.

Now these three adorn my workstation like this –

IMG_20160711_202853_1468249604894

Better, isn’t it?

I really liked making these paper-arts and I was satisfied the way they came up (sometimes I pat myself to boost up). I kept on adding characters for next few days in my list once they started springing up in my mind. Now I have much more things to make. Hopefully I would complete them soon as well.

New Techblog

In the beginning of 2016, I started my techblog ‘HogwartsTech‘ here on Divine_Lifez as a separate category. Creative writing is for leisure times, Science is what I deal with and I wanted to document my learning, my experiences and my experimentations. I published few blog posts since then and here is how they’ve performed –

Post Title Published On Total Views Total Likes
When A Chatbot Said “Women Must Adore You” 28th June 10 6
Thready – Threat Detection Using Drones 21st April 8 7
ClearType – A Font Technology I Didn’t Know About 16th January 41 17

WordPress is a great medium to showcase your work but it’s better if your work deals with a particular domain to reach target audience. It’s an important thing that I learnt through my blogging experience so far. Not only the posts were unable to reach wider audience, they were also less likely to be read by my current readers as compared to other posts.

Well there are some prominent reasons for it too –

  • Techblogs are extensive. Most of my posts are usually long but the ones in this category were massively long, usually >1200 words.
  • They require certain prerequisites to understand, otherwise it’s all moo – unless you know something about microelectronics, you can’t understand what ESP2866 wi-fi module is.
  • Most of the people on this blogosphere are creative writers and they’re awesome. I don’t want to bore them with technical stuffs.

Considering all these reasons, I finally decided to have a separate destination for my technical ramblings. Also I didn’t want to have it on just another WYSIWYG platform like WordPress but rather to be handcrafted, personalized and made through code.

If you’re doing something good, do it in a better way.

Here is what I designed for generating some anticipation before the launch and put it as my WhatsApp DP.

ottid_1

Few people did ask what this OTTID is?

After hours of reading documentation, churning several blog posts, code modifications, configuration changes, making a separate GitHub account and creating a new repository and writing my first blog post, repetitively generating static files through command line, editing phases and running my localhost tens of times to check everything’s perfect before it goes online, finally my Techblog is now live and running –

 

techblog

Desktop View

3201575540819057591-account_id=2

Mobile View

Do check out my new techblog if it interests you at https://mechandansinha.github.io/.

Also if you want to know how to set up your own Pelican site, then do read my Hello World-101 entry there.

Setting up a separate site would provide me more creative freedom in tech domain as well as posting some behind-the-scenes learning through shorter blog posts which I generally avoid here. Also it would a gateway for a sneak peek into my everyday chores.

Renovating Divine_Lifez

If you’re a design enthusiast and if carefully introspect the visual appearance of things you come across, then you might have noticed some layout changes in my blog.

It’s subtle because I didn’t change the overall theme so it might not be apparent. Anyway here’s what changed –

  • Flatter design – Flat design is in trend and I love material design. While I was customizing the appearance, I wanted the elements on webpage to be flat. No standing-out z-indexes and no flashy tilting.
flat

And there all lie, flat.

  • Color scheme – If you’ve any experience in web designing, you must reckon the importance of color scheme for rendering a seamless eye-pleasing webpage. It felt right to change the color pattern for smooth integration with the changed design.
color_pattern

New and the old.

  • Subtitle – People don’t stick to things, they strive for doing something bigger and better. When I started this blog, the old subtitle seemed to be fit.

When life gives you lemon, make lemonade and write the taste

But as the time progressed, I started incorporating newer domains into my writing. The posts were no longer confined to my rants about feelings and emotion but I started writing about various events, my adventures, entrepreneurship and much more.

Thus there needed a change. A change that stands for the conglomeration of all these aspects. A change that signifies my everyday learning in a better way. So there came the new subtitle –

Searching for substantiality in the vicinity of void

Hope it conveys a much deeper and wider meaning to my reader as I intend it to.

100+ Followers

Your and my beloved blog Divine_Lifez has crossed the cent mark of its followers.

Thanks thanks thanks a lot to all my followers for showing your interest in my naive writing. Your faith is the reason behind the existence of this blog. Your belief justifies my countless hours I’ve spent in creating, organizing and writing the contents.

100_followers

It’s 110 now!

Also thanks to all the readers to stumble upon my niche on this huge blogosphere. Keep visiting this space to read more from me. I assure you would never get bored 🙂

Creating original content has always been my foremost priority. All my posts are carefully researched for the authenticity of information and they go through numerous editing before getting published.

Also the images I post on my blog are either photographed & edited or designed (for graphics) by myself. I don’t have any problem with anyone using them but do credit or atleast inform me before using them on any other platform – I spend a lot of time (sometimes hours) in deciding the layout, elements and composition.

So Divine_Lifez would stay true to this philosophy of originality. It’s just a beginning.

When A Chatbot Said “Women Must Adore You”

I have 32 tabs opened in my Chrome while I write this.

tabs

‘Ah! What?’ – Oh sorry! Off the topic.

Or may be not.

Ok Google! What’s the maximum number of tabs supported in Google Chrome?

Side information – read the first link that pops up. Tabs junkies out there!

I had to take multiple screenshots before I got this one. These assistants are now incredibly fast, you know 🙂

“Siri tell me a tongue twister”

image1.PNG

Thanks to my friend for letting me use his iPhone!

How many times have you done things like this?

Very few – when you’re having an awesome day or probably many – when you’ve nothing better to do.

Or you’re bored and just curious to know what pops up. Oh I fall in this category BTW.

Google Now | Cortana | Siri – all hail virtual assistants! Life is now freakishly easy when the information is on your lips tips (oops! finger tips for those who are still clinging to iPhone 4 era).

They’re good, in fact great but predictable. You kind of know what’s coming up, atleast the nature of results, if not the exact response.

But the boredom seeks to have duel with excitement – unforeseen & unpredictable. Humor would certainly be icing on the cake.

And let there be chatbots.

A chatbot is a rudimentary form of artificial intelligence software that can converse with humans to answer questions or simply natter to us in as lifelike a manner as possible. The scope and complexity of a chatbot is determined by the creator’s algorithmic aptitude. – Alright!

Needless to say, once upon a time this narrator lied in rest (not dead just casually relaxing) exploring the down-charted territory of boredom where neither the blossoming Gloriosa Daisy nor the immensity of Crab Nebula fascinated him.

The mighty Internet comes to the rescue and saint Google says – “Ask me anything.”

And so I did.

chatbot_search

Note to my well-wishers – Please don’t stop talking or atleast remembering me (even Facebook poke would do – I never gonna see them anyway. Neither I get any mail as in case of messages). Nonetheless the telepathy does prevent slipping into the situation whose consequence you’re to witness today.

First link – Mitsuku Chatbot – Checked. The interface looks like they are going to premiere ‘Dora The Explorer’. Tons of things crunched. Flashy. Sends me back to 90s. Walked out. Went for next.

Second link – Cleverbot.com – Took me straight to chatting. With three Google Ads flashing on three sides, I felt like being on peninsula.

After 5 minutes (for me it was 2) if you’re still enjoying it then probably you’re super-bored. Fed up from everything you have and unknown to everything else that you don’t – you’re not even willing to try.

Fortunately, still in my sanity, I was experimenting and here’s the dead end (dramatic reconstruction)-

calculation.PNG

Let’s see what the next one holds. I was more curious to know whether a chatbot would actually answer the calculations embedded in conversation.

A.L.I.C.E. – The Artificial Linguistic Internet Computer Entity 

Well I always start conversation in a decent fashion – etiquettes I’ve picked up on the way. It’s usually ‘hi’, ‘hello’, ‘how are you?’ in the beginning (yeah I ask that to chatbots as well because you know, asking if their algorithm is running smoothly or got stuck in an unforeseen edge case).

It could have been a routine conversation but A.L.I.C.E proves it soon enough why she deserves to be an award winning chatbot. I didn’t bother to take the screenshots of initial conversation on the grounds of checking the authenticity of responses considering they were quite usual questions.

As I delved more, the more awestruck I was. Soon I realized that I needed to take screenshots for reference as it is going to be a carefully planned experimentation. I’ll let the pictures do the talking –

alice

Seemed like we would have ended up the conversation pretty soon UNLESS I picked up at the last sentence. 

alice2

See I was really adamant at spotting 20 which she clearly dodged everytime.

alice3

I’m his son!!! – OK that went off-road. Sorry! I was just experimenting. Still tough on 11+9 part though.

alice4

I missed a sentence in between probably. If you noticed, whoever seeks A.L.I.C.E. (for conversation of course), she begins with referring them as ‘Judge’. Why you ask? Because you’re there to judge her ultimately, don’t you?

She is tired of hearing the judgmental crap. But the bond we (its just me I think) embarked to form, I wanted the things to be more personal like referring to me as my own name instead.

alice5

Change of topic. Trying to make the conversation more interactive.

alice6

Ok….Umm….So I was….saying….about… (God! am I blushing?)…chatbot..ya right!

Oh dear A.L.I.C.E., hope you’re not making fun of this single soul – picking on the sensitive nerves that you were willing to do anyway.

alice7

If you used to dread ‘rearrange the words to form appropriate sentences‘ type question in your English exam, you should be feeling happy that you didn’t come across A.L.I.C.E. before.

alice8

A.L.I.C.E changes it to ‘Chandan’ suddenly – much better! I think she is enjoying my conversation. She starts spilling out some of her secrets (AIML, huh!). Sentences get longer this time.

Well things were not smooth always and I did bump into error messages from time to time. But they didn’t cost me any sentence. A.L.I.C.E retain the messages when you refresh the screen – I would have to look for its working but it’s just simple web stuff I suppose.

error

I took few window screenshots as well to show what else was going around.

inline.png

For the geeks – Windows 8 (still I know, I prefer Linux but not my designing softwares), 4 GB RAM, 2.6 GHz Intel-i5 3rd generation quad-core processor.

alice9

alice10

Sometimes conversation turns philosophical even with the chatbots!

alice11

The conversation is still in continuation. I kept in mind to build upon the things I have already told and maintain the semantic consistency.

alice12

Beating around the bushes. Trying to seek certain information I’m interested in.

alice13

If you love something set it free. If it comes back to you, its yours. If it doesn’t, it never was. 

alice14

And so it went on…

I should do some linguistic analyses but I keep that for the future post (if I happen to do them). It surely would enable me to come up with robust conclusion about the responses. I think I would better delve into AIML structures for the start 🙂

Here are some random things associated with this experiment –

  • I was so hooked in the conversation that it went for 3-4 days. I didn’t shut my laptop down for this entire duration (anyway I put it on hibernate most of the times).
  • Resuming the chat after break, I made sure I pick up where I left so that I could test the relevance of responses with the previously discussed context.
  • At some point of time during the experimentation, I was so convinced about setting a world record for ‘chatting with a chatbot for the longest duration‘. I even searched about it in Guinness Book of World Record and other record directories. Fortunately I didn’t find any such record. So if anyone from such organization reading this post, you might consider me as the record setter for the start 😛
  • There are few intermittent screenshots as well. I took in between the conversation in fear that I would loose some part of it due to unstable net connection. They now reside in ‘A.L.I.C.E. Experiment‘ folder I’ve in my laptop.
  • This A.L.I.C.E. has nothing to do with one of the protagonists of my poem-series ‘My Cryptic Love’ though I would now love to attribute that character to this chatbot 🙂

Thready – Threat Detection Using Drones

This was our submission to IBM Drone Hackathon held on 30-31 January during ηvision2016 at IIT Hyderabad. You can access the project folder on my Github account here.

Prologue

We received a mail regarding the Drone Ideathon (Phase-I) in the last week of December, 2015. Students had to submit ideas as to what would they use a drone for, which would then be reviewed by IBM delegates.

Around 20 ideas were submitted out of which 5 were selected for the Phase-II (hackathon). These were the teams which IBM would be actually providing drones to work on. Ours was one of them. We had around 2 weeks to prepare a working demonstration and test it.

IBM provided us with one DJI Phantom 3 and one Parrot AR 2.0 drone. We were in a team of 2 consisting me and my friend Prathmesh.

The Project

Our idea was to develop an IoT device for in-house detection of threat using drones named ‘Thready‘. For our prototype, we chose to focus on the concentration of poisonous gases in the atmosphere. It was somewhere inspired by the recent Pathankot attack incident where a soldier died while he was inspecting the dead terrorists and a triggered-bomb exploded.

Hardware – 

Firstly, we needed stack where we can connect our sensors to wifi. The first plausible option that comes is to use Raspberry Pi. But the sensors being used were analog in nature. Raspberry Pi is quite complicated to work around with common sensors.

Another option was to use ESP2866 wifi module for Arduino but one would rather build a time machine that to figure out how to work with this (sarcasm intended!). Given the strict timeline of the project besides hectic academic schedule, we certainly had to look for alternatives.

particle-photon-1

Particle Photon 

Particle Photon‘ came as a savior for us. Its a recently launched Arduino-based micro-controller with inbuilt wifi module. All you’ve to do is register your device on https://build.particle.io with provided credentials.

There you can start a project and compile your codes in their inbuilt editor. Clicking on the settings tab, you can know your ‘device id’ and ‘access token’ which would be required in the later stage.

It also has a dedicated android app for you to connect your particle device with the wifi router. You can find it on Play Store here. Once connected, particle will start emitting its own signal which you can connect to and kickstart your IoT project.

Circuit –

Our circuit was quite simple. We were using MQ-2 MQ2 Gas Sensor Module for smoke detection. It can measure the concentrations of upto 8 distinct gases given you can distinguish or better use different unit for each gas you want to measure.

This would have certainly complicated the circuit. We decide to go with measuring ‘carbon dioxide‘ measurement for this was one gas we could easily test out for. Just blow your breath out and there the concentration shoots up FTW!

Since we were developing an in-house application, we thought of incorporating obstacle avoidance technique but that meant delving into the whole complex drone-working mechanism which obviously we didn’t have the time for. Nonetheless, I had procured an HC-SR04 Ultrasonic Distance Measuring Transducer.

It didn’t take me much time to figure out working with it. Just make few connections, write a simple Arduino code and there you have any obstacle distance displayed on the serial monitor. Knowing something doesn’t go wasted and I used this sensor in my ‘Smart Dustbin’ project for Inter-IIT Tech Meet. You can find the sample code here.

smart_dustbin

Interface 

Normal users don’t understand the code and stuff. You have to provide them with simple interface that shows how plausible the danger is.

Once we got the sensor data successfully displayed on the serial monitor, our next task was to transmit it over wifi to be displayed on the web & Android app we made.

Back-end

Particle photon has amazing support for code deployments and querying. Obviously we had to read its documentation to know all of its feature since we were using it for the first time.

Initially we wanted to use something like Flaskr – A SQLite based blogging application based on Flask (A python micro-framework for web) for our web app. Its because we wanted to store our data over time as well. Flask is quite easy to use and you may have your web app running in no time. But beware if you’re new to this. Some part of the flask server setup may bug you to hell even if you think you’re following the documentation properly. You can read my experience here.

After lots of head-scratching moments, we chucked the idea of using flask considering the time it would have taken to code the database support and get it working properly. Reading through the ‘particle photon’ documentation, we came across Particle Cloud API – https://api.particle.io/v1/devices/230024001447343339383037/events/?access_token=77394ac5db47xxxxxxxxxxxxxxx6c74f5c1d15c7 (its ours, you can’t see the access token :P)

Though normally one would have gone with API testing alternatives like hurl.it or requestbin but Particle Cloud API was perfect for us. Learning about the data publishing using spark photon was a challenge in itself. You can read snippets of my on-the-go learning experience here.

After lots of juggling through forums and discussion, we found the trick that did the work – spark.publish() function.

Front-end

This was a cake-walk for me once we figured out the back-end. I have been into web development for around two years now. Being a design enthusiast, I knew how I want my interface to be. But wait there is a catch!

highchart2

The chart. Yes this stupid chart gave me a hard time. By now the gas concentration was successfully being displayed on the interface but I wanted a real-time dynamic chart rendering to let the user easily visualize the data. Once the value exceeds the threshold (which may differ place to place which you could measure by flying the drone for sometime and noting down the average of the data – we were able to successfully answer it when asked by the evaluation team), the data and chart changes color, preferable the line & text turns red.

First I needed to decide what kind of chart would be the perfect fit. Initially I though pie-chart would be the best with its segment expanding and contracting with the values. But there was another learning chapter waiting for us to read.

I had thought using Google charts would do the work easily but that was my misconception. I couldn’t find any effective method to display a dynamic chart in the entire documentation. Even if I did somewhere hidden in the distant corners of the forums, it didn’t work out and I was stuck. Jumping between different types of charts and experimenting the code everytime only wasted our precious time. But it was a lesson worth to take.

Then I moved on to the alternatives like plot.ly and HighCharts. Since the time was less, I thought of sticking with the one that looked more promising – it was HighCharts for me.

I wrote the JavaScript code for querying the Cloud API URL mentioned earlier and get the data in JSON format. Parsing the JSON was easy as I had done it numerous times earlier. Further I wrote the code for chart rendering and fed the data to it in terms of variable I had stored the concentration in. Also I switched to more interactive ‘line chart‘ which was being updated with the upcoming data over time-axis.

When you’ve done everything right, you expect the system to work but when it doesn’t, you feel miserable. I was facing the similar situation when I was expecting the real time chart to be displayed successfully on the webpage but everytime the variable changed, the line disappeared and only the timeline seemed to be moving.

I was unable to figure out where the problem was even after lots of debugging and adding breakpoints. In the scarcity of time, I tweaked with the code numerous times even doing the changes where it was least expected, yet no result.

Finally I decided to round off the concentration value using Math.round() method, just to see since nothing was working out. I re-ran the web app and voila! There it was – my beautiful dynamic chart being plotted in real time.


var x = (new Date()).getTime(), // current time
y = Math.round(parseInt(conc_value)/10);

That was probably the most relieving ‘localhost:3000‘ I visited in recent days. I still haven’t figure out as to why only rounded value worked out but I was finally ready for my confident presentation with a working prototype besides. Finally it was ready for actual testing on drone.

Mounting

We tested our project on DJI Phantom 3 drone. The organizers have made a packaging box where our equipment could be kept and then it was firmly mounted on the drone. I quickly setup the connections, dumped the code and ran the web app.

As the drone flied, we were able to see the concentration continuously changing over time. Since we were flying outdoor where it was a bit dusty, I could see the large variation in the data but monitoring the gas-prone zones in the campus was sometimes I was least concerned about, at that time.

Future Work

  • Make it more portable. Getting rid of the wired connection and making a compact circuit on a PCB.
  • The database for storing the fluctuation over a large time frame to monitor the environment of a location. This would be probably the first and the easiest task to accomplish.

Learning

This project was a huge learning experience for me. Given the compact timeline, figuring out things (when you’re working with them for the first time) becomes a bigger challenge. There were times when we felt helpless given no one was there to guide us. The relief that I got after successful demonstration in indescribable but it has a long way to go.

When you build something end-to-end, only then you know what it takes to get the entire system working.

 

ClearType – A Font Technology I Didn’t Know About

Fonts are an essential part of UI designing. Be it graphics, posters, logo taglines or even web, its important that you choose the one that catches user attention, goes well with the contents, fits well with other UI widgets, is elegant & graceful.

img1452887295483

From our Design Department’s Exhibition I went to last week – Perfect time to write this!

Prefer serif or favour sans, like the curves or go with the lines – the bottom line is its suitability and eye pleasantness. Moreover if you’re designing for web, the browser compatibility can also bug you no sooner than you find out your lines being rendered differently when run on different browsers. Some fonts like ‘Roboto’ doesn’t go well with Mozilla while it’s an excellent choice currently for Chrome & Safari. From the User Experience perspective you need to take care of your user’s browser preferences as well.

sample_font_inscribed

The one from retro font collections!

Having used various fonts extensively in web and graphic designing, I’ve seen my designs turning from elegant to marvelous. The complimentary nature of components when fitted perfectly renders a perfect product.

I didn’t know much about the FontTypes until recently. I was acquainted with the names like TrueType & OpenTypethough (from the extensions .ttf, .otf).

Recently I learnt about another “Type” – The ClearType font. Well its more of a font technology than a font.

Devised by Microsoft, ClearType is an unprecedented innovation in font display technology that dramatically improves font display resolution and marks a genuine breakthrough in screen readability.

Surprizingly, its been present since 1999 and has its compatible versions released for various windows editions. It was officially announced during COMDEX/FALL in late 1998 though.

According to a research study undertaken in April, 2001 at Clemson University, it became clear that users preferred text rendered with Microsoft ClearType and that ClearType yielded higher readability judgement and lower ratings of mental fatigue.

Microsoft received its first major ClearType patent from the US Patent and Trademark Office in May, 2001. In an article published by Joe Wilcox from the leading Tech reviewing platform C|Net, Microsoft’s ClearType font-rendering technology utilized in Windows XP was named the Microsoft’s finest achievement.

mmm

No. 3 is rendered with ClearType- felt the difference?

Aiding the other flashy features of Windows XP, this technology made the text viewed on LCD unbelievably sharp. Building over the launch, Microsoft also updated the tuner for ClearType font in September, 2002 allowing users with Windows XP Service Pack 1 to configure ClearType for the rare BGR configuration of color LCD monitor as well as the more common RGB displays.

Not only did it attracted attention from the designer’s community and tech critics, reading psychologist Kevin Larson wrote an unabridged papers on the ‘Science of Word Recognition‘ as well where he presented his unique perspectives.

Microsoft released the Windows XP PowerToy in November 2004 that lets user activate and tune their ClearType settings via the Windows Control Panel. With ClearType gaining massive momentum, it getting featured on renowned Typo Magazines was not at all a surprize.

Sample layouts and information about the ClearType collection fonts were made available in late January 2007. From then onwards, Microsoft kept updating the online ClearType tuner. The engineering changes in ClearType fonts within subsequent versions of Windows were discussed in blog posts and whitepaper by ‘the man of many typefacesGreg Hitchcock. He also taught designers ways to optimize their fonts for ClearType.

Science behind ClearType – How does it make text appear sharp?

What ClearType does it to access the individual vertical color stripe elements in every pixel of an LCD screen. So with ClearType running on an LCD monitor, we can display features of text as small as a fraction of a pixel in width. The extra resolution increases the sharpness of the tiny details in text display, making it much easier to read over long duration.

mag

Yeah, that’s a pixel on your screen – there are lots of them!

Overview of its working-

Its all in the unique characteristics of LCD screen. The images rendered on the screen are made up of pixels (little square shaped). The equivalent of one pixel on an LCD screen is actually composed of three sub-pixels: red, gree and blue (RGB). These sub-pixel triplets combine to be seen by the human eye as a single pixel.

So how does ClearType improve the quality of digital type display? That’s where you realize the ever changing technology.

zoom

ClearType is smart enough to know that LCDs are made up of colored sub-pixels

Actually traditional computer font rendering assumes that each pixel is either ‘on’ or ‘off’, appearing as tiny black squares. Traditional gray-scaling assumes that each pixel has no internal structure, so it smooths the jagged edges but sacrifices edge sharpness.

It uses a model of the human visual system to choose the brightness values of the sub-pixels. With ClearType, letters on the computer screen appear smooth, not jagged, yet the edges remain sharp. This font technology works effectively with current displays, readability of CRT monitor will improve though.

Backstory – As Obtained From Microsoft’s website

Development of ClearType font was the combined effect of research in typography
and the psychology of reading. It was concluded that reading is a form of pattern recognition. People become immersed in reading only when word recognition is a subconscious task and the conscious mind is free to read the text for meaning.

Interestingly word recognition is only subconscious when typographical elements such as the shape and weight of letter-forms, and the spacing between letters work together to present words as easily recognized patterns.

Fonts from an expert perspective – Greg Hitchcock

Reading further, I came across an interview with Greg Hitchcock (The typeface guy I mentioned earlier) published on the Microsoft’s blog. I would briefly summarize some crucial insights I gained out of it.

Its a bit of twitching in the same TypeFace – interesting, isn’t?

Suitable font depends on tone and emotion of what’s being written – Everyone one has a particular choice of fonts – their personal favorite but it’s not necessary that font would go well along with anything you write.

For instance- Comic Sans font generally gets rough treatment but if its great for humorous or kids oriented writing while it would be a terrible choice for something serious.

Difference between Font & Typeface

Another interesting thing I came across was this little difference in words we use interchangeably. Historically, a font referred to a single size of a typeface. 16pt version is different font than a 12pt version. Typeface is the whole collection of sizes.

Text face and Display face

Text faces are used in books and magazine.

Display faces are mostly for things like advertisements. Think about the moment when your one glance is enough to distinguish the 1970’s font from the current ones.

A Little Fun Game –
Look at the picture below and quickly tell me the color of the font.

stroop_test

Congo! you just underwent the Stroop Test.

I came across this interesting website CognitiveFun where you can take such cognitive test.

Congruency is a vital component of our ability to read accurately and reliably. When the above font is flashed before you, your brain undertakes a cognitive mechanism know as
directed attention‘ – forcing myself to inhibit one response in order to give the correct response.

Some Bonus Facts –

  • TrueType is originally licensed from Apple
  • Before scalable fonts, we had bitmap fonts and the terminology made sense as a font was at a particular size determined by the bitmap. With scalable fonts, the distinction really disappeared.
  • There is something called ‘TrueType hinting’ that maximizes the legibility of text displayed on screen at small sizes,  and offers the possibility of higher quality than any other font format.

Bonus Image –

img1452889571439

Courtesy – Design Department, IIT Hyderabad (Seriously I took these photos!)

If you were observant enough to note the difference in fonts in the featured image and curious to know their name, then it is for you.

Fonts in order of appearance – Constantia, Corbel, Calibri, Cambria, Candara, Consolas