Colegio Seminario Diocesano Tecnologa e Informatica

Definicion de Clases
Mg. Fausto M. Lagos S., : Processing

n esta actividad aprendera los conceptos necesarios para entender la definicion de clases de objetos

E y como incorporar un nuevo objeto dentro de un sketch de processing lo cual le permitira abordar
desde otra instancia los criterios de modularidad y reuso del codigo en un ambiente de desarrollo.
Empezara por desarrollar ejercicios simples que aumentaran en grado de complejidad a medida que
avanza en el dominio de los conceptos necesarios, lea cuidadosamente los planteamientos y desarrolle
todos los ejercicios propuestos antes de continuar a la siguiente seccion.

1. Introduccion
Piense en la siguiente pregunta Cuales son los atributos que definen a un contenedor de lquidos? Ahora

Figura 1: Objetos contenedores de lquidos

piense Que diferencia hay entre los atributos de un objeto (e.g. un contenedor de lquidos) y sus funciones?.
Como ya lo dedujo, los atributos de un objeto son las caractersticas que lo definen como parte de una
clase especfica de objeto, por ejemplo, algunos de los atributos de un contenedor de lquidos son el material
con el que esta construido, la forma (vaso, copa, botella, etc.), el color, la altura, el diametro, el volumen, etc.
mientras que las funciones de un objeto son las tareas que puede realizar el objeto, as, por ejemplo papora
el objeto de la clase contenedor algunas funciones son llenarse, desocuparse, romperse, etc. Entender esta
diferencia es lo que hara que se entienda la construccion de clases de objetos en processing.
Entonces, puede tenerse que existen muchos objetos con los mismos atributos y funciones que por
tanto pertenecen a la misma clase pero cuyos atributos estan definidos de forma unica para cada uno, i.e.
una copa y un baso son los dos objetos de la misma clase (contenedores de lquidos) pero un baso puede
ser plastico de color verde mientras que una copa puede ser de cristal y transparente, tienen los mismos
atributos (material y color) pero con valores diferentes, as mismo sucede con los objetos de programacion
que a continuacion vera como definir en processing.

Introduccion a la programacion con Processing 2017 Pag. 1 de 6

Colegio Seminario Diocesano Tecnologa e Informatica

2. Definir una nueva clase de objeto en Processing

Definir una nueva clase de objeto corresponde a agregar un bloque de codigo que contiene variables
que llamaremos locales utilizadas para establecer los atributos del objeto que se este definiendo y funciones
de clase que llamaremos metodos que definen los comportamientos del objeto.

La palabra clave class inicia el bloque de codi-

Sintaxis de definicion de una clase
go que conforma una clase.
1 c l a s s name{ Los atributos son variables locales de cualquier
2 type a t r i b u t e s ; tipo.
3
El constructor define el valor de los atributos a
4 // c o n s t r u c t o r
5 name ( type i np ut arguments ) { partir de los parametros de entrada.
6 d e f i n i t i o n of a t r i b u t e s ; El nombre de la clase y del constructor debe
7 } ser identico.
8
Los metodos pueden ser funciones con retorno
9 type method ( ) {
10 d e f i n i t i o n o f method o sin retor, con parametros de entrada o no.
11 } Una clase es un bloque de codigo independien-
12 } te por lo que su presencia en el sketch puede estar
incluso en un archivo separado, si se define dentro
del sketch debe estar fuera de las funciones setup y
draw .

Ejercicio 1: Pensar un objeto

Piense en una clase de objeto y responda sobre ese objeto cuales son sus atributos? que funciones
(metodos) pertenecen a este objeto? responda mnimo tres tributos y dos funciones para el objeto que
va a crear.

Ejercicio 2: Definir un objeto

Lea detenidamente el codigo de la clase bubble y comente cada una de sus lneas, despues responda
que pasara cuando llame al metodo display de un objeto de la clase bubble ?.

1 c l a s s bubble {
2 float h, k, d;
3
4 bubble ( f l o a t a b s c e n t r o , f l o a t o r d c e n t r o , f l o a t r a d i o ) {
5 h = abs centro ;
6 k = ord centro ;
7 d = 2 radio ;
8 }
9
10 void d i s p l a y ( ) {
11 f i l l ( # 00BEBE ) ;
12 e l l i p s e (h , k , d , d) ;
13 }
14
15 }

Listing 1: Clase Bubble

Finalmente, cree un metodo de la clase bubble llamado ascend que permita que la burbuja ascienda
desde su posicion inicial hasta tocar el borde superior del lienzo.

Introduccion a la programacion con Processing 2017 Pag. 2 de 6

Colegio Seminario Diocesano Tecnologa e Informatica

3. Crear objetos a partir de una nueva clase

Definir una nueva clase de objeto es totalmente diferente a crear un objeto ya que al definir una clase
solamente se estan creando las caractersticas que determinan al objeto pero aun no se vera nada en el lienzo
de trabajo del sketch de processing.

3.1. Crear un objeto

Para crear un solo objeto a partir de una clase Crear un objeto de la clase bubble
ya definida basta con determinar su nombre y definir
sus atributos, por ejemplo: 1 bubble b ;
En este scketch, en la lnea 1 se define un objeto 2

de nombre b de la clase bubble , en la lnea 7 se crea 3 float h, k, r ;

4
el objeto b ya que es en esta lnea donde se llama al 5 void setup ( ) {
constructor y se define el valor de cada atributo para 6 s i z e ( 300 , 300 ) ;
el nuevo objeto, por ultimo en la lnea 11 se llama al 7 b = new bubble ( width / 2 , height , 17 ) ;
8 }
metodo display del objeto ya creado. Que hace el
9
metodo display ? Que se vera en el lienzo al ejecutar 10 void draw ( ) {
el sketch?. 11 b . display ( ) ;
12 }

Ejercicio 3: Agregar un objeto mas

Agregue el metodo ascend que desarrollo en el Ejercicio 2 al objeto b del sketch anterior y agregue un
objeto b1 con sus respectivos metodos display y ascend que pasa si crea el objeto b1 con la instruccion
b1 = new bubble(); , es decir, sin argumentos de entrada que definan los atributos de b1?.

3.1.1. Definir varios constructores

Ya debe ser claro que un constructor es el encargado de determinar los valores que asumiran los
atributos de un objeto al ser creado, pero, que pasa si en el momento de crear un objeto se llama al
constructor con mas o menos e incluso ningun argumento de entrada? e.g. la instruccion fill puede ser
utilizada con un unico argumento de entrada, con tres o incluso con cuatro, cada una de estas opciones
arrojan un resultado diferente.

Ejercicio 4: Definir varios constructores

Una situacion como la planteada antes se resuelve definiendo varios constructores dentro de la clase. En
este ejercicio debe leer detenidamente el Listing 2 y comentar cada lnea de codigo para luego definir
un nuevo constructor que admita cuatro argumentos de entrada: la abscisa del centro (abs centro), la
ordenada del centro (ord centro), el radio y el color.
Sugerencia: No olvide que el color sera un nuevo atributo del objeto, defina por lo tanto una
nueva variable local de tipo color que le permita definir el color de relleno ( fill ) de cada nuevo objeto.
Tambien piense en que dado que unicamente cuando se utilice el constructor con cuatro argumentos de
entrada se definira el color del objeto, en los demas constructores el color debe quedar definido por
defecto.

Introduccion a la programacion con Processing 2017 Pag. 3 de 6

Colegio Seminario Diocesano Tecnologa e Informatica

1 c l a s s bubble {
2 float h, k, d;
3
4 bubble ( ) {
5 d = random ( 5 , 30 ) ;
6 h = random ( width d / 2 ) ;
7 k = height d / 2 ;
8 }
9
10 bubble ( f l o a t a b s c e n t r o , f l o a t o r d c e n t r o , f l o a t r a d i o ) {
11 h = abs centro ;
12 k = ord centro ;
13 d = 2 radio ;
14 }
15
16 void d i s p l a y ( ) {
17 f i l l ( # 00BEBE ) ;
18 e l l i p s e (h , k , d , d) ;
19 }
20
21 void ascend ( ) {
22 if (k > d / 2){
23 k;
24 h += random(2 , 2 ) ;
25 }else{
26 k = d / 2;
27 h += random(2 , 2 ) ;
28 }
29 }
30 }

Listing 2: Varios constructores del mismo objeto

3.2. Crear varios objetos

Que es un arreglo? Un arreglo o vector (array en ingles) es una lista de objetos de cualquier tipo, bien
pueden ser variables u objetos de una clase determinada.

0 1 2 3 4 5
A= 2 -3 12 125 -7 18

Los elementos de un arreglo siempre se indexan a partir de 0.

Para generar un arreglo en processing es fundamental cumplir dos pasos:
1. Declarar el tipo de arreglo - type[] name = ...
2. Crear el arreglo - ... new type[length] , donde length corresponde al numero de elementos que contendra
el arreglo (la longitud del arreglo), as, para generar el arreglo A de arriba se utilizara

int [] A = new int[6];

de esta forma se declara y crea el arreglo de numeros enteros A, sin embargo ese arreglo contiene
inicialmente en cada una de sus posiciones el valor cero porque no se ha inicializado, el valor de cada
posicion del arreglo puede modificarse posteriormente o en una sola instruccion puede, definirse,
crearse e inicializarse con una instruccion como

int [] A = {2, 3, 12, 125, 7, 18}

Hay una diferencia entre crear e iniciarlizar el arreglo, cuando se crea solamente se estan reservando
tantos espacios en memoria como length indique almacenando un cero (0) en cada uno, cuando se inicializa,
se reservan los espacios en necesarios en memoria y ademas se ocupan con un valor especfico.

Introduccion a la programacion con Processing 2017 Pag. 4 de 6

Colegio Seminario Diocesano Tecnologa e Informatica

3.2.1. Crear un arreglo de objetos:

Crear un arreglo de objetos es tan facil como crear un arreglo de numeros

1 bubble b0 , b1 ; 1 bubble [ ] bs = new bubble [ 2 ] ;

2 2
3 void setup ( ) { 3 void setup ( ) {
4 s i z e ( 300 , 300 ) ; 4 s i z e ( 300 , 300 ) ;
5 b0 = new bubble ( ) ; 5 bs [ 0 ] = new bubble ( ) ;
6 b1 = new bubble ( ) ; 6 bs [ 1 ] = new bubble ( ) ;
7 } 7 }
8 8
9 void draw ( ) { 9 void draw ( ) {
10 background ( 220 ) ; 10 background ( 220 ) ;
11 b0 . d i s p l a y ( ) ; 11 bs [ 0 ] . d i s p l a y ( ) ;
12 b0 . ascend ( ) ; 12 bs [ 0 ] . ascend ( ) ;
13 b1 . d i s p l a y ( ) ; 13 bs [ 1 ] . d i s p l a y ( ) ;
14 b1 . ascend ( ) ; 14 bs [ 1 ] . ascend ( ) ;
15 } 15 }

En estos dos sketch la diferencia es poca, en el de la izquierda se estan definiendo, creando y manipu-
lando dos objetos de la clase bubble de forma independiente cada uno, en el de la derecha se ha definido
y creado un arreglo de dos objetos de la clase bubble los cuales se tratan por separado utilizando el ndice
correspondiente por separado en el setup y draw respectivamente. Como quedara el codigo para utilizar
10, 100 o 1000 objetos de la misma clase?.
Una forma mas eficiente de trabajar con muchos objetos de la misma clase, aprovechando la posibilidad
de generar arreglos de objetos es el uso de bucles en combinacion con arreglos, e.g.

Arreglos de objetos y bucles

1 bubble [ ] bs = new bubble [ 10 ] ;

2
3 void setup ( ) {
4 s i z e ( 300 , 300 ) ;
5 f o r ( i n t i = 0 ; i < bs . l e n g t h ; i ++){
6 bs [ i ] = new bubble ( random ( width ) , height , random ( 5 , 15 ) ) ;
7 }
8 }
9
10 void draw ( ) {
11 f o r ( i n t i = 0 ; i < bs . l e n g t h ; i ++){
12 b [ i ] . display ( ) ;
13 b [ i ] . ascend ( ) ;
14 }
15 }

Ejercicio 5: Arreglos de objetos y bucles

Comenta claramente cada lnea del sketch anterior. Que tiene de cambiar para utilizar 100 objetos de la
clase bubble ? y para utilizar 1000?.

4. Interaccion entre objetos

Luego de crear objetos a partir de una nueva clase, pueden definirse nuevos metodos de clase que
permitan modelar parametros de interaccion entre objetos, e.g. en la clase bubble los objetos creados no

Introduccion a la programacion con Processing 2017 Pag. 5 de 6

Colegio Seminario Diocesano Tecnologa e Informatica

debera sobreponerse, veamos como desarrollar esta idea.

y y
5 5

4 4

3 3

2 2

1 1

0 0
0 1 2 3 4 5 x 0 1 2 3 4 5 x
(a) Crculos que no se sobreponen (b) Crculos que se sobreponen

Figura 2: Representacion en el plano cartesiano

En cualquier caso en el que la

Metodo overlap
distancia entre los centros de las circun-
1 void o v e r l a p ( bubble o t h e r B ) {
ferencias que representan a cada obje-
2 f l o a t distance = d i s t (h , k , other B . h , other B . k ) ; to de la clase bubble sea menor que la
3 i f ( d i s t a n c e < ( d / 2 ) + ( o t h e r B . d / 2 ) // suma de sus radios se vera que los ob-
4 && h < o t h e r B . h ) { jetos se sobreponen (vea la Figura 2b.),
5 o t h e r B . h += ( d / 2 ) + ( o t h e r B . d / 2 ) d i s t a n c e ;
6 } e l s e i f ( d i s t a n c e < ( d / 2 ) + ( o t h e r B . d / 2 ) // a partir de este simple analisis, se sabe
7 && o t h e r B . h < h ) { que para evitar que los objetos se sobre-
8 o t h e r B . h = ( d / 2 ) + ( o t h e r B . d / 2 ) d i s t a n c e ; pongan es necesario garantizar que la
9 } distancia entre sus centros se mantenga
10 }
cuando menos igual a la suma de sus
radios.

Ejercicio 6: Interaccion entre objetos

Comente el metodo overlap e implementelo en la clase bubble , agreguelo al sketch mediante una lnea tal
como b.overlap(b1); y compruebe su funcionamiento.

Introduccion a la programacion con Processing 2017 Pag. 6 de 6