< Return to Video

Resizing shapes with variable expressions

  • 0:00 - 0:02
    Volvemos con Winston
  • 0:02 - 0:06
    Ahora tenemos ambas: la variable "x" y la "y"
  • 0:06 - 0:07
    Para la posición de Winston
  • 0:07 - 0:09
    Así que le podemos mover hacia los lados
  • 0:10 - 0:12
    Hacia arriba y hacia abajo wew!
  • 0:12 - 0:13
    Muy chulo!
  • 0:14 - 0:16
    Ahora vamos a devolverlas a su estado original
  • 0:16 - 0:19
    Eran: 200 (x) y 200 (y)
  • 0:19 - 0:22
    Vamos a ver como funciona este programa
  • 0:23 - 0:26
    Así que empezando aquí: Tenemos una variable (tamañoOjos)
  • 0:26 - 0:28
    Que se está usando para manejar el tamaño de los ojos
  • 0:28 - 0:30
    Porque los ojos son 40 pix. de ancho
  • 0:30 - 0:32
    y 40 pix. de alto
  • 0:32 - 0:35
    Y despues tenemos estas variables "x" e "y"
  • 0:35 - 0:39
    Y esos posicionan el centro de la cara
  • 0:40 - 0:41
    Y las podeis ver usadas
  • 0:41 - 0:43
    En este comando "ellipse"
  • 0:43 - 0:45
    Que dibuja ese gran círculo amarillo
  • 0:46 - 0:47
    Y luego aquí abajo
  • 0:47 - 0:49
    Para los ojos
  • 0:49 - 0:50
    La "x" y la "y" son usadas de nuevo
  • 0:51 - 0:52
    Y aquí
  • 0:52 - 0:54
    Los ojos son posicionados
  • 0:54 - 0:56
    Relativos al centro de la cara
  • 0:56 - 0:58
    Así que este está
  • 0:58 - 0:59
    Cincuenta píxeles
  • 0:59 - 1:01
    A la izquierda del centro
  • 1:02 - 1:03
    Y este está 100 píxeles
  • 1:03 - 1:05
    a la derecha del centro
  • 1:05 - 1:08
    Ok. Pues muy chulo!
  • 1:08 - 1:09
    Y esa es la razon por la que podemos
  • 1:09 - 1:11
    mover a Winston hacia arriba y abajo
  • 1:11 - 1:13
    Ahora, quiero poder controlar
  • 1:13 - 1:15
    mas cosas de la cara de Winston
  • 1:15 - 1:17
    usando variables
  • 1:17 - 1:18
    Así que quiero averiguar
  • 1:18 - 1:19
    que mas en este programa
  • 1:19 - 1:21
    podemos "guardar" como variables
  • 1:21 - 1:21
    Para eso
  • 1:21 - 1:23
    Voy a ir buscando
  • 1:23 - 1:24
    en cada linea de codigo
  • 1:24 - 1:25
    Y buscar lo que llamamos
  • 1:25 - 1:27
    "hard coded" numbers
  • 1:28 - 1:29
    esos son numeros que son
  • 1:29 - 1:31
    simplemente numeros a secas
  • 1:31 - 1:33
    no son variables ni numeros dependeintes de variables
  • 1:34 - 1:35
    así que vamos a empezar aquí
  • 1:35 - 1:37
    en el primer eclipse
  • 1:38 - 1:39
    tenemos 300 y 300
  • 1:39 - 1:41
    para la anchura y la altura
  • 1:42 - 1:44
    esos simplemente son numeros a secas
  • 1:44 - 1:45
    así que vamos a hacer una variable
  • 1:45 - 1:46
    sustituyéndolos
  • 1:46 - 1:48
    llamado faceSize (tamañoCara)
  • 1:49 - 1:50
    y guardar en el el numero "300"
  • 1:50 - 1:53
    Ahora simplemente escribiremos faceSize
  • 1:54 - 1:55
    faceSize
  • 1:56 - 1:57
    Ok, sigamos
  • 1:57 - 1:58
    y saltarnos los colores (comando fill)
  • 1:58 - 2:00
    ahora los comando elipticos son o
  • 2:00 - 2:02
    todo variables
  • 2:02 - 2:03
    o dependientes de variables
  • 2:03 - 2:04
    así que las vamos a dejar
  • 2:04 - 2:05
    así por ahora
  • 2:05 - 2:07
    y luego el comando de la boca
  • 2:07 - 2:09
    esos son dependientes de "x" e "y"
  • 2:09 - 2:10
    pero estos de aquí
  • 2:10 - 2:12
    son solo numeros a secas
  • 2:13 - 2:15
    150 y 150
  • 2:15 - 2:16
    Así que vamos a decir que
  • 2:16 - 2:19
    mouthSize (buen nombre)
  • 2:19 - 2:20
    es igual a 150
  • 2:22 - 2:25
    Sustituiremos mouthSize
  • 2:25 - 2:27
    y mouthSize
  • 2:28 - 2:29
    Vale, entonces, ahora
  • 2:29 - 2:31
    tenemos los tamaños de las figuras
  • 2:31 - 2:33
    guardados como variables ahí arriba
  • 2:33 - 2:35
    eso significa que es muy muy facil
  • 2:35 - 2:36
    para nosotros cambiar los tamaños
  • 2:36 - 2:37
    como esto mira
  • 2:37 - 2:39
    Woooo Winston tiene hambre! jajaja
  • 2:39 - 2:41
    y algo como ya sabes como
  • 2:41 - 2:43
    Winston tiene mucha hambre
  • 2:43 - 2:44
    y luego se come un monton de donuts
  • 2:44 - 2:46
    y luego se hace super grande xD.
  • 2:46 - 2:48
    Vale.
  • 2:48 - 2:49
    Pero hay algo
  • 2:49 - 2:51
    que no me gusta de este programa ahora mismo
  • 2:52 - 2:59
    Así que si hago el tamaño de la cara muy muy pequeña
  • 2:59 - 3:01
    empieza a ser gracioso
  • 3:01 - 3:03
    porque los ojos y la boca
  • 3:03 - 3:05
    esán fuera de la cara xD
  • 3:05 - 3:07
    y en ciertos puntos si quiera
  • 3:07 - 3:08
    parece que estén conectados
  • 3:08 - 3:09
    a la cara
  • 3:09 - 3:11
    Así que ya no es una cara, no?
  • 3:12 - 3:14
    Así que lo que queremos que pase
  • 3:14 - 3:16
    es que cuando cambie el tamaño de la cara (faceSize)
  • 3:16 - 3:18
    quiero la cara y la boca
  • 3:18 - 3:22
    Quiero que su tamaño cambie junto con la cara
  • 3:22 - 3:24
    Para que si hago la cara ser la mitad de su tamaño
  • 3:24 - 3:27
    quiero que la boca sea la mitad de grande tambien
  • 3:27 - 3:29
    eso significa que
  • 3:30 - 3:33
    quiero calcular: mouthSize y eyeSize
  • 3:33 - 3:36
    como fracciones de faceSize
  • 3:37 - 3:40
    Vale, vamos a resetear estas variables
  • 3:40 - 3:42
    Y os enseñaré lo que quiero decir
  • 3:42 - 3:44
    Vamos a empezar con mouthSize
  • 3:44 - 3:45
    así que ahora mismo
  • 3:45 - 3:50
    faceSize es 300 y mouthSize es 150
  • 3:50 - 3:52
    asi que si pensamos en ello
  • 3:52 - 3:53
    relativamente uno del otro
  • 3:53 - 3:56
    diriamos que faceSize es el doble de grande
  • 3:56 - 3:58
    que mouthSize
  • 3:58 - 4:00
    o que mouthSize es la mitad de grande
  • 4:00 - 4:01
    que faceSize
  • 4:01 - 4:04
    y podemos escribir eso en código como este
  • 4:04 - 4:08
    una mitad de faceSize
  • 4:08 - 4:10
    ok entonces este codigo dice
  • 4:10 - 4:12
    que cojemos el valor de faceSize
  • 4:12 - 4:13
    los multiplicamos por la mitad
  • 4:13 - 4:15
    y lo guardamos en "mouthSize"
  • 4:16 - 4:17
    así que si cambiamos esto de aquí
  • 4:18 - 4:20
    el ordenador sabria lo que la mitad de eso es
  • 4:20 - 4:22
    y eso se convertiria en mouthSize
  • 4:22 - 4:24
    Perfecto! Eso es lo que queremos
  • 4:25 - 4:27
    Ahora lo mismo con eyeSize
  • 4:27 - 4:29
    Así que faceSize es 300
  • 4:29 - 4:31
    y eyeSize is 40
  • 4:31 - 4:33
    así que necesitamos que sea
  • 4:33 - 4:37
    40/300 40 trescientoavos de faceSize
  • 4:37 - 4:39
    que es igual a, vamos a ver
  • 4:39 - 4:41
    4/30 que podemos
  • 4:41 - 4:44
    simplificar hasta 2/15
  • 4:44 - 4:46
    así que vamos a decir que
  • 4:46 - 4:50
    2/15 por faceSize
  • 4:50 - 4:51
    por cierto
  • 4:51 - 4:52
    Si eres nuevo en esto de las fracciones
  • 4:52 - 4:54
    Y esas matematicas son algo dificiles para ti
  • 4:54 - 4:56
    puedes aprender mas sobre fracciones
  • 4:56 - 4:58
    en KhanAcademy
  • 4:58 - 5:00
    y volver cuando
  • 5:00 - 5:00
    creas que estas preparado
  • 5:00 - 5:02
    aquiSí, simplemente ves allí.
  • 5:03 - 5:04
    OK
  • 5:04 - 5:06
    pues vamos a probar a cambiar el tamaño de la cara otra vez
  • 5:07 - 5:08
    Jaja! Mira!
  • 5:08 - 5:10
    la cara y los ojos cambian su tamaño
  • 5:10 - 5:12
    proporcionalmente a la cara
  • 5:12 - 5:13
    pero seguramente te has dado cuenta
  • 5:13 - 5:15
    hay algo que está mal
  • 5:15 - 5:17
    los ojos y la boca
  • 5:17 - 5:19
    aun salen fuera de la cara
  • 5:19 - 5:21
    aunque estan
  • 5:21 - 5:23
    con un tamaño mas proporcional
  • 5:23 - 5:25
    Eso es porque aun tenemos
  • 5:25 - 5:27
    unos numero a secas
  • 5:27 - 5:28
    en nuestro comando elipse
  • 5:28 - 5:30
    unos numeros que en realidad deberían
  • 5:30 - 5:33
    deberían ser fracciones de variables
  • 5:33 - 5:35
    Aquí, te lo enseñaré
  • 5:35 - 5:38
    Entonces, para el "ellipse"
  • 5:38 - 5:41
    tenemos X menos 50 para la posicion de X
  • 5:41 - 5:43
    Esto significa que siempre estará 50 pixeles a la izquierda
  • 5:43 - 5:45
    incluso si hacemos nuestra cara
  • 5:45 - 5:47
    mas pequeña que 50 pix
  • 5:47 - 5:48
    y eso no tiene nigun sentido
  • 5:48 - 5:50
    porque eso significa que el ojo ozquierdo
  • 5:50 - 5:50
    ni si quiera estará
  • 5:50 - 5:52
    en la cara
  • 5:52 - 5:55
    Así que debería ser X menos alguna fracción
  • 5:55 - 5:57
    el tamaño de nuestra cara
  • 5:57 - 5:59
    y podremos averiguar la fraccion
  • 5:59 - 6:00
    de la misma manera
  • 6:00 - 6:04
    50 relativamente de 300
  • 6:04 - 6:08
    así que 50/300, 5/30, 1/6
  • 6:09 - 6:12
    entonces 1/6 por faceSize
  • 6:12 - 6:14
    Y veremos otros 50 aqu´´i
  • 6:14 - 6:16
    Asñi que podemos hacer lo mismo
  • 6:16 - 6:17
    de la misma manera
  • 6:17 - 6:19
    aqui tenemos 100/300
  • 6:19 - 6:21
    que será
  • 6:21 - 6:23
    1/3 un tercio faceSize
  • 6:23 - 6:25
    este es 60
  • 6:25 - 6:26
    así que acabará siendo
  • 6:26 - 6:29
    1/5 por faceSize
  • 6:29 - 6:32
    y aqui tenemos otros 50
  • 6:32 - 6:34
    así que es un sexto otra vez
  • 6:34 - 6:36
    y luego 40
  • 6:36 - 6:38
    que es lo que sacamos por ahí arriba
  • 6:38 - 6:40
    2/15
  • 6:40 - 6:45
    así que 2/15 por faceSize
  • 6:45 - 6:48
    vale, vamos a intentarlo de nuevo
  • 6:48 - 6:49
    Oh! Mira eso!
  • 6:49 - 6:51
    Míralo! Es bellísimo
  • 6:51 - 6:52
    muy bueno
  • 6:53 - 6:55
    Vale, pues vamos a recordar
  • 6:55 - 6:56
    Habíamos creado esta variable
  • 6:56 - 6:58
    que guardan el tamaño de la cara
  • 6:58 - 7:00
    y simplemente guarda un numero
  • 7:00 - 7:02
    despues tenemos estas variables "mouthSize"
  • 7:02 - 7:03
    y "eyeSize"
  • 7:03 - 7:06
    y las calculamos basandos en fracciones
  • 7:06 - 7:07
    relaccionadas a faceSize
  • 7:07 - 7:08
    para asegurarnos de que
  • 7:08 - 7:10
    sus valores son siempre cambiados
  • 7:10 - 7:12
    basandonos en como empezamos esta al principio
  • 7:13 - 7:15
    luego todos los otros son calculados
  • 7:15 - 7:17
    basandono en faceSize también
  • 7:17 - 7:18
    para asegurarnos de que la posición
  • 7:18 - 7:20
    dentro de la cara cambie
  • 7:20 - 7:22
    Si faceSize cambia
  • 7:22 - 7:23
    Whoo! Vale!
  • 7:23 - 7:25
    Ahora que realmente entendemos
  • 7:25 - 7:26
    como hacer variables
  • 7:26 - 7:28
    dependiendo de los valores de otras variables
  • 7:28 - 7:30
    podemos hacer muchas mas cosas con nuestros programas!
  • 7:30 - 7:32
    Vamos a celebrarlo haciendo a Winston
  • 7:32 - 7:37
    Gigante! Si, vamos Winston!
Title:
Resizing shapes with variable expressions
Description:
more » « less
Video Language:
English
Duration:
07:37

Spanish subtitles

Revisions

Our website uses cookies for analysis purposes.