Osito | Los colores

Cuando hicimos el dibujo del osito, lo pusimos en color blanco, ya que los colores predefinidos no tienen café, ahora vamos a cambiar los colores por colores personalizados, para esto necesitamos entender como se manejan los colores en java. Haremos uso de la clase Color, como ya había mencionado, tiene colores predefinidos que son los siguientes:

Como podemos observar son colores básicos y muy limitados, sin embargo podemos crear nuestro propio color, para esto necesitamos crear un objeto nuevo de la clase Color, lo podemos hacer dentro de la llamada al método setColor(obj Color), o cualquier otro que reciba un objeto de la clase Color.
Tenemos que entender que Color trabaja los colores en formato RGB, es decir, tenemos que indicar un valor para el Rojo, uno para el verde (Green) y uno para el azul (Blue), los podemos indicar como enteros, como valores flotantes y como números random. Para los enteros y los números random vamos a trabajar en un rango de 0-255, 0 es sin saturación de dicho color y 255 es la máxima saturación de color, los números flotantes son menos utilizados en los applets sencillos de java, sin embargo para otras aplicaciones son los que se utilizan, se manejan en un rango de 0-1, para poner un valor se tiene que hacer una división, por ejemplo, si en el valor de r quiero poner 191, el valor en flotante sería la división del 191 entre el 255, por lo tanto quedaría 191/255, pero aquí no utilizaremos dichos valores. Para sacar los colores que queremos y no estar "adivinando valores" es conveniente usar un seleccionador de colores, el más simple cuando no se tiene una herramienta especializada es el que aparece en Google, lo único que hacemos es buscar "rgb color picker" lo cuál nos da como resultado:

Si queremos algo más concreto, podemos hacer uso de paletas de colores predefinidos, a mi me gusta bastante esta página http://www.colourlovers.com/

 ya que puedes buscar las paletas por temas o colores y elegir los que más te gusten, ahí mismo te da los valores de cada color, por ejemplo, para el dibujo del osito, elegí la siguiente paleta de colores:

Para crear nuestos colores podemos hacerlo de dos maneras, como ya había mencionado; creando un objeto nuevo al principio, o creando el objeto directamente en la invocación, la ventaja de crear los objetos al principio es que si queremos volver a utilizar ese color ya lo tenemos definido, pero si sabemos que ese color solamente se va a utilizar una vez es más conveniente hacer el objeto dentro de la invocación, para ahorrarnos líneas de código. Claro esto ya es preferencia de cada quién.
Vamos a modificar los colores del osito con ambos métodos, por ejemplo, el fondo lo pondré del color "Faded", como no lo voy a utilizar nuevamente, haré el objeto directamente en la invocación de setBackground(obj Color), para hacerlo en el parámetro voy a crear el objeto de la siguiente manera:
setBackground(new Color(R,G,B));
En R,G,B es donde vamos a poner los valores del color, están en orden (228,241,221) en todas las herramientas para selección de colores, los encontramos en orden o indicados por las letras que corresponden y en la creación del objeto los vamos a poner en el mismo orden.
Así para el fondo, el código quedaría de la siguiente manera:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Y podemos ver que el fondo ya tiene el color que elegimos:

Ahora para hacer la base usaré el color "Fizz"(185,165,143), para esto voy a crear el objeto antes de hacer la invocación:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}

Para el contorno de la boca y la línea que va de la nariz voy a usar "Woodstock" (162,140,116), haciendo nuevamente la creación fuera de la invocación:
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}

Por último voy a cambiar el color de las orejas y la nariz, para esto haré uso de la herramienta de Google:

Para crear el color (255,221,228), para este color haré el objeto dentro de la invocación:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color(228,241,221));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(new Color(255,221,228));
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}

Y así queda nuestro dibujo con los colores nuevos, ahora si queremos que los colores sean distintos cada vez que corramos nuestra aplicación podemos hacer uso de números random, para verlo voy a hacer que el fondo sea un color distinto, para esto, necesitamos generar 3 números random, uno para cada valor:
(int)Math.round(Math.random()*256)
entonces para poder poner los tres colores el código quedaría así:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(new Color((int)Math.round(Math.random()*256),(int)Math.round(Math.random()*256),(int)Math.round(Math.random()*256)));
}
public void paint(Graphics g)
{
Color Fizz=new Color(185,165,143);
Color Woodstock=new Color(162,140,116);
g.setColor(Fizz);
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.setColor(Woodstock);
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(new Color(255,221,228));
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}
Así, cada que corremos nuestra aplicación, nos aparece un color de fondo distinto:

                                             

Osito | Los métodos drawOval y fillOval

Como mencioné anteriormente, la clase Graphics tiene distintos métodos para dibujar figuras, vamos a iniciar con el método fillOval(x,y,anc,alt) y drawOval(x,y,anc,alt) que nos permiten dibujar óvalos, para entender como funcionan vamos a hacer la siguiente imagen:

Para que sea mas sencilla la ubicación de coordenadas utilizaremos la herramienta paint, para hacer nuestro dibujo, la forma más simple de hacerlo es ir poniendo figura por figura y copiar sus coordenadas de la siguiente manera:

Para dibujarlo en un Applet usamos el siguiente código:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);
}
}
Que nos muestra lo siguiente:

Continuamos realizando nuestro dibujo con dos óvalos más para las orejas:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
}
}

Vamos a agregar los ojos, para esto necesitamos cambiar el color para que puedan distinguirse de lo demás, haremos uso del método setColor(obj Color), el cual nos permite cambiar el color de una sección (todo lo que pongamos abajo de esta invocación tendrá el color elegido):
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
}
}

Para hacer la figura de la boca haremos uso del método drawOval(x,y,anc,alt), este método dibuja solo el contorno del óvalo:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
}
}

Dibujamos la nariz, podemos volver a cambiar el color sin afectar al color previo:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
}
}

Por último ponemos el interior de las orejas:
import java.applet.Applet;
import java.awt.*;
public class Osito extends Applet
{
public void init()
{
setSize(500,500);
setBackground(Color.lightGray);
setForeground(Color.white);
}
public void paint(Graphics g)
{
g.fillOval(80,154,305,305);//Cabeza
g.fillOval(25,115,139,139);//Oreja Izquierda
g.fillOval(300,115,139,139);//Oreja Derecha
g.setColor(Color.black);
g.fillOval(136,292,33,33);//Ojo Izquierdo
g.fillOval(290,292,33,33);//Ojo Derecho
g.drawOval(187,326,98,100);//Boca
g.fillOval(230,361,4,51);//Nariz-Boca
g.setColor(Color.pink);
g.fillOval(220,351,26,13);//Nariz
g.fillOval(49,145,85,85);//Oreja Izquierda Interna
g.fillOval(324,145,85,85);//Oreja Derecha Interna
}
}

Al final la imagen que comenzamos a crear en paint quedó algo así (solo creé las partes izquierdas y calculé la coordenada de x para la parte derecha):

Hola mundo | La clase Font

Al crear nuestro primer applet que dibuja la cadena "Hola mundo" pudimos observar que el texto era muy pequeño, para que sea más grande haremos uso del método setFont(obj Font), aquí podemos modificar mediante un objeto de la clase Font, el tipo de fuente, el estilo y el tamaño. Los estilos de fuente son los siguientes: Font.PLAIN (Sin formato), Font.BOLD (Negritas) y Font.ITALIC (Cursiva).

Los tipos de fuente son: "Dialog", "DialogInput", "SansSerif", "Serif" y "Monospaced".

Podemos hacer uso también de las fuentes que tiene el sistema, para saber cuales son utilizamos:

String Fuentes[]=GraphicsEnviroment.getLocalGraphicsEnviroment().getAvailableFontFamilyNames();

Al igual que los objetos de la clase Color, podemos crear los objetos Font previamente, o dentro de la invocación.

Ejemplo del uso de Font:

import java.applet.Applet;

import java.awt.*;

public class Ejemplo extends Applet

{

public void init()

{

setSize(500,500);

setBackground(Color.pink);

setForeground(Color.yellow);

}

public void paint(Graphics g)

{

g.setFont(new Font("Monospaced",Font.BOLD,60));

g.drawString("Hola mundo",80,250);

}

}

En este caso, se disminuyó la coordenada x para dibujar la fuente, ya que el tamaño no permitía que se visualizara el texto completo con las coordenadas previas.

Al correr nuestro Applet se vería algo así:

Las diversas fuentes se ven de la siguiente manera:

Los estilos de fuente se ven de la siguiente manera (Haciendo uso del tipo de funte "Dialog"):

Hola mundo | Crear nuestro primer Applet

El código para hacer un applet que muestre el letrero "Hola mundo" es el siguiente:

import java.applet.Applet;

import java.awt.*;

public class Ejemplo extends Applet

{

public void init()

{

setSize(500,500);

setBackground(Color.pink);

setForeground(Color.yellow);

}

public void paint(Graphics g)

{

g.drawString("Hola mundo",220,250);

}

}

Lo primero que nos encontramos son las importaciones de los paquetes necesarios, siempre que hagamos un Applet, serán necesarias esas líneas.

A continuación tenemos la cabecera de nuestra clase, donde, después del nombre de la clase vamos a heredar de la clase Applet (extends Applet).

El primer método que encontramos es init() donde vamos a inicializar el Applet, aquí podemos modificar el tamaño, el color de fondo (por default blanco) y el color frontal (por default negro), el método setSize(x,y), nos permite establecer la medida del Applet con x,y. El método setBackground(obj Color), nos permite cambiar el color de fondo mediante un objeto de la clase Color, el método setForeground(obj color) nos permite cambiar el color frontal, haciendo uso también de un objeto de la clase color. Los colores pueden ser definidos previamente o dentro de la llamada al método, pueden ser colores ya preestablecidos(Color.blue(.black|.white|.yellow|.cyan|.green|.pink|.magenta|.red|.gray|.lightGray|.darkGray)) o podemos crear nuestros propios colores haciendo un objeto nuevo (Después explicaré más a fondo la creación de colores).

Después tenemos el método paint(Graphics g), recibe un objeto de la clase Graphics (en este caso g) que es el que nos va a permitir dibujar en nuestro applet.

Hay diversos métodos para dibujar las primitivas básicas (óvalos, rectángulos, arcos, polígonos, polilineas, cadenas, caracteres), además de otras funciones como limpiar un área de la pantalla, copiarla, dibujar imágenes, etc...

Para este ejemplo solo haremos uso del método drawString(String,x,y), donde String es la cadena que queremos imprimir, x,y son las coordenadas a partir de donde se va a dibujar nuestra cadena.

Para poder posicionar de manera correcta los objetos en nuestros Applets tenemos que considerar que la esquina superior izquierda es la coordenada 0,0, y la esquina inferior derecha es la coordenada 500,500 (para este ejemplo). No se manejan las coordenadas negativas dentro del espacio visible del applet.

Al momento de correr nuestro Applet, se vería algo así:

El fondo queda color rosa y el texto amarillo, como podemos observar el tamaño por default del texto es relativamente pequeño (dependiendo el tamaño de nuestro Applet) en el siguiente post, hablaré sobre la clase Font, para que nuestras cadenas se visualicen con diferentes estilos de texto y tamaño.