Clase 6

// Taller de SuperCollider Básico

BUAP

 

Sesión 6

  07/18/09

   

 

*Introducción a la GUI (General User Interface)

*Ejercicios

 

Baja esta clase en los formatos PDF y docx


//GUI

 

Es una interfase gráfica que te permite acceder y controlar parámetros del código sin tener que ir directamente a él. Al ser una interfase la podemos ubicar como un punto intermedio entre el código y el usuario. SuperCollider provee los elementos más comunes de una interfase como son botones, controles, perillas, campos numéricos y de texto, manipulación de fuentes, colores, menús y tiene además cierto potencial gráfico. Las Clases que se usan para hacer GUIs tienen varios métodos que nos sirven para definir su comportamiento y  apariencia.

 

A continuación veremos las principales Clases para hacer uso la GUI.

 

SCWindow(name, bounds, resizable, border, server, scroll)

Es una clase que crea una ventana sobre la que podemos empezar a construir nuestra interfase.

 

name – Nombre. Un string (entre comillas) o un symbol (antecedido por una diagonal \). Este texto será el nombre que queremos que se vea en nuestra ventana. (no confundir con la variable asignada al nuestra instancia de SCWindow).

 

bounds – Límites. Las dimensiones de la ventana. Para esto necesitamos la clase Rect que, a través de cuatro argumentos, nos permite definir la posición y el tamaño de la ventana. 

 

resizable – Redimensionable. Un boleano (true / false) indicando si la ventana se puede redimensionar (hacer mas grande o mas chica). Defaulttrue

 

border – Borde. Un boleano (true / false) indicando si la ventana tendrá o no la pestaña superior que contiene el name y los botones para cerrar y minimizar y maximizar. /* ¡¡¡CUIDADO!!! */ Si quitas el border no podras cerrar la ventana a menos que lo hagas desde el código. Defaulttrue.

 

server – Un argumento idiota. Solo sirve para proveer compatibilidad con SwingOSC. O sea que no le hagan caso. Default – agagaggu

 

scroll – Pergamino. Un boleano (true / false) indicando si la ventana tendrá la capacidad de mostrar su contenido como pergamino en caso de que este exceda las dimensiones de la ventana. Si damos true a este argumento el argumento resizable queda anulado. Defaultfalse.

 

 

//Ejemplo 1

 

a=SCWindow(“la ventanita del amor”, Rect(100,500,400,300)).front

 

Para empezar, asignamos la SCWindow a una variable para poder referirnos a la instancia que estamos creando. Nuestra ventana se llama “la ventanita del amor”. Sus dimensiones estan dadas con la clase Rect que, a través de cuatro argumentos, nos permite definir la posición y el tamaño de la ventana (ver ejemplo 2). Los demás argumentos los dejamos con los valores predeterminados.

 

 

Rect(posición en x, posición en y, tamaño en x, tamaño en y)

 

Las coordenadas en la pantalla tienen su origen en la esquina inferior izquierda. (O sea que ahi es el (0,0)). Por el contrario, las cordenadas en la SCWindow tienen su origen en la esquina superior izquierda. En el ejemplo 1 tenemos una ventana que tiene su borde izquierdo a 100 pixeles de distancia del marco izquierdo de la pantalla, su borde inferior esta a 100 pixeles del marco inferior de la pantalla y tiene de ancho 400 pixeles y de alto 300 pixeles.

 

SCButton(parent, bounds)

Es una clase que  crea un botón dentro de nuestra ventana.

 

parent – Ventana en la que queremos que se cree el botón. Nos referimos a la ventana con la variable que le hallamos asignado.

bounds – Dimensiones del botón. Se necesita la clase Rect.

 

Existen algunos métodos básicos para configurar nuestro SCButton.

 

states – Sirve para determinar cuántos estados tiene nuestro botón: 1 estado, 2 estados, 5 estados… cuántos estados quieres? Al mismo tiempo determina el texto, el color del texto y el color del fondo para cada estado. Los cambios de estado se originan al apretar el botón.

 

action – Es una función que determina la acción que se realizará al cambiar a un estado específico. 

 

//Ejemplo 2

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,20,150,100));

b.states=[[“nO”, Color.red, Color.green]];

b.action={|val| val.value.postln; “tengo miedo”.postln};

)

 

 

 

En el ejemplo 2 creamos nuevamente una instancia a de SCWindow y una instancia b de SCButton. Colocamos el botón en la ventana a. A través de la clase Rect colocamos el botón a 100 pixeles hacia la derecha y a 10 pixeles hacia abajo. Le damos 150 pixeles de ancho y 100 de alto. Después, mediante el método states, determinamos los estados que va a tener nuestro botón. Para esto hacemos un array dentro del cual colocamos un array para cada estado. Cada array de estado tiene tres elementos : 

1 – el texto ente comillas, 

2 – el color del texto y 

3 – el color del fondo. 

Los colores los designamos mediante la clase Color. Es recomendable ir al archivo de ayuda para ver cómo funciona esta clase. En el ejemplo 3 tenemos un estado que despliega el texto “nO” de color blanco sobre negro. El siguiente método es action. Toda la accion del botón va dentro de llaves {}. Dentro de las llaves primero creamos un argumento que puede tener el nombre que queramos. En este caso usamos val. Se puede crear con pipes |val| o escribiendo arg val;

Después podemos escribir las acciones que queramos separadas por ;

 

//Ejemplo 3

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,100,150,100));

b.states=[[“nO”, Color.white, Color.black], [“Si”, Color.black, Color.red]];

b.action={|val| if(val.value==0, {“tengo hambre”.postln}, {“se me enterro una yema”.postln})};

)

 

En el Ejemplo 3 tenemos 2 estados en el método states. Por eso tenemos un array cuyos elementos son dos arrays. En el método action hemos incluido un if que evalúa al argumnto val. Necesitamos usar el método value (val.value) para poder evaluarlo. En el ejemplo hemos decidido que si val es 0 entonces se escribe “tengo hambre” y si no es 0 escribe “se me enterro una yema”. Los estados se empiezan a contar a partir del 0. Asi que en este caso tenemos el estado 0 y el estado 1.

 

//Ejemplo 4

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,100,150,100));

b.font=Font(“BrushScriptMT”, 70);

b.states=[[“nO”, Color.white, Color.black], [“Si”, Color.black, Color.red]];

b.action={|val| if(val.value==0, {“tengo hambre”.postln}, {“se me enterro una yema”.postln})};

)

 

 

En el ejemplo 4 agregamos el método Font para cambiar las características de la letra. Ver el archivo de ayuda de Font y poner especial atención en el segundo ejemplo.

 

//Ejemplo 5

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,100,150,100));

b.states=[[“nO”, Color.white, Color.black], [“Si”, Color.black, Color.red]];

b.action={|val| 

if(val.value==0, {

{Pulse.ar(XLine.kr(60,2000,0.125, doneAction:2),0.5,0.5)}.play

}, 

{

{Saw.ar(SinOsc.kr(10,0,100,300))*Line.kr(1,0,0.5,doneAction:2)}.play 

}

)

};

)

 

En el ejemplo 5 asignamos Synths a las acciones del botón de igual manera que lo hicimos con los textos en el ejemplo 4. También podemos encender Tdefs y detenerlos como se muestra en el ejemplo 6.

 

//Ejemplo 6

 

(

Tdef(\escrupuloso, {var cuenta=0;

  inf.do{

    switch(cuenta%4,0,{{Pulse.ar(XLine.kr(60,2000,0.125, doneAction:2),0.5,0.5)}.play},

        1,{{Saw.ar(SinOsc.kr(10,0,100,300))*Line.kr(1,0,0.25,doneAction:2)}.play},

        2,{{Pulse.ar(XLine.kr(60,400,0.125, doneAction:2),0.5,0.5)}.play},

        3,{{Saw.ar(SinOsc.kr(10,0,100,rrand(300,1000)))*Line.kr(1,0,0.25,doneAction:2)}.play}

    );

    cuenta=cuenta+1;

    0.2.wait;

    }

  }).quant_(0);

)

   

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,100,150,100));

b.states=[[“nO”, Color.white, Color.black], [“Si”, Color.black, Color.red]];

b.action={|val| 

if(val.value==1, {

Tdef(\escrupuloso).play;

“El escrupuloso anda”.postln;

}, 

{

Tdef(\escrupuloso).stop;

“El escrupuloso no va”.postln;

}

)

};

)

 

Agreguemos ahora otro botón para darle mas funcionalidad a la GUI. En el ejemplo 7 ponemos un botón que nos dispare un Synth:

 

//Ejemplo 7

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

 

b=SCButton(a, Rect(50,100,150,100));

b.states=[[“nO”, Color.white, Color.black], [“Si”, Color.black, Color.red]];

b.action={|val| 

if(val.value==1, {

Tdef(\escrupuloso).play;

“El escrupuloso anda”.postln;

}, 

{

Tdef(\escrupuloso).stop;

“El escrupuloso no va”.postln;

}

)

};

c=SCButton(a, Rect(210,100,150,100));

c.states=[[“WepA!!”, Color.white, Color.black]];

c.action={{RHPF.ar(Saw.ar(30),rrand(200,1000),0.1,2.5)*Line.kr(1,0,0.41,doneAction:2)}.play};

)

 

Observar cómo en el ejemplo 7 al nuevo botón se le asignó una variable propia, en este caso c, y la posición dada por el Rect tiene coordenadas diferentes para que no se encime con el botón b.

 

Para cambiar las propiedades de un objeto en una ventana desde afuera usamos el metodo .valueAction como en el ejemplo 8

 

//Ejemplo 8

 

(

a=SCWindow(“la ventanita del amor”, Rect(100,100,400,300)).front;

b=SCButton(a, Rect(100,10,150,100));

b.states=[[“nO”, Color.white, Color.black],[“bueno”, Color.red, Color.white]];

b.action={|val| val.value.postln; “tengo miedo”.postln};

)

 

b.valueAction=1

b.valueAction=0

 

Cabe mencionar que si queremos cambiar estas propiedades desde un Tdef de manera automática necesitamos poner entre llaves {} la línea que realizará esta acción.

 

Esto no sirve

 

(

Tdef(\vaya, {

inf.do{|i|

b.valueAction=i%2;

0.5.wait;

}

})

)

 

 

Tdef(\vaya).play

 

Pero esto si

 

(

Tdef(\vaya, {

inf.do{|i|

{b.valueAction=i%2}.defer;

0.5.wait;

}

})

)

 

 

Tdef(\vaya).play

Tdef(\vaya).stop

 

 

 

 

 

 

Creative Commons License
Taller de SuperCollider Básico by https://basicsupercollider.wordpress.com is licensed under a Creative Commons Attribution-Noncommercial 2.5 Mexico License.1)}

2 Responses to “Clase 6”

  1. […] Clase 6 disponible! esta clase es un avance del tema de las GUIs que veremos más profundamente en nuestro […]

  2. Saludos.

    Gracias Alexandra, fue un excelente curso, nos estaremos viendo el siguiente.

    P.D – Perdona, se podrá que subas las fotos de la ultima clase

    gracias, hasta la proxima

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: