Como vimos en la anterior entrada llamada “Processing – Primeros Pasos“, ahora iniciaremos con el uso de diferentes tipos de gráficos. Comenaremos con el siguiente código:

En este código se define el tamaño de la ventana a 400 x 400 pixeles, el color de fondo a amarillo – naranja, y dibuja un triangulo con tres lineas en blanco, al definir el color de borde, stroke(), en 255. Por omisión, los colores son especificados en valores de 0 a 255. Otras variaciones de los parámetros pasados a la función stroke(), darán resultados diferentes:

Ahora veremos diferentes formas que podemos utilizar:

Dibujando un Píxel | set()

Modo de Uso

Parámetros

  • x del pixel
  • y del pixel
  • c del Color. Si se usa un valor entero, se interpreta como valor de gris.

Dibujando una Línea Recta | line()

Modo de Uso

Parámetros

  • x1 de un extremo
  • y1 de un extremo
  • x2 del otro extremo
  • y2 del otro extremo

Dibujando un Triángulo | triangle()

Modo de Uso

Parámetros

  • x1 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

Dibujando un Círculo / Elipse | ellipse()

Modo de uso

Parámetros

El uso de los parametros depende de ellipseMode();

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

Dibujando un Cuadrado / Rectángulo | rectangle()

Modo de uso

Parámetros

El uso de los parametros depende de rectMode();

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

Dibujando un Cuadrilátero | quad()

Modo de Uso

Parámetros

  • x1 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

Dibujando una Curva | bezier()

Modo de Uso

Parámetros

  • x1 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

Dibujando un Arco | arc()

Modo de uso

Parámetros

El uso de los primeros cuatro parámetros depende de ellipseMode();

En este caso se explican los parámetro con ellipseMode(CENTER); que es el valor por defecto.

ver ellipse();

  • x1 x del centro
  • y1 y del centro
  • x2 ancho (diámetro)
  • y2 alto (diámetro)
  • rad1 punto de inicio
  • rad2 punto de final

Ahora vamos a dar un ejemplo final mezclando todo:

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *