 |
| Emiliano Causa e_causa@yahoo.com.ar www.emiliano-causa.com.ar www.biopus.com.ar |
Christian Silva entorno3@gmail.com www.hipertextos.com.ar |
Leonardo Garay todotresde@gmail.com |
David Bedoian bedoiandavid@yahoo.com www.bedoiandavid.com.ar |
Instrucciones de dibujo en 2D con Processing
Píxel | línea recta | triángulo | círculo/elipse | cuadrado/rectángulo | curva bezier | arco |
 descargar |
Introducción
Los ejemplos que siguen, sirven como una guía sencilla para dibujar en pantalla con Processing. Si bien estos comandos no son estandar y varían en la mayoría de los lenguajes de programación, estos son una primera base de instrucciones que servirán para abordar los diferentes temas de este tutorial.
Píxelset()
Modo de Usoset (x,y,c); Parámetrosx x del pixel y y del pixel cColor. Si se usa un valor entero, se interpreta como valor de gris. Ejemplo código
size(150,150); //define el tamaño de ventana
background(0); //pinta la ventana de negro set(75,75,255); //dibuja un pixel blanco Hecho en Processing |
Línea Rectaline()
Modo de Usoline (x1,y1,x2,y2); Parámetrosx1 x de un extremo y1 y de un extremo x2 x del otro extremo y2 y del otro extremo Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) line(10,20,130,140); Hecho en Processing |
Triángulotriangle()
Modo de Usotriangle(x1,y1,x2,y2,x3,y3); Parámetrosx1 x del primer vértice y1 y del primer vértice x2 x del segundo vértice y2 y del segundo vértice x3 x del tercer vértice y3 y del tercer vértice Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) triangle(10,110,80,20,130,130); Hecho en Processing |
Círculo / Elipseellipse()
Modo de usoellipse(x1,y1,x1,y2); Parámetros
ellipseMode(CENTER); (valor por defecto)x1 x del centro y1 y del centro x2 ancho (diámetro) y2 alto (diámetro) ellipseMode(CORNER);x1 x del vértice superior izquierdo del rectángulo que la contiene y1 y del vértice superior izquierdo del rectángulo que la contiene x2 ancho (diámetro) y2 alto (diámetro) ellipseMode(CORNERS);x1 x de un vértice del rectángulo que la contiene y1 y de un vértice del rectángulo que la contiene x2 x del vértice opuesto del rectángulo que la contiene y2 y del vértice opuesto del rectángulo que la contiene Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) rectMode(CENTER); //(valor por defecto) ellipse(70,80,130,80); Hecho en Processing |
Cuadrado / Rectángulorectangle()
Modo de usorect(x1,y1,x1,y2); Parámetros
rectMode(CENTER);x1 x del centro y1 y del centro x2 ancho y2 alto rectMode(CORNER); (valor por defecto)x1 x del vértice superior izquierdo y1 y del vértice superior izquierdo x2 ancho y2 alto rectMode(CORNERS);x1 x de un vértice y1 y de un vértice x2 x del vértice opuesto y2 y del vértice opuesto Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta el fondo de blanco strokeWeight(4); //ancho de la linea (4 pixeles) rectMode(CORNER); //modo en que se interpretarán los parámetros en rect() rect(10,10,120,80); Hecho en Processing |
Cuadriláteroquad()
Modo de Usoquad(x1,y1,x2,y2,x3,y3,x4,y4); Parámetrosx1 x del primer vértice y1 y del primer vértice x2 x del segundo vértice y2 y del segundo vértice x3 x del tercer vértice y3 y del tercer vértice x4 x del cuarto vértice y4 y del cuarto vértice Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta la ventana de blanco strokeWeight(4); //ancho de la linea (4 pixeles) quad(20,10,130,30,110,115,40,140); Hecho en Processing |
Curvabezier()
Modo de Usobezier(x1,y1,x2,y2,x3,y3,x4,y4); Parámetrosx1 x de un extremo y1 y de un extremo x2 x del punto de dirección de salida y2 y del punto de dirección de salida x3 x de la dirección de llegada y3 y de la dirección de llegada x4 x del otro extremo y4 y del otro extremo Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta la ventana de blanco strokeWeight(4); //ancho de la linea (4 pixeles) bezier(20,10,40,140,120,30,110,115); Hecho en Processing |
Arcoarc()
Modo de usoarc(x1,y1,x1,y2,rad1,rad2); Parámetros
x1 x del centro y1 y del centro x2 ancho (diámetro) y2 alto (diámetro) rad1 punto de inicio rad2 punto de final Ejemplo código size(150,150); //define el tamaño de ventana
background(255); //pinta la ventana con colore de fondo blanco strokeWeight(4); //ancho de la linea (4 pixeles) ellipseMode(CENTER); //modo de los parámetros en ellipse() y arc(); arc(80,70,120,80,PI/2,0); Hecho en Processing |