expected output:

<!DOCTYPE html>
<html>
  <head>
    <title>
      relife
    </title>
    <meta content='text/html; charset=utf-8' http-equiv='content-type'>
    <link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/01reset.css?072609451781" media="all" /><link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/front.css?072609451796" media="all" /><link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/ui.all.css?072609451733" media="all" />
    <script type="text/javascript" src="/javascripts/jquery.js?072609451712"></script><script type="text/javascript" src="/javascripts/jquery.hoverflow.min.js?072609451786"></script><script type="text/javascript" src="/javascripts/processing.min.js?072609451765"></script><script type="text/javascript" src="/javascripts/jquery-ui.js?072609451741"></script><script type="text/javascript" src="/javascripts/jquery.form-min.js?072609451717"></script><script type="text/javascript" src="/javascripts/front.js?072609451757"></script>

  </head>
  <body>
    <div class='center'>
      <div id='header'>
        
        <script type="text/javascript" src="/javascripts/processing_init.js?072609451751"></script>
        <script data-canvas_name='login' type='application/processing'>
          int x_axis = 755;
          int y_axis = 100;
          
          int frame_count = 1;
          
          int[][] logo_coordinates = {
            [100, 40],
            [104, 75],
            [120, 30],
            [142, 43],
          
            [164, 54],
            [195, 49],
            [179, 35],
            [173, 81],
            [192, 75],
          
            [212, 23],
            [219, 88],
            [265, 80],
          
            [282, 30],
            [284, 62],
            [281, 88],
          
            [299, 58],
            [338, 56],
            [350, 43],
            [325, 27],
            [318, 45],
            [321, 82],
          
            [369, 58],
            [401, 53],
            [390, 45],
            [374, 82],
            [398, 81],
          };
          
          int[][] logo_lines = {
            [100, 40, 104, 75],
            [100, 40, 120, 30],
            [120, 30, 142, 43],
          
            [164, 54, 195, 49],
            [195, 49, 179, 35],
            [179, 35, 164, 54],
            [164, 54, 173, 81],
            [173, 81, 192, 75],
          
            [212, 23, 219, 88],
            [219, 88, 265, 80],
          
            [284, 62, 281, 88],
          
            [299, 58, 338, 56],
            [350, 43, 325, 27],
            [325, 27, 318, 45],
            [318, 45, 321, 82],
          
            [369, 58, 401, 53],
            [401, 53, 390, 45],
            [390, 45, 369, 58],
            [369, 58, 374, 82],
            [374, 82, 398, 81],
          };
          
          Plane[] planes = new Plane[3];
          RelifePlane relife_plane;
          
          void setup() {
            size(x_axis, y_axis);
            stroke(255, 255, 0);
            frameRate(20);
            planes[0] = new Plane(1);
            planes[1] = new Plane(2);
            planes[2] = new Plane(3);
            relife_plane = new RelifePlane(100);
          }
          
          void draw() {
            background(14, 17, 94);
            int i, j;
          
            for(i = 0; i < planes.length; ++i) {
              planes[i].update();
            }
            relife_plane.update();
          
            stroke(200, 200, 0, 130);
            boolean star_in_line = false;
            for(i = 0; i < logo_lines.length; ++i) {
              int[] logo_line = logo_lines[i];
              int x1 = logo_line[0];
              int y1 = logo_line[1];
              int x2 = logo_line[2];
              int y2 = logo_line[3];
              for(j = 0; j < planes[0].stars.length; ++j) {
                Star star = planes[0].stars[j];
                int x3 = star.xpos;
                int y3 = star.ypos;
                int a = y2 - y3;
                int b = x3 - x2
                int c = x2 * y3 - x3 * y2;
                if( (((x3 >= x1) && (x3 <= x2)) || ((x3 >= x2) && (x3 <= x1))) &&
                    (((y3 >= y1) && (y3 <= y2)) || ((y3 >= y2) && (y3 <= y1))) &&
                    (abs(a*x1 + b*y1 + c) < 20) ) {
                  star_in_line = true;
                  break;
                }
              }
              if(!star_in_line) {
                line(logo_lines[i][0], logo_lines[i][1], logo_lines[i][2], logo_lines[i][3]);
              } else {
                star_in_line = false;
              }
            }
            stroke(255, 255, 0);
          
            if(frame_count % planes.length == 0) {
              frame_count = 1;
            } else {
              frame_count++;
            }
          }
          
          class Plane {
            int level;
            ArrayList stars;
            Plane(lev) {
              level = lev;
              stars = new ArrayList();
          
              int num_stars = int(random(10)) + 10;
              int i = 0;
              while(i++ < num_stars) {
                stars.add(new Star(int(random(x_axis)), int(random(y_axis))));
              }
            }
          
            void update() {
              int i;
              int len = stars.length
              for(i = 0; i < len; ++i) {
                if(frame_count % level == 0) {
                  stars[i].move();
                }
                stars[i].update(level);
              }
            }
          }
          
          class RelifePlane extends Plane {
            RelifePlane(lev) {
              level = lev;
              stars = new ArrayList();
              int i, len = logo_coordinates.length;
              for(i = 0; i < len; ++i) {
                stars.add(new RelifeStar(logo_coordinates[i][0], logo_coordinates[i][1]));
              }
            }
          }
          
          class Star {
            int xpos, ypos;
            Star(x, y) {
              xpos = x;
              ypos = y;
            }
          
            void move() {
              int mv = int(random(100));
              if(mv < 80) {
                xpos++;
                if(xpos == x_axis) {
                  xpos = 0;
                }
              }
              if(mv < 20) {
                ypos++;
                if(ypos == y_axis) {
                  ypos = 0;
                }
              }
            }
          
            void update(level) {
              point(xpos, ypos);
              switch(level) {
                case 2:
                  point(xpos+1, ypos);
                case 1:
                  point(xpos, ypos-1);
                  point(xpos+1, ypos-1);
              }
              if(int(random(1000)) < 5) {
                twinkle(level);
              }
            }
          
            void twinkle(level) {
              switch(level) {
                case 3:
                  point(xpos+1, ypos);
                  point(xpos-1, ypos);
                  point(xpos, ypos+1);
                  point(xpos, ypos-1);
                  break;
                case 2:
                  point(xpos+2, ypos);
                  point(xpos-1, ypos);
                  point(xpos, ypos+1);
                  point(xpos+1, ypos+1);
                  point(xpos, ypos-1);
                  point(xpos+1, ypos-1);
              }
            }
          }
          
          // for some reason if i use inheritance, the parent's update() is always called.
          class RelifeStar { //}extends Star {
            int xpos, ypos;
            RelifeStar(x, y) {
              xpos = x;
              ypos = y;
              //super(x, y);
            }
          
            void update(level) {
              strokeWeight(2);
              line(xpos, ypos, xpos, ypos-4);
              line(xpos, ypos, xpos+4, ypos-1);
              line(xpos-4, ypos-1, xpos, ypos);
              line(xpos, ypos, xpos+4, ypos+4);
              line(xpos, ypos, xpos-4, ypos+4);
            }
          
            void move() {
              // empty
            }
          }
        </script>
        <canvas height='100px' id='login' width='755px'>
          If you can't see a pretty picture here, you are not going to get much out of this game.
        </canvas>

        <div class='navbar soft'>
          <ul class='navigation'>
            <li class='sign-up-link'>
              <a href="/users/new">Sign Up!</a>
            </li>
            <li>Rules</li>
            <li>About</li>

            <li>Contact</li>
          </ul>
        </div>
        <div class='spacer'></div>
      </div>
      
      <div class='new-user soft'>
        <h4>Create a user</h4>
        <form method="post" action="/users"><div class='move-left'>
          <div>

            <span><label for="user_login">User name (3-32 chars)</label><input type="text" value="" class="text" name="user[login]" id="user_login"/></span>
            <span><a class="font-small name-taken-link" href="#">name taken?</a></span>
            <div id='name-taken-results'>
              <div class='user-taken'>
                Login taken?
                <span class='user-taken-result'></span>
              </div>
              <div class='character-taken'>

                Character taken?
                <span class='character-taken-result'></span>
              </div>
            </div>
          </div>
          <p><label for="user_email">Email address</label><input type="text" value="" class="text" name="user[email]" id="user_email"/></p>
          <p><label for="user_password">Password</label><input type="password" value="" class="password" name="user[password]" id="user_password"/></p>
          <p><label for="user_password_confirmation">Confirm your password</label><input type="password" value="" class="password" name="user[password_confirmation]" id="user_password_confirmation"/></p>

        </div>
        <p><input type="hidden" value="0" class="hidden" name="user[agreed]" id="user[agreed]"/><input type="checkbox" class="checkbox" value="true" name="user[agreed]" id="user_agreed"/><label for="user_agreed">I agree to follow all of the rules.</label></p>
        <p><input type="hidden" value="0" class="hidden" name="user[age_check]" id="user[age_check]"/><input type="checkbox" class="checkbox" value="true" name="user[age_check]" id="user_age_check"/><label for="user_age_check">I am 13 years of age or older.</label></p>
        <p><input type="submit" value="Create user" name="submit" id="submit"/></p>
        </form>
      </div>

      <div class='spacer'></div>
      <div class='soft center navbar'>
        <a href="/">Back to the home page</a>
      </div>
      <div id='footer'>
        <div class='spacer'></div>
        &copy; 2009 relife author
      </div>

    </div>
  </body>
</html>


actual output:

<!DOCTYPE html>
<html>
  <head>
    <title>
      relife
    </title>
    <meta content='text/html; charset=utf-8' http-equiv='content-type'>
    <link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/01reset.css?072609451781" media="all" /><link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/front.css?072609451796" media="all" /><link charset="utf-8" rel="Stylesheet" type="text/css" href="/stylesheets/ui.all.css?072609451733" media="all" />
    <script type="text/javascript" src="/javascripts/jquery.js?072609451712"></script><script type="text/javascript" src="/javascripts/jquery.hoverflow.min.js?072609451786"></script><script type="text/javascript" src="/javascripts/processing.min.js?072609451765"></script><script type="text/javascript" src="/javascripts/jquery-ui.js?072609451741"></script><script type="text/javascript" src="/javascripts/jquery.form-min.js?072609451717"></script><script type="text/javascript" src="/javascripts/front.js?072609451757"></script>

  </head>
  <body>
    <div class='center'>
      <div id='header'>
        
        <script type="text/javascript" src="/javascripts/processing_init.js?072609451751"></script>
        <script data-canvas_name='login' type='application/processing'>
          int x_axis = 755;
          int y_axis = 100;
          
          int frame_count = 1;
          
          int[][] logo_coordinates = {
            [100, 40],
            [104, 75],
            [120, 30],
            [142, 43],
          
            [164, 54],
            [195, 49],
            [179, 35],
            [173, 81],
            [192, 75],
          
            [212, 23],
            [219, 88],
            [265, 80],
          
            [282, 30],
            [284, 62],
            [281, 88],
          
            [299, 58],
            [338, 56],
            [350, 43],
            [325, 27],
            [318, 45],
            [321, 82],
          
            [369, 58],
            [401, 53],
            [390, 45],
            [374, 82],
            [398, 81],
          };
          
          int[][] logo_lines = {
            [100, 40, 104, 75],
            [100, 40, 120, 30],
            [120, 30, 142, 43],
          
            [164, 54, 195, 49],
            [195, 49, 179, 35],
            [179, 35, 164, 54],
            [164, 54, 173, 81],
            [173, 81, 192, 75],
          
            [212, 23, 219, 88],
            [219, 88, 265, 80],
          
            [284, 62, 281, 88],
          
            [299, 58, 338, 56],
            [350, 43, 325, 27],
            [325, 27, 318, 45],
            [318, 45, 321, 82],
          
            [369, 58, 401, 53],
            [401, 53, 390, 45],
            [390, 45, 369, 58],
            [369, 58, 374, 82],
            [374, 82, 398, 81],
          };
          
          Plane[] planes = new Plane[3];
          RelifePlane relife_plane;
          
          void setup() {
            size(x_axis, y_axis);
            stroke(255, 255, 0);
            frameRate(20);
            planes[0] = new Plane(1);
            planes[1] = new Plane(2);
            planes[2] = new Plane(3);
            relife_plane = new RelifePlane(100);
          }
          
          void draw() {
            background(14, 17, 94);
            int i, j;
          
            for(i = 0; i < planes.length; ++i) {
              planes[i].update();
            }
            relife_plane.update();
          
            stroke(200, 200, 0, 130);
            boolean star_in_line = false;
            for(i = 0; i < logo_lines.length; ++i) {
              int[] logo_line = logo_lines[i];
              int x1 = logo_line[0];
              int y1 = logo_line[1];
              int x2 = logo_line[2];
              int y2 = logo_line[3];
              for(j = 0; j < planes[0].stars.length; ++j) {
                Star star = planes[0].stars[j];
                int x3 = star.xpos;
                int y3 = star.ypos;
                int a = y2 - y3;
                int b = x3 - x2
                int c = x2 * y3 - x3 * y2;
                if( (((x3 >= x1) && (x3 <= x2)) || ((x3 >= x2) && (x3 <= x1))) &&
                    (((y3 >= y1) && (y3 <= y2)) || ((y3 >= y2) && (y3 <= y1))) &&
                    (abs(a*x1 + b*y1 + c) < 20) ) {
                  star_in_line = true;
                  break;
                }
              }
              if(!star_in_line) {
                line(logo_lines[i][0], logo_lines[i][1], logo_lines[i][2], logo_lines[i][3]);
              } else {
                star_in_line = false;
              }
            }
            stroke(255, 255, 0);
          
            if(frame_count % planes.length == 0) {
              frame_count = 1;
            } else {
              frame_count++;
            }
          }
          
          class Plane {
            int level;
            ArrayList stars;
            Plane(lev) {
              level = lev;
              stars = new ArrayList();
          
              int num_stars = int(random(10)) + 10;
              int i = 0;
              while(i++ < num_stars) {
                stars.add(new Star(int(random(x_axis)), int(random(y_axis))));
              }
            }
          
            void update() {
              int i;
              int len = stars.length
              for(i = 0; i < len; ++i) {
                if(frame_count % level == 0) {
                  stars[i].move();
                }
                stars[i].update(level);
              }
            }
          }
          
          class RelifePlane extends Plane {
            RelifePlane(lev) {
              level = lev;
              stars = new ArrayList();
              int i, len = logo_coordinates.length;
              for(i = 0; i < len; ++i) {
                stars.add(new RelifeStar(logo_coordinates[i][0], logo_coordinates[i][1]));
              }
            }
          }
          
          class Star {
            int xpos, ypos;
            Star(x, y) {
              xpos = x;
              ypos = y;
            }
          
            void move() {
              int mv = int(random(100));
              if(mv < 80) {
                xpos++;
                if(xpos == x_axis) {
                  xpos = 0;
                }
              }
              if(mv < 20) {
                ypos++;
                if(ypos == y_axis) {
                  ypos = 0;
                }
              }
            }
          
            void update(level) {
              point(xpos, ypos);
              switch(level) {
                case 2:
                  point(xpos+1, ypos);
                case 1:
                  point(xpos, ypos-1);
                  point(xpos+1, ypos-1);
              }
              if(int(random(1000)) < 5) {
                twinkle(level);
              }
            }
          
            void twinkle(level) {
              switch(level) {
                case 3:
                  point(xpos+1, ypos);
                  point(xpos-1, ypos);
                  point(xpos, ypos+1);
                  point(xpos, ypos-1);
                  break;
                case 2:
                  point(xpos+2, ypos);
                  point(xpos-1, ypos);
                  point(xpos, ypos+1);
                  point(xpos+1, ypos+1);
                  point(xpos, ypos-1);
                  point(xpos+1, ypos-1);
              }
            }
          }
          
          // for some reason if i use inheritance, the parent's update() is always called.
          class RelifeStar { //}extends Star {
            int xpos, ypos;
            RelifeStar(x, y) {
              xpos = x;
              ypos = y;
              //super(x, y);
            }
          
            void update(level) {
              strokeWeight(2);
              line(xpos, ypos, xpos, ypos-4);
              line(xpos, ypos, xpos+4, ypos-1);
              line(xpos-4, ypos-1, xpos, ypos);
              line(xpos, ypos, xpos+4, ypos+4);
              line(xpos, ypos, xpos-4, ypos+4);
            }
          
            void move() {
              // empty
            }
          }
        </script>
        <canvas height='100px' id='login' width='755px'>
          If you can't see a pretty picture here, you are not going to get much out of this game.
        </canvas>

        <div class='navbar soft'>
          <ul class='navigation'>
            <li class='sign-up-link'>
              <a href="/users/new">Sign Up!</a>
            </li>
            <li>Rules</li>
            <li>About</li>

            <li>Contact</li>
          </ul>
        </div>
        <div class='spacer'></div>
      </div>
      
      <div class='new-user soft'>
        <h4>Create a user</h4>
            <div class='move-left'>

          <div>
            <span><label for="user_login">User name (3-32 chars)</label><input type="text" value="" class="text" name="user[login]" id="user_login"/></span>
            <span><a class="font-small name-taken-link" href="#">name taken?</a></span>
            <div id='name-taken-results'>
              <div class='user-taken'>
                Login taken?
                <span class='user-taken-result'></span>
              </div>

              <div class='character-taken'>
                Character taken?
                <span class='character-taken-result'></span>
              </div>
            </div>
          </div>
          <p><label for="user_email">Email address</label><input type="text" value="" class="text" name="user[email]" id="user_email"/></p>
          <p><label for="user_password">Password</label><input type="password" value="" class="password" name="user[password]" id="user_password"/></p>

          <p><label for="user_password_confirmation">Confirm your password</label><input type="password" value="" class="password" name="user[password_confirmation]" id="user_password_confirmation"/></p>
        </div>
        <p><input type="hidden" value="0" class="hidden" name="user[agreed]" id="user[agreed]"/><input type="checkbox" class="checkbox" value="true" name="user[agreed]" id="user_agreed"/><label for="user_agreed">I agree to follow all of the rules.</label></p>
        <p><input type="hidden" value="0" class="hidden" name="user[age_check]" id="user[age_check]"/><input type="checkbox" class="checkbox" value="true" name="user[age_check]" id="user_age_check"/><label for="user_age_check">I am 13 years of age or older.</label></p>
        <p><input type="submit" value="Create user" name="submit" id="submit"/></p>
    <form method="post" action="/users">false</form>
      </div>

      <div class='spacer'></div>
      <div class='soft center navbar'>
        <a href="/">Back to the home page</a>
      </div>
      <div id='footer'>
        <div class='spacer'></div>
        &copy; 2009 relife author
      </div>

    </div>
  </body>
</html>
