It’s a pencil-and-paper game for two players, O and X, who take turns marking the spaces in a 3×3 grid, usually X going first. The player who succeeds in placing three respective marks in a horizontal, vertical, or diagonal row wins the game. (source: Wikipedia).

But most of all, it’s a good playground to apply artificial intelligence for four reasons:

It’s a perfect information game: all players know all moves that have taken place.

It’s a sequential game: when a player moves, the other player waits. And have the waiting player see the moves of the playing one.

It’s a zero sum game: if one player wins, the ohter loses. No cooperation.

It’s a non-random game: there isn’t any randomizing element such as dices, dealing of cards, and so on. Non-random games are pure strategy.

How many board configurations?

Now, we need to know how many boards configurations can exist in a Tic Tac Toe game. We’ll do it using php. We’ll code an empty board like a string with nine points (.........). Every point represents an empty cell. Then, with a recursive function, we’ll generate all possible board combinations, assuming the first player puts an X and the second player uses the O.

Here it is the script:

<?php
 
function place_move($board,$player,$turn){
     global $boards,$symbols;
     for($x=0;$x<9;$x++){
          if($board{$x}=="."){
               $app = $board;
               $app{$x}=$symbols{$player};
               $boards[substr_count($app,".")]++;
               place_move($app,1-$player);
          }
     }	
}
 
$symbols = "XO";
$boards=array();
 
$start = microtime(true);
place_move(".........",0);
$end = microtime(true);
 
foreach($boards as $empty_spots => $values){
	echo "<p>Combinations with ".trim(9-$empty_spots)." symbol(s): $values</p>";
}
 
echo "<p>Elapsed time: ".trim($end-$start)."</p>";
 
?>

And the result is:

Combinations with 1 symbol(s): 9 – easy to see, in an empty board you can place an X in any of the nine spots

Combinations with 2 symbol(s): 72 – for each of the 9 different combinations with one symbol, you can place a O in any of the remaining eight spots. 9*8 =72.

Combinations with 3 symbol(s): 504 – for each of the 72 previous combinations, you can place an X in any of the remaining seven spots. 72*7 = 504.

Combinations with 4 symbol(s): 3024 – 504*6

Combinations with 5 symbol(s): 15120 – 3024*5

Combinations with 6 symbol(s): 60480 – 15120*4

Combinations with 7 symbol(s): 181440 – 60480*3

Combinations with 8 symbol(s): 362880 – 181440*2

Combinations with 9 symbol(s): 362880 – 362880*1. Same number as the combinations with 8 symbols, because when there are 8 symbols in game, you can only place an O in just one spot.

Elapsed time: 6.0569689273834 – six seconds to calculate 986409 different combinations. So the total possible board configurations are 986410, including the empty board.

According to these results, we can say the number of possible combinations in a board with n symbols is 9!/(9-n)!.

How many REAL board configurations?

Obviously there’s something wrong with this script because it does not consider when a player wins. If a player wins, the game is over and there are no more moves. So a lot of board configurations are impossible to reach.

So let’s modify a bit the script to check for victories and the number of necessary moves to win:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54

<?php
 
function place_move($board,$player,$turn){
     global $boards,$wins,$symbols;
     for($x=0;$x<9;$x++){
          if($board{$x}=="."){
               $app = $board;
               $app{$x}=$symbols{$player};
               $boards[substr_count($app,".")]++;
               if(!winning_board($app)){
                    place_move($app,1-$player,$turn+1);
               }
               else{
                    $wins[$turn]++;
               }
          }
     }	
}
 
function winning_board($board){
	if	(($board{0}!="." and $board{0}==$board{1} and $board{1}==$board{2})or
		($board{3}!="." and $board{3}==$board{4} and $board{4}==$board{5})or
		($board{6}!="." and $board{6}==$board{7} and $board{7}==$board{8})or
		($board{0}!="." and $board{0}==$board{3} and $board{3}==$board{6})or
		($board{1}!="." and $board{1}==$board{4} and $board{4}==$board{7})or
		($board{2}!="." and $board{2}==$board{5} and $board{5}==$board{8})or
		($board{0}!="." and $board{0}==$board{4} and $board{4}==$board{8})or
		($board{2}!="." and $board{2}==$board{4} and $board{4} ==$board{6})){
 
			return true;
	}
	else{return false;}
}
 
$symbols = "XO";
$boards=array();
$wins=array();
$c=0;
 
$start = microtime(true);
place_move(".........",0,1);
$end = microtime(true);
 
foreach($boards as $empty_spots => $values){
	echo "<p>Combinations with ".trim(9-$empty_spots)." symbol(s): $values</p>";
}
 
for($x=5;$x<=9;$x++){
	echo "<p>Wins in ".$x." moves: $wins[$x]</p>";
}
 
echo "<p>Elapsed time: ".trim($end-$start)."</p>";
 
?>

And the result is:

Combinations with 1 symbol(s): 9

Combinations with 2 symbol(s): 72

Combinations with 3 symbol(s): 504

Combinations with 4 symbol(s): 3024

Combinations with 5 symbol(s): 15120

Combinations with 6 symbol(s): 54720

Combinations with 7 symbol(s): 148176

Combinations with 8 symbol(s): 200448

Combinations with 9 symbol(s): 127872

Wins in 5 moves: 1440

Wins in 6 moves: 5328

Wins in 7 moves: 47952

Wins in 8 moves: 72576

Wins in 9 moves: 81792

Elapsed time: 4.7160170078278 – Less than five seconds to generate all possible Tic Tac Toe combinations.

This means X will win 1440+47952+81792 = 131184 times while O will win 5328+72576 = 77904 times. The first player has more chances to win.

How can we determine the drawn games? They are represented by the number of possible boards with nine symbols (127872) minus the number of wins at the 9th move (81792) = 46080 draws.

According to these results, next time we’ll introduce an algorithm to make the computer play Tic Tac Toe.

Meanwhile enjoy these results.

PS: anyone willing to translate this into AS3 or other languages?

To estimate the distances and so check the range, I use Manhattan distance formula, less accurate but faster than Euclidian distance

Named after the grid layout of most Manhattan streets, it’s a form of geometry in which the usual metric of Euclidean geometry is replaced by a new metric in which the distance between two points is the sum of the absolute differences of their coordinates (for more information refer to Wikipedia’s Taxicab geometry page).

Now the question is: is Manhattan distance really faster than Euclidian distance?

For the following test I used PHP, but feel free to make it in any other language and I’ll be glad to publish your results.

First, I set two variables, named $x_dist and $y_dist, to 10 and 20 respectively, then to -10 and -20

These variables should represent the x and y distance between two points.

I generated a script to calculate a million times the distance with Euclidean geometry this way:

$distance = sqrt($x_dist*$x_dist+$y_dist*$y_dist);

The server took an average 566.56 milliseconds to give me the response.

I thought most of the time is spent to calculate the square root, so a smart programmer could remove the square root and eventually compare the result with a given number multiplied by itself… so if the distance has to b less than 30, I will check if it’s less than 30*30=900.

This way to determine the distance:

$distance = $x_dist*$x_dist+$y_dist*$y_dist;

took an average time of 204.43 milliseconds to generate a million results.

Then it’s time to use Manhattan distance:

$distance = abs($x_dist)+abs($y_dist);

This method took 694.83 milliseconds… the slowest so far… so I tried to avoid using abs this way:

if($x_dist<0){
	$x_dist *=-1;
}
if($y_dist<0){
	$y_dist *=-1;
}
$distance = $x_dist+$y_dist;

and I got 243.11 milliseconds. Trying with positive or negative starting distance values did not change response times in a valuable manner.

So I would say: “Myth Busted“.

Do you agree?

It detects facial features and ignores anything else, such as buildings, trees and bodies.

(source: Wikipedia)

There is so much to say about face detection and all its algorithms… I am planning a step by step tutorial about every branch of object detection in digital images, but first I want to publish Maurice Svay‘s PHP class.

Maurice, in his blog svay.com, explains he was looking for a face detection script for PHP, but wasn’t able to find one working without OpenCV (Open Source Computer Vision), an opensource lib that was originally developed by Intel.

OpenCV seems to perform well but you need to be able to install it on your server.

So he coded his own pure PHP solution, that does not require any library to be installed on the server.

And, obviously, that can be easily ported into any language. His class itself has been translated from a javascript code that actually is no longer available online

So this is the class:

<?php
// 
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
// 
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
// GNU General Public License for more details.
// 
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.     
// 
// @Author Karthik Tharavaad 
//         karthik_tharavaad@yahoo.com
// @Contributor Maurice Svay
//              maurice@svay.Com
 
class Face_Detector {
 
    protected $detection_data;
    protected $canvas;
    protected $face;
    private $reduced_canvas;
 
    public function __construct($detection_file = 'detection.dat') {
        if (is_file($detection_file)) {
            $this->detection_data = unserialize(file_get_contents($detection_file));
        } else {
            throw new Exception("Couldn't load detection data");
        }
        //$this->detection_data = json_decode(file_get_contents('data.js'));
    }
 
    public function face_detect($file) {
        if (!is_file($file)) {
            throw new Exception("Can not load $file");
        }
 
        $this->canvas = imagecreatefromjpeg($file);
        $im_width = imagesx($this->canvas);
        $im_height = imagesy($this->canvas);
 
        //Resample before detection?
        $ratio = 0;
        $diff_width = 320 - $im_width;
        $diff_height = 240 - $im_height;
        if ($diff_width > $diff_height) {
            $ratio = $im_width / 320;
        } else {
            $ratio = $im_height / 240;
        }
 
        if ($ratio != 0) {
            $this->reduced_canvas = imagecreatetruecolor($im_width / $ratio, $im_height / $ratio);
            imagecopyresampled($this->reduced_canvas, $this->canvas, 0, 0, 0, 0, $im_width / $ratio, $im_height / $ratio, $im_width, $im_height);
 
            $stats = $this->get_img_stats($this->reduced_canvas);
            $this->face = $this->do_detect_greedy_big_to_small($stats['ii'], $stats['ii2'], $stats['width'], $stats['height']);
            $this->face['x'] *= $ratio;
            $this->face['y'] *= $ratio;
            $this->face['w'] *= $ratio;
        } else {
            $stats = $this->get_img_stats($this->canvas);
            $this->face = $this->do_detect_greedy_big_to_small($stats['ii'], $stats['ii2'], $stats['width'], $stats['height']);
        }
        return ($this->face['w'] > 0);
    }
 
 
    public function toJpeg() {
        $color = imagecolorallocate($this->canvas, 255, 0, 0); //red
        imagerectangle($this->canvas, $this->face['x'], $this->face['y'], $this->face['x']+$this->face['w'], $this->face['y']+ $this->face['w'], $color);
        header('Content-type: image/jpeg');
        imagejpeg($this->canvas);
    }
 
    public function toJson() {
        return "{'x':" . $this->face['x'] . ", 'y':" . $this->face['y'] . ", 'w':" . $this->face['w'] . "}";
    }
 
    public function getFace() {
        return $this->face;
    }
 
    protected function get_img_stats($canvas){
        $image_width = imagesx($canvas);
        $image_height = imagesy($canvas);     
        $iis =  $this->compute_ii($canvas, $image_width, $image_height);
        return array(
            'width' => $image_width,
            'height' => $image_height,
            'ii' => $iis['ii'],
            'ii2' => $iis['ii2']
        );         
    }
 
    protected function compute_ii($canvas, $image_width, $image_height ){
        $ii_w = $image_width+1;
        $ii_h = $image_height+1;
        $ii = array();
        $ii2 = array();      
 
        for($i=0; $i<$ii_w; $i++ ){
            $ii[$i] = 0;
            $ii2[$i] = 0;
        }                        
 
        for($i=1; $i<$ii_w; $i++ ){  
            $ii[$i*$ii_w] = 0;       
            $ii2[$i*$ii_w] = 0; 
            $rowsum = 0;
            $rowsum2 = 0;
            for($j=1; $j<$ii_h; $j++ ){
                $rgb = ImageColorAt($canvas, $j, $i);
                $red = ($rgb >> 16) & 0xFF;
                $green = ($rgb >> 8) & 0xFF;
                $blue = $rgb & 0xFF;
                $grey = ( 0.2989*$red + 0.587*$green + 0.114*$blue )>>0;  // this is what matlab uses
                $rowsum += $grey;
                $rowsum2 += $grey*$grey;
 
                $ii_above = ($i-1)*$ii_w + $j;
                $ii_this = $i*$ii_w + $j;
 
                $ii[$ii_this] = $ii[$ii_above] + $rowsum;
                $ii2[$ii_this] = $ii2[$ii_above] + $rowsum2;
            }
        }
        return array('ii'=>$ii, 'ii2' => $ii2);
    }
 
    protected function do_detect_greedy_big_to_small( $ii, $ii2, $width, $height ){
        $s_w = $width/20.0;
        $s_h = $height/20.0;
        $start_scale = $s_h < $s_w ? $s_h : $s_w;
        $scale_update = 1 / 1.2;
        for($scale = $start_scale; $scale > 1; $scale *= $scale_update ){
            $w = (20*$scale) >> 0;
            $endx = $width - $w - 1;
            $endy = $height - $w - 1;
            $step = max( $scale, 2 ) >> 0;
            $inv_area = 1 / ($w*$w);
            for($y = 0; $y < $endy ; $y += $step ){
                for($x = 0; $x < $endx ; $x += $step ){
                    $passed = $this->detect_on_sub_image( $x, $y, $scale, $ii, $ii2, $w, $width+1, $inv_area);
                    if( $passed ) {
                        return array('x'=>$x, 'y'=>$y, 'w'=>$w);
                    }
                } // end x
            } // end y
        }  // end scale
        return null;
    }
 
    protected function detect_on_sub_image( $x, $y, $scale, $ii, $ii2, $w, $iiw, $inv_area){
        $mean = ( $ii[($y+$w)*$iiw + $x + $w] + $ii[$y*$iiw+$x] - $ii[($y+$w)*$iiw+$x] - $ii[$y*$iiw+$x+$w]  )*$inv_area;
        $vnorm =  ( $ii2[($y+$w)*$iiw + $x + $w] + $ii2[$y*$iiw+$x] - $ii2[($y+$w)*$iiw+$x] - $ii2[$y*$iiw+$x+$w]  )*$inv_area - ($mean*$mean);    
        $vnorm = $vnorm > 1 ? sqrt($vnorm) : 1;
 
        $passed = true;
        for($i_stage = 0; $i_stage < count($this->detection_data); $i_stage++ ){
            $stage = $this->detection_data[$i_stage];  
            $trees = $stage[0];  
 
            $stage_thresh = $stage[1];
            $stage_sum = 0;
 
            for($i_tree = 0; $i_tree < count($trees); $i_tree++ ){
                $tree = $trees[$i_tree];
                $current_node = $tree[0];    
                $tree_sum = 0;
                while( $current_node != null ){
                    $vals = $current_node[0];
                    $node_thresh = $vals[0];
                    $leftval = $vals[1];
                    $rightval = $vals[2];
                    $leftidx = $vals[3];
                    $rightidx = $vals[4];
                    $rects = $current_node[1];
 
                    $rect_sum = 0;
                    for( $i_rect = 0; $i_rect < count($rects); $i_rect++ ){
                        $s = $scale;
                        $rect = $rects[$i_rect];
                        $rx = ($rect[0]*$s+$x)>>0;
                        $ry = ($rect[1]*$s+$y)>>0;
                        $rw = ($rect[2]*$s)>>0;  
                        $rh = ($rect[3]*$s)>>0;
                        $wt = $rect[4];
 
                        $r_sum = ( $ii[($ry+$rh)*$iiw + $rx + $rw] + $ii[$ry*$iiw+$rx] - $ii[($ry+$rh)*$iiw+$rx] - $ii[$ry*$iiw+$rx+$rw] )*$wt;
                        $rect_sum += $r_sum;
                    } 
 
                    $rect_sum *= $inv_area;
 
                    $current_node = null;
                    if( $rect_sum >= $node_thresh*$vnorm ){
                        if( $rightidx == -1 ) 
                            $tree_sum = $rightval;
                        else
                            $current_node = $tree[$rightidx];
                    } else {
                        if( $leftidx == -1 )
                            $tree_sum = $leftval;
                        else
                            $current_node = $tree[$leftidx];
                    }
                } 
                $stage_sum += $tree_sum;
            } 
            if( $stage_sum < $stage_thresh ){
                return false;
            }
        } 
        return true;
    }
}

Using it is very easy, just write

$detector = new Face_Detector('detection.dat');
$detector->face_detect('your_file.jpg');
$detector->toJpeg();

once you unpacked and included detection.dat and the image in the same path as your class.

Do you want to see a result?

This was generated by the script, just changing the frame color from red to green, to make it more visible.

The class does not work that well on every photo, but it’s a good start for a journey into face detection

We are about to create a custom contact page that will work under WP 3.0, and more precisely with Twenty Ten theme. Obviously, with some minor changes you will be able to do the same in your theme.

The script

Let’s start: in your theme folder, create a new file called contact.php (or whatever other name with php extension) and write this code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

<?php
/*
Template Name: Contact me
*/
if($_POST[sent]){
	$error = "";
	if(!trim($_POST[your_name])){
		$error .= "<p>Please enter your name</p>";
	}
	if(!filter_var(trim($_POST[your_email]),FILTER_VALIDATE_EMAIL)){
		$error .= "<p>Please enter a valid email address</p>";
	}                        
	if(!trim($_POST[your_message])){
		$error .= "<p>Please enter a message</p>";
	}
	if(!$error){
		$email = mail(get_option("admin_email"),trim($_POST[your_name])." sent you a message from ".get_option("blogname"),stripslashes(trim($_POST[your_message])),"From: ".trim($_POST[your_name])." <".trim($_POST[your_email]).">\r\nReply-To:".trim($_POST[your_email]));
	}
}
?>
<?php get_header(); ?>
<div id="container">
	<div id="content" role="main">
		<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
		<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>	
			<h1 class="entry-title"><?php the_title(); ?></h1>
			<div class="entry-content">
			<?php if($email){ ?>
				<p><strong>Message succesfully sent. I'll reply as soon as I can</strong></p>
			<?php } else { if($error) { ?>
				<p><strong>Your messange hasn't been sent</strong><p>
				<?php echo $error; ?>
			<?php } else { the_content(); } ?>
				<form action="<?php the_permalink(); ?>" id="contact_me" method="post">
					<input type="hidden" name="sent" id="sent" value="1" />
					<ul class="contactform">
						<li>
							<label for="your_name">Name</label>
							<input type="text" name="your_name" id="your_name" value="<?php echo $_POST[your_name];?>" />
						</li>
						<li>
							<label for="your_email">Email</label>
							<input type="text" name="your_email" id="your_email" value="<?php echo $_POST[your_email];?>" />
						</li>
						<li>
							<label for="your_message">Message:</label>
							<textarea name="your_message" id="your_message"><?php echo stripslashes($_POST[your_message]); ?></textarea>
						</li>
						<li>
							<input type="submit" name = "send" value = "Send email" />
						</li>
					</ul>
				</form>
				<?php } ?>
			</div><!-- .entry-content -->
		</div><!-- #post-## -->
		<?php endwhile; ?>
	</div><!-- #content -->
</div><!-- #container -->
<?php get_sidebar(); ?>
<?php get_footer(); ?>

Now let’s see what we’ve done:

Lines 2-4: This is the way we assign a template name to the page. In this case, the name is Contact me

We’ll see later what lines 5-19 do, and let’s jump to…

Lines 21-27: this is the same content you can find in page.php file into Twenty Ten theme folder, and if you’re using a different theme it should be the same content you can find in your theme page.php file until the beginning of the content of the page (typically the_content()).

In my case, I just replaced

1
2
3
4
5

<?php if ( is_front_page() ) { ?>
	<h2 class="entry-title"><?php the_title(); ?></h2>
<?php } else { ?>	
	<h1 class="entry-title"><?php the_title(); ?></h1>
<?php } ?>

with

<h1 class="entry-title"><?php the_title(); ?></h1>

because I know a contact page can’t be the front page.

Lines 28-33: Here come to play two variables, called $error and $email, you’ll see later how to set their values, meanwhile you have to know $error is an empty string or a string with an error (something like “You email address is not valid”) and $email is true if the email has been successfully sent.

The code proceeds this way:

* If the email has been sent, show a “Thank you message” and nothing else

* If the email has not been sent and there is an error, show the error and the form

* If the email has not been sent and there isn’t an error, show the page content (something like “Hello!! This is my fancy contact page!! Drop me a mail!!) and the form

Lines 34-53: The form itself, the easiest possible, it’s up to you to add some more fields, if needed, and some styling.

Lines 55-61: The end of the page, like in the normal Twenty Ten page.

Now it’s time to see the php that handles emails and errors

Line 5: If “Send email” button (line 50) has been pressed…

Line 6: set $error variable to empty string

Lines 7-9: creating an error message if the user did not enter his name

Lines 10-12: same as before, looking for a valid email address

Lines 13-15: same as before, looking for a message

Lines 16-18: if I did not find any error, I send the email with a basic formatting and sanitizing.

The setup

Once you created this file, create a new page this way:

Look how I assign the page template according to the file recently created.

And this is what you’ll get:

Your own custom contact page. It’s just a basic one, but if I receive good feedback, I can improve it with some jQuery magic…

I received some interesting suggestions, and one of them is to link all posts of the same series. This is what a reader said: “In the first post, put a link of all the steps (requires manual editing)”.

I found a way to put an index on each post of a series using custom fields, and I am sure you’ll find it interesting. Let’s take Create a Flash game like Rebuild Chile series as example.

I want, in every post of the series, to show the full list of posts of the series. Without a lot of manual editing, of course.

So, that’s what I did: first, for every post of the series, I added a custom field called series with Create a Flash game like Rebuild Chile value. The idea is to add a series custom field to every post in every series with a proper value.

If you don’t know how to add a custom field, here it is a little help:

At the end of the Post page admin, you’ll find the form to add new custom fields. That’s how I added series custom field. Now, a few lines of code to rule them all… this is what you have to include somewhere inside the so-called WordPress Loop:

1
2
3
4
5
6
7
8
9
10

<?php $series = get_post_meta($post->ID, 'series', true); if($series): ?>
	<div id = "series">
		<h2>Read all <em><?php echo $series; ?></em> series</h2>
		<ul>
		<?php $chapters = get_posts('numberposts=-1&meta_key=series&orderby=date&order=ASC&meta_value='.$series); foreach($chapters as $chapter):?>
			<li><?php if($chapter->ID != $post->ID): ?><a href ="<?php echo get_permalink($chapter->ID); ?>"><?php endif; echo $chapter->post_title; ?></a></li>
		<?php endforeach; ?>
		</ul>
	</div>
<?php endif; ?>

Line 1: Assigning to a variable called $series the value of the series custom field value, if any. Then, if there is a value…

Line 5: Creating a $chapters array and populating it with every post (numberpost=-1) whose series custom field (meta_key=series) has $series value (meta_value=$series) ordering them by date (orderby=date) in ascending way (order=ASC). Then scanning the entire array, saving each item into $chapter
variable.

Line 6: Adding the post title, along with a link if it’s not the current post

The remaining lines are just HTML to let me style the content.

You can see the result in the Create a Flash game like Rebuild Chile series… I have to find the right style but I think I’m on the right way.

Do you like this way to use custom fields?

That’s what Gabriel Bianconi did, and he wants to share his script with us.

It’s a simple, interesting script dedicated to all developers looking for a quick way to integrate Mochi games into their custom arcade sites.

« Hello. My name is Gabriel Bianconi. I’m a 16 years old Brazilian student and I’m interested in game and web development.
I’ve recently launched my first arcade website, PlugB.com. I decided to create my own script for two reasons: to improve my PHP skills and to have a more customizable website.

One of the features I integrated to my admin was the MochiAds ‘Post Game to my Site’ button. Since I add games manually (I don’t want to import all Mochi games), this saves me a lot of time.

When I tried to search about this feature, I realized that there is no tutorial about this online (at least, I couldn’t find one). I searched a little more and found a few scripts about this.

They were integrated to some arcade scripts, so I couldn’t just copy and paste them. But it was a start.

The script that I most used was from Timothy E. Archer.

After a few tests, I’ve created a working script:

Firstly, you’ll need a MochiAds publisher account.

After registering and adding your website, go to the Settings page.

In the bottom of the page, below ‘Auto Post Settings’, set the ‘Auto Post Method’ to ‘Custom built script’ and the ‘Auto Post URL’ to the URL of your script.

Now the PHP part:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40

<?php
 
$game_tag = $_POST['game_tag'];
 
// Sample tag to fake a mochi request... Remove this line in final version...
$game_tag = 'cd698a06f727e887';
 
if(!$game_tag)
{
	die('No gametag.');
}
 
// This can be found in the settings page.
$mochi_pub_id = 'xxxxxxxxxxxxxxxxxxxxx';
 
$game_feed_url = "http://www.mochiads.com/feeds/games/$mochi_pub_id/$game_tag/?format=json";
 
//Retrieves and parses the JSON data of the game.	
$json_feed = file_get_contents($game_feed_url);
$json_items = json_decode($json_feed, TRUE);
 
$game = $json_items['games'][0];
 
/* Now you can access all variables about the game with $game['variable_name'];
 * For example: $game['name'] or $game['swf_url']
 * The full list of the variables can be found here: https://www.mochimedia.com/support/pub_docs#feed_3
 * I did not add how to save in a database because it changes from script to script.
 */
 
 
// Sample: (can be removed in final version)
 
echo $game['name'] . ' - ' . $game['swf_url'];
 
/* You should get: Sokobones - http://games.mochiads.com/c/g/sokobones_v1/Sokobones-MochiAds_Secure.swf
 * if you used the sample tag.
 * Remove that line in the final version.
 */
 
?>

Remember to remove the sample game tag in the final version.

Thank you for reading the tutorial. I hope this helps you. Please let me know what you think about this and visit my arcade website. »

I am finishing and polishing LineBall’s official site built with WordPress and Ajax.

I plan to finish it before this week ends, then release the theme next week. So if you have suggestions, feedback or want more information, this is your turn.

Help me to make the ultimate WordPress Flash game theme.

Some features already developed:

* Highly customizable by setup page – no need to edit the code

* Ajax powered to browse it without reloading the header (the game itself)

* Minimal theme, a very few lines of code

Let me know what do you think about it. And don’t pay that much attention to contents… I just wrote a couple of lines just to make some tests

As for the previous example I am using the standard Kubrick theme… without any plugin installed.

Look how I load the posts under the header by clicking on their titles… even the ones with “more” tag appear complete without reloading the page:

Let’s start with header.php modifications

This is the script I added under

<?php wp_head(); ?>

That is the JQuery part

1
2
3
4
5
6
7
8
9
10
11
12

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	$("h2 a").click(function(){
		var post_id = $(this).attr("rel")
		$("#your_post_here").html("loading...");
		$("#your_post_here").load("http://<?php echo $_SERVER[HTTP_HOST]; ?>/triqui-ajax/",{id:post_id});
		return false;
	});
});
</script>

I already explained the first 4 lines in the previous tutorial.

Line 5: Waiting for the user to click on an hypertext over an h2 heading. I am doing it because in Kubrick post titles are rendered this way:

<h2><a href="<?php the_permalink() ?>"....

This should change from theme to theme, but this works on Kubrick

Line 6: Retrieving the rel attribute of the link and saving it in a variable called post_id. You’ll see later in this tutorial how this attribute will contain the unique ID of the post we want to show.

Line 7: In an element with your_post_here id I am writing “loading…” because I’m starting to load the post. You’ll see later in this tutorial where to place the element

Line 8: Now thw ajax magic… in the your_post_here element this time I load the output of a page of the blog called triqui-ajax. You’ll se later in this tutorial how to create it. This will work if the permalinks of your blog aren’t the default ones. Go to Settings -> Permalinks and select Day and name

I am also passing in POST a variable called id with the content of post_id variable (the post unique id)

Line 9: I added this line to prevent the browser to jump to the link… remember? I want to load the post in the same page.

Now it’s time to make some changes to index.php

This is how I modified it:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<?php
/**
 * @package WordPress
 * @subpackage Default_Theme
 */
 
get_header(); ?>
 
	<div id="content" class="narrowcolumn" role="main">
	<div id = "your_post_here"></div>
	<?php if (have_posts()) : ?>
 
		<?php while (have_posts()) : the_post(); ?>
 
			<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
				<h2><a href="<?php the_permalink() ?>" rel="<?php the_ID(); ?>" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2>
				<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
				<div class="entry"> 
					<?php the_content('Read the rest of this entry &raquo;'); ?>
				</div>
 
				<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
			</div>
 
		<?php endwhile; ?>
 
		<div class="navigation">
			<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
			<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
		</div>
 
	<?php else : ?>
 
		<h2 class="center">Not Found</h2>
		<p class="center">Sorry, but you are looking for something that isn't here.</p>
		<?php get_search_form(); ?>
 
	<?php endif; ?>
 
	</div>
 
<?php get_sidebar(); ?>
 
<?php get_footer(); ?>

To tell the truth, I only added a line and changed a bit another one:

Line 10: This is the div that will contain the post, the one I change with jQuery (remember? lines 7 and 8 in the jQuery script)

Line 16: Here I changed the rel attribute to store the unique id of the post I want to load. I used it at line 6 in the jQuery script

And the template files do not need any other change.

Now it’s time to create a new page template with some code that will load the selected post.

In your template directory create a new php file, no matter its name… you can call it example.php and write this:

<?php
/*
Template Name: Triqui Ajax Post
*/
?>
<?php
	$post = get_post($_POST['id']);
?>
<?php if ($post) : ?>
	<?php setup_postdata($post); ?>
	<div <?php post_class() ?> id="post-<?php the_ID(); ?>">
		<h2><?php the_title(); ?></h2>
		<small><?php the_time('F jS, Y') ?> <!-- by <?php the_author() ?> --></small>
 
		<div class="entry"> 
			<?php the_content('Read the rest of this entry &raquo;'); ?>
		</div>
 
		<p class="postmetadata"><?php the_tags('Tags: ', ', ', '<br />'); ?> Posted in <?php the_category(', ') ?> | <?php edit_post_link('Edit', '', ' | '); ?>  <?php comments_popup_link('No Comments &#187;', '1 Comment &#187;', '% Comments &#187;'); ?></p>
	</div>
<?php endif; ?>

As you can see it’s almost the same code you can find in index.php at lines 15-24… because I just want to load a post in the same way the index file does. I just removed the anchor tag in the title, because I don’t want it to be clickable. And obviously I read the id value passed by the jQuery script at line 8

The only interesting lines are lines 2-4… yes, the comment… because this way I am giving the template page the name Triqui Ajax Post.

Now in your admin area create a new page, call it Triqui Ajax (do you remember the permalink url at line 8 in the jQuery script…) and select Triqui Ajax Post as template

And that’s it… you don’t need anything else, and the blog will work as in the video.

Enjoy

The reason is simple: sometimes you may need to update the content of a WP page without reloading the entire page.

This is useful when you want the user to interact with your blog without forcing him to reload the page. Or when you want some events to happen “automatically” without user interaction.

In this video I am changing the header at every second without reloading the page.

Also notice I am doing it from the default Kubrick theme with a fresh installation… I am not using any jQuery powered theme or plugin. Let’s see how can you make it.

In this case all changes have been made in header.php file, adding nine lines after

<?php wp_head(); ?>

Here they are:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
	$.ajaxSetup({cache:false});
	var refresh = setInterval(function(){   	
		$("#description_span").load("<?php bloginfo('template_url'); ?>/example.php");
	},1000);
});
</script>

First, I am loading jQuery using Google as content delivery network.

Then, when the document is ready, I disable the cache to stop jQuery .load response from being cached.

Now I just execute an ajax call to example.php file at every second and print the result in the element with description_span id

This is example.php content

<?php
 
echo rand(1,10000);
 
?>

Now it’s time to locate description_span element… it’s in the header, next to the description of the blog.

<div class="description"><?php bloginfo('description'); ?> like other <span id = "description_span"></span> ones</div>

And that’s it. This time I changed the header without touching the content, next time (the aim of my experiment) I’ll change the content without touching the header, maybe because the header contains a Flash game called LineBall… (yes, I am designing a WP theme for a game official site).

Now it’s time to release the source code. You will find some useful tips about dynamic image creation with php.

If you are absolutely new to Facebook applications, I suggest you to read “Developing a Facebook Application for absolute beginners” posts 1, 2, 3, 4 and 5.

The idea is simple: placing the profile picture in a mirror (that is a transparent PNG image) and writing the user first name as big as I can.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129

<?php
 
// this is the core function.
// giving an user id, a text (user first name) and an url (path to the user profile picture)
// creates the horror picture
 
function create_pic($id,$text,$url){
 
	// creation of a new image, the final one
	$im = imagecreatetruecolor(500,500);
	// importing profile picture
	$profile = imagecreatefromjpeg($url);
	// importing transparent mirror image
	$mirror = imagecreatefrompng("mirror.png");
 
	// retrieving profile picture size
	$sizes = getimagesize($url);
 
	$x_dim = $sizes[0];
	$y_dim = $sizes[1];
 
	// mirror transparency is 265x335, so I resize the profile picture
	// to fit this size, keeping widht/height ratio
	if($x_dim<265 or $y_dim<335){
		$mult = max(265/$x_dim,335/$y_dim);
		$final_x = $x_dim*$mult;
		$final_y = $y_dim*$mult;
	}
 
	// pasting the resized profile picture on the final image
	imagecopyresampled($im,$profile,250-$final_x/2,300-$final_y/2,0,0,$final_x,$final_y,$x_dim,$y_dim);
	// pasting the mirror on the final image
	imagecopyresampled($im,$mirror,0,0,0,0,500,500,500,500);
 
	// creating some colors
	$color = imagecolorallocate($im, 125, 0, 0);
	$shadow = imagecolorallocate($im, 0, 0, 0);
 
	// this is the path of the font I am using
	$font = "SF Gushing Meadow.ttf";
 
	// starting at font size 0
	$size = 0;
	// boolean variable to determine if the font fits on the picture
	$it_fits = true;
	// increasing font zize by one unit until it won't fit anymore
	do{
	     $last_dim = $dim;
	     $size++;
	     $dim = imageftbbox($size, 0, $font, $text);
	     if($dim[4]-$dim[6]>500){
	          $it_fits=false;
	     }
	} while($it_fits);
 
	// adding the text
	$center = floor((500-$last_dim[4]+$last_dim[6])/2);
	imagettftext($im, $size-1, 0, $center, $last_dim[7]*-1+10, $shadow, $font, $text);
	imagettftext($im, $size-1, 0, $center-1, $last_dim[7]*-1+9, $color, $font, $text);
 
	// saving the image
	imagejpeg($im,"temp/".$id.".jpg",80);
	// freeing memory
	imagedestroy($im);
	imagedestroy($profile);
	imagedestroy($mirror);
}
 
?>
 
<script>
     function grant() {
         document.setLocation("http://apps.facebook.com/horror_name/?pub=1");
     }
</script>
 
 
<?php
 
require_once "facebook.php";
 
$appapikey = "xxxxx";
$appsecret = "xxxx";
 
$facebook = new Facebook($appapikey, $appsecret);
 
$user_id = $facebook->require_login();
 
$my_array = $facebook->api_client->users_getInfo($user_id,"first_name,pic_big");
 
// getting user name and profile picture
$text = $my_array[0][first_name];
$pic = $my_array[0][pic_big];
 
// core function: creation of the horror picture
create_pic($user_id,$text,$pic);
 
$has_permission = $facebook->api_client->users_hasAppPermission("photo_upload");
 
if($has_permission and $_GET[pub]){
	$response_array = $facebook->api_client->photos_upload("temp/".$user_id.".jpg", "", "Created with http://apps.facebook.com/horror_name/", $user_id);
}
 
?>
 
<style>
     <?php echo htmlentities(file_get_contents("style.css", true)); ?>
</style>
 
<h2>Hello <fb:name uid="<?php echo $user_id; ?>" useyou="false" linked="false" firstnameonly="true"></fb:name>, let's see how horrific is your profile:</h2>
 
<div class = "image"><img src = "http://www.gamemummy.com/facebook/horror_name/temp/<?php echo $user_id; ?>.jpg" /></div>
 
<?php if(!$has_permission){ ?>
     <div class = "publish"><fb:prompt-permission perms="photo_upload" next_fbjs="grant()">Scare your friends!! Publish this horrific photo on your profile!!</fb:prompt-permission></div>
<?php } else { ?>
	<?php if(!$_GET[pub]) { ?>
     	<div class = "publish"><a href = "http://apps.facebook.com/horror_name/?pub=1">Scare your friends!! Publish this horrific photo on your profile!!</a></div>
	<?php } else { ?>
		<div class = "publish">PHOTO PUBLISHED</div>
	<?php } ?>
<?php } ?>
 
<div class = "ad"><fb:iframe src = "http://www.gamemummy.com/facebook/horror_name/ad.html" width = "728" height = "90" frameborder = "0"></fb:iframe></div>
 
<ul>
	<li>Concept and coding by <a href = "http://emanueleferonato.com/" target = "_blank">Emanuele Feronato</a></li>
	<li>Picture by <a href = "http://aliceindeadland.deviantart.com/" target = "_blank">AliceinDeadLand</a></li>
</ul>

Hope you will make something decent out of it…