Return to Video

Puzzles (4 mins)

  • 0:01 - 0:06
    Esta es sólo una sección corta para presentar un tipo de acertijo basado
  • 0:06 - 0:11
    en el tipo de código de manipulación de imágenes que hemos estado trabajando. La idea es, hay una fotografía de algún
  • 0:11 - 0:16
    objeto misterioso, y los valores de rojo, verde y azul en la imagen han sido
  • 0:16 - 0:21
    desordenados de alguna manera. Entonces lo que necesitas hacer es escribir un código para arreglar
  • 0:21 - 0:26
    los valores de rojo, verde y azul, y así revelar la imagen original, y ver qué es.
  • 0:26 - 0:32
    Bien, aquí hay un ejemplo. Voy a hacerlo yo. Este es el llamado "acertijo de oro".
  • 0:32 - 0:37
    Y la idea es, hay algún objeto mostrado aquí. Y lo que pasó con él
  • 0:37 - 0:43
    es que, primero que todo, los valores de verde y azul en la imagen han sido
  • 0:43 - 0:49
    reemplazados con valores aleatorios entre 0 y 255. Y, en realidad, si la ves,
  • 0:49 - 0:53
    esto da una especie de apariencia... "nevosa". Y, como puedes ver hay
  • 0:53 - 0:57
    algunos píxeles en los que el verde es muy alto, algunos pixeles en los que el azul es muy alto;
  • 0:57 - 1:00
    estos se ven simplemente azules o verdes. Y luego hay esta especie de píxeles turquesa esparcidos en toda la imagen;
  • 1:00 - 1:04
    son los casos en los que, tanto el azul como el verde son altos. Entonces este es
  • 1:04 - 1:08
    un nivel de desorden en esta imagen. La otra cosa que pasó
  • 1:08 - 1:13
    es que, la imagen que queremos recuperar está en los
  • 1:13 - 1:18
    valores de rojo. De hecho está exclusivamente en los valores de rojo: el verde y el azul son solo, de cierta forma, basura.
  • 1:18 - 1:23
    Pero los valores han sido divididos por 10, entonces son muy oscuros. Entonces, lo que estamos viendo aquí,
  • 1:23 - 1:27
    en la versión oscura, es, hay una imagen en rojo oscuro
  • 1:27 - 1:32
    detrás y ha sido cubierta por esta especie de nieve aleatoria.
  • 1:32 - 1:38
    verde-azul clara, así que no podemos verla. Entonces, lo que queremos hacer es escribir un código para arreglarla.
  • 1:38 - 1:46
    Déjenme empezar aquí. Como es usual, para este, voy a empezar
  • 1:46 - 1:51
    con solo una área de texto en blanco para escribir el código, y luego, aquí abajo, hay una solución,
  • 1:51 - 1:55
    con el botón de mostrar solución [Show solution]; así que si quieres visitar esta página e intentarlo por ti mismo, puedes hacerlo y lograr el código.
  • 1:55 - 1:59
    De acuerdo, la primera cosa que quiero hacer... así se ve si yo simplemente lo ejecuto así:
  • 1:59 - 2:04
    el ciclo está vacío, así que si lo ejecuto, sólo obtengo la imagen acertijo
  • 2:04 - 2:08
    original. Bien, así que la primera cosa que voy a hacer es decir
  • 2:08 - 2:12
    "pixel-punto-setGreen-cero" [pixel.setGreen(0)].
  • 2:12 - 2:17
    Voy a eliminar los valores de verde. Voy simplemente a deshacerme de ellos
  • 2:17 - 2:22
    y veremos que logramos. Hum, de acuerdo, ahora, bien, está mejor. Ahora, simplemente
  • 2:22 - 2:29
    tenemos esta nieve azul. Al menos hemos logrado deshacernos de la nieve verde,
  • 2:29 - 2:36
    así que me desharé de la nieve azul también. Entonces, digo "pixel-punto-setBlue-cero"; probaré eso.
  • 2:37 - 2:43
    Bien, hum. Me he deshecho de la nieve, pero ahora, el problema es que la
  • 2:43 - 2:49
    imagen, que está en los valores de rojo es tan oscura, que no podemos verla. Así que
  • 2:49 - 2:55
    técnicamente está allí, pero es invisible. Entonces lo que necesito hacer es redimensionarla de vuelta,
  • 2:55 - 3:00
    de acuerdo? Está oscura, sólo necesito hacerla más clara. Así que diré "pixel-punto-setRed-de:
  • 3:00 - 3:05
    pixel-punto-getRed..."; parece algo así como cinco, diez, veinte,
  • 3:05 - 3:10
    en este acertijos. Así que, voy a... En este caso, las instrucciones dicen que fue reducida
  • 3:10 - 3:15
    por un factor de diez. Entonces la amplio de vuelta por un factor de diez.
  • 3:15 - 3:20
    Ja! Aquí vamos. Así que, esta es la imagen solución.
  • 3:20 - 3:25
    Es una fotografía del puente Golden Gate, como se ve del lado de San Francisco. Ahora,
  • 3:25 - 3:31
    es un poco... obviamente, no luce muy bien. Lo que pasó es que, como
  • 3:31 - 3:36
    los datos están exclusivamente en el rojo, aún cuando la recuperamos, se ve solo el rojo. Quiero decir, lo
  • 3:36 - 3:41
    que pasa realmente, es que esta es, esencialmente, una imagen en blanco y negro
  • 3:41 - 3:45
    y normalmente se muestra en una especie de espectro de blanco a negro. En este caso,
  • 3:45 - 3:50
    la imagen está siendo mostrada en un espectro de negro a rojo. Así que esta es la imagen correcta, solo que
  • 3:50 - 3:55
    tiene solo la parte roja. Para esta sección, vamos a decir que es suficientemente bueno, ya sabes,
  • 3:55 - 3:59
    puedes ver lo que se supone que es.
    En una sección posterior, mostraré como
  • 3:59 - 4:04
    arreglarla y lograr que se vea como una imagen en blanco y negro propiamente.
Title:
Puzzles (4 mins)
Description:

Professor Nick Parlante exemplifies how to solve an image puzzle using JavaScript.

more » « less
Video Language:
English
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Camilo Dorado edited Spanish subtitles for Puzzles
Show all

Spanish subtitles

Revisions