line(). Hagamos rayas.

Para trazar un punto usamos la función point(), indicando sus coordenadas.

Para trazar un segmento rectilíneo… bueno, sabemos que una línea no es más que un punto en movimiento, ¿no?

//Empezaremos con el punto pegado a la izquierda y lo moveremos a la derecha
//Así que creamos una variable x con valor 0 y luego iremos aumentando su valor
float x = 0;
 
//Establezcamos los valores iniciales
void setup(){
  //tamaño de la ventana
  size(600,100);
  //color del fondo
  background(#339966);
  //color de la línea
  stroke(255);
  //grosor de la línea
  strokeWeight(5);
}
 
//Animemos la cosa
void draw(){
  //situamos el punto a media altura y totalmente a la izquierda
  point(x,height/2);
  //sumamos 1 a la coordenada x en cada ciclo
  x=x+1;
  //lo reiniciamos todo cuando el punto alcanza el extremo derecho de la ventana
  // si el valor de x es mayor que la anchura
  if(x > width){
  //pintamos el fondo de verde
  background(#339966);
  //y llevamos el punto a la izquierda
  x=0;
  }
}

En realidad, Processing tiene otro procedimiento más sencillo para dibujar un segmento rectilíneo empleando la función line():

line(0 , height/2 , width , height/2)

En este caso la función toma cuatro coordenadas: las dos de uno de los extremos de la línea y las dos del otro.

¿Le echamos valor a una línea en zig zag?

void setup() {
  size(600, 100);
  background(#339966);
  stroke(255);
  strokeWeight(5);
}
 
void draw() {
  float arriba = 10;
  float abajo = height-10;
  line (width*0.20, arriba, width*0.40, abajo);
  line (width*0.40, abajo, width*0.60, arriba);
  line (width*0.60, arriba, width*0.80, abajo);
}

¿Véis que en este ejemplo hemos declarado las variables arriba y abajo dentro de draw()? Podemos hacerlo así porque no interfiere con ninguna modificación posterior. Si lo hiciera podríamos declararlas fuera, pero no dentro de setup(), pues no serían accesibles desde draw().

¿Y si quisiéramos hacer algo parecido con un punto que se mueve?

//declaramos las variables iniciales
float arriba = 10;
float abajo = 90;
float x = 120;
float y = arriba;
 
//tamaño, color, etc.
void setup() {
  size(600, 100);
  background(#339966);
  //aquí definimos el color de manera distinta: 255 es blanco
  //se puede hacer de las dos formas
  stroke(255);
  strokeWeight(5);
}
 
void draw() {
  point (x , y);
  //la coordenada x aumenta en dos píxeles cada ciclo
  x = x + 2;
  //y la coordenada y, en uno y pico, al menos al principio
  if (x > width*0.20 && x < width*0.40){ 
    y = y + 1.3;
  //... pero cuando el punto recorre 2/5 de la anchura... 
  } else if (x > width*0.40 && x < width*0.60){ 
  //... el punto empieza a subir... 
    y = y - 1.3; 
  //... y poco más adelante...
  } else if (x > width*0.60 && x < width*0.80){ 
    //... vuelve a bajar 
    y = y + 1.3;
  //... y a las 4/5 partes de la anchura... 
  } else if (x > width*0.80){
    background(#339966);
    x = width*0.20;
    y = arriba;
  }
}

Dos cosas que comentar sobre esto:

  • Estamos aumentando (o disminuyendo) tanto las coordenadas x como y, de manera que el punto avance en diagonal
  • Para cambiar el comportamiento del punto a partir de cierto punto, usamos el condicional if(). Si queremos introducir una segunda (o tercera…) condición lo hacemos con else if()

Documentación

  • http://processing.org/reference/line_.html
  • http://processing.org/reference/else.html
  • http://www.funprogramming.org/3-Create-an-animation-use-random.html

1 Comments

Leave a Comment.