Perl obfu + CSS = a nice little maze

Published · Saturday, 12 June 2010 (Updated · 17 June 2010)

Go see Random maze generator and in particular this one from the comments: Maze and Snake!

With it you get nice ASCII mazes like so–

############################################# #####################
#                     #           #                   #       #   #
# ### ################# ######### # ########### ##### ##### # ### #
#   #   #         #     #   #     #     #       #     #     # #   #
### # ### ####### # ##### # ##### ##### # # ##### ##### ##### # # #
#   #   # #     # #       #     #       # #     #       # #   # # #
# ##### # ### # # ############# ############# # ####### # # ### # #
# #     #     # # #     #       #       #   # #   #   # # #   # # #
# ############# # # ### # ############# # # ##### # # ### ### # # #
#     #     #   # # # #   #   #       #   #   #   # # #   #   # # #
##### # ### # ##### # ##### # # ##### # ##### # ##### # ### ### # #
# #     #   #       # #   # #   #   #       # #       #     #   # #
# # ####### ######### # # # ####### ####### ########### ##### ### #
#   # #   # # #       # #   #     #     #   #   #       #     #   #
##### # # # # # # ### ######### # ### # # ### ### ####### ##### # #
# #     # #   # # # #   #       # #   # #   #   #       # #     # #
# # ##### ### # # # ### # ####### # ### ### ### ####### # # ##### #
# # #   #   # # # # #   # #   #   # #     #   #     # # # #   #   #
# # # # ##### # # # # ### # # ### # ##### ### ### # # # # ### # ###
# # # # # #   # # # #   #   #   # #     #   #   # #   # #   # #   #
# # # # # # ### # # ### ####### # ####### # # # # ### # ##### ### #
# #   # # # # # #   #         # # #       #   #   # #     #   # # #
# ##### # # # # ####### # ##### # # ### ####### # # ##### # # # # #
# #     #     #   #     # #   # #   #   #   #   # # #       # #   #
# # ######### ##### ### # # # # ##### ##### ##### # # ####### ### #
# # #   #           #   # # # # # #   #   #       #   #     #   # #
# # ### # ########### ### # # # # # # # # ############# ### ### # #
# # #   #   #   #     # # # #   #   # # #   #         #   #     # #
# # # # ##### # # # ### # ########### # ### # ####### ### ####### #
#     #       #   #     #             #   #   #           #       #
### ###############################################################

But that’s kinda hard to look at and kinda old school. If you run the output of the maze generator though this–

BEGIN {
    print '<pre style="font-weight:bold; line-height:90%;
 margin:10px auto; color:#000; background-color:#fff;
 text-align:center; padding:0; font-size:8px">';
}

while (<>) {
    s/^\s+|\s+$//g;
    next unless length;
    s,(\#+),<b style="background-color:#000">$1</b>,g;
    print and print $/;
}

END { print "</pre>" }

You will end up with this–

############################################# #####################
#                     #           #                   #       #   #
# ### ################# ######### # ########### ##### ##### # ### #
#   #   #         #     #   #     #     #       #     #     # #   #
### # ### ####### # ##### # ##### ##### # # ##### ##### ##### # # #
#   #   # #     # #       #     #       # #     #       # #   # # #
# ##### # ### # # ############# ############# # ####### # # ### # #
# #     #     # # #     #       #       #   # #   #   # # #   # # #
# ############# # # ### # ############# # # ##### # # ### ### # # #
#     #     #   # # # #   #   #       #   #   #   # # #   #   # # #
##### # ### # ##### # ##### # # ##### # ##### # ##### # ### ### # #
# #     #   #       # #   # #   #   #       # #       #     #   # #
# # ####### ######### # # # ####### ####### ########### ##### ### #
#   # #   # # #       # #   #     #     #   #   #       #     #   #
##### # # # # # # ### ######### # ### # # ### ### ####### ##### # #
# #     # #   # # # #   #       # #   # #   #   #       # #     # #
# # ##### ### # # # ### # ####### # ### ### ### ####### # # ##### #
# # #   #   # # # # #   # #   #   # #     #   #     # # # #   #   #
# # # # ##### # # # # ### # # ### # ##### ### ### # # # # ### # ###
# # # # # #   # # # #   #   #   # #     #   #   # #   # #   # #   #
# # # # # # ### # # ### ####### # ####### # # # # ### # ##### ### #
# #   # # # # # #   #         # # #       #   #   # #     #   # # #
# ##### # # # # ####### # ##### # # ### ####### # # ##### # # # # #
# #     #     #   #     # #   # #   #   #   #   # # #       # #   #
# # ######### ##### ### # # # # ##### ##### ##### # # ####### ### #
# # #   #           #   # # # # # #   #   #       #   #     #   # #
# # ### # ########### ### # # # # # # # # ############# ### ### # #
# # #   #   #   #     # # # #   #   # # #   #         #   #     # #
# # # # ##### # # # ### # ########### # ### # ####### ### ####### #
#     #       #   #     #             #   #   #           #       #
### ###############################################################

Woo-woo!

Update (16 June 2010)

Jesse Thompson put together an awesome little version of this (which I’ll link if it becomes permanent) as a “CGI.” He discovered it doesn’t print well. The following may ameliorate that. Tables tend to print better and I’ve included a style sheet as well with a media declaration. It worked on my Mac from Chrome so it may work for you. :)

BEGIN {
    print <<'';
<!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" lang="en-US" xml:lang="en-US">
<head>
<title>A Maze! Yay, Perl!</title>
<style type="text/css" media="print,screen">
@media screen, print, all {
  html, body {
   background-color:#fff;
  }
  table {
   margin:10px auto;
   border-collapse:collapse;
  }
  table, tr, td {
   border:none;
   padding:0;
   margin:0;
  }
  td.class, td.wall {
   height:10px;
   width:10px;
  }
  td.wall {
   background-color:#000!important;
  }
  td.path {
   background-color:#fff!important;
  }
}
</style>
</head>
<body>
<div style="text-align:center">
<table>

}

while (<>) {
    s/^\s+|\s+$//g;
    next unless length;
    print "<tr>";
    s{ ([#\s]) }
     { sprintf('<td class="%s">%s</td>',
               $1 eq "#" ? "wall" : "path",
               $1 eq "#" ? "#" : "&nbsp;",
              )
      }gxe;
    print;

    print "</tr>";
}

END {
    print <<'';
</table>
</div>
</body>
</html>

}


digg stumbleupon del.icio.us reddit Fark Technorati Faves

« Perl and DBIx::Class saved me from Google’s parochial prissitude in 2–4 lines of code · String trim, snip, collapse in Perl »
« Perl resources, modules, and sample code »