Lineas coloreadas

http://www.openprocessing.org/sketch/182701
int counter;

void setup() {

size(300,300);

}

void draw() {

stroke(0, mouseX, mouseY);

line(0, 0, mouseX, mouseY);

}

http://www.openprocessing.org/sketch/184335 (serpiente roja)

int counter;

int rojo = 255;

int tiempo = 0;

int diametro = 50;

void setup() {

size(400, 400);

}

void draw() {

tiempo = tiempo + 1;

rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));

diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); // Modifica el diametro del circulo con el paso del tiempo

noStroke();

fill(rojo, 0, 0, 50);  // Añade un 50% de transparencia al color

ellipse(mouseX, mouseY, diametro, diametro);

}

SERPIENTE ROJA

http://www.openprocessing.org/sketch/184431


    1.- En primer lugar, para hacer únicamente un circulo inmóvil, debemos poner el siguiente código:
void setup() {
size(400, 400);
}
void draw() {
 noStroke();                // Dibuja formas sin 'borde'
fill(255, 0, 0);           // Haz que las figuras sean de color rojo
ellipse(100, 100, 30, 30); // Circulo de 30 pixels de diametro
}

(las letras verdes son aclaraciones de lo que significa cada palabra, pero no es necesario ponerlo)

    2.-Después, para conseguir una línea gruesa móvil de un solo color, que se traza a medida que mueves el ratón debes poner este código:

void setup() {
size(400, 400);
}
void draw() {
noStroke();     
fill(255, 0, 0);  
ellipse(mouseX, mouseY, 30, 30); // Circulo de en funcion de las coordenadas del raton
}

(se reemplazan las coordenadas de la ellipse poniendo en su lugar mouseX y mouseY, lo que permite que la línea se dibuje en función del movimiento del ratón)

    3.-En tercer lugar, para conseguir una línea gruesa móvil de varios colores (ej:rojo y negro), que se traza a medida que mueves el ratón, tienes que poner el código:

int rojo = 255;

  void setup() {

  size(400, 400);

}

 void draw() {

  rojo = rojo - 1;            // Haz el rojo un poco mas obscuro

  if (rojo < 0){

    rojo = 255;              // Cuando llegue al maximo de obscuridad, hazlo claro otra vez

  }

   

  noStroke();            

  fill(rojo, 0, 0);         

  ellipse(mouseX, mouseY, 30, 30);

}

   4.-A continuación, para realizar, una línea gruesa trazada por elmovimiento del ratón y que cambia a medida de los minutos que pongamos se debe introducir el siguiente código:
int rojo = 255;
int tiempo = 0;
void setup() {
size(400, 400);
}
void draw() {
 tiempo = tiempo + 1;  // Incrementa el tiempo en una unidad
rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));  // Cambia el rojo, repite el color cada 20s
noStroke();     
fill(rojo, 0, 0);  
ellipse(mouseX, mouseY, 30, 30);
}

Las variables respecto al tiempo (que es lo que nos interesa eneste apartado) se pueden cambiar.

   5.- Por ultimo, para realizar una línea con diferentes grosores y colores que depende del tiempo y que se pinta por el movimiento del ratón, se introduce el siguiente código:
int rojo = 255;

int tiempo = 0;
int diametro = 50;
void setup() {
size(400, 400);
}
void draw() {
tiempo = tiempo + 1;
rojo = int(128 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));
diametro = int(50 * (1 + sin( tiempo * 2 * PI / frameRate / 5))); // Modifica el diametro del circulo con el paso del tiempo
noStroke();      
fill(rojo, 0, 0, 50);  // Añade un 50% de transparencia al color
 ellipse(mouseX, mouseY, diametro, diametro);
}

Estos serían algunos de los ejemplos:

(Estas ¨serpientes¨ se les pueden modificar el color, siguiendo los pasos expuestos en el trabajo de las líneas coloreadas)



LÍNEAS COLOREADAS.

1.-   En primer lugar para empezar me he descargado el programa processing. Éste es el enlace para descargarlo:

 https://www.google.es/webhp?sourceid=chrome-instant&rlz=1C1VSNA_enES604ES613&ion=1&espv=2&ie=UTF-8#q=processing%20downloadf

2.-   Una vez ahí, haz click en la primera entrada. Dale a NO DONATION para no tener que pagar, y descárgate processing 32 bit o 64 bit dependiendo de tu ordenador.

3.-   Ahora abre processing. Para conseguir que las líneas sean negras y pintar seguidamente, tendrás que insertar este código:

void setup() {

size(300,300);

}

void draw() {

background(255);

line(0, 0, mouseX, mouseY);

}




Ésto es lo que deberías ver ahora en pantalla:

Para conseguir eso mismo pero con las líneas de diferente color, tendrás que introducir lo siguiente:

void setup() {

size(300,300);

}

void draw() {

stroke(mouseX, 250, mouseY)

line(0, 0, mouseX, mouseY);

}

Ésto es lo que deberías ver en pantalla:

"LÍNEAS COLOREADAS"

1.- En primer lugar, es necesario descargar el programa Processing para poder realizar los siguientes pasos en la web:

• http://processing.org/download/?processing

Una vez dentro, debes darle a No Donation por si no estas interesado en pagar nada. Por último, debes descargar Windows 64-bit o Windows 32-bit dependiendo del formato que tenga tu ordenador.

2. En segundo lugar, en la pantalla de procesing:

• Para poder dibujar lineas de muchos colores debemos poner el código:

void setup() {

size(300,300);                                                                      

}

void draw() {

stroke(mouseX, 255, mouseY);                                        

line(0, 0, mouseX, mouseY);

}

Con este mismo código se puede:

• Cambiar las lineas para tengan más de un color que de otro. Debemos cambiar mouseX o mouseY (stroke) por una cifra hasta 255 dependiendo de la importancia que le queramos dar (cuanta más importancia, se debe poner un número mayor).
• Si se quiere que la línea solo sea de color rojo, debemos cambiar mouseX (stroke) por un número entre 1 y 255 (cuanto más bajo, el color se hace más oscuro) y las otras dos cifras ponerlas en 0
• Si se quiere que las líneas solo sean de color azul, debemos cambiar mouseY (stroke) por un número entre el 1 y 255 (cuánto más bajo sea el número, el color se hace más oscuro) y las otras dos cifras se deben poner en 0.
• Para conseguir que salga únicamente verde, se aplica el mismo proceso de las anteriores, aunque se cambia la cifra del medio (255) o se deja igual.

Por último, para conseguir que salgan solamente negras, debemos poner las 3 variables en 0.

Para que salgan solamente blancas, debemos poner las 3 en 255.

Aquí se pueden ver algunos de los ejemplos:

 

                                            

                                                                                                         

Líneas Coloreadas