Introducción al coloreado

This is just a screen grab of our interactive coding talk-through, prepared to make captioning and translation easier. It is better to watch our talk-throughs here:
https://www.khanacademy.org/cs/programming/

Hay tres pasos, que necesitas conocer para hacer tus dibujos esplendorósamente coloridos.

Comencemos coloreando el fondo.

Para hacer eso, sólo teclea "background" y abre paréntesis

y el resto de la línea se completará por ti.

Si miras de cerca, notarás que en realidad esto es una llamada a una función.

Mira, tenemos el nombre de la función aquí, que es "background",

luego dos paréntesis, y 3 parámetros dentro, separados por coma.

Estos tres números representan la cantidad de rojo, verde y azul en el color del fondo.

Los números pueden ser cualquiera entre 0 y 255,

en donde 0 (cero) significa "nada de ese color",

y 255 significa maximizar ese color.

Ahora mismo, estoy maximizando la cantidad de rojo, y no hay ni verde ni azul.

Es por eso que el fondo es de un rojo super brillante.

Si hago el primer número más chico, entonces, habrá menos rojo, y se verá como un rojo oscuro.

Puedo seguir jugando con esos números y ver qué tipo de colores puedo lograr.

O, puedo usar nuestro super útil seleccionador de colores,

que configurará los 3 números por mí.

Ahora, es importante saber qué está haciendo realmente, esta función background.

Está simplemente dibujando un gran rectángulo colorido sobre el espacio de dibujo completo.

Si la moviera al final de mi programa, de esta manera,

entonces dibujaría ese gran cuadrado por encima de todas mis formas.

Quizás estés pensando: "Eso es tonto, ¿por qué alguien habría de querer eso?"

Pero, hey, uno nunca sabe.

Lo dejaremos al principio por ahora.

Ahora, ¡A colorear nuestras figuras!

Puede ayudarte, el pensar que la computadora tiene un asistente de color,

algún tipo de mayordomo de colores.

Básicamente, algún tipo que está encargado de los colores.

Este muchacho de los colores, sólo puede sostener un marcador de color en su mano izquierda,

y un balde de pintura en su mano derecha.

La computadora utilizará este marcador de color para dibujar todos los bordes,

y el balde de pintura para rellenar las formas.

Ahora bien, el marcador es negro, y el balde de pintura es blanco.

Puedes cambiar el color del marcador llamando a esta función "stroke".

Que también, autocompleta lo que escribes, y luego puedes escoger un color.

Esto cambia el marcador que el muchacho de los colores está sosteniendo,

de manera de que todas las formas dibujadas luego de esta línea, sean dibujadas con un marcador rosado.

A veces, no quieres bordes en tus formas.

¡Hay una función para eso, también!

Se llama "noStroke", y por primera vez, vemos una función que no recibe ningún parámetro.

Simplemente, tenemos este conjunto de paréntesis y un punto y coma,

y ahora puedes ver que nuestras formas no tienen bordes.

Podemos cambiar el color del balde de pintura de este muchacho, llamando a la función "fill".

Ahora bien, a partir de esta línea, en adelante, él rellenará todas las formas con este color rojo brillante.

Así como tenemos una función noStroke, también tenemos una función noFill, que tampoco recibe parámetros.

Esto hace todas nuestras formas, transparentes. No son rellenadas.

Ahora continuemos y cambiemos el color de este muchacho.

Comenzamos dibujando un triángulo para el cuerpo.

Voy a seleccionar un color de stroke, configurar el borde, digamos, de un verde oscuro.

Ahora elegimos un color de relleno. Mmmh, ¿cuál sería lindo? Quizás un verde claro.

Para su cara, no queremos que tenga un borde verde, así que cambiaré el color de borde para su cara.

Escogeré un borde bronceado marrón oscuro

Ahora escogeré un color de relleno diferente.

¿Cuál es un buen color de cara? Mmh...

Éste sería un color más o menos de cara, ¿no?

Ahora, las siguientes dos líneas, estas 2 elipses, son sus manos.

Quiero que sus manos sean del mismo color que su cara.

Así que no vamos a modificar el marcador ni el balde de pinitura.

Sólo dejaremos el color de borde y de relleno iguales

y continuaremos con su boca.

Su boca es sólo está línea, y las líneas no tienen colores de relleno porque no hay nada que rellenar.

Pero podemos cambiar el color de borde de esta línea.

Sí, rojo es un color bastante bueno para su boca.

Ahora, los marcos de sus gafas.

Una vez más, sólo necesitamos configurar el borde.

¿Cuál es un buen color de gafas?

Negro es bastante clásico.

Para los vidrios de sus gafas, Quiero que los rectángulos tengan el mismo borde que los del marco.

Así que no voy a cambiar el borde, pero voy a darle un color de relleno.

Hagámoslo negro para que concuerde con los marcos.

Ahí estamos, nuestro muchacho es colorido.

¡Oh sí!