Hola compañeros de tut, tut, tut. En esta sesión vamos a aprender como colocar sus dibujos en una página de Internet.
Supongamos que el dibujo de Processing que quieren publicar no tiene movimiento, entonces se publica de la siguiente manera:
Veamos un ejemplo:
IIIIIIIIIIIIII Copien el siguiente archivo a Processing y sálvenlo con el nombre ses_15
IIIIIIIIIIIIII Después den clic en run
size(200, 200);
background(105, 170, 170);
smooth();
for(int i= 3; i < 180; i=i+18){
for(int j=3; j <180; j=j+18){
fill(random(255));
noStroke();
triangle(i+5+random(5,10), j+random(5,10), i+10+random(5,10), j+10+random(5,10), i+10, j+10+random(5,10));
}
}
save("tri.png");
|
 |
Al final del programa vemos la función save. Con save podemos guardar nuestro dibujo en un archivo .png. Dentro del paréntesis y entre comillas escribimos el nombre que queremos darle al dibujo seguido de .png
IIIIIIIIIIIIII En la barra de menú de Processing escojan sketch > show sketch fólder
Se abrirá el fólder y verán que en él se encuentra su archivo tri.png
Este archivo es una imagen que pueden colocar donde ustedes gusten dentro de una página de Internet. También pueden mandar este archivo por correo electrónico y así intercambiar dibujos con sus compañeros.
Ahora supongamos que el archivo que quieren publicar tiene movimiento.
IIIIIIIIIIIIII Veamos un ejemplo
IIIIIIIIIIIIII Copien el siguiente archivo a Processing y sálvenlo con el nombre ses_15a
void setup(){
size(200, 200);
background(105, 170, 170);
smooth();
frameRate(10);
}
void draw(){
background(105, 170, 170);
for(int i= 3; i < 180; i=i+18){
for(int j=3; j <180; j=j+18){
fill(random(255));
noStroke();
triangle(i+5+random(5,10), j+random(5,10), i+10+random(5,10), j+10+random(5,10), i+10, j+10+random(5,10));
}
}
} |
|
IIIIIIIIIIIIII Den clic en run para que comprueben que han copiado bien el programa
IIIIIIIIIIIIII A continuación den clic en file > Export
Automáticamente se abre la ventana de un fólder que se llama applet
En su interior vemos un archivo que se llama index.html
IIIIIIIIIIIIII Den clic en el archivo y se abrirá dentro de un navegador
Verán su dibujo y debajo una frase que dice:
Source code:(que quiere decir "código fuente" en inglés)
y después el nombre de su programa
Más abajo dice:
Built with: (que quiere decir "construido con" en inglés)
Processing
IIIIIIIIIIIIII Si dan clic en el nombre de su programa podrán ver el programa que escribieron para lograr ese dibujo.
IIIIIIIIIIIIII Cierren el navegador
IIIIIIIIIIIIII Volvamos a la ventana del fólder applet
IIIIIIIIIIIIII Cambien el nombre de su archivo index.html
IIIIIIIIIIIIII En lugar de index pongan los nombres las personas en su equipo, por ejemplo:
juan_paty_01.html
¡Muy bien! Ya saben como publicar sus trabajos de manera que se puedan ver en Internet.
IIIIIIIIIIIIII Ahora realicen un dibujo maravilloso y colóquenlo en la sección de tareas,
IIIIIIIIIIIIII Después sálvenlo en un archivo .png con su nombre y colóquenlo en el foro
IIIIIIIIIIIIII Por último exporten su programa y véanlo en un navegador.
Gracias, hasta la próxima sesión.
