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.

 

Flappy48 – Combining “Flappy Bird” and “2048”

Flappy bird and 2048, two of the best games if the year, in terms of their rate of going viral, though totally different in themselves, have been combined into Flappy48.
The objective is to keep joining the numbers, just like in the game 2048 and eventually reach the 2048 tile, while at the same time, avoiding the obstacles. The obstacles being vertical columns, rather like those green pipes in flappy Bird.
You start off with a two, and as you flap, you collect more numbers, usually 2s… This would go on until you reach the 2048 tile.
The game is based on the unity engine. You can play it online, or download it on your android, though the web version would require you to install the Unity Web Player.
The game seems finely developed. The theme and scheme is similar to that of 2048, with all solid-ly applied shades from yellow-red.
The idea itself is great. At least better than the other pointless clones of flappy bird like flappy doge and shit. At least it brings something new.

 

Connect to the Internet via a Network Bridge [Windows]

You’ve got 2 computers at your place. A nice laptop, and a desktop that’s deprived of a wireless adapter. The laptop connects to the internet through the router, to which it wirelessly connects, however the PC has to do without internet since the router’s a bit too far away from the computer for a wired connection. 

In such a case, you might wanna consider (or might already have unknowingly) going for a network bridge. The idea is that you connect your computer to the laptop via an ethernet cable,  and the laptop to the router (WiFi). So in simple terms, you are connecting to the internet through the laptop which is connected to the internet.

But it’s not as simple as simply plugging in a cable. Some configurations have to be made, so here’s what you can do:

Open the “Network and Sharing Center” on your Laptop, and click on the “Change Adapter Settings” link. Select/Highlight both the Wireless and the Ethernet adapter, right-click, and click on “Bridge Connections.”
Now sit back and relax while Windows sets up the bridge and once done, check if another icon appeared among the adapters, representing the “Bridge.” Also, you might wanna check if both the two adapters are part of the Bridge. It’s pretty simple and all you gotta do is see whether or not it says ‘bridged’  next to enabled on the adapters’ icons. If either of them doesnt, right-click and select “Add to Bridge.”

Before you proceed, on your laptop, fire up CMD, and type in “ipconfig /all”, Note down the values it returns for “IPv4 address”, “Default Gateway”, “Subnet Mask” and “DNS Server.”

Now the Client-side configuration. On the other computer, go to the Ethernet Adapter’s IPv4 properties; check “Use the Following IP address.” Fill in the ‘Subnet Mask’, ‘Default Gateway’, and ‘DNS Server’ fields with the values you previously copied after running the ipconfig command on your laptop. However, in the IP Address field, add 1 to the last three digits, so that e.g. 168 becomes 169. As for the ‘Alternate DNS Server’ field, add 1 to the last digit just like you did for the IP Address. That’s it; check “Validate Settings upon exit”, click “ok”,”ok”,”close.”  After a few seconds, the other computer would be connected to the internet.

 

How to Assign a Static IP to on Windows Computer

A Static IP differs from a Dynamic one in the sense that the latter changes with every router reset, while the former always stays the same.

To change your IP to a dynamic one, follow these steps:

  1. Fire up CMD, and type in “ipconfig /all”
  2. Note down the values it returns for “IPv4 address”, “Default Gateway”, “Subnet Mask” and “DNS Server.”
  3. Open Network and Sharing Center (quickest and simplest way is to right-click the network icon in the system-tray and clicking on the link therein.)
  4. In the sidebar on the left, click on the ‘change adapter settings’ link.
  5. Double-click on the icon of whatever adapter you are connecting to the internet through.
  6. A window would pop-up. Right in the centre of the box, would be a list of items that the connection makes use of. Look for “Internet Protocol Version 4(IPv4)” in the list; select it; click properties.
  7. Another box would pop-up, but this one’s the last in the row. Now this step is where you make the real changes, but before you change anything, check if the “Use the following IP address” radio button is already checked, and if it is, quit straight away since it’s already static. However if not, then do check it.
  8. At least three of the previously disabled input fields would now be enabled. Fill the fields with the details you copied from the results to the ipconfig command. The last bit of the IP Address is variable and you can give it any value you wish, however, copying the existing would do the trick too.

That’s it you are done.

 

Printing 2014 using a JS code free from numerals [Explanation]

Came across this thread on stack exchange. The challenge was to write a code, using whatever language you want, that would print the number 2014 to the console, without using a single numeral in the code. The person to post the code with the least number of characters wins.

After scrolling a whole lot over a number of Befunge codes and all, I came across a JS code, where the guy had said “Using pure-Math only..”, and he’d posted two codes, one used some type-conversion while the older version  was like in plain JS. This:

m=Math;p=m.pow;t=true;++t+m.floor(p(m.exp(m.PI),t))*t*t++-p(++t,t--)/--t

Since the guy had written that the code was pure-math, I decided to give it a closer look.
As I was going to try it out, I opened another tab, and in the console, I pasted his code. It did really print out 2014, but how? It’s been ages since I even printed my own name in JS, so figuring out the code took me quite a while.
In the address bar i typed “data:text/html, <html contenteditable>” to make it editable, as i wanted to make notes while trying shit in the console.

So, the first thing I did was add a little whitespace to the code and make it slightly more presentable.The code is basically 4 lines, should i say? Notice the three semicolons? yes, they ensure that the code wont screw up if you give a line break right after the semicolon.
The first bit is “m=Math”. This the guy did simply to save space and perhaps for his own ease. Math.function() is the syntax for performing and implementing in your code various mathematical functions, rather like the Math module in Python. Followed by “p=m.pow”, and “t=true.” m.pow is his code’s version of Math.pow(x,y), which sets the index of parameter x to y, so Math.pow(2,3) would be equal to 2³. This too was merely to save space. The t = true could be confusing for some. That’s when JSs automatic type-conversion comes in handy, (True = 1; 0 = False). So “t-true” sets “t=1.”

Now the main expression:

++t+m.floor(p(m.exp(m.PI),t))*t*t++-p(++t,t--)/--t

The ++t sets the variable t= t+1. I’ts the same as t += 1 in Python. You might have noticed that the code also contains “t++“, so what’s the difference between the two?
t++ increases ‘t’ by 1, but does not implement therein. Means if the code is t=3; t++*3; The first bit set’s ‘t’ equal to 3, and in the second, t is multiplied by 3 while at the same time increased by one. ++t is slightly different. It increases and implements right then. So ++t*3 would result in 9 not 6.
Then the m.floor function is used to round off a number to the last integer. So 5.9 would become 5. Math.exp(a) results in 10ª, while Math.PI is a constant, which of course is equal to 3.141592653589793.

That’s pretty much all the functions explained. After starting with the very deepest bracket, and working my way out to the end, I ended up with the following expression that’s equal to ‘2014’, and is like a simplified version of the original code. this:
2+(1070*2-Math.pow(4,4)/2).

To see how I got there, here’s a copy of the page on which I was making all the notes.

 

Clink

I was browsing through dribbble (I dont really do that very often), when I came across this. Since the animation wasn’t really running well, I moved on to reading the description (response by the designer himself to be precise), at the bottom of which was a link to the “full-video.” I followed, but after watching only part of it, I again moved on to the description, and followed the link therin, and that’s when i fully understood what it all was about.

Clink is actually an app, that allows you to have drinks together, while not being together at all. Here’s an example, it’s your birthday, and you want to treat your friends to a drink. You’d open the app and send a clink to some bar (bars have to create clink accounts), that acts as a token, carrying details of whatever drink you are offering your friend, and of course you have to pay right-then too, using PayPal.

Though I myself might never use it, I do really appreciate the developers for their effort. The idea or concept behind the project isn’t bad either, and especially, nowadays when the birthday-guy has to treat the wishers (or they’d force him into doing so; no escape), this might come in handy..

 

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.

 

My first website

Not much of one. More like the very first attempt where I simply Googled something like “create a free website”, and ended up on Jigsy, which was then called ‘Viviti.’
Here, it carries naught but my name. Blame the power outage, for I was intending to add a whole lot of flash content.
I did build on it a lot afterwards but offline..

 

Google Nose

Ages ago, many of us noticed the addition of a strangely catching tab on Googles pages. Some ignored, with the presumption that it’s another new product by Google, while some investigated.
The idea, as it said on the Google Nose’s home page was that users could actually sniff stuff they search for. An example they themselves gave in a screenshot was “wet dog.” As you click on the Nose button, it’d instruct you to bring your nose close to the screen and sniff, and when you do, the screen would go all frosty at places, but you won’t even get a whiff of what a wet dog is supposed to smell like, cause the whole Google Nose thing was nothing but an April fool joke!

 

Bitcoin Thefts Surge, DDoS Hackers Take Millions – Slashdot

Bitcoin, the online currency, P2P money, which was first introduced in the year 2009, and the idea behind it was to introduce a currency, unniversal, for e-commerce, perhaps the first of it’s kind. Users create account and get wallets, where they store their money, and some form of these wallets can also be downloaded to your computer and mobile devices.

On the first of December, 2013, the site was attacked by a group of hackers that did manage to get their hands on a whole lot of money.

 

Tofu

Tofu, @tofu_product, is a Twitter account, that seems to have a thing for confusing tweets, and following General public.
Actually, it is supposed to be a bot. The moment you follow him, he’d follow you back, and he’d go through your tweets, make something out of them, and tweet it to you.. sounds stupid eh? But that’s more or less like what happens. A Tofu tweet normally doesnt make much sense.
Do give it a try, find him on Twitter and follow him. He’d follow you back instantly. Wait for another few minutes and he is bound to tweet something to you..

 

Wordo – The Only Truly Free Dictionary on the Web

I am a student, and every now and then I come across a term too complex for me to understand, (or perhaps not too complex but alien,) and thus I have to Google things a lot, and half the time its such terms. The results would of course direct me to some other site, and some of them would have stupid lag-gy popups, while others with flashy ads or too Bland an interface.

Wordo is free from all this. The interface is really clean and only that which is required is on the page. No ads, no popups, no surveys nothing to distract you, instead a huge mature font to provide maximum readability. Apart from that, the simplicity of the interface also ensures minimum lag.

To sum it all up in a single sentence, Wordo is a true dictionary, on which, the user’s activity does not extend beyond anything that he isn’t willing to do. Give it a try and you’d know…

 

GIMP – The free alternative to Photoshop

gimp28

Not everyone bothers to research on the subject, but almost every one of us comes to think of it. Photoshop truly is one of a kind; at least what most fans say, and satisfied with it, no one bothers to look for an alternative. However, it so happens that PS aint free, and that can be a bit of a problem, seeing as most people just need it as a side software, and arent exactly graphic designers, and thus to them, PS is not at all worth the money.
So they dont have much of an option but to use the trial, or pirate it.But there are those who dont feel too good about Piracy, or maybe they just dont wanna go for pirated software, OR maybe they think that pirating, the PROCESS, is not worth the time and effort or is a bit too taxing, and thus they prefer going for an alternative.The best Photoshop Alternative i ever came across, is the Gnu Image Manipulation Program, mainly known as GIMP. GIMP has almost all the features of PS, at least most of them, or more like all that know of. But well im no expert, nor much of a Graphic designer, so I wont make a good judge but still, the tool is definitely worth a try for those who are looking for an alternative to photoshop. Oh and I’d like to add that its UI can be a bit confusing for PS users, as its totally different from what i expected, but it works too, just different 🙂 .