Animating Vegeta – The Power of CSS3 and Sprites

Check this out before you read any further.

Some time back, I googled the term “sprite”, [I tend to forget what it is (not anymore though)], and in return was presented with a fine number of them, however, my eyes were quick to notice that the very first one of the results featured a few actions of Vegeta, one of the main characters from DragonBall Z. I thought it’d be cool if I tried creating a program, a web-page to be precise where one could animate Vegeta, by merely clicking on buttons.

So well, on May 21, around sunset, i got to work. I googled and checked out a number of sprites until I finally decided on this one.

Though I had initially decided to do it purely using JS, but then it hit me, that CSS3 supports animations so why not use that?
Anyways, as soon as I began, I realized that this sprite is not very well suited to the job and thus I had no choice but to slice it up into several smaller ones, each representing a different move. I started with the ‘stance’. Made a four step sprite which initially was 176×83. And tried animating it. Still the problem that remained was that I couldn’t get it to work like I wanted it to. What was happening was that the Image would just Slide from left to right. After like an hour or two I finally managed to get it right. Turned out that the number of “Steps” I was wasnt well suited to the initial and final positions  I had defined in the keyframes. In the end, I managed to get it right. I used 4 steps and set the final keyframes to ‘-widthOfImage.’ That was it.  Now all I had to do was to create sprites for the other moves.
Next I tried the “duck-and-punch,”  which too worked like a charm with the existing code. But as I progressed, I realized that the size wasnt well suited to all actions. Some required a broader frame, while some (initially) required more than 4 steps, and that was when I somehow messed up the keyframes and wasted another hour fixing them. In the end, I decided to 4 steps where possible, (I actually ommited some of the images), and to use a 300×87 canvas, where each frame was 75×87.

Tried them all one by one by replacing the url in the code. All worked like a charm. Now I moved on to the ‘kamehamehaa'(s). The problem with these was that both the sprites were of 6 steps, so I had put them off for later. However the number of steps didnt make much difference except for the fact that I had to update the number of steps in the CSS , and resize the box everytime.

Now to the UI. What actually happens is that when you click on any of the buttons, it calls out a JS function which replaces the URL of the image with a different one, and thus a new sprite replaces the existing and thus is seen to perform a different action. Also, the function restores the original ‘stance’ sprite after the animation has completed one cycle.
As for the 6-step Kamehamehaa(s), I wrote a different function and keyframes. Now this function though worked in a similar manner, it would update the animation attribute (keyframes and steps) along with the image, and once completed one cycle, it’d restore the original keyframes and image. That was all.

As for the Energy bar, I declared a variable, initially equal to 50. Every Kamehameha decreases it by 10, while the rest increase it by 5. The Bar is updated every time the variable is updated, it’s width being directly proportional to the value of the var.

 

Google to be the “real-life version” of SkyNet?

Google, that started as a search engine that gained global popularity, and parallel to searching, the only thing it offered was a home page light-enough for you to test your internet connection, but that doesn’t at all mean that it wasn’t awesome enough them. A whole lot of people owe their success to it, as it helped numerous youngsters with their homework and school projects, and thus if they are successful now, Google might have contributed a whole lot into their success. According to it’s wiki article, Google started in 1998, but it has now come a long way from being just a search engine.

Then came other products. Gmail, in 2007 or 8, (and something by the name of Google Wave followed too , but it wasnt very successful,)  which soon became a rival to Hotmail and YMail. Well, OK, Hotmail isn’t the primary thing of Microsoft’s. MS was the first software company, it brought computers to the world to be consumed by normal people and we respect that. Who cares if Bing never got as popular as Google, MS isnt all about search engines either.  As for Yahoo, Okay, Google beat their search engine, but loyal ymail lovers still like it, and well their messenger is still respected more than Google’s talk.

Ah yes, Google Talk eh? Well, this one, a messenger would fall in the same category as Windows Live messenger and Yahoo’s messenger, however, once again, Not very successful. Earlier this year, It was renamed to Hangouts, and perhaps a few newer features were introduced, like using phone numbers to find friends e.t.c. The kind of thing Viber and WhatsApp are famous for, but still, consumers like me prefer sticking to the older, and original ones, i.e. the two mentioned above.

Then there’s the Google Drive. Cloud storage, and rival to Microsoft’s Skydrive. I like and respect both, and both have their pros and cons and in my opinion, both are equal on the whole, plus again, MS isn’t famous for being a provider of cloud storage. Google Docs, an online office productivity suite, the MS counterpart for which is the Office online. Both are great.

Then there’s Google+, a Social network by google, that perhaps isnt very popular as Facebook and twitter, yet the 3rd in terms of preferrence. This can be proved by the fact that most websites, for contact, or upvotes/reccommendation provide three buttons. One from Twitter, one from Facebook, and another from Google+. But still, not exactly on the top eh? Another is Picasa, which is a photosharing cloud-storage, and perhaps might be considered a rival to Yahoo’s Flickr. However, from what I know,Flickr is more popular.

Youtube, the primary place on the web to look for Videos too is owned by Google, though perhaps not started by them, but it’s improving a whole lot, and one cant say that Google didnt contribute to it.

AngularJS, a Javascript Library and framework, Google’s, and rivals a number of others that fall in the similar category and is certainly gaining popularity and quite some fan base in  the world of developers. The Google App engine provides free hosting for web apps, rather like Heroku. And that’s not all, The Google Apps are a set of productivity tools, for businesses and individuals, that help with setting up and managing websites. Then the Google Developer tools are good and the Google Analytics Tools help a lot with SEO, and keeping track of site traffic. Oh and Blogger is a great place for normal(s) to start a blog.

Google Maps, rival to iPhone’s maps, and the primary GPS service of most users nowadays, and it’s streetview is known to have captured some seriously interesting stuff. Google Earth is a similar product but it provides an interactive, fun interface where you can explore the earth. Similar products are Google Mars, Google Moon, and Google Sky.

But that’s not all, these products dont even contribute to perhaps half of Google’s fame. There’s more. In 2008, Google launched Android. A Linux based, free and open-source Operating system for Mobile devices, and the first ever android device to apppear in the market was the HTC Dream. Android gained popularity real quick, and especially with the release of the Galaxy Y and other Galaxy devices, it soon got ‘fan-ned’ by a large percentage of the world, and became a rival to iOS. Android devices are manufactured by the leading company of the present, Samsung, Sony, and HTC, and of course, Google’s own Nexus devices, one of which is launched every year. Could Android kick iOS out of the market? maybe if they play well, as they are in a position to.

The same year, they’d lauched Google Chrome. The top web-browser of the present, that soon became another alternative to internet explorer alongside Mozilla’s Firefox. Well, Internet Explorer’s had it’s day, still respected.

As Chrome got popular and computing moved closer to the cloud, Google seized the chance and launched Chrome OS. Another Linux Based OS, damn lightweight, and this time for slightly more desktop devices. The idea behind Chrome OS was something like this. Every day, millions of users boot into their computers, and once it’s fully loaded, the double-click the icon of their web-browser and start off with whatever they want to do, but dont really do much outside the browser, so they are more or less logging into their OS just to be able to use the browser, so what if your browser was your OS?
Chrome OS’s source code is publicly available, however, it isnt available for download and comes preinstalled in Chromebooks, that are laptops officially built for the OS.

A few days back, Google announced the release of a Chrome Apps launcher for MacOSX. The Chrome Apps were originally a feature offered by the browser. More like extensions perhaps, but slightly more ‘applications’. They are also well integrated into the Chrome OS of course and are the main software for Chrome-OS. The thing about them is that they are totally on the web, they dont have to be installed. All you need is a launcher, which could be either the launcher itself, or the ChromeOS (which has a similar launcher of course) or the chrome web browser.
But they released the launchers for MacOSX and Windows? And I also read that apps are being made for Android and iOS too, however i couldnt find an Android app on the playStore… not yet.

So, as these launchers are out, a number of people might try these, and some, with high speed connections and normal use, might get too comfortable with their apps, that they are gonna try out when they try the launcher, and when they do, the apps would get popular and some users’ use might not extend beyond using these apps, and this is how some might consider switching to Chrome OS itself.. + chromebooks are real cheap and thus attract buyers.

Android is becoming like the primary OS for smartphones, and soon their might come a time, when, like I posted before, they might merge the two projects.
Merging would result in a whole lot of improvements in ChromeOS, and then people might actually start using it, if it has the integration that i look forward to seeing, and using.

Just look how Google is expanding. Started as a search engine and now its the leading company of the web, and with the passage of time, It’s trying on every field or bit there is to IT. Then that Google glass. They can actually monitor, and see exactly what you are doing using that thing. People use gmail as their primary email, Drive to store data, buy domains and hosting from google, walk with a pair of spec on their noses that too was developed by google and records what they see.

It’s like WE the CONSUMERS are being CONSUMED by technology, when it should be the other way round. If anything close to Skynet exists or ever will.. It’s Google.

 

Where’s the ‘Innovation’?

Two days back, Sony unveiled its Xperia Z1 smartphone, that packs a 2.2Ghz Quad-core processor and a 20.7MP camera, and the same magnificent display, perhaps that’s a little larger too, and that’s the point. Every now and then, a new phone comes out, and it’s pretty hard to choose the best among them, as the competition is tough, but what exactly is it that a day-newer smartphone carries? A slightly better processor? perhaps an extremely high-res camera? or a water proof display? Or…Just a larger screen.

If this is what makes one phone superior over the other, then it’s no competition, considering that one carries better hardware, and thus is bound to perform better. Comparing a dual-core HTC with a Quad-core Samsung, or comparing the Water-proof Xperia with a normal Huawei, or a 41MP Lumia with any camera-ed device is similar to comparing a tank with a Vespa (no offence meant).

When Steve Jobs first introduced the iPhone, in 2007, it didn’t pack a Quad-core either, but it really hit the market, and people fell in love with the idea, cause it was one. The idea behind the iPhone wasn’t to sell Dual-cores or water-proof phones, or integrated cameras,  or even fancy touch screens, but it was the Revolutionary UI that set it apart from others. If you dont get it, simply watch the video,( it’s available on Youtube, so i wont bother sharing a link.)

And soon, support for something similar was ported into Android, which arrived a bit earlier than the iOS, and yet, the latter is considered to be superior, (though personally, i love both.) That Android is what powers up most of todays’ smartphones, and the best of which is itself based on Steve Jobs Revolutionary UI.

True that Samsung introduced the ‘smart pause’ and the ‘eye focus’ is another rumored release, but even these two, though a huge leap, aren’t exactly needed, nor are they going to make life better for us.. They are simply building up on the same thing and adding to it, whatever they see, but this won’t do. They are supposed to be building mobile devices but going on the wrong track by enlarging the screen with every release. Similarly, it’s good for the phones to carry a camera, but the phone is not supposed to be a camera. The eye tracking thing of Samsung’s, is in itself, good, but do we really need it? though it sounds pretty simpler, it might put strain to the eyes, and it might be a bit error-prone, and what’s the point of it being in a phone? 

The floating touch / motion control, rumored to be in some model of Xperia, and the latter in SmartTVs, is pretty advanced too, but we dont need all this in our phones.. People prefer simplicity. Microsoft could have introduced it in their windows phones ages ago if they wanted too, seeing as we’ve seen something similar yet better in the XBox, but they dont have to or need to. The Simple UI of the Windows Phone 7+ is an example, of how they are keeping it simple, and how people are loving it.

The MotoX introduced the talk to your phone thing, and that was kinda something new, and so was the shake to open camera, though they are minor improvements, but do fall in the category next to the the Huawei’s Screen Temperature, HTC Zoe, and the Samsung’s counterpart to Zoe.

Nowadays, all improvements that are made to the smartphones are enlarging the screen or making it persistent, better RAMs or CPUs e.t.c., or perhaps in terms of better software, but it’s still the same smartphone. Where’s all the creativity, the innovation? Are they really running out of ideas?