Just thought of making a list of -webkit (Chrome, Safari) css properties that mostly affects mobile user experience – iOS, Android, etc.
Continue reading “List of Webkit CSS Properties for Mobiles”
Category: Web Development
Weighted/Biased Random Number Generation with JavaScript based on Probability
First of all what is weighted random ? Let’s say you have a list of items and you want to pick one of them randomly. Doing this seems easy as all that’s required is to write a little function that generates a random index referring to one of the items in the list. Sometimes plain randomness is not enough, we want random results that are biased or based on some probability. This is where a simple weighted random generation algorithm can be used.
Continue reading “Weighted/Biased Random Number Generation with JavaScript based on Probability”
JavaScript Control Input Field Caret Position or Move to End in Textboxes and Textareas
Long title, but then I felt like specifying parts of what I’ll be covering in this post. Anyway, so I’ll start by a not-so-common issue that some of us have encountered, which is, how to move the input caret (sometimes referred to as the keyboard cursor) to the end of an input field or a textarea on focus.
Games Physics: Basics and Implementation of Predictive (or Continuous) Collision Detection
Few days ago, I wrote a post about why time based animations are better than frame based animations. However, in animations done as a function of time, some serious problems could arise. One of them is that your regular collision detection techniques might fail if the frame rate is lower than acceptable. Your object might pass through the walls or even fall through the floor!
Time Based Animations in HTML5 Games: Why and How to Implement them
So you got into Web Based Animations or Games (using that HTML5 thingie) and chances are high that you’re relying on setInterval, setTimeout or even better – requestAnimationFrame to reflow and repaint your frames (fancy terms for rendering each animation frame). Precisely, you’re basing your animations or game mechanics on the frame rate. There’s nothing wrong with that, but let me show you a more sophisticated approach which can actually enhance all sorts of user experience – time based animations.
Continue reading “Time Based Animations in HTML5 Games: Why and How to Implement them”
Canvas Rotating and Scaling Images Around a Particular Point
Transforming objects in your HTML5 Game or Experiment requires a bit of understanding regarding how they work. The behaviour and end result is not as intuitive as CSS3 transform functions like rotate() or scale(). I could quickly show you how to rotate or scale an image with its center as the origin, but it’s going to be super useful to take an indepth look at how the entire system works.
Continue reading “Canvas Rotating and Scaling Images Around a Particular Point”
Rendering Animations with Moving Objects on Canvas
Moving objects on HTML5 Canvas is really easy. I should have written on this topic before writing on gravity but it’s never too late! Let’s get started with the basics.
Continue reading “Rendering Animations with Moving Objects on Canvas”