Want to create interactive content? It’s easy in Genially!

Get started free

Funciones de Processing

apps.castellano

Created on March 8, 2021

Start designing with a free template

Discover more than 1500 professional designs like these:

January School Calendar

Genial Calendar 2026

School Calendar 2026

January Higher Education Academic Calendar

School Year Calendar January

Academic Calendar January

Comic Flipcards

Transcript

processing 3.0

Programación y Lenguajes

COORDENADAS X,Y

FUNCIONES

PRIMERAS FUNCIONES DE PROCESSING

PRINT() Y PRINTLN()

SETUP() Y DRAW()

Click aquí

Click aquí

Click aquí

Click aquí

Click aquí

ANALICEMOS EL CÓDIGO UN INSTANTE.

TAMAÑO DEL LIENZO

Click aquí

Click aquí

Siguiente

COORDENADAS X,Y

Volvamos al ejercicio de la clase anterior: rect(10,10,20,20); Eso se explica de la siguiente manera: rect(xy, xy, xy, xy,); Tenemos 8 parámetros de Inicio y Fin para cada lado de la figura.

Al igual que lo hicimos en scratch, en Processing también usaremos las coordenadas para ubicarnos en el plano (Sketch). Los programas no entienden el concepto de espacialidad arriba, abajo, derecha, izquierda. Por ejemplo:

El punto se encuentra en X4, Y5.

Siguiente

FUNCIONES

Una función o método es una función cuyo comportamiento, al ser declarado, es determinado por la definición de una función. Parece raro, pero no. Una función es un tipo de orden que le daremos a nuestro programa. Al escribir una función, la estamos “Declarando”, es decir , estamos determinando un tipo de acción a realizar.

Para las funciones principales utilizaremos la voz "VOID" que es la encargada de llamar a las funciones que serán declaradas una vez:

Primeras funciones de Processing

Siguiente

parámetros de arranque

Setup()

loop para cada Frame (cada cuadro de animación)

draw()

texto entre comillas “ “. Cada texto va uno detrás del otro.

print()

texto entre comillas “ “. Cada texto va en un renglón

println()

IMPORTANTE

cada instrucción termina en punto y coma

//

Si queremos incluir comentarios dentro de nuestro sketch, como ayuda para próximas revisiones, comenzaremos nuestro con los caracteres // . Todo lo que esté a la derecha de estos caracteres será ignorado por “Processing”. Estos comentarios aparecerán escritos en color gris.

Siguiente

setup() y draw()

Cuando programamos, debemos ser muy ordenados para que, si nuestro programa crece, podamos seguir la lógica y agregarle funcionalidades de ser necesario. Una manera de agrupar instrucciones es mediante funciones, que serán declaradas.

En Processing utilizaremos inicialmente dos funciones: La primera es la función “setup()” y la otra “draw()”. Cuando las escribamos en el editor de texto, estas palabras se pondrán en color celeste automáticamente.

Todo lo que esté escrito bajo la función setup() se ejecutará UNA SOLA VEZ al iniciar el programa. En ella se inicializarán algunos parámetros de arranque de mi sketch.

Por otro lado draw() es un “loop”. Es una función que se repite una y otra vez. Es invocada automáticamente una vez por “Frame” (cada cuadro de la animación).

Siguiente

print() y println()

Vamos a agregar otras dos funciones para poder visualizar cómo trabajan setup() y draw(). Son dos funciones que nos permiten hacer impresión de información en el área de texto : print() y println()

print(“aca va el texto”); println(“aca va el texto”);

Formalidad: Escribiremos entre comillas el texto literal que se quiera trasladar al área de textos de nuestra ID o ventana. La diferencia entre ambas funciones es que println() coloca un retorno de carro luego del texto que escribamos (el próximo texto se escribirá en el renglón siguiente), mientras que print() escribe un texto detrás del otro.

Analicemos el código un instante.

Siguiente

Dentro de la función “setup()” hay una instrucción “println()” que se ejecuta una sola vez al inicio. Por eso solo aparece una vez en el área de texto la leyenda setup :::: . Pero también dentro de la función “draw()” está la instrucción “print()” que se ejecutará indefinidas veces. Por eso aparece la leyenda draw en el área de texto muchas veces.

Siguiente

TAMAÑO DEL LIENZO

El tamaño de nuestro lienzo de trabajo es modificable. Podemos establecer cualquier medida, la que más nos convenga que entre en nuestro monitor. Para ello se utiliza la instrucción “size” que posee la siguiente formalidad: “size(tamaño de x, tamaño de y);”. Las medidas en Processing son en pixeles, en cantidad de pixeles. Donde el eje horizontal se denomina “x” y el eje vertical se denomina “y”.

Un pixel es la unidad mínima de una pantalla, posee la propiedad de posición y la propiedad de color.

lISTOS PARA COMENZAR A PROGRAMAR

Archivos 1 y 2

En los archivos de ejercicios 1 y 2 encontrarán las pautas para realizar los trabajos.

GRACIAS