IDLE_COLOR = "#882355";
PLAYING_COLOR = "#AF5789";

function set_callbacks()
{
    var song_containers = document.getElementsByClassName("song");
    var audio_elements = document.getElementsByTagName("audio");
    var ii;
    for (ii = 0; ii < song_containers.length; ii++)
    {
        song_containers[ii].style.backgroundColor = IDLE_COLOR;
        song_containers[ii].onclick =
            (function(index) {
                return function() {
                    audio_element = audio_elements[index]
                    var jj;
                    for (jj = 0; jj < audio_elements.length; jj++)
                    {
                        if (jj != index)
                        {
                            audio_elements[jj].pause();
                            if (audio_elements[jj].readyState > 0)
                            {
                                audio_elements[jj].currentTime = 0;
                            }
                        }
                    }
                    if (audio_element.paused)
                    {
                        audio_element.play();
                    }
                    else
                    {
                        audio_element.pause();
                    }
                };
            }(ii));
        if (ii < song_containers.length - 1)
        {
            audio_elements[ii].addEventListener(
                "ended",
                (function(index) {
                    return function() {
                        audio_elements[index + 1].play()
                    };
                }(ii)));
        }
        audio_elements[ii].addEventListener(
            "playing",
            (function(index) {
                return function() {
                    var jj;
                    for (jj = 0; jj < song_containers.length; jj++)
                    {
                        if (jj != index)
                        {
                            color = IDLE_COLOR;
                        }
                        else
                        {
                            color = PLAYING_COLOR;
                        }
                        song_containers[jj].style.backgroundColor = color;
                    }
                };
            }(ii)));
    }
}

window.onload = set_callbacks;
<?php

require("util.php");
write_background_image();

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
  <head>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
    <title>Quicklime</title>
    <link rel="stylesheet" type="text/css" href="style.css" />
    <script src="audio.js" type="text/javascript"></script>
  </head>
  <body>
    <center>
      <div id="title">
        <img src="img/Disfigurant.png" />
      </div>
      <div id="player">
        <?php insert_audio_elements()  ?>
      </div>
      <a id="download" href="aud/">
        <img src="img/Exttade.png" />
      </a>
    </center>
  </body>
</html>
<?php

define("TC", 7);
define("IMG_ROOT", "img/");
define("AUD_ROOT", "aud/");

function write_background_image()
{
    $paths = glob(IMG_ROOT . "bg/*");
    $limit = count($paths);
    if ($limit > pow(TC, 2))
    {
        $indices = get_indices($limit);
        $image = new Imagick($paths[0]);
        $tile_size = $image->getImageWidth();
        $indices = get_indices(count($paths));
        $image = new Imagick();
        $size = $tile_size * TC;
        $image->newImage($size, $size, new ImagickPixel("transparent"));
        $image->setImageFormat("png");
        $image->setInterlaceScheme(Imagick::INTERLACE_PNG);
        for ($x = 0; $x < $size; $x += $tile_size)
        {
            for ($y = 0; $y < $size; $y += $tile_size)
            {
                $tile = new Imagick($paths[array_pop($indices)]);
                $image->compositeImage($tile, Imagick::COMPOSITE_DEFAULT, $x, $y);
            }
        }
        $image->writeImage(IMG_ROOT . "CfA2-Great-Wall.png");
    }
}

function get_indices($limit)
{
    $indices = array();
    while (count($indices) < pow(TC, 2))
    {
        $index = rand(0, $limit - 1);
        if (!in_array($index, $indices))
        {
            $indices[] = $index;
        }
    }
    return $indices;
}

function insert_audio_elements()
{
    $paths = glob(AUD_ROOT . "*.mp3");
    foreach ($paths as $path)
    {
        preg_match("/.+_[0-9]+_(.*).mp3/", basename($path), $matches);
        echo "\t<div class=\"song\">\n";
        echo "\t\t$matches[1]\n";
        echo "\t\t<audio src=\"$path\" preload=\"auto\"></audio>\n";
        echo "\t</div>\n";
    }
}

?>
<?php

set_include_path("/home/frank/lib/php/" . PATH_SEPARATOR . get_include_path());
require_once "cms/autoload.php";

function display_page()
{
   $mixes_page = new Mixes();
   echo $mixes_page;
}
<?php

require_once "operations/file/list_directory.php";

define("INDEX_SEPARATOR", ".");
define("VERTICAL_ORIENTATION_DIRECTORY_NAME", "vertical");
define("HORIZONTAL_ORIENTATION_DIRECTORY_NAME", "horizontal");

class Segmented_Image extends Div
{
   private $_image_file_path;
   private $_segment_count;
   private $_image;
   protected $_segments_directory_path;
   private $_width;
   private $_height;

   public function __construct(
      $image_file_path, $segment_count=null, $cut_orientation=null, $width=null,
      $height=null)
   {
      parent::__construct();
      $this->_image_file_path = $image_file_path;
      $this->_segment_count = $segment_count;
      $this->_cut_orientation = $cut_orientation;
      $this->initialize_image($width, $height);
      $this->initialize_segments_directory();
      $this->build_collection();
   }

/*    public function __set($name, $value) */
/*    { */
/*       if ($value === null) */
/*       { */
/*          $value = $this->find_definition($name); */
/*       } */
/*       if ($name[0] != "_") */
/*       { */
/*          parent::__set($name, $value); */
/*       } */
/*       else */
/*       { */
/*          $this->$name = $value; */
/*       } */
/*    } */

/*    private function find_definition($name) */
/*    { */
/*       $definition = null; */
/*       $name = strtoupper($name); */
/*       $name = trim($name, "_"); */
/*       if (isset($GLOBALS["DEFAULT_" . $name])) */
/*       { */
/*          $definition = $GLOBALS["DEFAULT_" . $name]; */
/*       } */
/*       if (isset($GLOBALS[$name])) */
/*       { */
/*          $definition = $GLOBALS[$name]; */
/*       } */
/*       return $definition; */
/*    } */
   
   private function initialize_image($width, $height)
   {
      $image = new Imagick($this->_image_file_path);
      if ($width || $height)
      {
         $image->scaleImage($width, $height);
      }
      $this->_width = $image->getImageWidth();
      $this->_height = $image->getImageHeight();
      $this->_image = $image;
   }

   private function initialize_segments_directory()
   {
      $this->_segments_directory_path = $this->build_segments_directory_path();
   }

   private function build_segments_directory_path()
   {
      $dynamic_image_directory_path =
         rtrim($GLOBALS["DYNAMIC_IMAGE_DIRECTORY"], "/");
      $image_file_name = basename($this->_image_file_path);
      $main_directory = $dynamic_image_directory_path . "/" . $image_file_name;
      $orientation_directory =
         $this->build_orientation_directory_path($main_directory);
      $count_directory =
         $this->build_count_directory_path($orientation_directory);
      return $count_directory;
   }

   private function build_orientation_directory_path($segments_directory_path)
   {
      $name = $this->choose_orientation_subdirectory_name();
      $path = $segments_directory_path . "/" . $name;
      return $path;
   }

   private function build_count_directory_path($orientation_directory_path)
   {
      $name = $this->_segment_count;
      $path = $orientation_directory_path . "/" . $name;
      return $path;
   }

   private function choose_orientation_subdirectory_name()
   {
      return $this->_cut_orientation == "vertical" ?
         VERTICAL_ORIENTATION_DIRECTORY_NAME :
         HORIZONTAL_ORIENTATION_DIRECTORY_NAME;
   }

   private function build_collection()
   {
      if ($segment_file_paths = $this->find_existing_segments())
      {
         $this->add_segments_to_whole($segment_file_paths);
      }
      else
      {
         mkdir($this->_segments_directory_path, 0750, True);
         $this->divide_image();
      }
   }

   private function find_existing_segments()
   {
      $files =
         file\get_directory_contents(
            $this->_segments_directory_path, null, "labeled", False);
      $segment_files = $this->extract_segment_files($files);
      return $segment_files;
   }
         
   private function extract_segment_files($files)
   {
      $segment_files = array();
      foreach ($files as $file)
      {
         if (is_file($file))
         {
            $segment_files[] = $file;
         }
      }
      return $segment_files;
   }

   private function add_segments_to_whole($file_paths)
   {
      foreach ($file_paths as $file_path)
      {
         $this->add_segment_to_whole($file_path);
      }
   }

   private function add_segment_to_whole($file_path, $width=null, $height=null)
   {
      $this->set_segment_dimensions($file_path, $width, $height);
      $segment = new Image($file_path, $width, $height);
      if ($this->_cut_orientation == "vertical")
      {
         $segment->suppress_line_break();
      }
      $this->segments[] = $segment;
   }

   private function set_segment_dimensions($file_path, &$width, &$height)
   {      
      if ($width === null || $height === null)
      {
         $segment = new Imagick($file_path);
         $width = $segment->getImageWidth();
         $height = $segment->getImageHeight();
      }
   }
   
   private function divide_image()
   {
      $segment_width = $this->determine_segment_width();
      $segment_height = $this->determine_segment_height();
      $overflow =
         $this->_cut_orientation == "horizontal" ?
         $this->_height % $segment_height : $this->_width % $segment_width;
      if ($this->_cut_orientation == "horizontal")
      {
         $this->divide_image_horizontally(
            $segment_width, $segment_height, $overflow);
      }
      else
      {
         $this->divide_image_vertically(
            $segment_width, $segment_height, $overflow);
      }
   }

   private function determine_segment_width()
   {
      if ($this->_cut_orientation == "vertical")
      {
         return $this->calculate_region_length($this->_width);
      }
      return $this->_width;
   }

   private function determine_segment_height()
   {
      if ($this->_cut_orientation == "horizontal")
      {
         return $this->calculate_region_length($this->_height);
      }
      return $this->_height;
   }

   private function divide_image_horizontally(
      $segment_width, $segment_height, $overflow)
   {
      $modifier = 0;
      $position = 0;
      for ($ii = 0; $position < $this->_height; $ii++)
      {
         $segment_file_path = $this->build_segment_file_path($ii);
         $modifier = ($overflow-- > 0);
         $this->crop_and_save_segment(
            $this->_width, $segment_height + $modifier, 0, $position,
            $segment_file_path);
         $this->add_segment_to_whole(
            $segment_file_path, $this->_width, $segment_height);
         $position += $segment_height + $modifier;
      }
   }

   private function divide_image_vertically(
      $segment_width, $segment_height, $overflow)
   {
      $modifier = 0;
      $position = 0;
      for ($ii = 0; $position < $this->_width; $ii++)
      {
         $segment_file_path = $this->build_segment_file_path($ii);
         $modifier = ($overflow-- > 0);
         $this->crop_and_save_segment(
            $segment_width + $modifier, $this->_height, $position, 0,
            $segment_file_path);
         $this->add_segment_to_whole(
            $segment_file_path, $segment_width, $this->_height);
         $position += $segment_width + $modifier;
      }
   }

   private function crop_and_save_segment(
      $width, $height, $x_position, $y_position, $save_path)
   {
      $clone = $this->_image->clone();
      $clone->cropImage($width, $height, $x_position, $y_position);
      $clone->setImagePage(0, 0, 0, 0);
      $clone->writeImage($save_path);
   }

   private function calculate_region_length($image_length)
   {
      return intval($image_length/$this->_segment_count);
   }

   private function build_segment_file_path($index)
   {
      return $this->_segments_directory_path . "/" . $index;
   }
}
216.73.216.144
216.73.216.144
216.73.216.144
 
August 12, 2013

I've been researching tartan/plaid recently for decoration in my updated version of Ball & Cup, now called Send. I want to create the atmosphere of a sports event, so I plan on drawing tartan patterns at the vertical edges of the screen as backgrounds for areas where spectator ants generate based on player performance. I figured I would make my own patterns, but after browsing tartans available in the official register, I decided to use existing ones instead.

I made a list of the tartans that had what I thought were interesting titles and chose 30 to base the game's levels on. I sequenced them, using their titles to form a loose narrative related to the concept of sending. Here are three tartans in the sequence (levels 6, 7 and 8) generated by an algorithm I inferred by looking at examples that reads a tartan specification and draws its pattern using a simple dithering technique to blend the color stripes.


Acadia


Eve


Spice Apple

It would be wasting an opportunity if I didn't animate the tartans, so I'm thinking about animations for them. One effect I want to try is making them look like water washing over the area where the ants are spectating. I've also recorded some music for the game. Here are the loops for the game over and high scores screens.

Game Over

High Scores