Return to Video

Intro to Coloring

  • 0:00 - 0:07
    Hay tres pasos, que necesitas conocer para hacer tus dibujos esplendorósamente coloridos.
  • 0:07 - 0:09
    Comencemos coloreando el fondo.
  • 0:09 - 0:12
    Para hacer eso, sólo tipea "background" y abre paréntesis
  • 0:12 - 0:14
    y el resto de la línea se completará por ti.
  • 0:14 - 0:17
    Si miras de cera, notarás que en realidad es una llamada a función.
  • 0:17 - 0:20
    Mira, tenemos el nombre de la función aquí, que es "background",
  • 0:20 - 0:25
    luego dos paréntesis, y 3 parámetros dentro, separados por coma.
  • 0:25 - 0:32
    Estos tres números representan la cantidad de rojo, verde y azul en el color del fondo.
  • 0:32 - 0:35
    Los números pueden ser cualquiera entre 0 y 255,
  • 0:35 - 0:37
    en donde 0 (cero) significa "nada de ese color",
  • 0:37 - 0:40
    y 255 significa maximizar ese color.
  • 0:40 - 0:43
    Ahora mismo, estoy maximizando la cantidad de rojo, y no hay ni verde ni azul.
  • 0:43 - 0:46
    Es por eso que el fondo es de un rojo super brillante.
  • 0:46 - 0:50
    Si hago el primer número más chico, entonces, habrá menos rojo, y se verá como un rojo oscuro.
  • 0:50 - 0:53
    Puedo seguir jugando con esos números y ver qué tipo de colores puedo lograr.
  • 0:53 - 0:56
    O, puedo usar nuestro super útil seleccionador de colores,
  • 0:56 - 1:00
    que configurará los 3 números por mí.
  • 1:00 - 1:03
    Ahora, es importante saber qué está haciendo realmente, esta función background.
  • 1:03 - 1:06
    Está simplemente dibujando un gran rectángulo colorido sobre el espacio de dibujo completo.
  • 1:06 - 1:09
    Si la moviera al final de mi programa, de esta manera,
  • 1:09 - 1:12
    entonces dibujaría ese gran cuadrado por encima de todas mis formas.
  • 1:12 - 1:15
    Quizás estés pensando "eso es estúpido, ¿Por qué alguien habría de querer eso?"
  • 1:15 - 1:17
    Pero, ey, uno nunca sabe.
  • 1:17 - 1:20
    Lo dejaremos al principio por ahora.
  • 1:20 - 1:22
    Ahora, |A colorear nuestras formas!
  • 1:22 - 1:25
    Puede ayudarte, el pensar que la computadora tiene un asistente de color,
  • 1:25 - 1:27
    algún tipo de mayordomo de colores.
  • 1:27 - 1:30
    Básicamente, algún tipo que está encargado de los colores.
  • 1:30 - 1:35
    Este muchacho de los colores, sólo puede sostener un marcador de color en su mano izquierda,
  • 1:35 - 1:40
    y un balde de pintura en su mano derecha.
  • 1:40 - 1:43
    La computadora utilizará este marcador de color para dibujar todos los border,
  • 1:43 - 1:45
    y el balde de pintura para rellenar las formas.
  • 1:45 - 1:48
    Ahora bien, el marcador es negro, y el balde de pintura es blanco.
  • 1:48 - 1:52
    Puedes cambiar el color del marcador llamando a esta función "stroke".
  • 1:52 - 1:56
    También, autocompleta lo que escribes, y luego puedes escoger un color.
  • 1:56 - 1:59
    Esto cambia el marcador que el muchacho de los colores está sosteniendo.
  • 1:59 - 2:03
    de manera de que todas las formas dibujadas luego de esta línea, sean dibujadas con un marcador rosado.
  • 2:03 - 2:06
    A veces, no quieres bordes en tus formas.
  • 2:06 - 2:07
    ¡Hay una función para eso, también!
  • 2:07 - 2:14
    Se llama "noStroke", y por primera vez, vemos una función que no recibe ningún parámetro.
  • 2:14 - 2:17
    Simplemente, tenemos este set de paréntesis y un punto y coma,
  • 2:17 - 2:20
    y ahora puedes ver que nuestras formas no tienen bordes.
  • 2:20 - 2:26
    Podemos cambiar el color del balde de pintura de este muchacho, llamando a la función "fill".
  • 2:26 - 2:30
    Ahora bien, a partir de esta línea, en adelante, él rellenará todas las formas con este color rojo brillante.
  • 2:30 - 2:38
    Así como tenemos una función noStroke, también tenemos una función noFill, que tampoco recibe parámetros.
  • 2:38 - 2:42
    Esto hace todas nuestras formas, transparentes. No son rellenadas.
  • 2:42 - 2:45
    Ahora continuemos y cambiemos el color de este muchacho.
  • 2:45 - 2:47
    Comenzamos dibujando un triángulo para el cuerpo.
  • 2:47 - 2:56
    Voy a seleccionar un color de stroke, configurar el borde, digamos, de un verde oscuro.
  • 2:56 - 3:05
    Ahora elegimos un color de relleno. Mmmh, ¿cuál sería lindo? Quizás un verde claro.
  • 3:05 - 3:14
    Para su cara, no queremos que tenga un borde verde, así que cambiaré el color de borde para su cara.
  • 3:14 - 3:19
    Escogeré un borde bronceado marrón oscuro
  • 3:19 - 3:22
    Ahora escogeré un color de relleno diferente.
  • 3:22 - 3:25
    ¿Cuál es un buen color de cara? Mmh...
  • 3:25 - 3:30
    ¿Éste sería un color más o menos de cara, no?
  • 3:30 - 3:34
    Ahora, las siguientes dos líneas, estas 2 elipses, son sus manos.
  • 3:34 - 3:36
    Quiero que sus manos sean del mismo color que su cara.
  • 3:36 - 3:39
    Así que no vamos a modificar el marcador ni el balde de pinitura.
  • 3:39 - 3:41
    Sólo dejaremos el color de borde y de relleno iguales
  • 3:41 - 3:43
    y continuaremos con su boca.
  • 3:43 - 3:51
    Su boca es sólo está linea, y las líneas no tienen colores de relleno porque no hay nada que rellenar.
  • 3:51 - 3:55
    Pero podemos cambiar el color de borde de esta línea.
  • 3:55 - 3:58
    Sí, rojo es un color bastante bueno para su boca.
  • 3:58 - 3:59
    Ahora, los marcos de sus gafas.
  • 3:59 - 4:01
    Una vez más, sólo necesitamos configurar el borde.
  • 4:01 - 4:03
    ¿Cuál es un buen color de gafas?
  • 4:03 - 4:05
    Negro es bastante clásico.
  • 4:05 - 4:12
    Para los vidrios de sus gafas, Quiero que los rectángulos tengan el mismo borde que los del marco.
  • 4:12 - 4:17
    No voy a cambiar el borde, pero voy a darle un color de relleno.
  • 4:17 - 4:21
    Hagámosolo negro para que concuerde con los marcos.
  • 4:21 - 4:23
    Ahí estamos, nuestro muchacho es colorido.
  • 4:23 - 4:27
    ¡Oh sí!
Title:
Intro to Coloring
Description:

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/

more » « less
Video Language:
English
Duration:
04:27

Spanish, Argentinian subtitles

Revisions