Comenzaríamos con este código:
Tal vez se vea algo intimidante, pero este pedazo de código es bastante sencillo.
Se divide igual que en el post anterior, que seria en el setup(), el cual es el código que se llama solo al iniciar el programa y el draw() que es el código que se va a llamar constantemente hasta que acabe de ejecutar el programa.
Se divide igual que en el post anterior, que seria en el setup(), el cual es el código que se llama solo al iniciar el programa y el draw() que es el código que se va a llamar constantemente hasta que acabe de ejecutar el programa.
void setup(){
size(400,400);
smooth();
}
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
ellipse(200,200,40,40);
}
En el setup(), se ubican dos comandos nuevos, esta el smooth() que hace que todo lo dibujado se vea mas suave, es decir menos pixelado y el size() que dice que tan grande va a ser la pantalla, primero se pone el ancho y luego el alto, esto es algo que se repite en casi todos los comandos de programación, cada vez que se pida las medidas de un objeto primero va el ancho luego el alto y si es el caso luego iría la profundidad.
El draw() es aun mas simple, simplemente se pide que ponga un fondo por medio del comando background al cual se le especifica el color a través de las medidas en RGB. Estas medidas se dan en ese mismo orden, es decir
background(cantidad de rojo,cantidad de verde,cantidad de azul);
Las medidas RGB se dan de 0 a 255, es decir que si R,G y B están todas en 255 es que esta todo lleno de color y esto generara blanco, si todas están en 0, no hay color y dará negro, si solo R y B están llenas se dará un morado. Sacar los colores puede ser algo complicado por lo que se puede usar la herramienta de color selector de processing, que se puede encontrar debajo de tools en la barra de herramientas.
Cada vez que se haga referencia a colores en la programación, muchas veces se hace por esta forma, dando las medidas de RGB. Existen otras maneras de dar colores como la hexadecimal pero eso lo veremos más adelante.
Después, por ultimo se le pide al programa que pinte un circulo blanco, el color se decide por medio de el comando fill(), también especificando el RGB y el circulo se especifica con ellipse.
También se darán cuenta que al final del comando background(R,G,B); se pone punto y coma, eso siempre es necesario ponerlo al final de cada instrucción, ya que esto es lo que le dice al computador cuando es que debe terminar una tarea especifica, si no se pone se va a generar un error. Así que hay que ponerla después de cada comando e instrucción.
También se darán cuenta que al final del comando background(R,G,B); se pone punto y coma, eso siempre es necesario ponerlo al final de cada instrucción, ya que esto es lo que le dice al computador cuando es que debe terminar una tarea especifica, si no se pone se va a generar un error. Así que hay que ponerla después de cada comando e instrucción.
Ellipse tiene cuatro parámetros, los primeros dos son la posición es decir X, Y y los otros dos son el ancho y el largo. Esta manera de pintar en la pantalla es bastante común, primero se dan las coordenadas y luego las medidas, dando primero siempre los datos de X y luego los de Y, entonces en el caso de ellipse es ellipse(posX,posY,ancho,alto). Se que dije que no me especificaría en comandos de los lenguajes y posteriormente será así, pero esto era para una introducción a la manera de poner objetos en la pantalla. Ya que este método también se usa para poner cuadrados, imágenes, o los diferentes puntos que conformen un dibujo creado por programación. Al final del post pondré estos comandos di desean buscarlos en la referencia de processing igualmente las imágenes y los dibujos por vectores puede que si se expliquen un poco mas a fondo más adelante.
Las coordenadas en Processing inician sus puntos 0,0 en la esquina superior izquierda. pero estas cambian un poco a las coordenadas corrientes del plano cartesiano. En processing las coordenadas en Y se reducen hacia arriba y aumentan para abajo, mientras que X se reduce para la izquierda y aumenta a la derecha.
http://processing.org/learning/drawing/
http://processing.org/learning/drawing/imgs/1.5.jpg
También hay que aclara que la forma de pintar en processing es tal como si fuera una persona dibujando en un canvas, en este caso se le dijo pinte todo el fondo de rosa y luego con la pintura blanca, pinte un circulo en el centro. Pero si pasáramos el background al final. es decir:
void draw(){
fill(255,255,255);
//este sera el personaje
ellipse(200,200,40,40);
background(217,71,135);
}
En este caso no se vería nada excepto un fondo rosado, esto es porque se le esta pidiendo que pinte el circulo y luego se le dice que ponga un fondo encima. Es decir que el circulo si lo dibuja pero no se puede ver porque esta debajo del fondo y así para todo lo que se dibuje, lo que se ponga después en el código, quiere decir que va a ser dibujado después y por consiguiente encima de lo que ya se a puesto en la pantalla.
volviendo al código original
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
ellipse(200,200,40,40);
}
Se puede ver que al ejecutarse el código tiene un pequeño borde negro, este al igual que el fil también se puede modificar, pero este no se da por el fill() sino por stroke(R,G,B) que da el color de la linea y strokeWeight(tamaño) que define el grosor de la misma.
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
strokeWeight(4);
stroke(255,180,20);
ellipse(200,200,40,40);
}
Esto dibujara lo mismo pero esta vez el circulo tendrá un borde mas grueso y de color naranja. También hay que aclarar que estos comandos afectan a todas las figuras que se dibujen, es decir que si luego dibujan un cuadrado, este también será blanco con un borde grueso naranja, si desean cambiarlo tendrán que volver a llamar el comando de stroke y de fill.
un ejemplo de esto seria
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
strokeWeight(4);
stroke(255,180,20);
ellipse(200,200,40,40);
//se dibuja un cuadrado en la pos 100,100
rect(100,100,30,30);
}
Esto va a dibujar el cuadrado con los mismos colores y bordes que el circulo pero imaginemos que quisiéramos que el cuadrado a diferencia del circulo fuera azul y de borde rojo. Entonces el código seria algo así:
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
strokeWeight(4);
stroke(255,180,20);
ellipse(200,200,40,40);
//se selecciona el nuevo color
fill(0,0,255);
//se colorean los bordes de rojo
stroke(255,0,0);
//se dibuja un cuadrado en la pos 100,100
//este cuadrado es de relleno azul y con bordes rojos
rect(100,100,30,30);
}
Si no se quiere tener fondo o borde se pueden poner los comandos noFill() y el noStroke(). Si se quiere alterar la transparencia solo es poner un comando mas en el RGB que indique el alfa.
Fondo con transparencia: fill(234,44,124,125); el ultimo numero indica el alfa, en este caso es un fondo con opacidad del 50%, si no se pone este numero, processing va a tomar como default que vale 255, es decir que no tiene transparencia.
stroke con transaprecia: stroke(234,43,111,200); tiene las mismas normas mencionadas para el fill.
Por el momento nuestro código quedaria así:
void setup(){
size(400,400);
smooth();
}
void draw(){
background(217,71,135);
fill(255,255,255);
//este sera el personaje
strokeWeight(4);
stroke(255,180,20);
ellipse(200,200,40,40);
//se selecciona el nuevo color
fill(0,0,255);
//se colorean los bordes de rojo
stroke(255,0,0);
//se dibuja un cuadrado en la pos 100,100
//este cuadrado es de relleno azul y con bordes rojos
rect(100,100,30,30);
}
comandos extra mensionados:
imágenes: image();
cuadrados: rect();
dibujos (este se da por medio de varios comandos):
beginShape(),vertex(),bezierBertex(),endShape()
No hay comentarios:
Publicar un comentario