Poisson Disk Sampling This article originally appeared in Dev.Mag Issue 21, released in March 2008. One way to populate large worlds with objects is to simply place objects on a grid, or randomly. While fast and easy to implement, both these methods result in unsatisfying worlds: either too regular or too messy. In this article we look at an alternative algorithm that returns a random set of points with nice properties: the points are tightly packed together; butno closer to each other than a specified minimum distance. Figure 1 shows an example of such a set, which is called Poisson-disk sample set. Poisson disk sampling has many applications in games: random object placement;sampling for graphics applications;procedural texture algorithms; andmesh algorithms. In this article we will look mostly at object placement and briefly at texture generation. Figure 1 Implementation There are several algorithms for producing a Poisson disk sample set. Here are the details: Here is how all this look in pseudo code: Figure 7
JQuery for Beginners Download source - 858 KB Introduction jQuery is a JavaScript library which has a wide range of actions such as event handling, animation, HTML document traversing, and AJAX interaction for web development. jQuery simplifies JavaScript programming. $(document).ready Method The document ready event executes already when the HTML-Document is loaded and the DOM is ready, even if all the graphics are not loaded yet. $(document).ready(function() { alert("document is ready"); }); Selectors jQuery provides a simple way to select single element or group of elements. Sliding Effect jQuery provides three methods to show or hide elements in sliding behavior. SlideDown(speed, callback): This method gradually increases the height of the elements, from hidden to visible. All three methods has "Speed" and "callback" parameters. slow normal fast milliseconds, e.g., 100, 500, 1000, etc. The callback parameter is the name of a function that executes after the function completes. Sliding Example Fade Effect History
How to Use Perlin Noise in Your Games (Originally appeared in Dev.Mag Issue 20, released in February 2008.) Perlin noise is the foundation of many procedural texture and modelling algorithms. It can be used to create marble, wood, clouds, fire, and height maps for terrain. Edit 19 June 2011: The examples were originally given in pseudo-code. Edit 19 May 2012: I always thought the cloudy noise described in this article is called Perlin noise. Real Classical Perlin noise, and simplex noise, can also be combined, just like the “smooth noise” is combined in this article, to give cloudy noise. Implementation Written in its concise mathematical form, the Perlin noise generation seems daunting, but it is actually easy to implement. Generate a number of arrays containing “smooth” noise. That’s it! Figure 1 Generating Smooth Noise First, you need to create an array with random values between 0 and 1. The following pseudo C snippet shows how the kth octave is generated. Note that the line: is not the same as Blending the Arrays Textures
Preparing Yourself for Modern JavaScript Development There is a lot going on in the JavaScript world these days, both in and out of the browser. Talk about script loaders, client side MVC frameworks, minifiers, AMD, Common.js, Coffeescript, can quickly get your head spinning. And for those people who are completely immersed in that world, it can be easy to forget that the vast majority of JavaScript developers today haven’t heard of any of these tools, and in fact, they likely aren’t even equipped to try these tools. This post is going to be an attempt to simply address some of the low hanging fruit out there, and try to bring together a few different concepts that a developer should understand before they go out and try to tackle something like Backbone.js or Ember.js. Once you understand most of the concepts in this post, then you can go out and approach more advanced JavaScript topics with a bit of confidence. Modules It is a big name, but the implementation is very simple: Namespaces This could also be written like this: Wrapping It Up
Getting More out of Seamless Tiles We have used tiles to decorate our living spaces for more than 4000 years . Tiles have several properties that make them attractive for use: they can be mass-produced; they are easy to build with (because of their geometric properties); and combinations of tiles lead to a huge number of decorative options. Early game makers recognised that these advantages of tiles also apply to tiles in computer graphics, and using tiles was (and still is) a popular way to make game graphics. In computer terms, here are the advantages of a tile system: it is efficient, it is easy to program, and a few tiles give you a huge number of possible game maps. The last point is really the one that makes tiles shine, and it really comes to its full with procedural content generation. But tiled games can also suffer from some defects: the geometric regularity of tiles might be less appealing than organic design; and the repetition can be jarring. Tiles Some Tile Basics Grids Penrose tiles A Few Definitions Symmetries Blur
2008 - A Year of Awesome JavaScript Games It's been a great year for JavaScript games. It looks like DHTML and canvas-based games are now capable of taking over some of the areas where Flash used to dominate. Many people have been building remakes of classic video games like Super Mario, Pac-Man, Breakout, Space Invaders, Bomberman or T&C Surf Designs. Others took the old arcade traditions and applied them to their own ideas, giving us cool games like Matt Hackett's Spacius, Mark Wilcox's Invaders from Mars, VertigoProject's RedLine Racing or a twist on the classic Tetris game. We've even seen some roleplaying games, like the very cool Tombs of Asciiroth or the more graphical CanvasQuest by Andrew Wooldridge and the Prototype based ProtoRPG by Pierre Chassaing. 2008 also saw a few libraries for JavaScript / DHTML game development pop up, most notably GameJS (pictured to the left with its demo game, Jetris) and GameQuery, the latter being an extension to the popular jQuery library. Demos Emulation Graphics Audio Odds and ends
Bézier Curves for your Games: A Tutorial (Image source) We all know what a curve is. Here are some examples. A Bézier curve is a type of curve that is easy to use, and can describe many shapes. In games, Bézier curves are sometimes useful to describe paths: the racing line in a racing game, or the line in line-drawing games such as Flight Control, or the looping butterfly that enlivens an RPG. Bézier curves are popular because their mathematical descriptions are compact, intuitive, and elegant. In this guide, I give you the instructions necessary to implement algorithms for using Bézier curves in your games. Mathematical Description Let’s start with the mathematics. The value t can range from 0 to 1. Here is an example of the simplest type of Bézier curve, a line-segment: [x, y] = (1 – t)P_0 + tP_1 This is shorthand notation for the two equations that give the coordinates separately (see Vector Fundamentals): x = (1 – t)P_{0x} + tP_{1x} y = (1 – t)P_{0y} + tP_{1y} The points P_0 and P_1 are the control points. Here is the formula: Cases
oCanvas - Object-based canvas drawing Bézier Path Algorithms In the article Bézier Curves for your Games: A Tutorial, I introduced Bézier curves and Bézier paths. In this tutorial I provide some algorithms useful for working with Bézier curves: determining the length of a piece of curve; interpolating a set of points with a Bézier path; and reducing a large point set to a smooth Bézier curve. (Image by snuffyTHEbear). Calculating curve length Assuming that the line segments we use for drawing are a reasonable representation of our curve, we can estimate the curve length by summing the lengths of the segments. A more complicated strategy is necessary when we need the length of only a part of the curve, and not the complete curve. First, we must cache the accumulative length of segments when we update the drawing points. Then, we can use a simple subtraction to find the length of the piece of the curve (assuming, for a moment, that we need it only between points that coincide with the drawing points). Note that we subtract 1 from the smaller index.
Handling select box (drop-down list) in a PHP form This tutorial will show you how to add select boxes and multi-select boxes to a form, how to retrieve the input data from them, how to validate the data, and how to take different actions depending on the input. Select box Let’s look at a new input: a “select” box, also known as a “drop-down” or “pull-down” box. A select box contains one or more “options”. Each option has a “value”, just like other inputs, and also a string of text between the option tags. This means when a user selects “Male”, the “formGender” value when accessed by PHP will be “M”. The selected value from this input was can be read with the standard $_POST array just like a text input and validated to make sure the user selected Male or Female. It’s always a good idea to have a “blank” option as the first option in your select box. ( For a generic, easy to use form validation script, see PHP Form Validation Script ) Multi-select Suppose you want to present a select box that allows the user to select multiple options.