Introduccion sintaxis

7 abril 2010

Hola gente de nuevomaterial.com, en este post más que nada introductorio veremos lo primordial de la sintaxis processing en los siguientes puntos:

  1. void setup () {}
  2. void draw () {}
  3. formas básicas
  4. líneas y rellenos

Antes de empezar a describir los puntos anteriores, veamos de donde nace processing según wikipedía: “Processing es un lenguaje y entorno de programación de código abierto basado en Java“, tomando esta frase, al escribir código debemos respetar ciertas reglas, como por ejemplo distinción entre minúsculas y mayúsculas, puntos y copas, tipos de datos, conversión etc. Además tiene la ventaja que “Al estar basado en Java, puede heredar todas sus funcionalidades, convirtiéndose en una herramienta poderosa a la hora de encarar proyectos complejos.”

Si no estás relacionado con el mundo de programación y quieres partir aprendiendo processing te recomiendo que leas de apoco y con paciencia este link http://www.programacion.com/java/tutorial/intjava/, ahora suponiendo que sabes las reglas básicas sobre programación vamos a Processing.

> La introducción al IDE de processing donde descargarlo y todo esta en el post de Max acá http://www.nuevomaterial.com/2010/03/clase-introductoria-processing/

#1 void setup () {}

Bueno en la parte donde dice void setup () { } vamos a definir todo lo necesario para el sketch (archivos creados en processing), como por ejemplo el tamaño de nuestra pantalla, definida en pixeles, en el eje x e y, por ejemplo size(640,480);

También podemos definir un color de fondo, en diferentes modos de color, tanto RGB (también soporta HSB pero hay que configurarlo, véase modos de color) o también en hexadecimal, un fondo rojo seria:

background(#FF0000);
background(255,0,0);

HSB

*nota: ojo con el uso de comas y puntos, para decimales ocupar “.” Y para separar parámetros es ocupa la “,”;

También existen ciertos parámetros sobre fotogramas por segundos, que es como la velocidad de ciclos por segundos que iterara el draw(). Para setear o cambiar este valor: frameRate(24); aunque esto lo veremos más adelante en otro tutorial.

#void draw () {}

Este es el método donde sucede toda la magina pro decirlo de alguna manera en cuanto a el dibujo que genera processing, este método itera indefinidamente (a menos que no especifiquemos lo contrario) durante la ejecución del sketch.

#Formas básicas, las formas básicas de podemos ocupar para empezar serian:

ellipse(56, 46, 55, 55);

Donde 56 define la posición en el eje “x” y 46 en el eje “y”, además 55 y 55 el ancho y el alto;

http://processing.org/reference/ellipse_.html

line(30, 20, 85, 75);

Acá 30 y 20 definen el primer punto de inicio de la línea, 85 y 75 el final, siempre respetando el orden de “x” e “y”

http://processing.org/reference/line_.html

rect(30, 20, 55, 55);

Prácticamente lo mismo que ellipse, “55, 55” son el ancho y el alto;

http://www.processing.org/reference/rect_.html

Por ultimo point(50,50); // dibuja un punto en el plano en el eje x 50 e y 50

http://www.processing.org/reference/point_.html

#Líneas y rellenos

Todas las figuras dibujadas anteriormente son de relleno blanco y línea negra, en processing el relleno se define como fill() y las líneas como stroke(), podemos pintar las líneas agregando un color a nuestra figura de esta manera:

stroke(#FF00); // definimos líneas rojas
fill(#FFFF00); // definimos relleno amarillo

Si queremos dibujar un cuadrado sin relleno decimos noFill(); o sin líneas (contorno) noStroke();

*** Este fue mi primer post en este blog, y espero seguir contribuyendo a este proyecto, dudas y comentarios abajo, saludos.

Elías Leyton

Anuncios

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

A %d blogueros les gusta esto: