The most amazing idea has hit me,
but first, I need to be the CEO of Microsoft.
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.
Real-life Transformer
A Street Performer, dressed up rather like BumbleBee.. He actually Transforms into a car too…
Knock Knock
*
Rings a bell*
In life, you either adapt or perish.
That is Evolution.
Down for just me or everyone else?
Use isup.me to find out.
Villains aren’t born
They are made.
7 minutes well spent
This is how I passed the time when I unexpectedly got disconnected from the internet.
W: Duplicate sources.list entry [FIXED] [Ubuntu]
Okay, so ever since I upgraded to Ubuntu 14.04 through the liveCD, i hadn’t once been prompted to update stuff. This seemed unusual to me as I used to get updates every now and then, and then the fact that I hadnt upgraded from 13.04 until right after the LTS was launched and the support for Raring had already been cut off. Also, the fact that I had aborted the installation before the upgrading process had completed.
Still, after a fair amount of days had past, last night i booted it up and ran the sudo apt-get update command. It started fine but then it would get to a part where it would get stuck for several minutes and then would display several occurrences of the same error:
W: Duplicate sources.list entry http://xxxxx.xxx.xxxx xxx/xxx xx(x/x/x/x.x)
Pardon the X’s. The former part of the error is what matters. So, the first thing everyone does is a google search, and the best thread I could find on the subject was this one. I tried creating a new sources.list file after backing up the original just like it says there, and tried again. Still got the same error, so I searched again and this time I used slightly different keywords. Landed on a site that suggested checking the “other software” tab in the ‘software and updates‘ settings for duplicates. I checked and found that the “Canonical Partners” entry was recursive. I removed one and tried the old command again. And still, it didn’t make any difference.
Then I tried the “Y PPA Manager.” It actually has a tool that is supposed to search for and remove duplicates. Even that didnt work, so I decided to manually look for duplicates in the file.
The file wasn’t a pretty sight, so the first thing I did was to eradicate all those “comments.” which left me with a fine list of sources. (sudo gedit /etc/apt/sources.list) Next thing, I looked for duplicates. e.g. if there was a line that said:
deb http://xxx.xxx.xxx xxx xxx main restricted
then there shouldnt be one that says:
deb http://xxx.xxx.xxx xxx xxx restricted
since the former includes both “main” _and “_restricted.”
Since I wasn’t too sure of anything, I merely “commented” the lines that looked suspicious. (All you gotta do is add a “#” at the start of the line.) Once done disabling all possible duplicates, I saved the file and re-ran the update command. This time it worked!
However, later on i noticed that the “Canonical Partners” repo had disappeared from the list present in the “other software” tab. This I then manually added to the sources.list. Just paste the following lines:
deb http://archive.canonical.com/ubuntu trusty partner
deb-src http://archive.canonical.com/ubuntu trusty partner