5000 Elefantes (Processing.js - Dirty Fix)

No me gusta dejar las cosas a medias, asi que no quede conforme con los 2499 elefantes.  Esta es una solucion algo cochina, pero igual, funciona.  El problema radica en el tamaño de la ventana que processing puede dibujar.  Asi que dividi el codigo en 5 partes, para llegar a 5000 elefantes, de mil en mil.  El tamaño de la ventana se ha reducido bastante, y solo fue cuestion de implementar algunos cambios menores.

Parece ser que a dropbox todavia no le gustan los caracteres especiales. Sigue dandome cajitas magicas de misterio y asombro en lugar de eñes... :)


-OR-

Try It

1000 Elefantes

// 1000 Elefantes
// jon tohrs
// send me money -_-
// window geometry
size (580, 12020, P2D);
background (#740000);

// variables
String a = "s";
String b = "n";
String c = "ron";
int e = 1;

// strings
for (int i=1; i<1001; ) {
  if (i == 1) {a = "";} else {a = "s";}
  if (i == 1) {b = "";} else {b = "n";}
  if (i == 1) {c = "";} else {c = "ron";}
  String w = (i + " elefante" + a);
  String x = (" se columpiaba" + b);
  String y = ("Como veia" + b);
  String z = ("fue" + c + " a llamar");
  e++; 
  i++;
  textSize(10);
  text (w + x + " sobre la tela de una araña.  " + y + " que resistia, " + z + " a otro elefante...", 10, 12*e);  // output
}

El codigo anterior muestra de 1 a 1000 elefantes. Es un poco mas largo, ya que tiene que determinar si el resultado sera plural or singular.

El codigo que sigue es mas sencillo, y se repite hasta el final.
2000 - 5000 Elefantes
// 2000 Elefantes
// jon tohrs
// send me money -_-
// window geometry
size (580, 12035, P2D);
background (#740000);

// variables
int j = 1;

// strings
for (int i=1000; i<2001; ) {
  String a = (i + " elefantes");
  String b = (" se columpiaban");
  String c = (" sobre la tela");
  String d = (" de una araña.  ");
  String e = ("Como veian");
  String f = (" que resistia,");
  String g = (" fueron a llamar");
  String h = (" a otro elefante...");
  j++; 
  i++;
  textSize(10);
  text (a + b + c + d + e + f + g + h, 10, 12*j);
}

No era realmente necesario separar todo en strings. El resultado habria sido el mismo de incluir todo en "text", pero no me gustan las lineas muy largas. Dividirlo en strings lo hace mas legible, al menos para mi.

Para seguir contando elefantes, solo hay que hacer otros 3 archivos iguales. Cambiando el siguiente codigo:

for (int i=1000; i<2001; )

Por el siguiente:

for (int i=2000; i<3001; )


for (int i=3000; i<4001; )


for (int i=4000; i<5001; )

Y asi es como dividimos el codigo en partes iguales, de manera que podamos llegar sin problemas a los 5000 elefantes.

Una vez solucionado el problema del tamaño, todavia tenemos que lidiar con el problema de la presentacion. La solucion no es muy elegante, pero funciona: habiendo 5 archivos pde con un fragmento de codigo cada uno, utilizo un archivo html distinto para cada uno, y los relaciono todos con una serie de links.

pagina de inicio
 <!DOCTYPE html>  
      <head>  
           <meta http-equiv="content-type" content="text/html; charset=utf-8" />  
           <title>5000 Elefantes - Processing - jon tohrs</title>  
           <link rel="icon" type="image/x-icon" href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAADAQAAVzABAEAjBQAaDwYAWjUGAGE6CQBrQQ0ATS8PAFhAJwBUQC8AbFI6AHVXPACBZk4A4NrWAPb19QAAAAAAAMmZmZmZmgAJIwAAAAAAcMIjPjA+PjAKpxIuMDMzMAm0Ii4zMzMACaIiLt3dMAAJtyIuIzPQAAm0Un5yM+IzKLRkfncy4iIotRF+dyLkIiq0QX53F+EiGrQUTkd34iIatEVu7u5iIVrBVVRBRFRVbAtGZGZla2uwAMu7u7u8vADAAwAAgAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIABAADAAwAA" />  
           <meta name="Generator" content="Processing" />  
           <!-- - - - - - - - - - - - - - - - - - - - -   
           +  
           +  Wondering how this works?   
           +  
           +  Go to: http://processing.org/  
           +  and: http://processingjs.org/  
           +  
           + - - - - - - - - - - - - - - - - - - - - -->  
           <style type="text/css">  
      body {  
       background-color: #333; color: #bbb; line-height: normal;  
       font-family: Lucida Grande, Lucida Sans, Arial, Helvetica Neue, Verdana, Geneva, sans-serif;  
       font-size: 11px; font-weight: normal; text-decoration: none;  
            line-height: 1.5em;  
      }  
      a img {   
           border: 0px solid transparent;  
      }  
      a, a:link, a:visited, a:active, a:hover {   
           color: #cdcdcd; text-decoration: underline;  
      }  
      h1 {  
        font-family: Arial, Helvetica Neue, Verdana, Geneva, sans-serif;  
           width: 100%; letter-spacing: 0.1em;  
           margin-bottom: 1em; font-size: 1.65em;  
      }  
      canvas {   
           display: block;   
           outline: 0px;   
           margin-bottom: 1.5em;   
      }  
      #content {   
           margin: 50px auto 0px auto; padding: 25px 25px 15px 25px;  
           width: 580px; min-width: 300px; overflow: auto;  
           border-left: 1px solid #444; border-top: 1px solid #444;   
           border-right: 1px solid #333; border-bottom: 1px solid #333;  
           background-color: #3d3d3d;  
      }  
           </style>  
           <!--[if lt IE 9]>  
                <script type="text/javascript">alert("Your browser does not support the canvas tag.");</script>  
           <![endif]-->  
           <script src="processing.js" type="text/javascript"></script>  
           <script type="text/javascript">  
 // convenience function to get the id attribute of generated sketch html element  
 function getProcessingSketchId () { return 'elefantes'; }  
 </script>  
      </head>  
      <body>  
           <div id="content">  
                <div>  
                     <canvas id="elefantes" data-processing-sources="elefantes.pde"   
                               width="580" height="12020">  
                          <p>Your browser does not support the canvas tag.</p>  
                          <!-- Note: you can put any alternative content here. -->  
                     </canvas>  
                     <noscript>  
                          <p>JavaScript is required to view the contents of this page.</p>  
                     </noscript>  
             </div>  
 <h1>5000 Elefantes - jon tohrs</h1>  
                <b>Send me money -_-</b>  
             <p id="description">Codigo dividido de mil en mil: Uno por cada boton.</p>  
 <form action="https://dl.dropboxusercontent.com/u/4647913/processing-apps/elefantes.html">  
 <input type="submit" value="1000" />  
 </form><form action="https://dl.dropboxusercontent.com/u/4647913/processing-apps/elefantes2.html">  
 <input type="submit" value="2000" />  
 </form><form action="https://dl.dropboxusercontent.com/u/4647913/processing-apps/elefantes3.html">  
 <input type="submit" value="3000" />  
 </form><form action="https://dl.dropboxusercontent.com/u/4647913/processing-apps/elefantes4.html">  
 <input type="submit" value="4000" />  
 </form><form action="https://dl.dropboxusercontent.com/u/4647913/processing-apps/elefantes5.html">  
 <input type="submit" value="5000" />  
 </form>  
 <br /><form action="http://gnome-bot.blogspot.com/2014/05/5000-elefantes-processingjs-dirty-fix.html">  
 <input type="submit" value="Back to Blog" />  
 </form><br />  
                Built with <a href="http://processing.org" title="Processing">Processing</a>  
                and <a href="http://processingjs.org" title="Processing.js">Processing.js</a>  
                </p>  
           </div>  
      </body>  
 </html>  


Por cada link, hay que cambiar el siguiente codigo:
data-processing-sources="elefantes.pde"

Por el siguiente:
data-processing-sources="elefantes2.pde"

data-processing-sources="elefantes3.pde"

data-processing-sources="elefantes4.pde"

data-processing-sources="elefantes5.pde"