manipulación de texto

src/index.md

@@ -68,6 +68,7 @@ title: "🍃 jardínBit"
 ## Arreglos
 
 * [[Arreglos: Fundamentos]](/notas/arreglos.html)
+* [[Manipulación de texto]](/notas/strings.html)
 
 ## Manipulación de imágenes
 

src/notas/strings.md

@@ -0,0 +1,246 @@
+---
+title: "Manipulación de texto"
+---
+
+La base para trabajar con texto en Processing es la clase `String` (cadena de texto) que funciona como un arreglo de caracteres.
+
+# Clase `String`
+
+Para indicar que estamos utilizando una `String`, utilizamos comillas.
+
+```java
+String texto = "¡Hola!";
+```
+
+Nota que cuando estamos utilizando caracteres individuales, utilizamos comillas sencillas.
+
+```java
+char caracter = 'a';
+```
+
+## Algunos métodos
+
+Estos son algunos métodos que tiene la clase `String`. 
+
+Puedes encontrar más en la [referencia de String de Processing](https://processing.org/reference/String.html) y aún más en la [documentación de String de Java](https://docs.oracle.com/javase/8/docs/api/java/lang/String.html).
+
+### `.length()`
+
+Regresa un número entero (`int`) correspondiente a cuántos caracteres tiene la cadena de texto.
+
+```java
+String texto = "Hola mundo";
+int numCaracteres = texto.length(); // 10
+```
+
+### `.charAt( i )`
+
+Regresa el caracter que está en la posición dada por el entero `i`. La cuenta de los caracteres empieza desde el 0, que es el caracter más a la izquierda.
+
+```java
+String texto = "Hola mundo";
+char c = texto.charAt( 3 ); // 'a'
+```
+
+### `.toUpperCase()` y `.toLowerCase()`
+
+Estos métodos regresan una `String` con el *case* cambiado.
+
+```java
+String texto = "Hola Mundo";
+String enMinusculas = texto.toLowerCase(); // "hola mundo"
+String enMayusculas = texto.toUpperClase(); // "HOLA MUNDO"
+```
+
+### `.equals( s )`
+
+Este método nos permite comparar dos `String`s para ver si son exactamente iguales:
+
+```java
+String texto = "Hola mundo";
+
+if ( texto.equals( "hola" ) ){  // si el texto es exactamente "hola"
+   // ...
+}
+else{
+
+}
+```
+
+# Dibuja texto
+
+Podemos dibujar texto en la pantalla de processing utilizando la función `text( )`:
+
+```java
+String texto = "hola mundo";
+text( texto, 100, 200); // dibuja el texto en las coordenadas 100, 200
+```
+
+En la [referencia de Processing de text()](https://processing.org/reference/text_.html) hay más ejemplos y funciones relacionadas.
+
+# Ejemplos
+
+## Recorre los caracteres de una `String`
+
+Podemos utilizar los métodos `.length()` y  `.charAt( )` para crear un ciclo `for` similar a los que creamos para recorrer un arreglo.
+
+```java
+String texto = "Hola mundo";
+
+for( int i=0; i<texto.length(); i++){
+    char c = texto.charAt( i );
+    // haz algo con c
+}
+```
+
+## Una propia fuente
+
+Podemos utilizar el ciclo anterior para dibujar una figura distinta de acuerdo al caracter en la cadena de texto.
+
+La siguiente plantilla utiliza una `String`, y a partir de ella dibuja un cuadrado en donde iría cada 'a' u 'o', un círculo en cualquier otro caracter, y deja espacio en donde hay espacio:
+
+```java
+String texto = "Hola mundo";
+void setup(){
+  size( 640, 480);
+}
+
+void draw(){
+  background(255);
+  fill(0);
+  rectMode(CENTER);
+  float x = 20; // coordenada x inicial
+  float y = 240; // coordenada y
+  for( int i=0; i < texto.length(); i = i+1){
+    if( texto.charAt( i ) == 'a' || texto.charAt( i ) == 'o' ){
+      fill(255);
+      rect( x, y, 20, 20);
+    }
+    else if( texto.charAt( i ) == ' '){
+     // en espacio no dibujes nada 
+    }
+    else{ 
+      fill(0);
+      ellipse( x, y, 20, 20 );
+    }
+
+    x += 20; // incrementa x
+  } // cierra for
+  
+} // cierra draw
+```
+
+### usando una función propia
+
+El siguiente ejemplo es similar, pero utiliza una función propia para los caracteres 'a' u 'o', dando una idea de cómo se podría utilizar con una función para cada posible caracter.
+
+```java
+String texto = "Hola mundo";
+
+void setup(){
+  size( 640, 480);
+}
+
+void draw(){
+  background(255);
+  fill(0);
+  rectMode(CENTER);
+  float x = 20; // coordenada x inicial
+  float y = 240; // coordenada y
+  for( int i=0; i < texto.length(); i = i+1){
+    if( texto.charAt( i ) == 'a' || texto.charAt( i ) == 'o' ){
+      fill(255);
+      tache( x, y );
+    }
+    else if( texto.charAt( i ) == ' '){
+     // en espacio no dibujes nada 
+    }
+    else{
+      fill(0);
+      ellipse( x, y, 20, 20 );
+    }
+  } // cierra for
+  
+} // cierra draw
+
+void tache( float x, float y ){
+ pushMatrix(); 
+  translate( x, y); 
+  
+  line(-10, -10, 10, 10);
+  line(-10, 10, 10, -10);
+  
+  popMatrix();
+}
+```
+
+## Caracteres oscilando
+
+Podemos dibujar a los caracteres habituales, pero con la posibilidad de controlar la posición de cada uno.
+
+Por ejemplo, podemos utilizar una función senoidal para cambiar y animar la posición vertical de cada caracter.
+
+```java
+String texto = "The way you can go isn’t the real way."; 
+
+void setup(){
+  size( 640, 480);
+}
+
+void draw(){
+  background(255);
+  fill(0);
+  textSize( 15 );
+  float x = 0; // x inicial
+  for( int i=0; i < texto.length(); i = i+1){
+    float y = 240*sin( frameCount*0.01 + i*0.2) + 240;
+    text( texto.charAt(i), x, y);
+    x += 15; // incrementa x
+  } // cierra for
+  
+} // cierra draw
+```
+
+# Archivos de texto
+
+Podemos entender a un archivo de texto plano (o "texto sin formato") como una colección de líneas de texto: un arreglo de `String`s!
+
+Para agregar un archivo de texto (.txt) a nuestro sketch, lo podemos arrastrar a la ventana de código, o colocarlo en el mismo directorio o carpeta que donde se encuentra nuestro código.
+
+
+## Ciclo anidado: caracteres en líneas
+
+
+Este ejemplo carga un archivo de texto plano y dibuja un cuadrado donde hay cualquier carácter, excepto espacio, donde no dibuja nada:
+
+```java
+String[] lineas;
+
+void setup(){
+  size( 800, 480);
+  
+  lineas = loadStrings("capitulo1.txt");
+}
+
+void draw(){
+  background(255);
+  fill(0);
+  rectMode(CENTER);
+  
+  // por cada línea de texto...
+  for( int i=0; i<lineas.length; i=i+1){
+
+    // por cada caracter de esa línea:
+    for( int j=0; j<lineas[i].length(); j=j+1){
+      if( lineas[i].charAt(j) == ' '){
+        
+      }
+      else{
+        rect( j*20+20, i*20+20, 20, 20);  
+      }
+
+    } // cierra for j
+  } // cierra for i
+  
+} // cierra draw
+```