A_O.Structures = function()
{
    this.loadElements();
    this.setHandlers();
}

A_O.Structures.prototype.loadElements = function()
{
    var menu = document.getElementById("menu");
    this.options = menu.getElementsByTagName("a");
    this.structures = menu.getElementsByTagName("img");
}

A_O.Structures.prototype.setHandlers = function()
{
    var options = this.options;
    var limit = this.structures.length - 1;
    var current = this;
    var structure_index = 0;
    for (var ii = 0; ii < options.length; ii++)
    {
	options[ii].onmouseover =
	    (function(index) {
		return function() {
		    current.displayStructure(index);
		};
	    })(structure_index++)
	if (structure_index > limit)
	{
	    structure_index = 0;
	}
    }
}

A_O.Structures.prototype.displayStructure = function(index)
{
    var structures = this.structures;
    var display;
    for (var ii = 0; ii < structures.length; ii++)
    {
	if (ii == index)
	{
	    display = "";
	}
	else
	{
	    display = "none";
	}
	structures[ii].style.display = display;
    }
}
if (!window.console)
{
    console = {log: function() {}};
}

var SOURCE_PATH = "/v/src/";
var SYNTAX_SCROLL_STEP = 500;
var SYNTAX_SCROLL_INTERVAL = 1600;

A_O = function()
{
    console.log(SOURCE_PATH);
    this.syntax = new A_O.Syntax();
    this.structures = new A_O.Structures();
}

A_O.include = function(path)
{
    var element = document.createElement("script");
    element.type = "text/javascript";
    element.src = SOURCE_PATH + path;
    document.getElementsByTagName("head")[0].appendChild(element);
}

A_O.build_px = function(size)
{
    return size + "px";
}

A_O.include("Syntax.js");
A_O.include("Structures.js");

window.onload = function()
{
    new A_O();
}
<?php

function print_link_tag($path, $rel, $type=null)
{
   $path = resolve_uri_path($path);
   $tag = "<link rel=\"$rel\" ";
   if ($type)
   {
       $tag .= "type=\"$type\" ";
   }
   print_l($tag . "href=\"$path\"/>");
}

function resolve_uri_path($path)
{
   $path = str_replace($GLOBALS["system_root"] . "/", "/", $path);
   return join_paths($GLOBALS["uri_root"], $path);
}

function join_paths()
{
   return implode(DIRECTORY_SEPARATOR, func_get_args());
}

function print_l($string, $break=true)
{
   $end = $break ? "\n" : "";
   echo $string . $end;
}

function print_script_tag()
{
   $path = resolve_uri_path("src/A_O.js");
   print_l("<script src=\"$path\" type=\"text/javascript\"></script>");
}

function include_syntax()
{
   include choose_file("resource/syntax/index/*.html");
}

function choose_file($pattern)
{
   return random_element(glob(resolve_system_path($pattern)));
}

function resolve_system_path($path)
{
   return join_paths($GLOBALS["system_root"], $path);
}

function print_follow_buttons()
{
   echo "<a href=\"/feed.rss\">";
   print_image_tag("img/badges/rss.png", "", "rss", false);
   print_l("</a>");
   echo "<a href=\"http://twitter.com/Dometoerio/\">";
   print_image_tag("img/badges/twitter.png", "", "twitter", false);
   print_l("</a>");
}

function print_image_tag($path, $class="", $id="", $break=true, $style="",
                         $resolve=true, $alt="")
{
   if ($resolve)
   {
      $path = resolve_uri_path($path);
   }
   print_l("<img src=\"$path\" class=\"$class\" id=\"$id\" style=\"$style\" " .
           "alt=\"$alt\" />", $break);
}

function print_scanner_animation()
{
   $animation = resolve_uri_path(choose_file("img/scanner/animations/*.gif"));
   echo "<div style=\"background: url('$animation')\">&nbsp;</div>\n";
}

function random_element($list)
{
   return $list[rand(0, count($list) - 1)];
}

function build_random_ip_address()
{
   return rand(101, 199) . "." . rand(0, 255) . "." . rand(0, 255) . "." .
      rand(0, 255);
}

function get_visitors_ip_address()
{
   return $_SERVER["REMOTE_ADDR"];
}

function print_structures()
{
   $paths = glob(resolve_system_path("img/structures/*.png"));
   $visible = rand(0, count($paths) - 1);
   foreach ($paths as $ii => $path)
   {
      $style = ($ii == $visible) ? "" : "display: none";
      print_image_tag($path, "", "", true, $style);
   }
}

function print_divider()
{
   $animation = choose_file("img/scrollers/animations/192.gif");
   $path = resolve_uri_path($animation);
   echo "<div id=\"divider\" style=\"background: url('$path')\">" .
      "&nbsp;</div>\n";
}

function print_articles()
{
    $paths = get_article_paths();
    $journal_config = parse_ini_file(
        resolve_system_path("resource/journal/config"), true, INI_SCANNER_RAW);
    $date_field = $journal_config["header"]["date_field"];
    foreach ($paths as $path)
    {
        $printed_body_line = false;
        print_l("<div class=\"entry\">");
        print_l("<div class=\"info\">");
        foreach (file($path) as $line)
        {
            if (preg_match("/^<!--/", $line))
            {
                if (preg_match("/^<!--[[:space:]]*$date_field/", $line))
                {
                    print_l("<span class=\"time\">" . get_date($line) .
                            "</span><span class=\"permalink\"><a href=\"/" .
                            get_article_id_from_path($path) .
                            "\">&diams;</a></span>");
                }
            }
            else
            {
                if (!$printed_body_line)
                {
                    print_l("</div>");
                    print_l("<div class=\"body\">");
                    $printed_body_line = true;
                }
                echo $line;
            }
        }
        print_l("</div>\n</div>");
    }
}

function get_article_paths()
{
    preg_match("/^(\/v)*(\/draft)*\/([0-9]+)\/*$/", $_SERVER["REQUEST_URI"],
               $matches);
    $expression = ".*\.html";
    if (count($matches) > 2 and $matches[2])
    {
        $root = resolve_system_path("resource/journal/draft/");
    }
    else
    {
        $root = resolve_system_path("resource/journal/entries/");
    }
    if (count($matches) > 3 and ($id = $matches[3]))
    {
        $pattern = "/^0*${id}/";
    }
    else
    {
        $pattern = "/$expression/";
    }
    $paths = array();
    $directory = opendir($root);
    while (($path = readdir($directory)) !== false)
    {
        if (preg_match($pattern, $path))
        {
            $paths[] = $root . $path;
        }
    }
    closedir($directory);
    if (!$paths)
    {
        $paths = glob($root . "*.html");
    }
    rsort($paths);
    return $paths;
}

function get_date($line)
{
    preg_match("/^<!--\s*\S+:\s*(.*)\s*-->/", trim($line), $matches);
    return date("M. d, Y, g a", strtotime($matches[1]));
}

function get_article_id_from_path($path)
{
    preg_match("/\/([0-9]+)_[^\/]*$/", $path, $matches);
    return intval($matches[1]);
}

function print_rss_button_images()
{
    $paths = glob(resolve_system_path("img/stale-mile/*.png"));
    for ($ii = 0; $ii < 6; $ii++)
    {
        $index = rand(0, count($paths) - 1);
        print_image_tag($paths[$index], "", "", false);
        array_splice($paths, $index, 1);
        if ($ii == 2)
        {
            print_l("<br />", false);
        }
    }
}

?>
34.239.158.107
34.239.158.107
34.239.158.107
 
September 26, 2017

I made a video about my game Picture Processing for Out of Index 2017! Here is the video along with a transcript.

To save memory, video games are designed to repeat graphics. In raster-based games, image files like textures, tiles and sprites are loaded once into memory and drawn repeatedly by the program to create environments, characters, animations and text. In my puzzle game, 8 by 8 pixel tiles are used to create scenes the player has to recreate. For level 1, the tiles are a cloud, a tree, a mushroom, a character, sky, ground and rock.

An algorithm scrambles the tiles so that each tile is in the wrong memory address at the beginning of a level and the screen looks like a graphics glitch. When level 1 begins, the clouds may be where the trees should be, the mushrooms may be floating in the sky and the character may be switched with rock or the ground. The player's task is to put the tiles where they belong by swapping each tile with a tile in another memory address.

There are five levels, in order of difficulty, based on classic video games or classic video game genres.

The name of this game is taken from the Picture Processing Unit, a microprocessor designed by Nintendo for the Nintendo Entertainment System. The PPU is the hardware component responsible for translating image data into video signals for televisions and screens. It does this with a memory of 8 by 8 pixel tile data, which, along with palette and sprite attribute memory, generates each frame of a video game.

Companies often create lofty, evocative titles for hardware and products. What does the name Picture Processing Unit mean if we consider pictures something independent of a video screen? The phrase picture processing evokes the phrase image processing, a technique used to create applications such as automatic facial and emotion recognition. We often anthropomorphize electronic devices, infusing them with intelligence and souls, forgetting how much more infinitely complex the human mind is compared to a digital processor.

The game is named as a reference to Nintendo's microprocessor because the graphics are tile based, but it is also a reference to the players who are image processors, interpreting a picture from something deterministic into something non-deterministic.

The prototype of this game was created for a game jam called A Game By Its Cover where designers created video games based on imagined Nintendo game cartridges created by visual artists for an exhibition called My Famicase.

Picture Processing is based on one of the imagined cartridges from that exhibition. The cartridge's cover depicts a grid of unordered tiles and is described as a game where one inserts a game cartridge, sees a glitching screen, and meditates about the concept of beauty in imperfection. I added the idea that the player meditates into a state of transcendence until they are able to fix the game's graphics by accessing the memory telepathically.