Curso Inteligencia Artificial

vamos a empezar a trabajar con inteligencia artificial pero vamos a hacerlo desde un punto de vista práctico entonces para esto nos hace falta dos cosas en primer lugar nos hace falta un editor de código con el cual poder escribir nuestros programas hay varios de ellos que podemos utilizar así que yo recomiendo puede recomendar realmente varios uno de ellos es prachett que podemos encontrar en brackets punto y yo dentro de esta página veremos que podemos descargar brackets tanto para windows como para mac como para linux existen otros editores que podemos usar por ejemplo otro de ellos es edit heavy es un editor de texto un editor de código que viene con muchos sistemas operativos viene sobre todo con sistemas operativos de tipo linux aunque también podemos descargarlo adicionalmente con sistemas operativos de tipo windows especialmente si estamos trabajando con con windows tenemos otro editor que es note para los pross especialmente este editor sólo está para windows es muy bueno pero es muy ligero pero sólo está para windows hay otros que podemos utilizar tengo muchos alumnos que son muy fans de sublime text sublime texto tiene sobre todo la característica de que el fondo es negro y la letra es clara yo suelo trabajar más con editores de código que el fondo es blanco y la letra es oscura pero en definitiva son editores de código muy similares la idea de un editor de código es que quiero que me color el código y luego que lo que quiero que hagas que me color en el código específicamente para poder saber cuándo quizás he cometido un error a continuación en el caso del lenguaje con el que vamos a trabajar que es javascript vamos a necesitar un servidor local vamos a necesitar un servidor que pueda ejecutar correctamente nuestro scripts yo en mi caso estoy utilizando map entonces mamá es un sistema es específicamente o preferentemente para mac y básicamente lo que hace es contener apache mysql php si estamos en mac recomiendo usar el mapa si estamos en windows recomiendo usar samp que es algo muy parecido a mamá pero para multiplataforma hay aislado para windows para linux y para mac en el caso de que estemos en windows recomiendo usar en muchas distribuciones de linux realmente también así que una vez que hayamos descargado estos programas veremos que ocurre lo siguiente por una parte si ejecutamos por una parte si buscamos en programas veremos que tengo ya por aquí brackets preparado para utilizar para hacer la pantalla y aquí tengo brackets una parte d los últimos archivos con los que he estado trabajando para a continuación voy a crear un archivo nuevo y en mi caso además tengo que arrancar el mambo entonces me voy a ir a aplicaciones buscar el mambo voy a ir a la carpeta de estacas o arrancar man y simplemente voy a arrancar los servidores a partir de este momento una vez que el mapa arranque una vez que arranque correctamente en mac osx amp en windows debe de tener en cuenta que la carpeta donde voy a trabajar a partir de este momento es esta carpeta de aquí es la carpeta de ht docs así que al hacer clic en el 72 una carpeta nueva botón derecho carpeta nueva inteligencia artificial por ejemplo dentro de inteligencia artificial voy a crear ejercicio 1 y dentro de ejercicio 1 aquí colocaré mi primer ejercicio vamos a ver a continuación cómo tengo que crear un archivo de texto dentro de este editor cómo lo voy a colocar dentro de esta carpeta y cómo se verá el resultado dentro del navegador a continuación lo que voy a hacer es crear un nuevo archivo de texto dentro de brackets voy a ir a archivo nuevo dentro del archivo nuevo lo que haré a continuación es archivo guardar como y dentro de guardar como voy a ir a aplicaciones en mi caso voy a ir a mamp voy a ir a htc inteligencia artificial ejercicio 1 y lo voy a guardar en primer lugar como index.hr ml el nombre puede ser realmente el que queramos el archivo va a tener la extensión de html esto es porque aunque vamos a trabajar el javascript realmente javascript de veras es recomendable que esté contenido dentro de un archivo html ahora a continuación veremos por qué pulsamos sobre el save vamos a guardar safe comprobamos que al guardar este ejercicio y esto lo estamos guardando en aplicaciones en man united ox si es si estás en windows estarás en el disco duro ce en la carpeta sham en hd docs y ahí yo he creado una carpeta llamada inteligencia artificial ya partir de ahí he creado un primer ejercicio 1 y luego index.html comprobamos que en la carpeta donde realmente estábamos es decir en aplicaciones me voy al finder’ o al explorador de windows me voy a amp me voy a ht docs me voy a inteligencia artificial me voy a ejercicio 1 y compruebo como realmente está el archivo que acabo de crear y luego por último voy a abrir un navegador y voy a poner los siguientes primer lugar voy a poner localhost localhost equivale a decir que quiero no salir a internet sino a ver mi propio ordenador barra inteligencia artificial barra ejercicio 1 barra index.html es decir localhost para decir que estamos en nuestro propio ordenador inteligencia artificial es la carpeta que hemos creado en primer lugar ejercicio 1 es la subcarpeta que hemos creado el index punto html es como se llama este archivo pulsamos enter y vemos que no aparece nada pero evidentemente no aparece nada porque el archivo que hemos creado está vacío si en este archivo escribimos hola y guardamos vamos a archivo guardar luego vamos al navegador y pulsamos sobre recargar veremos que aunque parezca pequeñito pero vemos que aparece la cual quiere decir que se hará yo por ejemplo aquí pongo adiós te voy a guardar guardar es como ese a partir de ahora cada vez que guarde lo que voy a hacer es guardar con tecla rápida control ese sí estamos en windows o linux command en 6 que estamos en marte así que pulso guardar me voy a el navegador pulso recargar pero a partir de ahora cómo voy a recargar muchas veces no recargar e con este botón sino que recarga de con la tecla rápida que es command eres y estamos en mac control r sí estamos en windows o en linux y en definitiva de esta forma lo que hago es comprobar que efectivamente estoy trabajando con el mismo archivo lo que escriba aquí en versión de código es lo que voy a ver aquí el resultado que voy a ver aquí en el navegador dependiendo del sistema operativo en el que estemos las versiones más recientes de mac y de windows y linux soportan trabajar la pantalla partida esto quiere decir que en el caso de marca específicamente si pincho el botón verde y lo mantengo pinchado veremos como puedo especificar que quiero trabajar con la pantalla de partida y así maximiza el espacio de trabajo pero es obligatorio evidentemente sino que podemos trabajar finalmente como queramos pero yo soy bastante fan de trabajar de esta forma y así podemos ver siempre el código que hacemos a la izquierda y el resultado a la derecha otra forma de trabajar evidentemente es maximizar esta pantalla y luego ir cambiando de escritorio para ver el resultado en definitiva depende del proyecto con el que esté trabajando depende de la complejidad del proyecto iré trabajando de una forma o de otra para a continuación la que vamos a hacer es empezar a crear nuestro primer archivo con la llave o simplemente han sido dos palabras que me servían para comprobar que estoy trabajando con el mismo archivo otra cosa un poco por limpieza va a ser eliminar eliminar todas estas alegando en team al eliminar todas estas pestañas y quedarnos directamente con la única pestaña que nos interesa y ahora a continuación lo que voy a hacer es preparar un archivo de base un poco una plantilla que nos va a servir para trabajar dentro de la aquello que vamos a hacer a partir de ahora cuando trabajamos en inteligencia artificial nos hace falta generalmente un primer lenguaje de programación para empezar a calcular cosas pero hay un problema es que los lenguajes de programación trabajan en la memoria un lenguaje de programación cuando calcula algo no tiene por qué mostrarlo en pantalla muchas de las cosas que nosotros pensamos dentro de nuestra cabeza no las verbalizamos con los lenguajes de programación específicamente con la inteligencia artificial ocurre un poco parecido y es que que hagamos un programa no quiere decir que el programa muestre nada por pantalla por eso en nuestro caso vamos a usar una combinación de html y de javascript y de esta forma html va a ser el lenguaje que nos va a hacer un poco de escenario y javascript va a ser el lenguaje que nos va a hacer las veces de motor en definitiva del lenguaje puro de programación esta ventana que tenemos aquí la voy a minimizar bastante y ahora dentro del body voy a hacer dos cosas pero guardo recargo veo que en principio parece que no tenga nada aunque ahora veremos que realmente sí que tengo se pulsa un botón derecho en el código fuente de la página veremos como realmente sí que sí trabajando con código y ahora voy a hacer lo siguiente voy a poner canvas voy a poner de lienzo está un poco más pequeño hacer más pequeño más grande es con coman más y menos si estás en mac control más o control menos si estás en windows o en linux así que lienzo y digo wifi es igual por ejemplo a 500 píxeles height es igual a 500 píxeles haciendo esto parece que no pero ahí lo podemos empezar a ver en los scrums pero hemos creado un escenario si no podemos ver el escenario vamos a hacer lo siguiente me voy a ir hasta el dentro de esta él voy a decir que quiero poner un canvas y quiero que el canvas le ponga un borde de un píxel sólido black esto lo que hace es crear un borde de un píxel sólido de color negro y mediante este borde por lo menos podemos ver que ya tenemos un canvas lo que estamos haciendo aquí es que este canvas canvas quiere decir lienzo en inglés nos permite pintar dentro de él y el borde básicamente lo que nos permite simplemente estilizar lo es decir especificar que llevo un borde de color negro alrededor de este lienzo y esto es nuestro escenario esto no es todavía un lenguaje de programación lo que acabo de hacer es crear un poquito de código con este lenguaje llamado html qué es un lenguaje de marcaje únicamente pone un escenario en pantalla canvas es parte d o al menos esta estructura de código es parte del lenguaje pss que nos permite estilizar aquello que escribimos con html una vez más nada de esto tiene absolutamente nada que ver con inteligencia artificial pero sin embargo ahora en cuanto empecemos a programar con inteligencia artificial vamos a comprobar como necesitamos alguna plataforma en la pantalla para ver lo que estamos haciendo para de alguna forma que nuestro programa saque algo por pantalla bueno pues por esto necesitamos estos complementos que son html y css más que nada para que nos permitan tener ya vemos lo ha sido un escenario un lienzo sobre el cual podamos ver qué es lo que está haciendo realmente nuestro programa de inteligencia artificial ahora a continuación es cuando empieza realmente la fiesta ya que vamos a crear una etiqueta script donde dentro esto es javascript aquí es donde realmente vamos a empezar hay que escribir nuestro código y voy a hacer lo siguiente voy a escribir una etiqueta ya para leer la instrucción llamada alert y digo esto ya es un programa así que guardamos recargamos y vemos que sale una cajita de alerta que nos dice esto ya es un programa vemos como en definitiva todo lo que ocurre aquí dentro ya no es un mero lienzo sino que realmente es parte de lo que vamos a empezar haciendo bien pues vamos allá a continuación lo que voy a hacer es empezar a escribir y lo primero que necesito es decirle al sistema que voy a pintar dentro de esta pantalla voy a pintar y bueno a la pintada y digo bar para crear una variable contexto es igual a documento punto element vale al día el ide es lienzo por qué pues porque le he puesto aquí un lienzo por tanto aquí pongo un lienzo yo suelo seguir una regla en programación que es que si me ves que pongo algo en inglés es que tienes que ponerlo igual pero si me ves que pongo algo en castellano es que tienes es que puedes ponerlo como quieras con una condición y es que haya concordancia concordancia quiere decir que lo que pongas aquí lo tienes que poner aquí valencey pérez longaniza pues ahí pones lo analiza bien a continuación voy a poner punto de contexto 2 d esto lo que quiere decir básicamente es que voy a pintar en dos dimensiones simplemente lo que digo es voy a seleccionar el lienzo y que sepas que a continuación voy a pintar en dos dimensiones con lo cual ahora a continuación lo que hago es que usó él el contexto para pintar y contexto punto fil recto e incluso fijémonos que nos dice la x la y la anchura wifi y height la altura entonces vengo por aquí y digo pues 10,10 2020 es decir voy a pintar el rectángulo que va a estar en 10 en 10 10 en x en 10 en y iba a tener 20 unidades y va a tener otras 20 unidades pulsamos recargar y vemos cómo efectivamente aparece un rectángulo en pantalla una vez que aparece este rectángulo en pantalla es cuando yo a partir de ahí puedo empezar a pintar vemos que realmente empezar a pintar en javascript es sencillo vale más allá de toda esta estructura ahora veremos que una vez que empecemos a trabajar comprobaremos que pintar no es mucho más complejo e incluso decimos bueno porque el rectángulo tiene que ser negro pues contexto punto feel style y le puedo decir que es igual a red esto lo que va a hacer es que cuando recargo el rectángulo es rojo no puedo decir blue pues el rectángulo es azul hay una serie de comandos que puede utilizar en este curso no vamos a ver todos los comandos de dibujo de canvas porque no es nuestro objetivo aprender a dibujar todas las formas posibles nuestro objetivo es tener una vía para mostrar nuestras ideas mostrar nuestros programas y que nuestros programas realicen algo de dibujo en la pantalla para mostrarnos lo que están haciendo realmente vale y hacerlo mediante una serie de comandos bien una vez que tenemos este rectángulo también digo que podríamos convertirlo en un círculo cuidado porque dibujar con círculos en javascript no es tan fácil como dibujar con rectángulos entonces para ello veremos que hay un comando con texto arc y vemos que hay una serie de comandos la x la y el radio el ángulo inicial el ángulo final y el si es a favor del reloj o en contra del reloj entonces básicamente voy a poner 50/50 radio 10 empieza en cero acaba en 360 grados es decir la vuelta entera el problema es que en javascript como muchos lenguajes de programación no se trabaja en grado sexagesimal es sino que se trabaja en radiales entonces sí recordamos un poco de álgebra pues 360 grados sexagesimal es equivale a 2 y radiales vale entonces esto quiere decir de la librería matemática punto uso la constante piqué es 3 1416 y lo que sea bien pincho recargo no aparece nada y esto es porque dibujar un arco como comentaba es un pelín más difícil que dibujar una caja así que le digo contexto punto de jim pub contexto punto en paz vamos allá guardo recargo estoy recargando allí vale y contexto punto field guardamos recargamos y ahí tenemos el círculo cuidado porque estoy recargando sobre sobre brackets lo que tengo que cargar aquí y lo que tengo ahí un rectángulo y un círculo así que comentar aquí vamos a comentar el código lo que pinte a partir de ahora se va pintar de este color luego voy a dibujar un rectángulo y bueno y ahora y dibujar un círculo es algo más complejo porque vemos que dibujar un rectángulo lo podemos hacer una línea pero dibujar un rectángulo nos ha requerido cuatro líneas incluso estoy pensando que así me puedo quitar hasta de allí y si voy a quitar la cuarta línea no es muy purista probablemente pero bueno si os ahorro de momento el trabajo inicial de poder es dibujar cosas bien ahora a continuación lo que quiero hacer es poner un poquito este rectángulo en movimiento o ese círculo en movimiento para eso a continuación voy a empezar una serie de cosas una serie de operaciones vamos a verlas en los siguientes vídeos lo que viene a continuación va a ser recargar digamos redibujar en este lienzo una serie de veces para eso voy a hacer lo siguiente voy a crear una función llamada bucle y este establecer un temporizador bar temporizador es igual acepta y out ejecuta bucle dentro de un segundo porque en javascript los segundos el tiempo se mide en milisegundos realmente así que yo digo clear time out temporizador y el temporizador es igual a esto estos que es lo que va a hacer pues lo que hace cuando llega a esta línea es que ejecuta un bucle dentro de un segundo ejecuta bucle esta es la función de bucle pero lo que hace aquí es que ejecuta bucle dentro de un segundo en vez que ocurre pues lo que ocurre es que si ya estoy en bucle y dentro de bucle ejecuto bucle dentro de un segundo lo que va a ocurrir simplemente es que el sistema va a dibujar o se va a ejecutar realmente bucle dentro de un segundo es decir va a ejecutar el sistema constantemente para ello vamos a hacer lo siguiente declaramos variables de posición x es igual a muy fiel por ejemplo 250 bar x y es igual a 250 es lo que voy a hacer a continuación pues dibujo un círculo me copió de este código y dibujó un círculo y aquí pongo x y aquí pongo y pero ahora a continuación en cada vuelta modificó algo los parámetros y entonces digo x es cada vez vamos a poner barra menos 2 y más igual a 2 esto quiere decir que cada vez que pase por aquí cada vez que pase por aquí cada vez que se ejecute el sistema va a aumentar 2 en la equis va a aumentar 2 en la griega y va a volver a pintar si nos fijamos la pantalla lo que está ocurriendo es que la pelota se va moviendo hacia abajo hacia la derecha si nos preguntamos el por qué se dibujan nuevas pelotas y no se borran las anteriores es porque nosotros en ningún momento le hemos hecho el sistema que queremos que borre la pantalla porque no lo sé igual no queremos que elabore en todo caso si queremos que la borre pondremos un queremos borrar la pantalla al principio del todo entonces tengo que poner contexto punto crear rect o sea un rectángulo de borrado que va desde 0 0 hasta 500 500 500 500 por qué pues porque recordamos que nuestro lienzo tiene 500 x 500 si ahora guardó veremos que a partir del siguiente segundo lo que hace el sistema es que cada vez que dibuja un nuevo círculo previamente está borrando todo lo anterior recordamos que hasta aquí hasta este momento todavía realmente no hemos empezado a hablar nada de inteligencia artificial pero estamos poniendo un poco las bases estamos sentando las bases de lo que va a ser el sistema que necesitamos para trabajar con nuestros programas de inteligencia artificial estamos con una especie de como diría creando una plantilla para poder trabajar correctamente por cierto ya que estamos hablando de todo esto me gustaría estilizar un poquito el entorno de trabajo entonces voy a decir que en el canvas martín auto para que se centre en la pantalla trabajamos voy a poner también que en el body voy a poner back and black y text align centre eso lo que va a hacer es que va a centrar la pantalla de cuidado allí porque no se ve el fondo back down by voy a hacer que mientras que el body tiene el fondo negro el lienzo tiene el fondo blanco y por último pues quizás un position latif para decirle al fondo que lo voy a pintar y un top de por ejemplo 300 píxeles para que baje igual no tanto no sé vamos a verlo 50 personas no sé una cosa sé 100 píxeles yo creo que así más o menos puede funcionar bien pues ya tengo esto en la pantalla lo que voy a ir haciendo es bajar con el código y ahora lo que quiero es que el círculo se mueva un poco de forma aleatoria le quiero que el círculo sea capaz de moverse digamos por la pantalla con cierta con cierta libertad estamos creando algo así como tendría yo como un escarabajo estamos creando como un bichito que va a estar en nuestra pantalla que va a vivir dentro de ese lienzo y este bichito nos va a servir para probar muchas cosas de inteligencia artificial que queremos aplicar vamos a intentar hacer que perciba su entorno vamos a intentar que aprenda vamos a intentar que perciba vamos a intentar que haga muchas cosas primero lo que necesitamos es aprender a mover lo estamos creando un entorno virtual digamos y necesitamos aprender a mover nuestro bichito viviente viene a partir de ahí lo que voy a hacer vamos a hacerlo en el siguiente vídeo es que no sólo se mueva hacia la derecha y hacia abajo tenemos en cuenta que en un lienzo esto varía un poco dependiendo de cada y programación pero en un lienzo en el punto 00 está arriba a la izquierda con lo cual las x crecen hacia la derecha y las y crecen hacia abajo no es como en un sistema digamos de dibujo técnico donde el punto cero suele estar abajo a la izquierda y por tanto las x crecen hacia la derecha las tijeras crecen hacia arriba sino que aquí el punto inicial está arriba a la izquierda y por tanto las x crecen hacia la derecha y las y griegas crecen hacia abajo a continuación lo que voy a hacer es que quiero que este bichito crezca y se mueva de forma aleatoria así que voy a hacer un más punto random y más punto random menos 0.5 por qué pues porque el más punto random el aleatorio matemático va desde cero a uno con decimales así que se iba a hables de 0 hasta 1 y le quitó 0.5 en ese caso irá de menos 0.5 a más 0.5 es decir virtualmente se moverá con cierta aleatoriedad tenemos ahora cómo se mueve con cierta autoridad no lo vemos muy bien por la sencilla razón de que en la pantalla que está refrescando cada segundo así que si yo le digo por ejemplo que en lugar de 1000 le quiero poner 100 comprobaremos cómo se va a refrescar la pantalla 10 veces por segundo y si lo reduzco a 10 10 milisegundos es decir que la pantalla se refresque cada 10 milisegundos pues en ese caso el lienzo se refrescará 100 veces por segundo 100 veces por segundo la verdad es que ya está bien para empezar vemos en la pantalla que el sistema lo que está haciendo es simplemente mover al bichito digamos cada cada fin fotogramas por segundo ahora lo que quiero es que este bichito ahora mismo un segundo un poco erráticamente porque en cada momento tiene como una especie de dirección x dirección y bueno pues lo que quiero básicamente es que se mueva en base a una dirección voy a hacer lo siguiente la dirección es igual a no sé pero de momento y entonces voy a hacer lo siguiente x es más igual el coseno si lo sea un poco de trigonometría el coseno de dirección y más puntos de la dirección esto lo que está haciendo es que yo ahora por ejemplo nos fijamos que la dirección es cero con lo cual el bichito se va hacia allí y ahora qué dirección más y walmart.com más random perdón – 3.5 y esto lo voy a multiplicar por ejemplo por 5 que hace el sistema es que en cada momento es demasiado refrescar aquí y vemos como ahora el sistema lo que está haciendo es que se va moviendo va girando con un poquito más de libertad vamos a verlo hay mejor como es un recto como es un círculo muchas veces no vemos correctamente el sentido en el que va entonces para ver correctamente el sentido en el que va muchas veces es bueno dibujar una línea que nos digo un poco la dirección de hacia dónde va nuestro bichito vale entonces vamos allá amos una línea y bueno vamos a dibujar una línea de la siguiente forma con texto punto contexto punto contexto punto del impacto mucho es x como ingeniero no sé por qué esto realmente ok ahora contexto punto line quiere moverla hasta x más más punto coseno de la dirección y esto lo multiplicó por cuál es el radio del círculo aquí 1020 coma y más puntos en o de la dirección x y contexto punto stroke esto lo que hace es que dibuja una línea esa línea me permite saber hacia dónde está apuntando la el circuito podemos cambiar el 20 por un 30 podemos cambiar el 20 por un 30 podemos cambiar este 10 por un 100 y así un poco controlamos mejor hacia dónde va nuestro bichito controlamos mejor que vemos la línea vemos como ahí realmente es un poco errático a la hora de cambiar la dirección pues una vez más en la dirección yo puedo hacer cambios más sutiles en la velocidad de dirección y por ejemplo en lugar de poner entre 100 y 10 podemos poner 25 podemos ir moviendo los parámetros de nuestro programa para ir viendo el resultado de hecho mi recomendación evidentemente es que los movamos vemos que si el ángulo no se modifica demasiado y por tanto el bichito no cambia sensiblemente su dirección puede ocurrir que se nos salga de la pantalla pero no pasa nada el apetito intenta hacer su vida y nosotros lo que tenemos que hacer es bueno una eros o seguirlo o no permitirle salir de esta pecera digamos yo suelo decir que estos ejercicios lo que estamos haciendo es algo así crear con una especie de pecera virtual este es nuestro pececito no va a ser realmente un pez porque tendría que simular el agua y en la gravedad y todo eso o sea lo más sencillo del momento pero pero de momento de momento tenemos ahí el pechito que es un poco molesta pero nos permite saber hacia dónde va el bichito vale la línea es algo así como una forma de saber pues eso de tener como una especie de flechita y vamos a ver vamos a ver estoy comprobando una cosa principio una cosa divertida que puedo hacer es en un momento dado borrar mediante [Música] pues un fil recto mediante un borrado progresiva vamos a verlo con texto punto field style es igual a rgb 25 52 55 255 0.5 o sea un color blanco o semi transparente contexto punto sí no phil recto 00 quinientos 500 y contexto punto feel style es igual a por ejemplo el red que estoy haciendo con esto con esto es que en lugar de borrar con un clic lo que acaba de hacer aquí es desactivar este clear recta lo que hago es simplemente borrar con un color blanco semi transparente si nos fijamos lo que hace es que deja con una especie de estela y me gusta mucho la estela por la sencilla razón de que nos permite ver un poco el tiempo la cuarta dimensión nos permite percibir por donde ha pasado el bichito entonces como podemos ver estoy probando diferentes estoy probando diferentes parámetros hasta que llega un momento en el que nuestro bichito deja esta estela y podemos ver por donde está pasando lo cual es divertido podemos ver todos los puntos por los que va pasando podemos ver cómo está buscando sus va buscando su camino de momento no busca nada porque el momento va a ciegas evidentemente vamos a hacer qué cambié más aleatoriamente es un poco pues podemos cambiar es ahí es por donde va el bichito bien luego gráficamente podemos darle podemos dar al bichito ciertos aspectos visuales por ejemplo podemos dibujar le patitas esto ya es una cuestión de dibujo a ley es una cuestión más gráfica que otra cosa pero bueno simplemente hay veces que los seres humanos somos así que hay veces que darle un poquito de grafismo al darle un poquito hacer que parezca algo más complejo visualmente que un círculo pues ayuda a que empecemos un poco más con la figura y que nos pongamos en su lugar al everest voy a hacer un bichito de una forma muy sencilla que básicamente va a consistir en crearle cuatro patitas vale entonces para ello voy a hacer lo siguiente vamos a ver 4 patitas y es de la siguiente forma con texto es igual a black bajar cuatro patas negras es un poco lo de menos y para ello hago lo siguiente no quiero de 3 píxeles x junto con es ángulos ángulos dirección dirección a 90 grados son más puntos y partidos con tu pie partido 2 este martes punto y partidos por 0.8 y ahora lo mismo lo mismo para la y paul y siempre es el seno vamos allá en fuera así si vamos si esto es que con solo aguas y quizás tengo ya hay una patita x más esto 0.8 por el radio y el radio recordamos que es de 10 ahí tengo una patita lo que podemos hacer es que se refresque cada menos tiempo y así podré ver mejor ahí está la paleta s 0.8 vamos a multiplicarlo por 0.9 de hecho voy a tirar esto a 2500 y así le veremos mejor ahí está y esto de momento lo voy a poner en 1 para que cada vez me pinta de blanco ya se pueda ver mejor el bichito esto es ahora sólo tengo la patita voy ajustando estos parámetros a él tengo la patita pues igual 0.5 hasta que encuentre el punto allí por ejemplo ya tengo la primera patita la sierra a continuación y crear las siguientes voy a maximizar por eso también de una ventana a otra así que esta es la paz 1 está realmente es la prédica número uno 2 3 y 4 y ahora esto es nuestros menús menos ahora esto es 1.5 en 1.5 menos y menos 1.5 y 1.5 de esta forma en principio ahí tenemos ya las cuatro patitas las cuatro patitas por ejemplo lo que voy a hacer es que tanto las patitas como la boca digamos estén detrás del círculo pues lo que puedo hacer es que el círculo se dibuje después de las patitas y después de la línea el orden importa todo este bloque es el dibujo de la figura puedo hacer así y así lo que hago es que dejó claro que todo este bloque es esto de aquí dejo claro cuál es la función del bloque algo así cuidado contexto punto y feel style es igual la red vamos a particularmente ahí aparecen las cuatro patitas como si estuvieran ocultas por abajo del cuerpo vale bueno puedo hacer no sé como si fuera la cabecita del vamos a hacer una especie de cabecita nuestro éxito y la cabecita lo sé la cabecita es esto está fuera esto fuera y vamos a ver dirección por 10 más allí en esa comunidad ahí tengo la cabecita tengo la cabecita y tengo una antenita más adelante podemos cambiar los parámetros por ejemplo puedo hacer que esta cabecita sea un poquito más grande cifras en lugar de tres voy a poner 5 soy parece que sea un poquito más grande cuando podemos recuperar ciertos otros parámetros por ejemplo puedes recuperar que esto sea 0.02 puedes recuperar que esto sea 2 los 50 ó 25 quizás y ahora vemos como el bichito ya se mueve con más libertad y bueno puedo intuir gráficamente mejor por dónde va a ir el bichito pues la relación está mirando puedo ver por donde ha pasado puedo ver un poco como vaya evolucionando insisto en que ahora mismo es bastante ciego pero por lo menos en el momento en el que empecemos a introducir root una rutinas de inteligencia artificial pues tenemos un medio en la pantalla en el que podamos ver lo que está sucediendo realmente a nuestro dígito va a ser realmente la representación visual de todos los programas que vamos a hacer a continuación para empezar a trabajar vale pues vamos allá vamos a continuar vamos a darle un poquito más de sentido visual al principio vemos como prácticamente en un primer momento aparecen un círculo y un rectángulo vale no no está mal pero a continuación lo que quiero hacer es que aparezca otra cosa como por ejemplo un texto lo que voy a hacer a continuación va a ser por una parte quitar voy a quitar el fill recto el círculo voy a pintar un texto así que vengo contexto punto fil texto y el fill text me dará unos parámetros lo estoy viendo ahora mismo los parámetros entonces siempre puedo venir aquí y por el html5 canvas fil texto y aparece en páginas como estas que me pueden decir y los parámetros lo vamos a ver aquí hero world 1050 voy a esto exactamente esto y voy a decir que de fp x lo cambio por contexto vale pues nos dice nos dice hello world les voy a hacer es poner lo siguiente poner realmente eso es vale para poner oficial vale tenemos ahí un poco vemos cómo se va difuminando vamos a cambiar la ubicación del texto evidentemente aquí donde pone 50 obras de 250 vamos cambiando vaya ahí es donde poco a poco poco a poco podemos moverlo y muy bien por lo menos tenemos ya que cada vez que arranquemos pues tenemos un texto de éxito de presentación voy a hacer lo siguiente contexto fill text mi nombre y esto estará en ciento esto será doscientos ochenta bueno de esa forma fijémonos como tenemos que el bichito va corriendo el bichito va caminando y quiere introducir una condición mediante la cual pues no se pueda salir de la pantalla porque ahora mismo es que cuando se sale de la pantalla pues como este sistema admite perfectamente x positivas y x negativas pues simplemente se sale y no puedo hacer mucho más pero qué quieres decirle que por lo menos cuando llegue a una pared quiero que en cierta forma rebote vale quiero que vuelva para hacer que rebote voy a hacer lo siguiente vamos a ver por aquí la condición del movimiento vale pues sí voy a detectar se choca contra una pared y rebota les digo en primer lugar defecto se choca contra la pared de izquierda en este caso lo que voy a hacer es introducir estructuras de control de la ejecución hay una estructura de control que se llama if que es el sí condicional que nos dice básicamente si algo es cierto hace alguna cosa si algo es falso haz otra cosa así que digo si algo es cierto digo si x es menor que cero es decir si la x vale se vuelve menor que cero en este caso voy a hacer lo siguiente y voy a hacer lo siguiente x es menor que menos 10 en ese caso x igual a 0 y dirección es más igual más me vale esto lo que quiere decir es que si te intenta salir de la pantalla la equis te devuelve la pantalla y la dirección es en grado sexagesimal es es te devuelvo a perderte giro de 180 grados giro completamente tu trayectoria detecto choca contra pared derecha esto lo voy a hacer bastante bastante desglosado se podría decir todo en una sola instrucción pero como estamos empezando quiero hacerlo poco a poco para entender qué es lo que hacemos prácticamente en cada línea así que si x es mayor que 510 en este caso voy a poner esto en ese caso x es igual a 500 y gira lo también 180 grados ahora voy a hacer lo mismo con las y con la verticalidad en efecto se choca contra la pared contra paredes superior sí y es igual a 0 y es esto contra la pared inferior es igual a esto y es igual a esto vamos a probarlo y de esta forma vamos a comprobar que va a ser cierto que cuando el bichito se intente salir de la pantalla básicamente como te diría yo va a haber una fuerza superior que le va a obligar a volver por aquí y cuando venimos por aquí el besito vamos a ver que vuelve a la pantalla no se puede salir los que siempre que se intente salir alguien le va y obligar a que vuelva y va a volver siempre va a volver ya no se va a poder escapar cada vez vemos que las verdades como serán un golpe que ocurre la verdad pero siempre que intente salir podemos dejar este programa funcionando todo lo que queramos podemos dejarlo horas y horas que veremos que ya no se puede salir de la pantalla de esta forma tenemos ya empezamos a tener ya un bichito que nos permite estar trabajando estar trabajando tener algo en la pantalla ahora mismo insisto este bichito no es nada inteligente simplemente se mueve de forma caótica por la pantalla pero al menos empezamos a tener un workspace empezamos a tener un entorno de trabajo en el que intuimos que todo lo que vayamos aprendiendo a continuación lo podremos aplicar sobre estrés sobre éste y sobre ejercicios también parecidos

el código que tenemos en la pantalla se está complicando es momento por cierto de crear un segundo ejercicio así que voy a ir a archivo guardar como voy a especificar que quiero trabajar en la carpeta de inteligencia artificial pero quiero crear una nueva carpeta llamada ejercicio 2 y dentro de ejercicio 2 lo voy a guardar como index.hr ml así de alguna forma no tocamos la primera carpeta y lo que hacemos es crear una segunda bien vamos a ver a continuación una cosa llamada programación orientada a funciones es una barbaridad en principio que parece que todo esto se utiliza para dibujar robot digamos un un extra bajito como quieras llamarlo entonces en programación cuando esto ocurre cuando tenemos un bloque de código muy grande probablemente podemos hacer que ese bloque de código sea más pequeño para eso voy a hacer lo siguiente para eso voy a crear un nuevo archivo voy a guardar este archivo siempre que le voy a guardar como pondré mayúsculas como ese en mayúsculas control s empecé y dentro de vamos a verlo dentro de ejercicios 2 lo guardo como pues no sé robot punto j s vale una vez que lo tengo ahora vemos que aquí tengo el archivo original aquí tengo robot vale pues vamos a ver me voy aquí a index y voy a hacer lo siguiente voy a todo esto voy a ir a robot voy a crear la palabra reservada function y robot y ahora a continuación pegó ahí dentro todo el bloque pues una vez que hago esto efe que está mal pero me da igual porque yo sé que está bien hay index.html y aparte me dice que estoy declarando una función pero nunca ha sido usado se define pero no se usa vale pues entonces me vengo aquí y donde pone script pongo otro script y pongo src robot punto j s esto lo que quiere decir es que desde este archivo estoy llamando a robot y ahora lo que hago aquí es usar la función robot de esta forma si ahora vuelvo a robot quizás bueno sigue poniendo qué error pero me da igual de esta forma lo que estoy haciendo aquí es cargar ese archivo ese archivo en este caso me está diciendo que está cargando todo este código y eliminar algunos archivos para quedarnos correcto ustedes ya qué este archivo está cargando la función robot punto j s eso quiere decir que a partir de este momento esa función técnicamente existe en ese código y ahora dentro del bucle lo que hago es simplemente es llamar a la función robot cuando quiero declarar una función escribe la palabra function diego como se llama la función y especifico el código que guarda dentro y cuando quiero usar la función simplemente lo que hago es llamar directamente a la función si ahora pruebo este código vamos a probarlo voy a ir a ejercicio 2 y observó que el resultado es el mismo es decir no he variado el código en absoluto no he variado la funcionalidad del absoluto lo único que he hecho básicamente es especificar cómo quiero que se comporte el robot ahora yo realmente podría hacer esto mismo para más trozo de código porque digamos que lo que he hecho es aislar cómo se pinta el robot pero no haya aislado cómo se mueve el robot entonces a partir de aquí lo que voy a hacer es especificar que voy a crear un objeto anteriormente he comentado que es bastante recomendable no obligatorio desde luego pero bastante recomendable que el lenguaje de programación con el que trabajamos tengan soporte para la programación a objetos programa zona orientada a objetos para decirlo del todo correcto en este caso jamás que tiene este soporte a lo largo de los años muchas veces he escuchado lo de que javascript no es el lenguaje que tiene la implementación más pura del concepto de programas reventado a objetos y esto evidentemente puede ser verdad pero y que es decir para programar lo que quiere programar acaso necesito la implementación más pura posible de los objetos pues realmente no aunque tenga una serie de funcionalidades me sirve perfectamente y en este caso javascript las tiene voy a declarar un objeto de la siguiente forma voy a ir aquí y voy a poner javascript offsets y el w3b schools vamos a verlo y a continuación voy a pulsar aquí y voy a una definición de objeto como por ejemplo como por ejemplo como por ejemplo esta de aquí vengo aquí con esto cierro vale voy a darle un poco de respiro al programa de darle 250 milisegundos vemos como el objeto va más lento y ahora si me voy a robot vamos a valeria robot voy a hacer lo siguiente bar robot es igual a lo siguiente parece que tengo una declaración duplicada no pasa nada pero digo lo siguiente quiero x es igual a por ejemplo 250 y es igual a 250 puedo crear tantas propiedades como quiera por ejemplo no sé si era dirección vamos a verlo lo que estaba usando hasta ahora dirección lo que hago es que lo pongo aquí dirección es igual a cero y ahora a partir de ahí yo lo que puedo hacer es crear por ejemplo esto se llaman propiedades estoy aquí te voy a crear a continuación se llaman métodos entonces dibuja es una función ya se disputó lo que sea pues vamos a verlo y todo esto h cierro esto me dice que no ha sido usado aunque me dice que no ha sido usado aunque el contexto no sea definido hay que tener en cuenta en este caso que contexto hace referencia al contexto anterior al entonces aquí la cosa va a cambiar un poco ahora ya no puedo utilizar una serie de parámetros externos vamos a ver ahora cómo cambia el código y ahora voy a decir lo siguiente bar robot esto lo puede ver aquí el cjex por qué y entonces cuando uso el robot porque quiero crearlo no ponemos utilizarlo no pasa h vale ahora vengo aquí y digo lo siguiente the global robot uno es igual a mí un robot o una cosa acerca de los objetos y es que ahora y es que es recomendable por una reestructuración natural que empiecen en mayúsculas es es un estándar no es obligatorio en absoluto y entonces ahora vengo por aquí y robot 1 punto de dirección punto dibujar creo que era era dibujo punto dibujo así que si todo ha ido bien lo que estoy haciendo es llamar al método dibuja estoy llamando dentro d un objeto que tiene por aquí propiedades pero también tiene métodos estoy llamando al método dibujar vamos a ver si esto funciona volvemos al código recargamos vale si ha habido algún error nos vamos a inspeccionar en este caso nos vamos a la consola y en la consola nos dice robot no es un constructor vale nos dice dado que no es un constructor vamos a verlo new robot aquí está nos aseguramos de que lo estamos cargando redondas un constructor con lo cual a continuación vamos a asegurarnos de que realmente esté cargando ese objeto y que lo esté declarando en memoria marley vamos a usar una sintaxis alternativa en este caso lo que voy a hacer es usar la palabra reserva dar clase bien una vez que usó la palabra reservada class voy a hacer que x es igual en esta clase polígono y ahí estamos aquí class polígono claro robot amigo x es igual a 250 y es igual a 250 dirección propia para igual a 0 y dibuja es todo esto de aquí guardamos y vamos a por ello pues recargamos y ahí tenemos de nuevo nuestro objeto fijémonos que el resultado siempre es igual pero lo que estoy haciendo es replantear el código para que el código sea un poquito más utilizable de la misma forma que lo que voy a hacer es indicar en este caso que quiero que todo este código sea el código de mover el robot aquí 9 mueven con un poco de sangre selecciona todo este código y lo corto y lo muevo guardo y cuidado porque es lo que va a ocurrir ahora básicamente es que el objeto se dibuja y en este caso vamos a ver ejercicio 2 me enseñaron el objeto se dibuja y vamos a ver este objeto vamos a asegurarnos ejercicio 2 y es que sea el ejercicio index lo guardo no lo había guardado si es que tenía ahí el puntito ahora recargo y el objeto se dibuja pero no se mueve ahora sí y esto es porque yo he aislado el código dentro de esta función cuando una función está dentro de un objeto de una clase se llama método realmente es una función la he usado se ha declarado pero no la he usado así te digo robot 1.9 bien entonces ahora si recargo y ahora veremos como el robot sí que se mueve correctamente bien seguimos a partir de aquí y bueno vemos como tenemos una serie d tenemos una serie de códigos que vamos por ejemplo acortando y lo que voy a hacer a continuación básicamente va a ser acortar más código por ejemplo para un robot tiene todo el sentido del mundo hace un objeto porque va a tener propiedades va a tener métodos es decir va a tener propiedades estáticas va a tener comportamientos pero hay otras cosas que realmente no requieren crear objetos con funciones lo podemos hacer perfectamente vamos a ver qué otras cosas pueden ser a continuación voy a crear un nuevo archivo llamado funciones voy a ir a archivo guardar como lo guardo dentro del ejercicio 2 el aguardo como funciones punto j s dentro de index lo que voy a hacer es llamar y funciones para que se entere de que existe funciones era por ejemplo voy a hacer function limpia pantalla y dentro de limpia pantalla voy a todo este código y aquí está y lo voy a poner dentro de limpia pantalla evidentemente dentro de index limpia pantalla así veremos como poco a poco vamos a vamos a ir aliviando el código de la pantalla por ejemplo en este caso voy a crear otra función llamado me voy a index como por ejemplo esto me voy a funciones texto inicial y ahora en index llamo a texto inicial y así por una parte voy aligerando mucho el código en la pantalla y luego por otra parte voy dándole un sentido por ejemplo cuando yo veo hay texto inicial y ahora mismo no sé qué hace texto inicial pero desde luego sé que si eso está ahí es para pintar el texto inicial por ejemplo vengo aquí digo limpia pantalla no sé ahora mismo que hace limpia pantalla ya que ir a funciones punto js pero desde luego sé que ese código va a limpiar la pantalla vale sí un poco ganamos en todo ganamos en realidad en el código y ganamos también en sencillez bien ahora hay una cosa bueno voy a grabar el siguiente vídeo porque es un bloque temático diferente ahora hay una cosa que va en un momento dado nos puede como diría yo perturbar un poco y es que vemos que en las propiedades del robot están fuera pero luego el robot parece que tenía por aquí una serie también de propiedades preparadas vale pues yo lo que voy a hacer es decirle al sistema que lo que quiero es introducir nuevas propiedades así que cuando yo creo un robot esto realmente esto realmente lo puedo eliminar y lo que quiero es que prevalezcan las variables las propiedades que se llaman que tiene el robot entonces cuando yo aquí pongo x no va a ser x va a ser this punto x this punto x básicamente quiere decir que no quiero una x de fuera quiero mi propia x hago lo mismo para la guerra y con todo lo que me encuentre hachís y gratis y por cierto la dirección también este cambio en la dirección la dirección y así lo que estamos diciendo el sistema ahí sería error la dirección es que cada objeto va a tener sus propias propiedades que se llaman sus propias variables y esto es bueno aunque ahora mismo parece que no tenga ninguna utilidad pero sí que la tiene esto es bueno porque así lo que estamos haciendo es que ahora cuando creemos varios objetos cada objeto podrá tener sus propias propiedades independientes y cerradas en las demás dirección descontó x lo cambió todo ahora a continuación vamos a ver me vengo por aquí vengo por aquí y voy a especificar que quiero voy a especificar que quiero el objeto una vez más aquí es algo que haya algún error en robot dibuja vale no puedo leer la equis vamos a ver la línea 19 vamos a ver aquí desde punto equis vamos allá y ahí lo tenemos ahora sí una vez que hemos solucionado el error vemos como el objeto se van viendo en pantalla y ahora el objeto digamos tiene sus propias propiedades una cosa que podemos hacer es decirle que por ejemplo cuando empiece no quiero que cada robot empiece en el mismo sitio quiero que empiecen más punto random que recordamos que es un número que va desde 0 hasta 1 y lo quiere por 500 eso quiere decir que va a empezar en cualquier propiedad aleatoria entre 0 y 500 si recargo comprobaremos que ahora cada vez que recargue el robot va a aparecer en un lugar diferente cada vez que recargue en la pantalla el robot aparecerá en un lugar diferente todo esto que acabamos de hacer de trabajar programando con objetos puede parecer un poco farragoso puede parecer un poco inútil quizás diremos uno todo esto realmente ha valido la pena para que el código sea más sencillo ya para empezar sí pero no sólo eso sino que además nos vamos a dar cuenta de que si yo ahora declaró al robot 2 es igual a new robot lo que va a ocurrir es que si ahora digo para el story o será diego robot uno dibuja robots 19 ahora digo robot 2 dibuja robots 29 y simplemente con esa facilidad lo que hecho es crear un segundo robot en la pantalla entonces si programamos orientado a objetos lo que podemos hacer es que cada objeto en la pantalla tenga una cantidad de propiedades diferentes entonces al tener una cantidad de propiedades diferentes vamos a poner por aquí 25 y así veremos como los robots se mueven con más fluidez veremos que cada árbol existe como una especie de dentro de una cápsula cada robot no se toca entre sí mismo lo que ocurre en este caso es que hemos conseguido que aislando ese código ahora crear nuevos robots sea sencillo imagínate con el código que tenía anterior crear un nuevo robot si lo quieres intentar hubiera sido completamente traumático tendría que haber duplicado todo ese código bueno pues encapsular ese código en una cápsula llamada objeto luego nos sirve para que crear nuevos robots sea así de sencillo vamos a hacer más cosas objeto y quiero dibujar también quiero crear también el color entonces voy a decir que r es igual a vamos a ver más punto round redondeo matemático de mark randón por 255 esto lo que hace es darme un número entero de aire del round entre 0 y 255 tiene una componente roja verde y azul y ahora cuando dibujo cuando aquí pone fin está el red lo que quiero es rgb con marc coma y quiero esto es un más el 0 trabajar con rojo con verde y con azul lo que estoy haciendo es construir para cada uno de los robots un color aleatorio vamos a ver cuidado así es que no es eres this punto r disponer de es punto g él es punto b vale observamos que bueno han salido los dos verdes ha sido casualidad pero si recargamos veremos que cada robot que sale sale con un número diferente sale con un color diferente usaremos de esta forma que les podemos dar propiedades individuales y ahora veremos que hasta cierto punto incluso aleatorias caóticas a cada uno de los objetos por ejemplo vamos a poner otra propiedad que va a ser en este caso la velocidad velocidad es igual además punto random y lo voy a multiplicar por 5 eso quiere decir que la velocidad puede ir desde 0 hasta 5 cuando yo muevo velocidad no velocidad cuando yo muevo este objeto no cuando el dibujo sino cuando lo muevo voy a multiplicar esto por 10 punto de la ciudad podéis punto velocidad y ahora cada uno de los robots que estamos creando puede tener una velocidad diferente vemos que hay uno que se mueve más lento y otro que se mueve más rápido y más adelante lo queremos es ver si hay uno que triunfa más que el otro digamos si hay uno de ellos que en la misión que sea que le encomendamos tiene más éxito que el otro en definitiva vemos cómo estamos creando una especie de seres vivos digamos y seguimos creando nuestro playground nuestro espacio de trabajo donde a continuación vamos a encargar las misiones y vamos a ver cómo resuelven las misiones cada uno de ellos vamos a ver si uno tiene más éxito que otro bien y ahora lo que quiero no es ya tener dos robots quiero tener un número potencialmente ilimitado de robots vamos a ver cómo podemos hacer esto a continuación nosotros hasta ahora lo que estamos haciendo es trabajar con variables cuando digo variables lo que quiero decir es que bar robot es una variable le metemos un valor y en lugar de meterle un valor directamente pues le metemos una nueva instancia de todo un objeto por sus propiedades los métodos y todo pero qué es lo que ocurre cuando no queremos los robots sino que queremos toda una colección de robots bueno pues en este caso no vamos a trabajar con con variables tiene que vamos trabajar con una cosa que se llama matrices entonces voy a decir lo siguiente bar número robots es igual a por ejemplo 50 era diego bar robots es igual a new array esta es un poco la palabra la palabra mágica new array quiere decir que robots ya no va a ser una única cosa robots va a ser una colección de cosas va a ser un conjunto de cosas y ahora que podría decir robots de 1 es igual a mí robot pero no quiero esto lo que quiero es crear 50 robots entonces voy a utilizar una estructura de bucle repetitivo le voy a decir formar y es igual a cero es menor que número robots y más más lo que hace es sumar un valor robots y casi ahí pongo y pues ahí pongo y también es igual a niño por esto automáticamente acabó de crear 50 robots en memoria ahora existen 50 robots y digo 50 quiero decir que simplemente cambiando ese número en lugar de 50 puedo crear 500 o 500.000 millones de robots es así de sencillo y ahora aquí esto es la declaración y ahora aquí cumplirá este código y vivo robot y robot vale y ahora lo que ocurre es que vamos a ver que sólo por hacer esto ahora comento este código sólo por hacer esto vamos a ver robot dish no te ponen en la 40 en robots solo para hacer esto vemos que tenemos un montón de robots en pantalla y cada uno tiene un color y cada uno tiene una velocidad y cada uno tiene un ángulo y cada uno tiene una cosa diferente por cierto hemos visto que al principio todos empiezan con el mismo ángulo todos empiezan yendo hacia la derecha esto es porque esto es porque cuando declaramos el robot en dirección de dicho que es igual a cero así que dirección es igual a más punto random x + puntopy por 2 y esto lo que va a hacer es que cada gusanito nazca en una parte diferente de la pantalla y aparte lo que va a hacer es que cada uno tenga una velocidad y un ángulo diferentes bien ahora mismo viven todos en la pantalla ahora mismo no se ven entre ellos ahora mismo cada uno tiene una velocidad no se molestan entre sí lo que estamos haciendo una vez más es preparar este terreno para que a continuación interactúen entre ellos que realicen una tarea que puedan sobrevivir que aprendan en definitiva es el objetivo de este curso para hacer cosas he dibujado 50 demostración puedo hacer 500 cuidado porque el programa va más lento evidentemente pero puedo hacer 500 robots y no hay ningún problema no es muy práctico la verdad pero como poder se se puede y puedo hacer 5 la idea es que solo modificó un parámetro y al modificar ese parámetro lo que ocurre es que el sistema automáticamente se adapta de las muchas razones por las cuales se comentaba anteriormente que la programación orientada a objetos en un momento dado nos puede venir bastante bien pues tengo esto por aquí y ahora a continuación lo que quiero es que los objetos en pantalla sean capaces de percibir un poco su entorno ahora mismo la verdad es que son ciegos ahora mismo no perciben nada ahora mismo simplemente van chocando a ciegas contra los muros y de hecho ni siquiera se ven entre ellos entonces a continuación lo que vamos a hacer es conseguir que tengan algo de percepción y vamos a darle a cada uno de ellos pues es una un comportamiento diferente que a continuación analizaremos mediante más in learning cuál de las combinaciones es mejor para la supervivencia de ese robot una cosa que quiero decir por cierto es que yo a continuación lo que puedo hacer es variar el diseño variar el diseño por cierto me va a costar bastante poco una demostración más de que si trabajamos con objetos realmente luego ser modificaciones va a ser algo bastante sencillo lo vamos a ver en el siguiente vídeo asiste a continuación lo que voy a hacer es que cuando dibujo el robot cuando dibujo el lomo del robot esto es la cabecita estas son las cuatro patitas y dónde está el círculo pues estos son círculos en el lomo después voy a hacer lo siguiente esto es el estilo voy a ponerse el 0 0 el radio el radio vaya también radio es igual a más punto random por un 20 y esto va a ser 3 punto radio el punto clave pues esto va a ser this punto radio por 0 punto bueno this punto radio por 0.7 y por último this punto radio por 0.5 esto lo que va a hacer es que en el lomo de los dígitos hallar como un círculo y ahora a continuación vemos que es como la especie de robot de limpieza digamos he cogido este diseño para inspirarme en la parte superior del rumba en una especie de círculos concéntricos pues es un poco la idea entonces voy a hacer un último círculo esto es por 0.3 vamos a ver lo que tenga un puntito en el centro quizás un poquito menos es el punto 1 pobre bien y ahora a continuación vamos con las patitas por cierto la radio por ti también como vemos al final lo que estoy haciendo es parametrizar la creación del objeto la parametrización es un parámetro clave dentro d dentro de lo que es la programación de inteligencia artificial por una razón muy sencilla es punto radio por 2 porque luego estos parámetros son los que el sistema va a variar porque después ya tengo ya tengo esto en la pantalla y vamos a crear a continuación una cosa cuidado da la impresión de que este objeto como tener la línea correcta por el dinero una línea despuntó dirección despuntó radio es punto dirección es el problema por distinto radio le faltaba esto ahora sí viene rocks más rápido robot más lento son más pequeños son más grandes probablemente ahora por ejemplo poner 50 será un espectáculo porque eso tenemos que tenemos diferentes formas y colores en comportamientos y a la continuación evidentemente lo que vamos a creer es que bueno se vean entre sí se perciban entre sí para que se perciban entre sí igual me toca limpiar un poco la pantalla o no o simplemente hacer que hacer que detecten sus píxeles negros voy a funciones a limpiar pantalla voy a cambiarlo por 0.1 y así dejarán menos rastro y así de esa forma así de esa forma después vamos con el concepto de percepción gracias a los perceptores podemos hacer que estos objetos pues tengan un poco de consciencia de cuál es su alrededor una vez que tenemos esto en pantalla es cuando a continuación vamos a crear estos perceptores perfecto eres perfecto nes dispositivos que se encargan de percibir el entorno de percibir algo del entorno y de de alguna forma ser capaces de y comprobar ciertas cosas en este caso quiero que el objeto perciba su entorno voy a hacer una cosa antes de crear los los perceptores para estos estos elementos que se van a ser sensibles lo que voy a hacer es simplemente dibujarlos entonces dentro del dibujo voy a crear aquí dibujo los perceptores tampoco los voy a llamar perceptores porque esto se podría confundir con otro concepto que está relacionado que realmente es parte del mismo voy a hacer una cosa voy a quedar aquí diferentes sectores y así en todo momento sabemos qué es lo que hay en cada sección los perceptores lo que estoy haciendo son como separadores en el código que me sirven para saber qué es lo que estoy haciendo en cada caso vale dibujo los perceptores y ahora lo que voy a hacer es dibujar como unos circulitos uno va a estar en el radio multiplicado por dos cuidado pero el radio x 0.2 de 0 a más this punto x + más puntos de la dirección es punto y dirección y esto va a ser lo mismo y ahora esto multiplicado en la radio x 2 es punto radio x 2 bien si esto ha ido bien si estoy yo bien lo que va a ocurrir es que al recargar la pantalla vemos como cada cada robot tiene un circulito delante como no lo podemos ver bien voy a hacer dos cosas una en el programa principal voy a poner 5 robots y voy a hacer que se actualicen cada menos tiempo y ahora vemos que cada uno de ellos tiene como una bolita que debería estar delante no está bien delante y esto es por qué radio x 2 y esto es más puntos este es el celo vamos a verlo ahora si cada objeto tiene una bolita adelante bueno pues una vez que tiene una bolita la dirección la distancia de las bolitas también está proporcionada al propio objeto lo que voy a hacer a continuación a continuación es que voy a dibujar nuevas bolitas esto es algo aquí lo tiro pero tampoco va a ayudar demasiado esto realmente es todo lo mismo contexto punto financia voy a dibujar 5 este es el primero el segundo tercero cuarto y quien tenemos como el código se va complicando es punto dirección vamos a poner – 0.1 – 0 1 – 0.3 – 0.3 más 0.1 buenas 0.1 + 0.3 + 0.3 esto lo que va a hacer es que la van a parecer 5 bolitas y están separadas como estamos viendo en la pantalla quizás en este caso me interesa borrar con más profundidad para que podamos ver mejor los perfectos a ver momento voy a guardarlo al caso estos son los perceptores vemos que cada bichito tiene como una especie de bolitas delante que van a ser como una especie de palpa dores y explotadores son los que le van a permitir ver o no ver vamos a también un poquito las proporciones y entonces 0.5 y el 0.5 vamos a verlo ahora no quiero más vamos a el 0.3 vamos a cambiarlo a 1 en el punto 3 lo cambió a uno quiero que las bolitas estén ahora sé yo creo que ahora sí quiero que las bolitas estén ligeramente separadas cada uno esto que tenemos aquí son sensores insisto que ahora mismo no son sensores a los mismos son bolitas además que bolitas pero lo representado visualmente es simplemente para hacer como que el sistema no tiene la capacidad de ver en esos puntos de detectar qué es lo que existe en esos puntos y lo que vamos a hacer es que el sistema simplemente cuando detecte una colisión en esos puntos reaccione de una forma o reaccione de otra les recordamos que es lo que acabo de hacer ahora es simplemente dibujar puntitos pero antes de dibujar puntitos lo que voy a hacer es en primer lugar preguntarme qué es lo que existe debajo de esos puntitos para preguntarme qué es lo que existe debajo de los puntitos lo que voy a hacer es usar una función que es get image data en este caso para este ejemplo lo que hace esta función es preguntar qué es lo que hay qué color hay en el pixel que hay justo debajo de ese puntito entonces vamos allá voy a crear una función llamada percibe y de momento la función percibe lo único que va a hacer es percibir qué es lo que hay en el puntito del centro vamos a empezar por el puntito del ejemplo para ello lo que hago es lo siguiente la información es igual contexto punto get image data y quiero la información que hay vamos a verlo aquí quiero la información que hay aquí este es un arco a 3 qué temes a está aquí y en un píxel y en un píxel es decir el gateway data coge el punto de x de inicio el punto de agregado inicio y luego cuántos píxeles quiero de anchura cuando es píxeles quiero de altura solo quiero uno y ahora quiero contexto no con texto era consuele punto log y en el consuele punto lo que quiero información información punto dato pero los datos de información bueno para hacer esto tengo que decirle al sistema te quiero robots de allí ahora quiero que perciban vamos a verlo cuidado porque ahora la consola se me va a llenar de cosas vemos cómo se está llenando y llenando llenando llenando de cosas se está llenando de información para los robots son capaces de ver si solo quiero la información vemos que salen cuatro informaciones esto es para cada uno de los píxeles el color rojo verde azul y transparencia entonces lo que quiero en este caso básicamente es que solo quiero ver el color por ejemplo rojo miras más quiero ver solo el rojo por ejemplo en robots nota ya que es una matriz comprobamos como solo sale un valor muchas veces sale 0 y es que ocurre una cosa muy graciosa y es que cuando estoy creando en primer lugar dibujo y luego percibo qué es lo que voy a percibir si ha dibujado un punto negro y luego me pregunto qué hay en ese punto pues hay un color negro pues lo que debo hacer es percibir antes de dibujar el punto primero nuevo luego percibo una es más así que primero percibo luego muevo ahora veremos mover y luego por último dibujo y vamos a ver qué es lo que sucede tenemos un robot que está ahí percibiendo hay uno que percibe 0-4 que percibe en 255 debe ser uno que está muy pegado también voy a decir que la línea es la que igual me está debe estar molestando vamos a hacer diferentes combinaciones hay ahora todos los robots son grandes alguno percibe cero alguno percibe 0 es normal y ahora una vez que estos están siendo capaces de percibir de momento perciben en el frontal cuidado porque vemos que la consola puede ralentizar bastante ahora quiero hacer algo y ese algo que quiero hacer y es algo que quiero hacer este voy a poner un ejemplo sí es cierto información data de cero es igual a 0 y también es cierto que información dada de 1 es igual a 0 y también es cierto que información de todos es igual a cero eso quiere decir que el color que tiene es bajo es negro y en ese caso disputó dirección más igual a más partido 2 es decir gira 90 grados vamos a ver que esto que va a hacer va a ser curioso porque vamos a ver el código ahora quiero 50 robots y los quiero más rápidos esto lo que va a hacer a ver dónde estás voy a mover esto allí vale y esto lo que va a hacer es que los robots cuando se ven entre ellos giran 90 grados voy a hacer una cosa voy a quitar el movimiento aleatorio voy a quitar este movimiento aleatorio y así los robots ponen en línea vamos a comprobar que cuando vamos a ver aquí vamos a comprobar que hay muchos robots que cuando se ven unos a otros lo que hacen es que giran 90 grados podemos ver como muchos de ellos no todos para cuento porque pero cuando cuando están mirando algunos no porque cuando algunos se pintan otros estudian o se han pintado pero fijémonos que ya somos capaces de simular que cuando se ven entre ellos giran para hacerlo mejor lo que puedo hacer es que más igual a 0.1 y así lo que van a hacer es girar poquito a poquito la cuestión es vemos que cuando empiezan a colisionar entre ellos hiram si los buscamos veremos cómo giran deben imaginar más rápido pero por ejemplo si yo giro más 0.2 lo que están haciendo los dígitos es en definitiva girar hacia un lado pero por qué hacia un lado y no hacia otro son un poco la cuestión como sabéis que a medida que empiezan a colisionar vamos a ver vamos a resolver preguntas en primer lugar porque uno se reconocen a otros y otros no se reconocen a los demás porque uno se pintarán tres ante sí otros se pintan después todo lo que estamos haciendo es que lo vemos todo tan rápido que no vemos realmente lo que sucede pero lo que está sucediendo realmente es que unos se pintan antes y otros se pintan después lo que puedo hacer en definitiva es lo siguiente es y hacer dos rondas qué es básicamente decir primero dibuja los y luego vamos a ver los percepciones entonces primero los dibujamos y luego vamos a mover los vamos a percibir los y esto lo que va a hacer es que los los perceptores 2.2 la bolita va a estar un poquito más separada ahora vemos como ya todos se reconocen entre sí vemos como cuando uno se toca al otro intenta intentar girar sin presión a la derecha siempre girar a la derecha siempre girar a la derecha porque gira la derecha más porque yo eso lo he dicho porque yo les he dicho que lo que quiero que giren vamos a ver pero que quiero que giran es esto lo que quiero que giren es más 0.2 por ejemplo bien entonces ahora lo que podemos hacer el rector la batería lo que podemos hacer es realizar lo mismo para cada uno de los cinco percepciones y aquí es donde realmente empieza la cuestión voy a llamar a esto perceptor 1 ah esto me lo puedo quitar porque ya he visto lo que hace es sacarme por la consola lo que estaba haciendo perfecto 1 pero sector 1 del sector 1 bien ahora vamos allá perfectos 2 3 4 y 5 2 33 34 4 4 55 bien pues lo que ocurre en este caso ahora evidentemente es lo que tengo que hacer es la dirección poner más 0.5 punto 5 + 1 – 0.5 en los 0.5 -1 cuidado – 1 y menos horas y ahora lo que está ocurriendo lo que va a ocurrir es que estos bichitos como vemos están entrando en bucle así parece que el radio tiene que ser menor debemos qué bueno son un poquito digamos martillos para lo que están haciendo es que siempre intentan huir en cuanto ven algo en cuanto ven algo que no les cuadra giran hacia la derecha es lo que están haciendo esto es perceptores este movimiento movimiento bastante poco inteligente pero es el que hay vamos a ver y vamos a hacer lo siguiente incluso a eliminar los perceptores como ya tenemos claro lo que hacen voy a desactivar todo ese bloque de código de esa forma nos fijaremos como solo cuando perciben que tienen amigos cerca digamos lo que hacen es cambiar cambiar de dirección para la gracia de todo esto está en que el giro que yo he hecho ha sido constante ha sido el giro de percibe ha sido más igual a 0.2 porque 0.2 pues esa es la idea la idea es que para cada uno de los perceptores vamos a establecer un giro aleatorio y de esta forma habrá objetos que giren con más facilidad y objetos que giren con menos facilidad y lo que vamos a hacer a continuación es analizar cuáles son mejores y cuáles son peores y ahí es donde va a empezar realmente el maxim learning porque nuestro programa va a aprender por él sólo cuáles son las combinaciones que funcionan mejor y cuáles son las combinaciones que funcionan peor vamos a hacer esto en un tercer ejercicio así que para hacer esto voy a hacer lo siguiente voy a ir a a ver voy a ir a aplicaciones voy a ir al mar voy a ir al centro de inteligencia artificial voy a copiar y pegar el ejercicio 2 lo voy a llamar ejercicio 3 y es lo que voy a hacer es que en brackets voy a cerrar estos tres archivos y voy a abrir los tres archivos del ejercicio 3 porque si no lo que ocurriría es que estaría trabajando con tres archivos anticuados para esto es muy importante si cambiamos de ejercicio vamos a asegurarnos que estamos cargando los archivos correctos

para ello voy a ir al código y voy a crear dentro de la clase robot un parámetro llamado energía y voy a decirle que todos empiezan por ejemplo con energía 20 porque 20 pues acabo de inventar ahora veremos cómo funciona este parámetro y a continuación voy a hacer lo siguiente realmente el perceptor uno colisiona con un objeto y cambiar de dirección pero tiene que haber una penalización pero digo energía menor o igual menos igual 0.1 esto quiere decir que pierdo un poco de energía los objetos que tengan la colección más inteligente son los objetos que finalmente sobrevivirán más porque pueden digamos caminar más a continuación por cierto voy a decir que si es cierto this punto energía no es mayor que 0 en ese caso es cuando realmente el objeto se va a mover es decir el 9 va a estar supeditado a que la energía sea mayor que 0 así que gracias a esto vamos aquí vamos a ver qué pasa y pon energía está difundiendo en 96 línea 96 6 punto energía tu energía en ese punto energía vamos a ver los buenos algunos no es la velocidad [Música] lo lógico es que poco a poco se queden sin energía a todos y se queden parados creo que estoy viendo ya como muchos se quedan parados podemos verlo como al final se quedan parados y observamos que algunos sobreviven más allá esta es la parte interesante donde al final ay al final por ejemplo hay uno que todavía está vivo y por ejemplo este este de aquí es el que parece el único superviviente vamos a verlo al final morirá evidentemente hay es el que más está sobreviviendo porque es el que parece que es capaz de coleccionar menos veces al final morirá pero al final y ha muerto pero lo que hemos hecho es que la máquina aprenda cuál es la mejor combinación entonces vamos a hacer lo siguiente vamos a establecer alguna penalización perdón algún premio para que con el rato digamos si no has tocado ningún objeto pues puedas sobrevivir vamos a verlo estoy yendo como lo podría hacer por ejemplo algo tan sencillo como cada vez que mueve this punto energía es más igual a 0.1 es decir recupera energía sólo por moverte eso quiere decir que si te sigues moviendo es que recuperas energía pero si colisiones pierdes energía vale ahora es posible que ninguno muera otra cosa que tendría que hacer es poner una especie de barrita de vida esperar a ver si alguno muere parece que ninguno parece que ninguno muere voy a poner vida a 0.01 energía y creo que ella poco a poco algunos van muriendo los que mueren giran los que mueren siguen girando voy a corregir es un poco sí energía es mayor que cero en ese caso ocurre todo esto eso sólo ocurre si energía es mayor que 0 vamos allá porque quiero es que cuando un objeto se quede quieto ni se mueva y gire vamos a observar y luego también estoy viendo me está pareciendo ver y reviven entonces si energía es mayor que 0 esto quiere decir que solo en el caso de que estén vivos pueden más vida si está muerto ya no puede más vida esto lo estoy haciendo porque hacer que revivieran depende las condiciones que tenga el programa que estoy diseñando pero en este caso lo que quiero es que el que se ha quedado sin energía pues se queda sin energía si reviven podría considerarse un descanso podría considerarse que han parado pero luego recargar energías y volver a la carga pero no quiero eso lo mismo ya van quedando unos cuantos dando unos cuantos para quedan menos y al final y al final observó que los que van quedando son bastante inteligentes en el sentido de que saben sortear bien los obstáculos pero si nos fijamos estoy viendo al verde que está abajo vamos a verlos ahí si nos fijamos yo no les he enseñado cuál es la mejor combinación sino que ellos solitos han aprendido vemos ahí el verde cómo está sorteando bastante bien los obstáculos ellos solitos son aprendido están aprendiendo cuál es la mejor combinación para sobrevivir más tiempo yo he enseñado a conducir a estos objetos han aprendido ellos solos debido a esto al final podríamos obtener un ganador vemos que algunos están bloqueando porque van mejorando pero no son perfectos pero desde luego vemos que los que van quedando en pantalla sí que tienen cierta capacidad de reconocer los obstáculos que tienen a su alrededor y tienen la capacidad de ser capaces de sortear los ese morado creo que se va a quedar congelado vale ahora lo que voy a hacer es disfrutar un poco de lo que hemos programado hasta el momento vemos como sea verde es capaz de sortear bastante bien los elementos pero se sortean bastante bien y va a rebotar y evidentemente puedo crear más vamos a hacer qué el proyecto vaya lo más rápido posible a 0 y quiero crear más tenía 50 voy a poner 150 cimientos porque si no se que se rayaron y vamos a crear bastante tensión interesante no es solo la combinación de ángulos de perceptores sino que también de hecho la velocidad tiene que ver ahora esto va a ser más difícil porque cuantos más entre comillas cuantos más muertos hay en la pantalla más pericia tendrá que tener para para ir evitando a los muertos con esto lo que hacemos es que el programa sea capaz de auto generar muchas muchas muchas variaciones y sea capaz de detectar de momento de una forma bastante estática es decir de momento cada robot ahora mismo todavía no puede aprender y no puede modificar su comportamiento sobre la marcha eso va a ser siguientes fases de desarrollo pero sí que podemos comprobar que por lo menos podemos comprobar quienes sobreviven mejor y en un momento dado incluso podemos apuntar quién ha ganado la conclusión que yo creo que podemos sacar es que los robots con velocidad relativamente baja tendrán sobrevivir más los robots que tienen una velocidad relativamente alta pero insisto me lo estoy encontrando ahora mismo y aparte veo que sobreviven los que tienen una velocidad intermedia porque los que tendrán la cia relativamente baja hace rato que se han muerto y los que tienen una velocidad demasiado alta también se han muerto quedan los que quedan tienen una solución relativamente lenta pero no muy lenta tampoco quedando sus clientes hoy andrés realmente es se tiene pinta de que va a morir usted ve aquí tiene pinta de que va a morir porque no está coleccionando creo pero no no es la conexión óptima s de hecho parece que está vivo simplemente se queda muy lento pues igual es que el que va más lento es última a ganar porque tiene más probabilidades de detectar correctamente la colisión quién sabe y de todo esto es que yo no sé lo que va a pasar hasta que ocurre me extraña que me haya muerto ya este yo diría que está detectando bastante bien las colisiones bastante bien por hablar por hablar para una cosa que puede hacer es establecer también un máximo de vida para establecer un máximo de vida y puedo ver la vida que le queda a cada uno de ellos vamos a hacerlo en el siguiente vídeo pero hemos hallado y voy a hacer lo siguiente el robot bueno para empezar si energía this punto energía es menor o igual que 20 esto quiere decir que no te voy a dejar que tengas más de 20 puntos de energía vale y a continuación y a continuación lo que voy a hacer es crear una pequeña gráfica esto lo voy a hacer en dibujo a hacer cómo vamos a ver algo muy sencillo contexto punto field style es igual a blanco y voy a dibujar contexto punto y recto x como de punto y por radio por dos por this punto radio todos esto va a ser – 22 y esto va a ser menos 6 cómo 24 como 12 lo que va a ocurrir es que ahora cada robot hito va a tener una barrita por encima vamos a ver lo vamos a poner menos – robots y así veremos mejor lo que está ocurriendo espero el finde vamos a ver la barrita voy a poner aquí el 50 para que vayan más lentos ok vamos a ver qué pasa con la barra this punto x this punto y más despuntó radio perdón – this punto radio para cada uno tiene una barrita vamos a modificar la barrita esto es menos 22 será menos 11 22 – 3 – 6 la barrita quiero que esté centrada eso es y ahora lo que va a ocurrir es que voy a dibujar la energía así que contexto punto feel style es igual a green y contexto punto fil recto y voy a hacer lo siguiente 10 punto x menos 10 o más puntos y menos 10 punto nada a ver – this punto radio por 2 menos 2,2 puntos energía ok coma cuatro y si todo va correctamente no te va a ocurrir es que tengo una barrita de energía lo que se ve puedo pintar de color rojo y esa energía si el objeto colisiona puede ir bajando y de esa forma puedo saber cuánta energía le queda al objeto podemos poner red si eso quizás tal vez nos ayuda a ver lo mejor ahora se ve un poquito mejor vemos como los objetos van perdiendo energía con las colisiones la pueden recuperar pueden recuperar la energía hay uno que ya se ha muerto vemos como los muertos tienen la barrita de energía cero tardan mucho en recuperar la energía puedo poner por ejemplo energía percibe 9 0.03 así un poco vemos como se van moviendo pierden energía al colisionar recuperan energía al moverse en principio vamos a ver es que estan colisionando con su propia barra de energía vaya bueno lo que puede hacer es pintar las barras de energía al final entonces pinta energía me da la impresión de que están coleccionando con sus propias barras pinta energía y así en el index puedo decirle que mueve y por último pinta energía robots punto pinta pero y en principio deberían recuperar sí que parece que están recuperando sin energía al caminar y vamos allá muy bien pues con esto pues con esto y hacer una cosa voy a poner una imagen de fondo entonces dibujar una imagen de fondo que va a ser grid pattern la imagen como está aproximadamente s habrá imagen en pestaña nueva bien vamos a ver héctor grieben como está guardo la imagen en fregados paper y voy a buscar una imagen de este tipo voy a buscarla en el descargo y la pongo y a ser posible una que no tenga marca de agua voy a ser una cosa voy a dibujar yo mismo el patrón la pregunta que te podrías hacer es porque quiero dibujar un patrón la respuesta es por si más adelante muevo el entorno entonces voy a hoy aquí funciones es un trío en rejilla y voy a hacer lo siguiente para x es igual a 0 x es menor que los 50 x más vale contexto punto beijing paz con un texto punto move x como a 0 contexto punto line ah a ver x coma esto es como la 500 y lo que hago es que x por 10 ahora ejecutó la rejilla de texto y nacional limpia pantalla traje el trámite me va a salir contexto punto es nuestra función es y line si hago esto en principio debería tener ya una línea pero con texto punto strong es realmente dibuja la línea y ahí tengo la línea muy muy gruesa probablemente pero empieza a valer vale ahora porque quiero en este caso porque los objetos de hecho están empezando incluso a colisionar entre ellos pero ahora quiero lo mismo en y así que esto es la y esto es la guerrero esto es la de griego esto es cero y y esto es cero coma y estos 500 como ahí tengo una rejilla ahí podemos ver mejor y a continuación voy a hacer lo siguiente con texto punto stroke es igual a un píxel sólido gray por ejemplo html5 estruch style y a ver strong está el registro whitmore 200 200 como a 200 es más clarito y bueno lo iba a hacer más fino pero la verdad es que hay me puede empezar a valer así que bueno tenemos ya por ejemplo por aquí una pequeña rejilla que nos ayuda un poco a ponerlos en situación y ahora es cuando puedo devolver al programa que quiero trabajar con más robots para ver qué es lo que está ocurriendo vamos a ver ahora cuales viven cuales mueren ahora podemos ver mejor cuáles están a punto de morir vemos que podemos diferenciar los que están parados por qué por qué están muertos o los que están aparentemente parados simplemente porque van lentos de hecho hay uno que tiene toda la vida pero es porque va lento y algunos que a continuación van a empezar a caer muerte de algunos al cabello y finalmente lo que podemos hacer es localizar un ganador y guardar esos datos de ese ganador para más adelante quiero decir que finalmente todo esto tiene que tener algún tipo de bueno algún tipo de premio a algún tipo de recompensa entonces una cosa que puede hacer es lo siguiente vamos a ver vivos es igual a cero repaso otra vez los robots y digo sí es cierto tenéis energía es mayor que cero en ese caso vivos más más en el momento en el que vivos sea igual vivos es igual a 1 en ese caso puedo decir con solé punto log el juego ha acabado y en ese caso lo que va a ocurrir es que pues simplemente vamos a hacer aquí marc y revivo y desde el que queda amigos igual a cero y de vivo es y entonces puedo decirlo siempre con solo punto log el ganador tiene una velocidad robots y de vivo punto y velocidad vamos a verlo nuestro progreso a cero vamos a poner esto a 150 de nuevo y recargamos y ahora es esperable esto puede tardar un rato evidentemente cuánto rato pues no tengo ni idea porque es lo que tiene la inteligencia artificial es que yo no controlo realmente lo que va a tardar a dejar de tardar pero llega un momento en el que sólo quedará uno y cuando quede uno cuando sólo quede uno vivo aquí en la consola no puedo parar también en la pantalla evidentemente puedo puede aparecer un mensaje que diga el juego ha terminado el que queda vivo es pues uno concreto vamos a verlo ya hay muchos muertos y ahora tenemos que esperar a que esos que quedan en la pantalla pues acaben arrojando un ganador ya quedan menos algunos tienen bastante energía con lo cual van a tardar en morir pero finalmente suponemos esperamos que habrá un ganador ese está a punto de caer recupera estoy viendo este de aquí pero está recuperando bastante bien s se ha metido ahí s se ha metido y está prendido energía todo depende de lo rápido que salga pero bueno como comprobamos como veíamos antes es esperable que poco a poco los que quedan sean capaces de navegar con más fluidez e insisto si nos fijamos yo no he enseñado a yo no le enseñaba ningún robot a caminar simplemente ellos van caminando los que tienen peores combinaciones automáticamente desaparecen los que tienen mejores combinaciones pues duran más por ejemplo ese que tenemos arriba lo que ocurre es que va muy lento podría ser el ganador podría como se suele decir a veces la mejor forma de ganar es no saber no perder es no jugar pues bueno hay uno que igual lo demuestra puedo pero podríamos decir que si no te mueves no vale podríamos discutir bastante lo que vale lo que no vale lo que vale lo que no vale podría ir en función de un determinado terreno en este caso lo que parece que éste nos está enseñando es que pues si no te mueves no tiene el riesgo de perder vida es curioso pero es real puede intentar hacer que pierdan más vamos a hacer varias cosas en el siguiente vídeo a continuación lo que puedo hacer es que cada vez que que pierdan mirar que pierdan más que cuando recuperen vida que recuperen menos dispone energía 0.1 vamos a ver ahí van a ir perdiendo vemos como algunos van cayendo vemos como los rápidos mueren más pronto yo creo que esto debería estar trayendo energía lo está haciendo no sé por qué ese debería perder energía también bueno pues en una siguiente iteración por cierto mientras que van experimentando vamos comenzando que podemos hacer a continuación en una siguiente iteración lo que podemos hacer es que una vez que se haya seleccionado un ganador podemos reiniciar el juego haciendo que todos tengan esa misma combinación que la siguiente generación de bichitos heredé las propiedades del bichito ganador de la primera generación e incluso lo que podemos hacer es que realicen pequeñas variaciones sobre esa generación la idea está en que en cada una de las variaciones en cada una de las generaciones finalmente podemos tener unos dígitos que aprendan a convivir entre sí y que aprendan a no morirse por colisión vale puede ser por ejemplo una de las cosas que pueden aprender ellos directamente es decir tenemos uno que ha sobrevivido sobre todos los demás ahora que podría hacer ese pues se podría pasar la información a la siguiente generación vamos a ver si conseguimos que quede uno porque de momento que me esté fijando quedan cuatro y ahora sería analizar pues bueno es está a punto de llega a morir para recuperado y bueno estoy a dejarlo hasta qué hasta qué una cosa que puedo hacer invex es con solé punto de los vivos y así podemos saber cuántos libros quedan pero como que 0 es energía nos dice energía no está subiendo robots de punto energía 150 en algún momento vamos a ver como este número va bajando vamos viendo como van muriendo la derecha y ahí va a llegar un momento en el que quedarán pocos ahora mismo quedan 9 quedan 7 quedan 6 quedan 5 vamos a a ver si puede quedar una hora para ver el vídeo y lo volvería a poner en cuanto quede uno y a partir de ahí seguimos trabajando bueno estoy haciendo unos pequeños cambios estéticos es que he puesto la barra de vida dentro del más que nada para que no esté por fuera ahora a continuación puedo hacer lo siguiente y es que energía es mayor que 10 en ese caso contexto punto feel style es igual a grima y energía es menor o igual que ayer ama energía es mayor que 5 en ese caso feel style es hielo y por último si energía es menor que 5 ahora si es red lo que va a hacer esto es que estos bichitos he hecho un poco de zoom a ver dibuja un perfil que hay un error parece que un error y evidentemente tiene que estar en esto que acabo de escribir no es así si estoy sergio vale a ver para expertos en 96 noventa y seis sesiones quién es mejor que cinco me he comido me he comido un paréntesis vale tenemos la barrita verde calculo que algunos de ellos ahora entrarán en color amarillo amarillo algunos rojos y finalmente se quedan sin batería voy a modificar un poquito los porcentajes esto va a ser 15 esto va a ser 15 verde sólo tendrán cuando tengan por encima de 15 recordamos que he puesto verde hemos puesto 20 de energía hemos mirado por poner algo pero puede ser la energía que queramos vemos como todos están en amarillo algunos van a llegar a rojo y finalmente mueren otra cosa que puedo hacer para identificar los que mueven es que en el momento en el qué se queden sino energía de punto r es igual a 200 dis punto g es igual a 200 y this punto que es igual a 200 esto lo que va a hacer es que los que se mueran pues se van a quedar de color gris vamos a ver como los que se mueren efectivamente se quedan de color gris se pueden quedar de color gris de color negro o del color que queramos vamos a ponerlo de color negro por ejemplo porque así el color negro recordamos que suelte quita energía igual machacan más a sus compañeros no se quedan de color negro y eso nos va a ayudar a identificar mejor el ganador de la ronda por ejemplo ya tenemos algunos se está recuperando energía bueno parece que va a ser en este caso más fácil identificar un ganador tampoco va a ser tan sencillo para quedarnos y vamos a ver qué pasa a continuación para para el vídeo pues ya tenemos un ganador y nos dice el ganador tiene velocidad de 0.10 y un montón de decimales evidentemente pero lo importante es que ya tenemos un ganador y dado que tenemos un ganador finalmente ahora ya no tenemos ninguno ahora lo que podemos hacer es que en la siguiente generación podemos adoptar cuáles son las características de ese ganador y podemos hacer una generación adicional es decir podemos hacer qué cada uno de los objetos vuelve a vivir pero ya no tengan propiedades tan aleatorias sino que las propiedades vengan definidas por ejemplo como variaciones de ese mismo ganador

bien a continuación para la siguiente parte vamos a aquí una nueva versión del ejercicio vamos a ejercicio 4 dejamos vamos a ejercicio 4 vamos a cerrar esto y así nos aseguramos que estamos trabajando con el ejercicio 4 nos soltamos aquí y ahora vamos a hacer lo siguiente en el ibex cuando vivos es igual a 1 en ese caso vamos a hacer lo siguiente bar el ganador como yo a ver cómo lo hemos llamado amador velocidad es igual a cero bar el ganador por qué el ganador radio es igual a cero estamos cogiendo los parámetros del ganador y cada momento es cero eibar pero las percepciones y rondón perfecto 1 bueno ahora vamos a hacer lo siguiente perceptor 1 es igual vamos a verlo a más puntos y menos 5 perfectos 2 es igual a lo mismo perceptor 3 es igual a lo mismo perceptor 4 es igual a lo mismo receptor 5 es igual a lo mismo de esta forma yo vengo aquí es un pero uno en tres puntos en 10.3 en 10.4 eres punto p 5 y esto lo que hace y esto lo que hace es que será el ganador yo cree que la de uno es igual a cero cuidado señala 0 el ganador de 2 es igual a cero p4 y p5 vale ahora function siguiente generación siguiente generación lo que va a hacer es lo siguiente de poner gana por velocidad gv grado radio agr y digo ganador velocidad es igual robots de y de vivo y punto velocidad el ganador radio es igual a radio ganador pero no es igual a 1 con esto lo que estoy haciendo es que la siguiente generación va a partir desde el ganador va a agregar el romero y así voy a repetir esto n veces a la siguiente generación ahora para cada uno de los robots voy a hacer una siguiente generación sosa es que lo que va a hacer es que todos van a agregar todo de él del grabador robots y energía es igual a 20 robots r es igual álvarez punto round vamos a verlo es lo mismo para ese paraje y para ver ahora importante es que robots bein de velocidad es igual a v robots de iu de radio es igual agr robots dp 1 es igual a gp 1 robots de iu de pedos es igual a la gp2 lo que estoy haciendo es que todos los robots que van a hacer en segunda generación van a ir directamente van a hacer aprendidos digamos van a heredar todos aquellos que han aprendido de la primera generación y yo creo que ya no se me olvida nada lo que podría hacer es que robots punto x es igual a más punto random por 500 y lo mismo para la lluvia o sea que reinicia en su posición yo creo que ya así que llamó a la siguiente generación y con esto ya estaríamos listos para trabajar ahora evidentemente lo que tenemos que hacer es esperar a que la generación llegue a uno para comprobar si es cierto que se reinician correctamente voy a grabar siguiente vídeo técnicamente lo que estamos haciendo es un poco de como si fuera diseño evolutivo es decir estamos haciendo voy a hacer una cosa 4 voy a hacer que la velocidad siempre tenga que ser un poquito velocidad 5 más que nada por dos más dos más que nada para que no haya muchos que estén parados y van cayendo y parece que caminan con mayor eficiencia vemos como ahora si están aprendiendo mejor ahora cuando quede uno vamos a comprobar si es cierto o no quedan 2 ahora se reinician y si nos fijamos ahora todos han heredado vemos como parece que se evitan mejor entre ellos vemos como todos tienen un patrón al final morirán alguna manera vemos como que están tardando más en morir después de unas cuantas generaciones vemos cómo van refrescando se iban refrescándose y al final vamos sacando un jugador y un ganador pero este juego tiene un pequeño problema ahora mismo y el pequeño problema es que realmente cada vez que saltamos de una generación a otra y al final tenemos el mismo la misma velocidad porque el ganador es exactamente igual al final es aburrido el ganador es mejor que la primera generación pero realmente no hay una mejora generación tras generación porque el ganador es el mejor pero no es de comillas perfecto si es que podríamos considerar que hay uno perfecto si podríamos tener el camino perfecto uno perfecto sería el que sobreviviera siempre así que a continuación lo que voy a hacer es ir cambiando de generación en generación intentando mejorar la generación y voy a hacer lo siguiente esto es igual a la velocidad es igual a más punto random – 0.5 y esto lo voy a multiplicar por 0.2 es decir establezco una variación lo que hago es que no todos los de la siguiente generación sean exactamente iguales que el ganador sino que todos los de la siguiente generación son iguales que los llamados pero con alguna variación es decir lo que estoy haciendo básicamente para entendernos es una pequeña mutación lo que hago es indicarle al sistema que vamos a vamos a dar una variación más grande poner 0.25 más los de la siguiente generación están basados en el ganador de la generación anterior pero la idea es que haya ligeras variaciones que se puedan mejorar más todavía por cierto el con sol y ya no lo quiero y lo que quiero es qué la generación es igual a 1 cuando esto ocurre generación más con sol es punto el ojo estamos en la generación más generación muy bien vamos allá observamos algunos que van muriendo y la idea es que ahora cuando acabe acabe esta generación la siguiente esté basada en la anterior vemos cómo estaban sobreviviendo tienen mejores competencias de navegación estamos en la generación 2 y ahora si los de la generación 2 se basan en la generación 1 pero con ligeras variaciones se basan en el ganador de la generación 1 pero con ligeras variaciones observamos como parece que tarden un poco más en morir guau generación 3 bien ocurre que muere en una forma muy uniforme se analizará generación 4 alguna cosa que puedo hacer por cierto es poner obstáculos habrán obstáculos y así yo creo que podremos esto tiene mejor pinta no han muerto todos curioso generación 6 cada vez me vieron mejor a generadores que no podemos ver si navega bien o mal porque en cuanto queda solo uno lo que voy a hacer es dejarle a ganador que nadie convocó él qué pasa ahora es curioso en la generación si tú todos han muerto creo que se den a del muerto dos a la vez y lo que voy a hacer es que voy a introducir en el código si vos es menor o igual que uno que creo que está muerto es la vez y me han fastidiado un poco el juego bueno antes de nada vamos a establecer unos cuantos unos cuantos obstáculos para establecer obstáculos voy a hacer es poner como una especie de zonas negras voy a crear la serie de cajas vale los obstáculos realmente podrían ser objetos entonces voy a crear un nuevo archivo lo voy a guardar esto está en ejercicio 2 pero realmente inteligencia artificial ejercicio 4 y se va a llamar obstáculos punto j s los capítulos se ha llamado entonces cojo el código de robot pero en obstáculos y esto va a ser mucho más sencillo y ya está los obstáculos no se mueven así que w es igual además punto random por 50 w es el wish es la anchura el sol heights es la altura y entonces dibuja es contexto punto fil recta y voy a decir x y anchura como altura por cierto por si alguna duda contexto punto feel style es igual a black esto es clase obstáculo y ahora lo que hago es que en el index y digo temple pantalla rejilla y luego lo siguiente número obstáculos es igual a 10 por ejemplo dijo ford j es igual a 0 j es menor que número obstáculos j + + y voy a hacer para empezar más obstáculos es igual ánimo a wright y entonces j obstáculos obstáculos de hellín es igual a mi obstáculo se llama obstáculo y ya está entonces ahora vengo por aquí obstáculos j punto dibujaron y yo creo que yo el obstáculo y sin antifaz vale en la línea 39 y obstáculo porque de la misma forma he incluido robots tengo clic que incluir obstáculos dibuja el fandi find me vamos allá los obstáculos a js es un obstáculo los abuelos de j x snow design en obstáculos dibujo y eso tiene pinta de ser porque no es x sino de punto x es la propiedad de este mismo objeto y no es una propiedad de externo muy bien tengo una serie de obstáculos vemos como los obstáculos hacen que los objetos colisionan y pierda energía con lo cual lo que puedo hacer ahora es lo siguiente lo que puedo hacer es en index decirle que quiero menos robots pero quiero más obstáculos y de esa forma así lo que hago es intentar asegurar que los robots tengan el camino más despejado para poder navegar cuando tengo un ganador luego quiero disfrutar un poquito de será mejor entonces porque cuando tengo un ganador pero lo que ocurre es que automáticamente salto a la siguiente ronda pero tampoco está mal y ahora a ver los ganadores es interesante ver como los objetos aprenden bastante bien al final a caminar sin colisiones y bueno lo que voy a hacer a continuación es dejar que el ganador vio a un poquito más yo cuando tenga un ganador de ronda que voy a disfrutar un poquito y quiero ver quiero ponerlo a prueba a ver si realmente vive o muere ok la verdad es que no me puedo quedar sin la verdad donde me puedo quedar bloqueado dejarlo así vamos a ver sí finalmente claro quiero esperar a que el ganador muera entonces ok es menor o igual que 0 esto quiere decir que voy a esperar a que incluso el ganador muera 3 vemos como el color rojo tiene bastantes papeletas y esperamos a que muera y se mueve hereda o se otorga a la siguiente generación de información y si todo va bien la siguiente generación deberían ir mejor igual no lo sé es decir lo que estamos haciendo es un programa para comprobar si es cierto o no que el individuo mejor preparado es el que evoluciona es el que pasa a la siguiente generación podría ser que recuperarán vida con un poquito más de facilidad porque también es cierto que creo que mueren enseguida para hacer que recuperen villano 3 y por tanto de esta forma estamos premiando los que sobreviven vale de esta forma tenemos uno vamos a la siguiente generación eventualmente lo esperable entre comillas podría ser que llegáramos a un momento en el que no hubiera no murieron digamos hoy también y poder modificar la velocidad pero llegado más uno para ir más lento si quieren por tres más uno se mueven los rápidos se mueven los lentos hay algunos que están en bucle para efe y con esto en este ejercicio hemos conseguido por lo menos empezar a demostrar la aplicación de una más en el er ning es decir hemos aplicado varias cosas todavía no tenemos redes neuronales a continuación haremos pero tenemos ya la capacidad de hacer un programa que realiza múltiples variaciones y una vez que ha hecho estas variaciones lo que hace es ponerlas a prueba y una vez que las ha puesto a prueba pues es capaz de obtener la mejor variación sea un ejemplo de diseño generativo y una vez que tiene la mejor variación lo que hace es pasarla a la siguiente generación bueno con esto tenemos una serie de variaciones una serie de hechos que realmente no colisionan con lo cual es el objetivo si los dejo un buen rato al final yo creo que habrá un ganador de una forma u otra realmente acaban yendo en bucle vamos a hacer que pierdan un poquito más de vida estoy buscando es el equilibrio de parámetros hasta encontrar realmente una evolución 53 voy a retocar más la vida tenemos el ganador de la primera ronda y ahora bueno si era grado primera ronda por lo que sea nueve pues ya pasamos a la segunda ronda y quiero ver quiero ver que realmente en la segunda ronda los los elementos realmente aprendan de este ganador si es que llega a morir sería divertido comprobar que vivirá eternamente porque eso demostraría que desde cierto punto de vista sería perfecto podía ser de 100 x no se muere pues paso a la siguiente ronda de todas formas pero bueno es curioso ver y al final pues sobrevivir acaba sobreviviendo y me da a mí que está entrando en bucle espacioso puedo reiniciar la simulación para ver si si consigo que más clara porque si no muere es divertido porque es suficientemente perfecto pero no es divertido porque quiero ver qué pasa en la siguiente generación qué se queda esta mentira – que parece que quiere que muera pero ay vale venga siguiente generación y ahora si todavía en la siguiente generación serán algo más inteligente vaya qué rápida muerto ya se ve dejarlo funcionando unas cuantas generaciones hasta ver quién gana después de una serie de pruebas bueno básicamente tenemos esto tenemos que llevo un rato en la generación 23 hay veces que cuando es realizado esta prueba ha llegado hasta la 30 33 35 más o menos ahí se para bueno digo que se para quiero decir que llega un momento en el que el sistema es lo suficientemente experto como para poder sobrevivir digamos eternamente le he dicho de esto dicho esto voy a hacer lo siguiente voy a introducir un poquito de vamos a hablar un poquito m quito de variación vamos a cambiar un poquito la dirección progresivamente y sobre todo quiero saber quiero comprobar que realmente se produce una mejora quiero saber vamos a ver dar tiempos igual a cero quiero saber cuánto tiempo dura cada interacción así que tiempo más más por aquí a continuación digo estamos en la en la generación tal y el tiempo es a tiempo y cuando ocurre esto digo qué tiempo es igual a 0 de esta forma al introducir está variación lo que estoy haciendo vamos a ver cuánto tarda la primera generación lo que estoy haciendo es afiliar el sistema al cuidado en la variación de la dirección la voy a hacer solo en el caso de que vamos a ver pues la variación vamos a hacerla solo en el caso de que la energía sea 1 voy a multiplicar esto por 0.2 vamos a verse así el objetivo es que los distritos no vayan tan no vayan tan recto sino que tengan un poquito de variación de velocidad ya tenemos allí que se va a acabar la primera generación el primer mito que no sobreviva en el tiempo es mil 533 mil 833 son los ciclos que han sobrevivido en este objeto 327 curiosamente la generación ahora 268 curiosamente deberían vivir más vamos a comprobarlo 796 teóricamente teóricamente lo que debería ocurrir es que cada generación debería vivir más de hecho hasta introducir esta variación esto lo voy a quitar un momento realmente era así introducir esa variación es cuando parece que han vivido menos vamos a quitar esa variación a continuación sobreviva o no nuestra simulación y básicamente lo que estamos haciendo ahora es consiste en medir nos 27 en comprobar que hay una mejora no sólo pasar generaciones sino comprobar si realmente es cierto que cada generación aprende de la anterior y eso hace que sobrellevan más es decir que hay una evolución pero esto por tanto finalmente como digo la máquina está aprendiendo lo que hace es pasar lo que ha aprendido la siguiente generación e intentar que la siguiente generación sobreviva más y mejor viene claramente esta generación yo diría que va a durar más que la anterior y eso que el terreno de juego que se ha quedado no es particularmente sencillo cuidado por qué y se nos han quedado 4 no sabemos cuánto van a sobrevivir pero en principio están en bucle y en bucle se pueden tirar bastante rato lo cual no es malo porque quiere decir que son diseños que funcionan pero me gustaría ver un poco de progreso generación a generación cuando digo que me gustaría si hay que tener en cuenta como he comentado anteriormente varias veces que en inteligencia artificial la gracia no es que salga lo que yo quiero que salga sino a veces muchas veces la gracia es que precisamente pues lleguen a salir cosas que yo no esperaba que salieran voy a recargar y el objetivo como digo es comprobar parece curioso ahora que si bien en pruebas anteriores las primeras generaciones cambiaban bastante rápido vamos a ponerle un poco difícil en número de robots siempre sé cuándo los obligarán a interactuar más vale ya tenemos un ganador breves muere pasaremos la siguiente fase la siguiente fase fijémonos que la velocidad nuestra aleatoria porque la velocidad viene heredada alargador curioso 32 56 vamos a ver qué pasa curioso vamos a dejarlos progresar y ahora en un momento volveré para revisar qué es lo que ha ocurrido hasta este nivel es difícil nos fijamos bueno está empecemos bar círculos para evitarse entre ellos ahora si poco a poco están empezando para celebrar más voy a dejar estoy rodando y ahora a continuación analizamos el resultado es curioso que en una de las pruebas que estoy haciendo los bichitos se hacen con una especie de vibración que más o menos les funciona bien pero hay que tener en cuenta que esa liberación deriva del ganador de la anterior edición eso quiere decir que si el ganador de la anterior generación tiene una serie de características por muy extrañas que parezcan esas características pasan a la siguiente generación lo cual pues puede resultar curioso pero realmente no importa si es curioso o no lo único que importa es si funciona o no y esto es una vez más lo que lo que tiene en este caso más en el jardín y es que la máquina puede llegar a conclusiones que igual nosotros como seres humanos no se hubieran o nos hubiera ocurrido llegar bueno pues en este caso esta generación he puesto un límite de 4000 siempre es el tiempo llegar a 4000 la aceleración debe continuar pues en este caso en esta prueba concreta los bichos están haciendo una vibración que no esperaba y también tener un ajuste un poco extraño de las de las extremidades pero y de los sensores pero el caso es que les funciona el caso que se nos podemos fijar pues van sobreviviendo se van llevando entre ellos qué bueno y aprenden a evitarse aprenden a coexistir y aprender en definitiva pues a moverse interesante una vez más es que mediante esta aplicación yo no le he enseñado a la máquina cómo tiene que caminar ella generación a la generación ha aprendido sola y ha llegado a la conclusión otra vez cuatro mil ya llega a la conclusión de que esta es la mejor combinación para poder sobrevivir y le está haciendo de hecho ya llevamos dos generaciones de 4000 y en principio parece que el programa ha encontrado un balance entre velocidad y ángulos de sensor y giros balance extraño pero un balance al señala cabo vivo extraño con respecto a lo que yo podría esperar pero si el programa ha encontrado esto y le funciona pues es que es válido vamos a recargar de nuevo probablemente recargando el programa llegará a otra solución diferente lo interesante es que finalmente llega a una solución vamos a dejar esto funcionando un rato voy a hacer una variación mientras lo dejo corriendo y hacer como gráfica aquí en la consola va a ser muy curioso y puede hacerlo siempre cadena es igual entonces es igual a cero es menor tiempo partido 100 y esto es más punto round punto y coma temas más y entonces cadena más igual a equis y aquí voy a poner lo que quiero es que en la consola en lugar de aparecer un número aparezcan unas equis se conocen con una especie de barra vamos a verlo tengo ayunas x y lo que quiero básicamente con las x digamos el sistema era como una especie de gráfico de barras es más vemos como las x bueno hacer una especie de gráfico de barras para poder saber cuándo dura más y cuando dura menos y así poder saber si estaba mejor o no va mejor voy a hacer una cosa vamos a eliminar verborrea y ahora voy a dejar esto funcionando un rato ya partir de ahí podremos obtener la conclusión del ejercicio básicamente voy adelantando que la conclusión del ejercicio parece cero muchas veces la primera generación el que sobrevive curiosamente esto que voy a decir es curioso pero el que el sonido curiosamente no es el mejor preparado si nos recibe el que sobrevive de casualidad pero luego en las siguientes generaciones es cuando inevitablemente tienen que producirse mejoras en ese desarrollo debido para que la supervivencia sea mayor generalmente pero teóricamente se van produciendo mejoras todas formas vamos a dejar esto encendido unas cuantas veces vamos a dejar que correr unas cuantas generaciones y así finalmente podremos comprobar si esta certeza es correcta o no lo es bueno después de unas cuantas generaciones por ejemplo en este caso hemos llegado a un ejemplo donde en la generación 14 pues prácticamente mueren dos pero el resto han llegado a un punto digamos de equilibrio donde pueden vivir y pueden convivir y no pegarse entre sí es decir llegan a un punto de equilibrio en el cual saben cómo navegar para no chocarse y bueno ya han aprendido digamos a sobrevivir en este caso llegan al límite de 4000 y fijémonos que hace prácticamente tres generaciones que han llegado a ese equilibrio ahora simplemente pues algunas tienen la materia de color amarillo y bueno pues como podemos comprobar sí que mayormente es probable que a lo largo de las generaciones en este caso en esta prueba concreta han llegado en la generación 12 es posible que en otras pruebas puedan llegar más tarde porque es lo bueno que tiene yo no espero que lleguen en la generación 12 yo simplemente pulso play y no sé lo que va a ocurrir porque lo que están haciendo es evolucionar y dado que en el momento en el que evolucionan pues hay un cierto factor aleatorio un cierto factor literalmente random porque es literalmente introducimos un random en el código pues no sé realmente lo que va a ocurrir lo que estamos viendo por tanto es que me lo tenemos en la pantalla pues estos elementos y gracias a esto finalmente podríamos obtener un resultado de cuáles son los balances para los sensores y qué ángulos deben tomar los objetos para no colisionar entre ellos o no colisionar con paredes o lo que sea y luego evidentemente podríamos utilizar esta información para múltiples ámbitos para robots de limpieza para videojuegos para robots de vigilancia o en definitiva para el uso que le queramos dar siempre que evidentemente el robot donde lo queramos aplicar tenga una serie de sensores de características similares a los que hemos utilizado la idea el mensaje evidentemente es que yo no he tenido como ser humano que programar cuál es el comportamiento que deben tener esos sensores y cómo debe reaccionar el objeto de sus sensores sino que ha sido la múltiple prueba y error lo que ha hecho llegar al programa por sí mismo a una conclusión óptima

vamos con un segundo ejercicio e inteligencia artificial donde en este caso nuestro objetivo consiste en ser capaces de interpretar qué es lo que hay dentro de la imagen es una parte que podríamos asociar a visión artificial que sin embargo no es tanto todavía visión artificial sino que es una forma de poder reconocer qué formas hay dentro de una imagen pero hacerlo apoyándonos en la inteligencia artificial y no en medios normales digamos de cálculo con esto lo que quiero decir es que la primera parte del ejercicio vamos a abrir brackets la primera parte del ejercicio va a ser una parte fundamental en programación clásica pero en el momento en el que empecemos esa parte nos daremos cuenta de que para empezar realmente necesitamos esa aplicación de las técnicas de inteligencia artificial voy a guardar este proyecto dentro de aplicaciones dentro de mam dentro de ht docs en inteligencia artificial voy a guardar esto como ejercicio 3 voy a guardarlo como index.html y vamos a crear el documento casualidad pero estás bien y ahora voy a crear un canvas y para crear un canvas lo que voy a hacer a continuación es meter una imagen dentro de este canvas el ide va a ser lienzo y bueno vamos a darle un wifi de 512 píxeles un height de 512 píxeles a continuación voy a buscar una imagen voy a la mía mismamente jose vicente carratalá voy a una cara humana voy a por ejemplo esta imagen guardamos la imagen vamos a llevar las aplicaciones amant vamos a llevarla a la inteligencia artificial ejercicio 5 y voy a llamar a esta imagen como josé vicente punto jpg así que ahora lo que voy a hacer es decirle al sistema que quiero cargar esta imagen voy a abrir el man que creo que lo tenía sin abrir fuera arrancan los servidores y vamos a poner lo que el host más inteligencia cómo se llama la carpeta aplicaciones e inteligencia artificial es que es localhost inteligencia artificial ejercicio hemos dicho que creo que es el 5 a partir de ahí lo que voy a hacer en primer lugar es cargar una imagen dentro de este lienzo tengo un lienzo de 512 por 512 y tengo una imagen de 960 x 960 esto va a ser en primer lugar un problema así que como estamos empezando lo que quiero es ponérselo fácil al programa y si tengo un lienzo de 512 por 512 pues quiero tener una imagen de 512 por 512 en este caso estoy usando un programa llamado gimp elgin que es un programa gratuito no tenemos tanto para windows como para mac como para linux y lo que voy a hacer es en imagen en tamaño de imagen escalar la imagen voy a decirle que no la quiero 960 píxeles sino que la quiero de 512 ahora a continuación la guardo voy a sobreescribir el archivo y por último cierre el programa de esta forma ahora si tenemos una imagen de 512 por 512 que entrará perfectamente dentro de un lienzo de 512 x 500 a continuación voy a crear un script al igual que en el ejercicio anterior voy a crear un contexto es igual a documento get by dick es lienzo firestone punto get contexto 2 d y ahora es cuando puedo empezar a dibujar puedo decir para imagen es igual a emails y puedo decirle qué imagen punto src es igual a josé vicente punto jpg esto lo que estoy haciendo es decirle que quiero utilizar esta imagen para mi proyecto ahora a continuación voy a ver como de hecho existe una una imagen usa una un comando que me permite pintar pero cuidado si digo contexto punto pues por ejemplo imex otro email puedo decirle que imagen 00 esto quiere decir que voy a pintar la imagen a partir del píxel 0 y el pixel 0 si yo era intentó ejecutar este proyecto es posible que la imagen no se muestre es posible que al inspeccionar incluso vamos a rosa consola es posible que incluso no tengamos ningún error y que nos podamos frustrar nos podamos frustrar un poco porque no aparece la imagen bueno pues porque yo estoy cargando la imagen y a continuación en prácticamente digamos 0 0 0 0 0 1 segundos estoy llamando a la imagen el problema está en que en un momento dado es posible que en esos 0 0 0 0 un segundo es la imagen no haya podido cargar todavía vale por tanto voy a crear una función dibuja es decir voy a encapsular ese comando del dibujo dentro de una función también ahora a continuación haré más funciones lo cual ya que estamos y voy a decir que se está out y no quiero ejecutar dibuja hasta dentro de por ejemplo un segundo es decir milisegundos con esto que es lo que estoy haciendo pues lo que estoy haciendo es decirle al sistema que no dibuje la imagen hasta dentro de un segundo y en un segundo yo creo que estudiando tiempo de sobra para que cargue la imagen en la memoria así que si ahora recargo podremos comprobar como un segundo después aparece la imagen esto no es realmente directamente una imagen esto es la imagen proyectada dentro de un lienzo dentro de un canvas bueno una vez que tengo esta imagen a continuación vamos a poder qué cosa vamos a ver qué cosas podemos hacer con ella una vez que tengo la imagen yo de hecho lo que puedo hacer es leer dentro de ella por eso voy a poner el contexto punto get image data y quiero ir desde 0 0 hasta 512 como a 512 es decir que quiero todo de firmar datos es igual a esto y voy a decir a continuación con solé punto los datos y esto lo que va a hacer es volcar en la consola todos los datos de la imagen fijémonos que en la consola nos da un ibex data que tiene una propiedad data y que de hecho tiene un montón un montón un montón de datos asociados vemos que de hecho los datos se repiten aparentemente en bloques de 4 esto es normal para cada bloque esto es normal pero también es un poco difícil de entender a veces al principio sobre todo cada bloque tiene una primera componente que es el color rojo una segunda componente que es el color verde una tercera componente que es el color azul y una cuarta componente que es la transparencia en este caso tenga un color 777 que es más bien oscuro casi negro y un 255 en transparencia que modifique el pixel no es transparente sino que es opaco así que bueno los píxeles vemos que no tienen la información de rojo verde azul tal cual sino que van en grupos de cuatro y yo tengo que recorrer estos grupos de cuatro para poder interpretar lo que contiene la imagen bien a continuación lo que puedo hacer es intentar procesar esta imagen ya sé que puedo leer el color píxel a píxel ahora a continuación vamos a ver qué cosas puedo hacer puede hacer realmente prácticamente de todo generalmente en inteligencia artificial lo primero que se quiere es y ser capaces de detectar bordes los humanos tendemos a detectar los contornos de las formas con las que con las que queremos trabajar para separar lo que es el frente de lo que es el fondo por ejemplo así que vamos a hacer un pequeño algoritmo de detección de bordes para ello voy a hacer lo siguiente voy a duplicar este lienzo todos y así leo de uno y pinto en el otro para ello por tanto voy a decir que contexto dos todos es igual a lienzo 2 y ahora digo lo siguiente vamos a ver voy a quitar el control de punto lo vemos esto lo que hace y ahora quiero recorrer los datos uno a uno al recorrer los datos uno a uno voy a decir formar y es igual a cero y es menor que datos punto data punto links es decir la longitud de los datos y más más por esto lo que estoy haciendo es recorrer la imagen bloquearlo que incluso lo que puedo hacer es y más igual a cuatro porque hemos visto anteriormente que los píxeles van digamos los números van de cuatro en cuatro siendo que pues los cuatro elementos son rojo verde azul y transparencia ahora así voy a recorrer píxel a píxel y voy a decir lo siguiente quiero leer un comentario el contenido del píxel actual entonces digo bar y un rojo 1 es igual a datos punto data bar verde 1 green 1 es igual a lo mismo pero de 1 es decir 1 es el dato siguiente y +1 y dar de azul uno es igual a datos punto data de i + 2 y más 3 sería la transparencia pero no quiero transparencia tal es así que no voy a poner el imas 3 leo los datos del píxel siguiente entonces los datos del pixel siguiente todos verde los adultos es más 4 y más 14 24 que es el rojo siguiente y más uno es el verde 4 es el verde siguiente e imax 2 es el azul más 4 es el azul siguiente y ahora lo que voy a hacer es intentar buscar una bueno una información vamos a ver yo tengo por aquí para datos 2 2 con texto 2 getty image data y entonces digo si r1 – r2 el valor absoluto el valor absoluto es menor es mayor que 5 anda lo mismo de verde y lo mismo de azul es decir básicamente lo que estoy haciendo es comprobar si los píxeles son muy diferentes de color pero tampoco tan diferentes se van de 5 puntos en ese caso pasara algo en caso contrario pasará otra cosa bien pues vamos a ver en ese caso voy a decir que datos 2 punto gata es igual a 255 o sea el rojo de los datos 2 es igual a 255 y 1 y maestros’ verde y azul en caso contrario es igual a cero pero y después de haber hecho esto lo que voy a hacer es contexto de los puntos put image data khel emails data es para leer tus emails data es para escribir datos 200 si todo ha ido bien vamos a verlo no lo sé si todo ha ido bien recargo y en la segunda imagen estás pensando así que parece que esté pensando si te parece que está pensando por qué vamos a poner por aquí 1 controle punto el ojo ok para comprobar cuando ha finalizado el procesador de hecho está empezando a rodar luego en principio parece que algo está haciendo voy a cargarlo en otra pestaña y al cargarlo en otra pestaña simplemente voy a comprobar que efectivamente el programa digamos está enganchado en el sentido de que está calculando algo vamos a esperar y para que pueda hacer por ejemplo también es calcular sólo el canal rojo para aligerar un poco los datos cuidado cuidado es que aparte de esto no debería estar dentro de cada foro sino que debería estar aquí eso también está ralentizando artificialmente e inspeccionado muy bien consola tenemos el ok quiero el segundo canvas en el segundo canvas todavía no aparece nada así que pero qué vamos a hacer a continuación es pintar y eso sí me está pintando probablemente transparente así que datos punto data de más 3 es igual a 255 esto es porque igual me está pintando correctamente y los 55 pero pero estaba pintando en transparente vamos a verlo bien ahí lo tenemos lo que está haciendo el programa en definitiva es ser capaz de hallar los bordes con una técnica como digo un poco burda solo está midiendo la diferencia entre los píxeles un píxel y su pixel vecino pero es suficiente para obtener un primer resultado puede invertir la imagen y puedo decirle al sistema por ejemplo que esto es cero pero esto es 0 y esto y esto es 0 y esto es 255 y esto es 255 y esto es 255 y así lo que va a ocurrir es que la imagen aparecerá con los bordes hallados pero eficientemente en otro sistema digamos en blanco y negro a continuación lo que puedo hacer es bueno jugar también con él con el límite entonces por aquí y digo bar límite realmente no hace falta que lo ponga aquí al límite es igual a cinco o tres o cuatro veces saber límite y de esa forma poder ir probando diferentes límites por ejemplo para 15 a ver qué pasa hallar únicamente los bordes que me interesen de esta forma yo puedo seleccionar puedo empezar a ver los bordes de la imagen insisto que estoy trabajando con una técnica un poco demasiado simple porque únicamente estoy comprobando un píxel con su píxel vecino vamos a continuación a elaborar una técnica a usar una técnica un poquito más un poquito más mejor pero quiero demostrar que esto no sólo se utiliza por ejemplo para ver caras por ejemplo puedo buscar un círculo sergio e imágenes quiero esto por ejemplo no estás transparente está por ejemplo está bien el que el círculo sencillo guarda la imagen el círculo me la voy a abrir en el equipo para bueno tratarla el chrome no y lo que voy a hacer en primer lugar es en escalar la imagen la voy a subir a 512 por 512 y a continuación exportar como la voy a guardar como círculo punto jpg de esta forma ahora lo que voy a hacer en el código es cambiar la imagen por círculo jpg y comprobar cuál es la utilidad voy a comprobar cuál es vale bien qué es lo que está ocurriendo aquí vemos lo que está ocurriendo aquí es que he utilizado un círculo precisamente para demostrar como el algoritmo de cálculo que estoy utilizando bueno pues es bastante mejorable porque como lo estoy comparando el color de un píxel con el pixel digamos de su derecha pues lo que ocurre es que en los bordes verticales este algoritmo funciona bastante bien pero en los bordes horizontales no funciona también es más difícil comprobar cuál es la diferencia así que la idea es que yo no debería estar comprobando cuál es la diferencia de color entre un píxel y sus píxeles vecinos y su pixel vecino de la derecha sino que tendría que comprobar realmente todos los vecinos lo que voy a hacer es trabajar con un método mediante el cual me puedo acercar mediante el cual yo no quiero comprobar cuál es el color de un píxel vamos a trabajar esto de color rojo para poder tener o ilustrar mejor no quiero trabajar el color de un píxel y esto es qué pasa qué es modo ajo a trabajar el color de un píxel con respecto a su píxel vecino quiero ver en la derecha quiero ver el de la izquierda quiero ver el de arriba quiero verle realmente todo un bloque por ejemplo de tres por tres así que esto realmente son ocho píxeles porque hay que quitarle el centro que es el mismo en este caso lo que voy a hacer es lo siguiente lo que voy a hacer es realizar un pequeño algoritmo de cálculo mediante el cual voy a comprobar cuál es la puntuación vamos a ver [Música] y ahora y claro quiero repasar los píxeles vecinos la cuadrícula de cuadrícula cuadrícula de 3 x 3 bien pues en este caso digo foro x es igual a menos 1 x es menor o igual que 1 x + + ahora y es igual a menos 1 y es menor o igual que 1 y más lo interesante de esto es que yo más adelante puedo cambiar el menos uno por menos dos o menos tres y automáticamente donde estás el gimp y automáticamente pues puedo una cuadrícula más grande vale puedo una cuadrícula más amplia al una cuadrícula más amplia voy a tener más precisión pero también al programa le va a costar más de calcular así que hay que hay que tener cuidado con esto bien entonces ahora yo voy a hacer lo siguiente todo esto de aquí lo meto dentro del bucle for hay que tener cuidado con esto y entonces ahora lo que voy a hacer es lo siguiente datos de data es igual a i vale y ahora esto no es y 4 en este caso esto es y más x por 4 aquí por 4 y bajar esto porque esta fórmula va a ser que está conectada esto es x por 4 y ahora esto es y por 512 porque 512 es la anchura en este caso de la imagen ahora luego lo cambiamos esto es por 4 porque tiene cuatro canales cuatro informaciones y por 512 por 4 más y por 512 por 4 todo esto va a hacer lo siguiente yo aquí lo que quiero no es comprobar el límite ahora fuera bueno esto fuera esto fuera lo que voy a hacer ahora es decirle al sistema esto es x esto es y y ahora yo quiero dar contador es igual a cero contador más igual an a ver aquí por ejemplo el valor absoluto r 1 – r 2 o por ejemplo puedo utilizar la estructura if que tenía antes esto fuera al contador pero para decir que contador + + y por tanto ahora al final del todo al final de esto digo sí contador es mayor que no lo sé es mayor que 20 vamos a ver cuál es el límite no sé ahora mismo cuál es el límite pues en ese caso esto por ejemplo es blanco y esto es negro porque algo 25 52 55 255 vamos a ver qué ha pasado aquí quitar los espacios en blanco quitamos espacios en blanco recargamos vale aparece el ok vamos a ver mayor que 2 ok ahora se vale en este caso lo que estamos viendo es que hemos mejorado el algoritmo porque este algoritmo es capaz de detectar vamos a probar con 3 esto aquí y con el 5 además queda para ir detectando cuál es el punto justo bueno pues la idea es que ahora tengo un algoritmo de cálculo mejor de hecho incluso lo voy a aplicar sobre la imagen original por probar más que nada vale ahora es cuando si esto es mayor que 2 no lo sé y parece que detecta un poco mejor los bordes otra cosa que puedo hacer vamos a cerrar el siguiente vídeo otra cosa que puedo hacer como decía es aumentar el rango de búsqueda en este caso en primer lugar vamos a decir rango por ejemplo es igual a 5 entonces esto es pero menos rango esto es rango esto es 0 – rango y esto es rango y así con este mismo bloque de código en lugar de ir de menos 11 vamos de menos 5 a más 5 es decir tenemos un algoritmo de cálculo más preciso pero démonos cuenta que es más lento también cuidado en este caso ahora estoy buscando demasiados bordes si contador es mayor que 20 no lo sé vale todavía muy fuerte 60 no lo sé y por ejemplo estamos buscando estamos hallando más bordes y omara y me he pasado 50 hasta que un poco encontramos en el punto intermedio pero si nos damos cuenta finalmente este algoritmo nos está permitiendo hallar bordes osea permitiendo encontrar zonas de la imagen y un poco separar empezar a separar que es cada uno de los elementos de una imagen y esto es bueno desde el punto de vista en que realmente el ser humano nos ellos y el resto de animales pero el ser humano realmente así es como empieza a ver cosas que nos fijamos en cualquier niño pequeño cuando le das un boli lo que hace el niño pequeño es pintar el contorno de los objetos un contorno que no existe realmente una línea que no existe pero sin embargo nos fijamos todos los niños pequeños del mundo mundial da igual de qué país sean de igualdad qué cultura sean todos pintan lo mismo cuando cuando el niño dibujo un solo dibujo un árbol dibujar el contorno del sol o del árbol pero si nos fijamos en una foto no existe tal contorno vale entonces si nos damos cuenta esto se se teoriza sobre que lo que quiere decir esto es que realmente los seres humanos vemos así ya que lo que hay dentro de nuestra mente en primer lugar es el contorno de los objetos y luego si vemos el sólido y el color y todo esto pero que lo primero que vemos son los contornos ver los contornos nos va a ayudar en este caso a poder diferenciar qué elementos hay en la pantalla vemos que yo ahora mismo pues podría ver que es una mancha de color pero yo aquí empiezo a ver cejas empiezo a ver ojos empieza a ver nariz empieza a ver boca empezó a ver cabeza empezó a ver vemos que buscar bordes nos permite diferenciar ciertos aspectos del aire ahora a continuación vamos contrastar vamos a comprobar si en esta imagen hay una serie de cosas llamadas features las fichas son características en las características pueden ser las que nosotros queramos pero si consultamos documentación si consultamos bibliografía relacionada con visión artificial la inteligencia artificial veremos que actualmente está bastante de moda contrastar la imagen contra cuatro sencillos marcadores que son horizontal vertical diagonal 1 y diagonal 2 digamos entonces para hacer esto voy a hacer lo siguiente voy a abrir un programa como gimp voy a crear un nuevo archivo y este archivo va a tener por ejemplo no te digo 4×4 pero si 8 x 8 píxeles aceptamos vale y ahora voy a hacer lo siguiente lo que voy a hacer a continuación vamos a ver es que voy a seleccionar esta imagen y voy a rellenarla de negro y tengo un fichero vertical y lo voy a guardar en bueno voy a guardarlo en el escritorio luego lo muevo y exportar como y lo guardo como png mensualmente entonces esto es escritorio a mí no tengo ya que bien perfecto pues ahora voy a crear una carpeta pictures sus características voy a guardar como vertical punto png ahora voy a crear otra qué va a ser horizontal punto pene voy a exportar horizontal punto png y ahora voy a hacer otra que será diagonal 1 no vamos a ver aquí desde aquí hasta aquí a ver si no me llega mucho vale bueno si no queda más remedio correcto pues mira el perfecto esto es lo voy a exportar como diagonal 1 punto png y si lo si lo traslados y lo vamos a ver editar nos imagen transformar voltear horizontalmente eix diagonal 2 muy bien pues ahora a continuación vamos a hacer lo siguiente necesito los datos de la imagen y para ello voy al código voy al canvas y ver pictures vertical wyss es igual a 8 píxeles height es igual a otro píxeles es horizontal esto es diagonal 1 y esto es diagonal 2 esto no debería tomarse como como te diría yo como para buscar cosas en imágenes hay que usar horizontal vertical diagonal 1 y diagonal 2 más bien la moraleja es que vamos a buscar cosas sean esas cosas las que sean vale pues f1 es igual a picture horizontal o vertical el feroz efe 3 f 4 horizontal phil 0 diagonal 1 y fisher diagonal 2 vale y ahora lo que voy a hacer es que voy a cargar las imágenes por cierto también bar imagen fichero uno es igual the new image digo imagen fichero 1 punto src es igual a vertical punto png de la misma forma y mis ficher 234 2 34 y esto es horizontal diagonal 1 y diagonal 2 y con esto ahora a continuación vamos a pintar los pitchers en la pantalla ahora lo que queremos básicamente es introducir estas cuatro imágenes vamos a hacerlo por ejemplo aquí y es que vamos a decir que f1 1.0 image y quiero dibujar la imagen de y f1 en 0,0 esto mismo lo voy a hacer en los otros cuatro contextos el feroz efe 3 efe 4 efe 3 efecto así que si todo va bien recargamos y en un segundo veremos aparecer si es que no ha habido algún error porque puede ser que haya habido algún error cinco contextos y not found vale y esto es porque las imágenes realmente están no están en aplicaciones dentro del mar dentro de ett docs dentro de inteligencia artificial ejercicio 5 y están dentro de pitchers fecha carpetas fechas recargamos y si todo va bien en un segundo ahí podemos ver las imágenes que tenemos cargadas una cosa que pueda hacer básicamente vamos a ver lo es estas imágenes en un contexto que se vea un poco mejor ahora a ver cómo lo podemos hacer para decir por ejemplo qué esto va a estar en vivo que va a tener líderes features estos cuatro elementos van a estar dentro de ese otro elemento y ahora en el estilo en la cabeza puedo poner un estilo el cual voy a decir pitchers un wish de 512 píxeles y un high de 512 píxeles y ambas voy a decir que tengan uno guys del 50% un height del 50% y que floten a la izquierda y esto lo que va a hacer es que los elementos ahí los tenemos pues ocupen lo mismo que los propios objetos dicho esto dicho esto para continuación podría decir que y los cambas quiero que flote tales tierra y así de esa forma los tenemos ordenados vale y ahora lo que quiero hacer en la siguiente parte y con esto lo que voy a hacer básicamente va a ser crear una nueva versión del ejercicio va a ser simplemente decirle al sistema que quiero comparar cada uno de estos ficheros contra las imágenes que tengo en la pantalla y quiero ver si coinciden con las imágenes o no vamos a hacerlo primero con el primero y a partir de ahí lo hacemos con los demás

para ello voy a crear vamos a verlo ejercicio 5 lo voy a pegar ejercicio 5 lo llamo ejercicio 6 esto va a la basura y ahora en ejercicio 6 voy a lanzar este archivo aquí dentro y aquí voy a llamar a ejercicio 6 bien pues continuamos y ahora voy a crear en el lienzo 3 y ahora en el lienzo 3 lo que voy a hacer es averiguar si es cierto o no que uno de los ficheros por ejemplo el fichero vertical se da sobre cada uno de los elementos es decir vamos a vamos a mostrar esto poco a poco en la pantalla porque esto puede ser complejo de entender me voy a guardar esta imagen me la guardo en el escritorio y me voy a alguien al trabajar de alguien voy a por ejemplo descartó cambios descartó cambios me voy a abrir fisher vertical y abro el escritorio abro la imagen llamada descarga la imagen que ha generado el código seleccionó este elemento y lo pego donde se ha pegado bueno pues se ha pegado aunque no se vea se ha pegado allí ahora lo voy a mover entonces lo que voy a hacer a continuación es comprobar y este fichero coincide con alguno que tenga en la pantalla es decir coincide por ejemplo con esto como lo voy a hacer bueno pues por ejemplo puedo hacerlo restando y cuando digo restando quiero decir que puede aplicar una operación de resta no sé diferencias y si el resto y podremos comprobar como al restar 1 con respecto a otro podrá estar puedo multiplicar puedo realizar operaciones puedo comprobar si se anulan o no y si se anulan querrá decir que el sistema reconoce que hay un píxel hay una línea vertical en ese punto y al menos una línea vertical vamos a comprobarlo pero la cuestión está en que evidentemente lo que tengo que hacer es cargar por una parte el elemento y compararlo aquí y compararlo aquí y compararlo aquí y compararlo aquí y compararlo con todos y cada uno de los puntos compararlo con todos y cada uno de los elementos esto es lo que va a resultar difícil realmente mal y es que tengo que hacer una búsqueda de un patrón dentro de otra imagen bien pues ahora vamos allá voy a crear un nuevo lienzo bajarlo en el nuevo lienzo está aquí contexto lienzo 3 saberlo parece que ya había reservado un poco de espacio para este lienzo es todo bien aquí hay un lienzo 2 y dónde están los otras marga y está leyendo tras esas fechas bien ahora ahora esto ha sido para poner la imagen vamos a ver esto es dibuja efe jrs y dibujar la imagen y ahora esto ha sido vamos a ver busca allá los bordes del contexto vamos allá pues si esto ha sido haya los bordes de contexto ahora voy a crear otra parte del código que va a ser comparar contra uno de los fichas vamos a por ello y ahora lo que necesito es en primer lugar cargar entonces debo vara por ejemplo bordes es igual a contexto 2.7 emails data desde 00 hasta 512 512 y ahora barra vertical es igual a contexto richter vertical que es ese 1 efe 1.7 image en tato y va a ser desde 0,0 hasta 8 hay otra forma de hacerlo y es que en los bordes voy a establecer la siguiente medición vamos a ver micrófono x es igual a 0 x es menor que 512 x + más y fort y es igual a 0 y es menor que 512 y más y lo que voy a hacer ahora es estos dos contextos el contexto de vertical realmente siempre es el mismo este está aquí y bordes va a ser x coma y y de esta forma vamos a ir cogiendo un trocito de imagen en cada caso bien ahora lo que voy a hacer a continuación es uno por uno es decir y es igual a 0 y es menor que vertical un toda está indolente los datos de vertical y más más y entonces ahora lo que voy a hacer es restar uno contra otro voy a restar sólo el color rojo porque realmente una imagen en blanco y negro el verde y el azul da lo mismo y el alfa no se aplica así que a continuación voy a hacer lo siguiente contador es igual a cero así que sí el valor absoluto d vertical punto data menos dónde estás bordes punto data y vamos a ver todo esto es menor no sé cuánto 10 vamos a verlo en ese caso voy a decir qué contexto punto data el contexto 3 punto data rey es igual a 255 técnicamente además técnicamente además para poner a uno y más 2 y contexto 3 que es el alfa va a ser 255 en caso contrario esto va a ser igual a cero pero no era alfa es 255 vamos a verlo y ahora y por último al salir de aquí aquí contexto tres puntos y me está y quiero poner contexto tres puntos data no contexto 3 es lienzo 3 dentro del contexto 3 voy a poner dar nuevos datos es igual a contexto 2.7 se trata desde cero cómo hacerlo hasta 512 como 512 vale y ahora es nuevos datos en 0,0 y estos nuevos datos y yo creo que vamos a verlo recargamos vale en principio parece que no está haciendo nada pero el ventilador empieza a rodar lo cual quiere decir que sí que lo está haciendo y lo que está haciendo es buscar fijémonos que en el consuelo no pone ok van a suponer que hay luego en principio debe estar buscando el ventilador como ya digo está está rodando lo cual ahí tenemos chrome que está empezando a gastar procesador lo cual quiere decir que está en ello una cosa que puedo hacer eventualmente es decirle al sistema que en lugar de querer que vaya a la equis cada elemento pues quiero que vaya cada cuatro o cada seis o cada ocho más que nada para que esto tarde menos x más igual a 4 y más igual a 4 voy a recargarlo herramientas para desarrolladores este tipo de operaciones son bastante intensivas entonces bueno vamos a verlo una forma de ahorrar costes es realizando menos preguntas a píxeles y fijémonos como bien luego qué pasaba vamos a verlo con derecho en el monitor de actividad teníamos ahí éste todavía estaba rodando 94 está todavía vamos a quitar palabra camino sí bueno vale que ha pasado aquí por lo que ha pasado aquí es que parece que me ha cogido vamos a ver contexto 3.7 y me estado vamos a verlo ahora recargamos vamos a estar un poco ahí tenemos un ok y si todo va bien en los pocos segundos veremos aparecer algo en la pantalla muy bien entonces vamos a ver tenemos aquí esto y en principio vamos a ver así vale lo que está haciendo es que está encontrando un principio un punto y ahí me he dibujado unos cuantos puntos vamos a verlo vamos a revisar el correo bordes vamos a ver esto realmente no hace falta esto va para qué nuevos datos esto es incorrecto bordes es contexto dos nuevos datos el contexto 3 y ahora bordes ordes es contexto 2 con gemelos mx en y con gm 8 píxeles por 8 píxeles es también la razón por la cual estaba cogiendo mal el dato vale vamos a verlo si todo ello bien vamos a verlo yo creo que yo vamos a probarlo y ahora en unos pocos segundos cuando estoy viendo aquí podría parecer unos puntos vamos a ver vamos a ver estos puntos eficientemente sólo desde cálculo una forma que tenemos de averiguarlo es el ser esto y veremos que no aparecen los puntos recargamos y ahora vamos a ver x y 500 26 512 hola y ahora vertical data bordes punto de atar vamos a ponerlo menor que los la idea es ver un poco qué es lo que está pasando porque ese elemento vamos a poder con sol junto a la ola para ver cuántas veces se está repitiendo este proceso hay 50 ó 400 ola de seguimientos de seguimiento solar lo cual 4 contador es igual a cero vale ya y ok y ahora si contadora es menor que 10 en este caso y en caso contrario pasa esto vale creo que esto aquí esto allá contador + + y ahora sí contadora es menor que diez vale muy bien vamos a ver y lo que estoy haciendo es revisar si los píxeles se anulan entre sí y ahí lo que estoy haciendo es comprobar cuánto es el contador vamos allá bien de momento no aparece nada y ahora lo que tenemos que hacer es ajustar el contador puedo poner el contador en pantalla realmente vamos a ver con sol es punto love contador para ver probablemente no estamos siendo todo blanco porque el contador está demasiado sensible vamos a verlo vale pues sí 30 26 24 32 en su mayoría 58 en el 30 ahora no ahora voy a aparecer nuevos datos esto por cierto nuevos datos los datos vamos a asegurarnos que realmente está pintando de blanco y no de transparente y descarga uno lo abrimos en él aquí aunque ese es el problema eso es lo que está pasando lo que está ocurriendo es que está poniendo todos los píxeles en modo transparente y por eso no ve ahora sin embargo lo estoy diciendo que me vamos a leer nosotros de él dónde está esto no es sí lo que tengo que hacer es poner estos datos con la equis y correcta vamos allá voy a hacer varias cosas una en primer lugar voy a rellenar todos los píxeles de blanco reformar es igual a 0 o es menor qué nuevos datos data punto links y aún más más entonces los nuevos datos punto data es igual a 255 esto lo que va a hacer es que por lo menos ahora en cuanto guarde la imagen ahora quito la consola quitaría lo que voy a hacer es guardar esta imagen abrirla con el gym y comprobar que como mínimo esa imagen ya es blanca tenemos bien ahora una vez que tenemos esto una vez que he hecho que toda la imagen sea blanca lo que voy a hacer es que esto vas más x por 4 más y por 4 x 512 para averiguar cuál es el índice concreto la ahí no vale y ahora recoger todo esto voy a reemplazarlo aquí si todo va bien es la fórmula que convierte a partir de la equis la y el índice correcto si todo va bien como ya digo recargo vale y ahí tenemos algo y empezamos a tener algo en la pantalla hemos dibujado en este caso una serie de píxeles de color rojo de hecho de color rojo para las que bienestar de color negro pero está mejor o rojo que interesante pues le voy a tirar la equis un píxel porque ahora mismo está cada cuatro píxeles así que es lo que he hecho evidentemente tarda más ahí lo tenemos y con esto lo que estaba ocurriendo es que estoy empezando a detectar cuáles son los pitchers verticales es decir estoy empezando a detectar donde veo cosas verticales vamos a ver por qué para ello 0 0 255 esto es lo que ahora mismo lo estoy viendo porque se supone que estoy pintando de negro puede hacer lo siguiente 0 255 recargamos y ahora lo que puedo hacer es ajustar esto ya se parece más y ahora lo que quiero hacer es ajustar quiero ver solo los píxeles donde haya verticalidad tengo 30 he puesto antes 30 vamos a poner 60 no lo sé vamos a verlo bien cuidado ahí empiezan a aparecer vamos a poner el 20 y ahora si todo va bien parece que se hará como podemos ver en la pantalla estoy localizando con más precisión aquellas zonas que tienen verticalidad de géneros que solo aparecen o tienden a aparecer los bordes que son más bien verticales y tienden a desaparecer aquellos que son más bien horizontales el paso que hemos dado es importante desde el punto de vista en el que hemos creado un programa que es capaz de reconocer cuando tiene puntos verticales cuando tienen líneas verticales de la misma forma ahora podemos hacer un programa que reconozca líneas horizontales vamos a por ello lo que podría hacer eso sí para luego diferenciarlas es que voy a hacer que vamos a ver estoy hacerlo un poquito más por ella vale cero cero cero pues quiero que esto sea 25 500 quiero que las líneas verticales sean rojos sean colores rojos ahí lo tenemos si quiero que las horizontales sean rojos quiero que las verticales sean verdes por ejemplo vamos al siguiente vídeo vale pues ahora vamos con las verticales entonces para ello bueno voy a volver a recortar en este caso voy a volver a hacer lo mismo esto va a ser bastante ineficiente pero más claro entonces vertical vamos a hacer una cosa vamos a hacer un super bloque y lo vamos a repetir cuatro veces de momento lo que quiero es comprobar que funciona y más adelante haremos el código que sea más eficiente pero de momento que funciona si tengo esto puedo hacer un segundo super bloque para ahora decirle que vertical ya no va a ser el f1 sino la base refiero es técnicamente ya no es vertical es horizontal pero bueno entonces quiere buscarle feroz y quiero que el color sea él verde por cierto esto lo saben esto no nuevos datos es igual a esto estaba afuera de los pueblos y el contexto tres puntos putin esta está también va afuera después del super en lo que al final del todo ok vamos a buscarlo a ver si ya lo tenemos y si todo bien agrava tardar más porque tiene que repasar dos veces la imagen pero muy bien ahora tenemos los píxeles horizontales cuidado en este caso porque lo que ha hecho el sistema es sobreescribir los los colores entonces voy a hacer una cosa de los súper bloques voy a quitar esto para que solo pinte en el caso en el que encuentre algo recargo y bueno si nos fijamos ahora en un segundo podremos comprobar bueno solo está dibujando vamos a volver a recargar solo está dibujando los píxeles verdes parece que esté borrando a ver qué pasa de código vamos a ver contador de hecho me lo voy a guardar para abrirlo en el gimp correcto bueno ahí hay algo por ahí pero vamos a ver el trato tanto hasta tantos nuevos datos esto es igual a verde no debería sacarme no debería mancha carmen pero no está haciendo lo puedo separar en tres imágenes pero tampoco me hace mucha ilusión quiero que me lo haga todo en la misma voy a quitar este super bloque momento para confirmar donde puede estar el rojo nuevos datos ahí está el problema yo creo que ahí está el problema nuevos datos es contexto 3 esta noche y por tanto nuevos datos va ahí correcto la verdad recargamos me lo sigue pintando de verde agua es que es también lo que hace es ponerlo de color blanco le seguimos vale ahora sí ahora tengo en líneas rojas tengo las líneas verticales en líneas verdes tengo unas líneas horizontales es decir ya tengo un programa que no sabe todavía detectar caras no saber todavía detectar ojos que analices pero por lo menos es como un pequeño bebé que está aprendiendo y de momento ya reconoce cuáles son las líneas verticales y cuáles son las líneas horizontales y es capaz de diferenciar las he hecho esto es cuando podemos ahora sí repetir lo mismo para las líneas diagonales que tenemos aquí arriba así que una vez que tenemos esto ahora es cuando puedo venir por aquí y hacer lo siguiente voy a copiar el super bloque el super bloque y lo voy a copiar una vez para f3 y voy a pintar de color azul y otra vez para efe 4 y lo voy a pintar de color financianción es este de aquí es mucho y mucho vale y mucho si todo ha ido bien ahora vuelva a recargar y veremos cómo no solo va a pintar las líneas verticales horizontales ahora va a tardar más todavía por cierto a la tardar otra vez el doble por qué pues porque está repasando la imagen cuatro veces esto podríamos hacerlo en una sola pasada si ahora a continuación lo vamos a hacer una sola pasada para ahorrar tiempo vale ahí empezamos a tener eso vamos a ver vale ahora el único problema que hay es que bueno eso es muy sensible estaba machacando las líneas rojas y las líneas verdes vale entonces vamos a hacer que sean más sensibles vamos a ver y cojo el primer super bloque y digo si contador es menor que 10 contador es menor que 10 menores contador es menor que bien recargamos y en principio si todo va bien ahora veremos como el sistema se para mejor las líneas rojas verdes azules y cian bien ahí lo empezamos a ver vemos algunas rojas claramente verticales ahora parece que ha reconocido menos menos trozo vale vamos a vamos a ver si lo podemos ajustar pero yo creo que claramente se ve que las diagonales hacia un lado son de color azul las diagonales hacia el otro son de color cian las horizontales son verdes y las verticales son rojas es decir tenemos ya un primer programa que está funcionando con bastante eficiencia pero con bastante efectividad vale pues vamos a poner esto a 15 aceite recargamos y ahí tenemos todavía unos cuantos elementos más muy bien ahora volvemos a sacar reconoce mejor unas líneas sobre otras pero bueno vale vamos a dejarlo en 15 eran 10 perdón 10 muy bien una vez que tenemos esto ahora lo que me gustaría es que bueno el sistema no tuviera que hacer esto cada vez entonces voy a intentar hacerlo en el siguiente ejercicio eso sí para ganar un poquito más de eficiencia para este siguiente ejercicio me voy a ir a la carpeta a aplicaciones voy a ir a más ht docs inteligencia vamos ejercicio 6 ejercicio 7 el ejercicio 7 lo pasó a brackets y también en el navegador cargo el ejercicio 7 bien y ahora y ahora lo que voy a hacer en este ejercicio 7 juraría vamos a ver con cuidado no fatal fatal el ejercicio 7 tiene que ser una copia del ejercicio 6 ejercicio 7 vamos a abrir con brackets y lo mismo aquí pues ahora lo que voy a hacer es que me voy a traer los 4 super bloques esto es vertical horizontal llamarlo v h diagonal 1 y diagonal 2 y ahora ya que repasó la imagen lo que voy a hacer es lo siguiente una vez que tengo esto y una vez que tengo esto vamos a ahorrar espacio por cierto es y esto es correcto esto es innecesario esto se puede ahorrar y ahora vamos a hablarlo voy a trabajar esto copio esto es estos foros destruye fuera vertical esto es práctica al punto dado así que esto es vertical esto es horizontal esto es diagonal 1 y esto es diagonal 2 si tu bebe bien me puedo cargar los super bloques porque ya todo lo tengo era lo mismo recargo y en principio ahora la detección de colores debe ir más rápida solo me está pintando el rojo claro que sí porque 255 0 0 en 25 frente en 25 52 55 vamos a verlo ahora y ahora lo más importante para pasar a la siguiente parte del ejercicio es que lo que tengo que hacer es analizar es averiguar cuántos elementos tengo de cada uno y esta es realmente en la parte importante no los colores sino realmente los elementos que tengo voy a intentar afinar un poquito más si contado es menor que igual a 12 porque tengo muchos muchos píxeles en blanco y creo que podría tener algunos más en color bueno más o menos bien ahora sobre todo lo importante lo importante no es cuánto dibuje realmente sino lo importante vamos a verlo aquí en este caso es bar número números verticales es igual a cero para número horizontales es igual a cero números diagonales 1 es igual a cero y dar números diagonales 2 es igual a cero entonces si esto es cierto esto es números verticales + + esto es número horizontal es más esto es número diagonal es uno más más y esto es número diagonales 2 + más de esta forma al final consuele punto log verticales número verticales esto es lo que realmente me importa o sea lo que me importa no es el esquema de colores escrita de colores si está hecho para que entendamos visualmente lo que estaba ocurriendo es 1 y diagonales 2 lo que importa realmente es este número medievales 1 y número diagonal estos si todo va bien recargo y ahora veremos en la consola que nos dice qué tengo una serie de verticales una seriedad y frontal es una en feria de diagonales y otra serie de diagonales ahora démonos cuenta como ahora viene lo importante de este ejercicio porque todo esto ha sido simplemente para que el sistema sea capaz de ver algo en la pantalla pero ahora vamos a ver otra cosa verticales es menor horizontales es algo menor digamos que la proporción sería si si diagonales es 1 horizontales parece que sea como 0.6 y verticales es parece que sea como 0.3 voy a dibujar un círculo recordemos que te vengo aquí y en la imagen original a círculo creo era círculo de círculo recargo démonos cuenta que lo que ha ocurrido en este caso es que las proporciones cambian las proporciones cambian quiere decir que ahora por ejemplo tengo aquí 37 21 28 13 es decir tengo una serie de proporciones concretas pero las proporciones han cambiado con respecto a la cara lo que vamos a ver ahora es las proporciones que tenemos para cada elemento para cada cosa que podamos utilizar y 372 28 vamos a verlo podríamos establecer unas proporciones podemos suele hacer unos porcentajes y de esta forma al establecer porcentajes quieras que no técnicamente estamos haciendo un poco como una se mueve es decir estamos creando una un poco de perspectiva para esto no importa realmente son 3.000 son 8000 lo que importa es la proporción entre los elementos así que para ello voy a hacer lo siguiente aumento vamos al siguiente vídeo a continuación por tanto voy a hacer lo siguiente voy a decir bar máximo es igual de hacerlo hacia arriba al máximo es igual a más punto marks es como la peli mad max y digo nv n h n diagonal 1 y diagonal 2 y entonces voy a decir esto es partido máximo esto es mv nh diagonal [Música] m2 vamos a verlo ahora si todo va bien ahora me lo va a expresar como proporciones me dice que es diagonales 21 diagonales 1 es 0,5 no me cuadran mucho porque es un círculo pero bueno vamos a dejarlo está vamos a dejarlo ahí horizontales es 0 7 y verticales es 0 3 vale pues voy a tu círculo entonces círculo otro círculo yo que sé pero e incluso esto qué es un círculo liso círculo sólo si no lo construyó realmente era es más reconstruir yo vamos alguien crea una imagen nueva de 512 x 512 a continuación voy a dibujar un círculo en alguna parte lo voy a pintar de negro y bueno directo como círculo 2 el círculo dos puntos jpg pero lo que voy a hacer es que lo voy a reemplazar círculos de jpg voy a recargar acordémonos que 10.507 03 y bueno elementos broken vale elementos broken es porque el círculo dos puntos jpg me está diciendo que no existe vale porque esto lo quiero guardar en la carpeta ejercicio 7 52 puntos jpg y como tengo memoria de pep pues ya se me olvidó cuáles eran las proporciones bueno vamos a ver vale 10 1908 007 en este caso en este círculo de aquí vale el objetivo ahora es entrenar a un sistema para que sea capaz de averiguar cuáles son las proporciones que sea capaz de detectar cuáles son las proporciones y que aprenda por sí mismo lo que es un círculo y lo que es un cuadrado y lo que es un cuadrado por ejemplo vamos a por ello me cuadraba cogemos el rectángulo vamos a dibujar un cuadrado no sé aquí vamos a pintarlo de negro cuadrado y una vez que tenemos un sistema que es capaz de ver ahora lo tenemos que entrenar yo no le voy a decir esto es un cuadrado yo lo que espero es poder ir alimentando al sistema con diferentes imágenes y que el sistema que tenemos por ejemplo pues mira verticales pone cero horizontales pone 2a pone uno bueno creo que no ha cogido muy bien vale vamos a bajar la tolerancia vamos a bajar otra ganancia porque fijémonos que realmente no ha cogido nada de la imagen tolerancia ahora también es entrenada al sistema en tales no ha cogido nada vamos al contrario creo que vale vamos a ver que tenemos por aquí ahora tenemos un sistema con el cual está detectando una serie d una serie de elementos ahora tenemos verticales horizontales diagonales y diagonales 2 y ahora tenemos que entrenarlo un poco mejor para que localice mejor porque está cogiendo más jamás diagonales realmente horizontales y verticales y no parece que debiera ser así vamos a poner 40 también podemos escoger un mejor candidato un mejor candidato y un mejor candidato podría ser el que el sistema detecte cuál es la suma menor es decir si un elemento tiene más pinta de ser horizontal o de ser vertical o de ser que otra cosa que puedo hacer es colocar diferentes imágenes de personas por ejemplo voy a imágenes mías josé vicente cara está la y mediante este proceso el cielo mediante este proceso lo que vamos a hacer es comprobar mediante los colores también que está cogiendo correctamente pues bueno las imágenes vamos a verlo otra imagen es que esta es la misma realmente voy a estar me gusta no me gusta ver esto haber una segunda parte de esta imagen es pequeña voy a esta imagen abrimos la imagen en pestaña nueva descargamos la imagen me voy a aplicaciones oficial y josé vicente otra gente de esta forma ahora vengo al código jose vicente 2 recargo el proyecto así claro está detectando horizontales si ya tengo que abrir esa imagen en el quinto para quedarme con un trozo que sea de 512 por 512 entonces voy a imagen la imagen altura 512 voy a un recorte me voy a quedar con ese trozo voy a sobreescribir y vamos a recargar y el objetivo es comprobar que el sistema no no ha cogido correctamente la imagen o es que no la hay correctamente valerse esto es 63 el código rojo se diferente 3 recargamos vale y ahí pues una vez más observamos cómo tenemos una serie de bueno de píxeles de color en este caso yo creo que podríamos modificar la tolerancia para que sea capaz de más elementos porque démonos cuenta que está cogiendo algunos los que está cogiendo son correctos claramente se puede ver que las diagonales azules son estas las diagonales se resarce aquí los tres canales pero pero no parece que esté cogiendo todos los puntos que debería vamos a ajustar un poquito la tolerancia fragancia 12 a 15 y así hasta que sea capaz de encontrar una tal anciano por ejemplo parece que se va un poco más vamos a ponerlo a otro lance a 12 y vamos a ver vamos a recuperar el código porque yo creo que hay algunas líneas que todavía podría estar encontrando y no está encontrando entonces seguro que podemos mejorar un poco el algoritmo y el menor que 2 voy a tolerancia 2 parte 2 es igual a 4 por ejemplo 2 2 2 peros recargamos encontrando tenemos que ir modificando las tolerancias hasta encontrar el punto correcto es que me da la impresión de que no está haciendo nada 1100 y ahora pongo 1 estoy un poco analizando este este algoritmo y bueno tengo que ajustar estos parámetros hasta que el sistema sea capaz de proporcionar me un dato fiable no es que el que tengo no sea fiable pero creo que podría estar sacando más líneas entonces si pongo por ejemplo 15 voy a desactivar el momento en las diagonales y de hecho ya me está encontrando diagonales voy a desactivar el momento en las diagonales para localizar verticales y horizontales creo que hay de hecho está reconociendo pero me gustaría que reconociera más la verdad es que con lo que tengo no me puedo quejar que realmente está al menos parece que está reconociendo horizontales y verticales quizá sea un problema de que estos puntos podríamos bajarlos a 44 entonces voy a probarlo lo pierdo nada para meterlos en el gym se hace raro archivo cerrar todo ahora cargo las imágenes las paso a 4×4 eso también va a ser por cierto que el programa vaya más rápido es crearle bajo 4 sobre escribo sobre escribo y sobre escribo y ahora en el código ya veces lo siguiente quería reemplazar 8 píxeles con 4 píxeles ahora este 8 con 8 lo reemplazó con 4.4 y yo creo que ella yo creo que ya vamos a verlo pero ahora reconocen a la tendencia muy fuerte hasta imagino seleccionado seguimientos o sufrimientos donde no lo sé pero para otros de asia son muy grandes importancia 4 ok tu canción es otro grado si la ponemos a 5 y voy a ir probando hasta qué consiga que sería correctamente voy a hacer diferentes pruebas y ahora vengo con los datos correctos

bueno finalmente he afinado los parámetros para que aparezca un número razonable de líneas por ejemplo los en estas líneas en este archivo pero si lo cambio por ejemplo al círculo pero es que aparecen un número bastante equivalente de líneas horizontales verticales y diagonales más o menos y luego si lo cambio al cuadrado vemos que igualmente aparecen un número vamos a ver suficientemente vamos a ver el agujero correctamente vale sin embargo ante esto tocando parámetros y si te vale lo que ha ocurrido es que directamente el hallar bordes no reconoce los parámetros siempre podemos afinar más este es el contador y si en un momento dado vemos que aparecen por aquí pues sabemos que tenemos 091 y podemos seguir afinando el proyecto hasta que consigamos hasta que consigamos un número suficiente de vamos a verlo hacemos una prueba volvemos a jose vicente y ahora bueno simplemente lo que voy a hacer es el límite vamos a poner 8 y ahí poco a poco vamos encontrando cuál sería nuestro nuestro objetivo evidente bien una vez que tengo esto ahora me gustaría pintar de una forma un poco más clara los objetos los puntos ya que aparecen como píxeles y esto prácticamente no me sirve de demasiado el límite no sé y poco a poco bien pues lo que decía vamos a pintar de la siguiente forma que fuera markets y en bracket el siguiente ejercicio lo que voy a hacer parte de qué llenar unas cuántas carpetas si fuera una persona generada con la inteligencia artificial lo estaba utilizando también como material vamos a verlo aquí vemos aquí recoger una imagen de una persona para jugar también con esa imagen y ahí lo traemos para otras muestras para hallar bordes y obtener al final también el elemento entre diagonal y vertical y tal y ahora en el siguiente vídeo lo que voy a hacer básicamente es mostrar esto en la pantalla de una forma un poquito más clara bueno pues utilizando lo que sabemos de canvas de hecho lo que hemos aprendido el ejercicio anterior podemos hacer lo siguiente y es que en el contexto 3 voy a poner un file style en este caso va a ser rojo y contexto tres puntos arc donde voy a trabajar con x y 4 píxeles desde cero hasta más punto x 2 y true y entonces voy a hacer lo mismo para el resto d de elementos y voy a hacer red esto es green y esto es fiamm vamos a recargar y así pues veremos esto de una forma un poquito más visualmente impactante vamos a ver contexto 3 nuevos datos y contexto 3 recargamos se hará si hay suerte en lugar de ver un píxel veremos un circo expresión al lienzo 3 y lo que quiero en este caso si es para cada uno de estos elementos contexto tres puntos beijing paz el contexto 3 punto voy a copiar ejecutó y si todo va bien ahí tenemos bueno de una forma más visual y más clara la representación de cuando está buscando y encontrando vértices o aristas horizontales diagonales y así con cada una de ellas de esta forma poco a poco vamos consiguiendo cómo vamos consiguiendo que el sistema sea capaz de ver como nosotros vemos detectando algunas características puedo hacer que el radio sea mayor la radio es igual a 10 no lo sé y entonces ahora por ejemplo por aquí recargo y el objetivo como digo es ver ver en la pantalla claramente qué es lo que tenemos podemos comprobar pues bueno igual éste es un radio demasiado grande pero lo puedo bajar con radio 4 podemos trabajar perfectamente y ahora sí lo podemos cambiar por otras formas tales como por ejemplo el cuadrado para comprobar que salen horizontales y verticales y no tenemos alguna diagonal en la esquina es inevitable y podemos trabajar con el círculo y ahí lo tenemos las diagonales por lo menos son bastante correctas y por último pues 3 por ejemplo para comprobar como el sistema es capaz de detectar y diferentes tipos de formas esta imagen por cierto me escama un poco htc box por qué teóricamente es una imagen de 512 pero se ha ido a 452 teóricamente es una imagen de 512 asiste ya veréis con el fire for the world games la voy a hacer más grande voy a guardar encima no ahora yo creo que sí y bueno tenemos ya está listo para las siguientes fases de desarrollo donde lo que estaremos haciendo es detectar en este caso pues bueno qué elementos tienen una inclinación y qué elementos tienen otra y por tanto usaremos esta información para que el sistema aprenda pues qué elementos tiene en un momento dado en la pantalla

llega un momento en el que de alguna forma tenemos que ser capaces de realizar algún tipo de persistencia vamos a hacer lo siguiente vamos a venir al escritorio vamos a venir de hecho aplicaciones vamos a ir ht rocks vamos a trabajar en la parte de inteligencia artificial y vamos a hacer lo siguiente y es que hasta ahora estamos trabajando con un lenguaje que es javascript que tiene ciertas ventajas y tiene otras desventajas en este caso la desventaja que vamos a encontrar consiste en que el javascript originalmente es un lenguaje pensado para ejecutarse en el navegador y por razones de seguridad así como hace años existía la posibilidad de hace muchos años de poder leer y guardar archivos del del sistema el directorio de archivos local por seguridad por para evitar unos maliciosos hace ya tiempo que no se puede entonces con esto lo que ocurre es que tenemos que guardar la información de otra forma crear una carpeta ejercicio 9 y dentro de ejercicio 9 lo que voy a hacer esto parece que sea un comenzar desde cero pero realmente no es así lo que estamos haciendo es poder potenciar el ejercicio anterior y el objetivo como digo es la persistencia hasta ahora cada vez que hemos creado un programa cada vez que matamos el programa y lo volvemos a arrancar el programa pierde la memoria y vuelve a empezar desde cero entonces hay una parte en la inteligencia artificial donde es importante que el programa recuerde aquello que ha aprendido para usarlo más adelante no vale siempre en todos los casos que el programa ejecute ejecute aprenda y cuando apagues el programa olvide todo aquello que he aprendido este es el reto en este caso de la persistencia entonces voy a ir a brackets y vamos a ver que de hecho existen algunos mecanismos mediante los cuales yo puedo conseguir persistir en javascript vamos a eliminar para qué cosas vamos a hacer un nuevo archivo voy a guardarlo me voy a aplicaciones me voy a mamá me voy a 72 inteligencia artificial ejercicio 9 y en el ejercicio 9 voy a guardar este archivo como index.html y sin hacer mucho más aparte de que voy a abrir el mapa por supuesto que sí pero vamos a ok bien lo que voy a hacer ahora es poner localhost y contraseña también el localhost barra inteligencia artificial ejercicio 9 entonces en esa posición no hay nada evidentemente en la pantalla y lo que voy a hacer ahora es que voy a inspeccionar y al inspeccionar voy a ir a una pestaña que actualmente recibe el nombre de application o aplicación dentro de aplicación encontramos aquí que hay una serie de opciones llamadas storage es almacenamiento así que tenemos una metodología llamada local storage tenemos un session storage tenemos un indec debe una base de datos indexada y tenemos una base de datos que se llama el web sql que realmente es por dentro sqlite en dentro de las bases de datos basadas en sql hay una que es sencilla que es ligera pero que es muy utilizada que es web sql y luego hay otra alternativa y otro medio que son las cookies en este caso los dos medios principales de guardar datos con javascript son index debe y son jueves sql donde teóricamente según el estándar de hace cosas como de 7 años por ahí teóricamente de estas dos la que se debe quedar en los navegadores es index debe y teóricamente la que debe perder el soporte con el paso de los años es 9 sql sin embargo lo que está ocurriendo es lo contrario lo que está ocurriendo qué mueve sql que insisto al final es ese culito y ese culito se usa un montón de en un montón de contextos pues web ese cual es la que se está quedando como base de datos porque además luego si estamos en el javascript y vamos a otro lenguaje de programación en muchos casos nos vamos a encontrar o bien bases de datos basadas en sql o bien directamente nos encontraremos con ese culito por eso es por lo que según el estándar según la oficialidad digamos usar web sql no es seguro también digo que si vamos revisando el estado de los navegadores y luego de cuando en cuando veremos que en los navegadores principales no hay intención de soltar el soporte para web sql tenemos que pese a que no es el oficial al final yo considero que es mucho mejor no sólo para guardar datos sino luego ahora veremos para almacenar para recuperar esos datos así que vamos a hacer una primera conexión con 9 sql y vamos a ver cómo trabaja por dentro así que webb sql simple example mientras tanto a preparar un archivo ml voy a hacer un script y ahora vamos a ver este vale correcto que este mismo muy bien pues claro se llama un poco filtro vale como vemos el lenguaje no es muy complejo en el sentido de que crea una base de datos le pone un nombre en este caso voy a llamarla es prueba le pone una versión una descripción vamos a verlo en este caso es base de datos de prueba y le asigna un número de bytes en este caso es 2 x 1024 son 2 megas perdón son dos casas quería decir 2 kilobytes porque el 24 son kilo x 1024 son 2 megas esto quiere decir que al abrir una base de datos estoy indicando exactamente cuántos elementos cuánta memoria máxima quiero almacenar y ahora a continuación ejecutó una transacción y en la transacción o sea si he creado la variable debe y a la variable debe le asignó abrir la base de datos luego tengo debe punto transacciones que ejecutó una transacción y a partir de aquí lo que hago es ejecutar una sentencia sql voy a crear una tabla recordemos que web sql al final trabaja con sqlite vale entonces ese coli trabaja con tablas como la gran mayoría de bases de datos basadas en sql y dice crea una tabla si no existe previamente llamada agenda vamos a empezar con la agenda y creo un ide único creo un nombre creo unos apellidos y creo un teléfono lo que estoy haciendo es alojar una base de datos así que ahora lo que hago es vamos a ver por aquí esto se ha activado un poco de audio vamos a silenciar vale entonces a partir de ahí lo que hago es recargar y en webb sql compruebo que ahora existe una base de datos llamada prueba evidentemente tengo que recargar para que ese código se ejecute pincho en prueba y en prueba me doy cuenta la base de datos prueba me doy cuenta que hay una tabla llamada agenda y evidentemente la tabla agenda ahora mismo está vacía porque he creado la tabla pero no ha llegado contenido así que como podemos ver con estas sencillas líneas de código he creado una base de datos y he creado una tabla para esa base de datos ahora a continuación lo que voy a hacer es insertar algo de contenido técnicamente puedo copiar y pegar esta transacción y puedo decir insert gene sharp en tu agenda values y voy a poner null y voy a poner nombre jose vicente coma carratalá como el teléfono un teléfono tengamos en cuenta que ese aquí usa una comida sencilla aquí estoy usando una comida doble para no cerrar por accidente estas comillas sencillas vamos a ver se ha funcionado entonces por supuesto vuelvo a ejecutar el código y ahora observo que el ide no ha funcionado correctamente no pasa nada ahora luego puedo meter ahí donde poner null pues puedo poner un 1 por ejemplo recargo y ahora si veo que tengo el segundo registro recordemos que el ide era único con lo cual en siguientes registros no puedo duplicar ese mismo y de vemos que ya estoy en este caso guardando datos ahora por ejemplo puedo decir que quiero guardar con el número 2 quiero llamará javier ayer lópez con otro teléfono si ahora ejecuto de nuevo veremos que ahora tenemos a javier lópez con otro número de teléfono pero para lo importante de esto ahora lo interesante de esto es que yo puedo dejarme copiar esta url yo puedo hacer esta página incluso puedo cerrar este pez de esta pestaña y esta pestaña de aquí ahora volveré a ella cálculo y vuelvo como si cerrara mira voy a cerrar con totalmente y aquí está y ahora vuelvo a abrir y sea como si fuera el ordenador y lo apagara y no lo abriré hasta dentro de un mes da igual porque yo ahora lo que hago es volver a ejecutar ese ejercicio me voy a volver a inspeccionar y me voy a application y compruebo como tengo ahí de nuevo los datos que he guardado antes es decir con estas sencillas líneas de código lo que he conseguido de momento es persistir es guardar la información de una forma que la pueda recuperar siempre que yo quiera guardar la información de una forma y en un formato además que ya veremos a continuación que es el formato sql con el cual luego poder recuperar datos de este ejercicio pues va a ser relativamente sencillo vamos a hacer eso a continuación para a continuación lo que voy a hacer es que quiero crear un ejercicio vamos a crear un segundo ejercicio dejar ese mal esto llamó como index.html pero pero lo que quiero es si ya he sido capaz de escribir ahora quiero leer más adelante incluso que remó dif y cars vale pero quiero dos operaciones básicas que son escribir y luego leer así que pongo web sql simple example a este por ejemplo me vengo por aquí y creo que voy a hacer y aquí está este voy a copiar este cacho de código respondo a la página funciones me parece que la publicidad le cuesta mucho cargar y me vuelvo aquí de hecho como es el ejercicio y ya he creado la base de datos puedo eliminar ese trozo de código y me quedo únicamente con el fichero y entonces ahora lo que hago es select el from agenda si el comando insert me sirve para insertar elementos en una base de datos el comando select me sirve para recuperar elementos de una base de datos así que en este caso me dice bueno vamos a ver hay una variable llamada mensaje hay una variable llamada longitud que básicamente lo que hace es que de hecho hay una variable así que me dice que la longitud es la cantidad de elementos que devuelve la base de datos es decir si resulta y ahí está aquí resulta es un parámetro de la función pues resulta punto rose es la cantidad de filas que ha devuelto a la base de datos y links realmente es esa cantidad de ese número así que me 6 es una variable que podría poder bar por ejemplo que básicamente es el mensaje documento cuenta y selector requiere que haya un elemento llamado status así que vamos a crearlo y b estatus y dice que le añada el mensaje y a continuación y a continuación lo que hace es alert vamos a ver pues negar lo que hace es results.com punto ítem punto los puntos punto en los punto el ojo en el punto de lo que es el que no me cuadra así que voy a hacer una cosa con solo un tono y vamos allá ahora cargo del ejercicio index 2 y me dice found rose 3 he encontrado tres registros found rose evidentemente no puedo cambiar estos encontrados y ahora si me voy a la consola en la consola pone 3 andy fans vale esto quiere decir que ha hecho 3 con soles pero realmente vamos a ver results punto row y tv y esto es lo que no me acaba de cuadrar mucho entonces lo que hago es rose day vamos a verlo recargo y ahora esto me empieza a cuadrar un poquito más porque ahora lo que estoy haciendo no sé por qué ese ejemplo estaba así pero no seguro que había alguna razón para ello pero ahora lo que quiero por ejemplo es decir y ahora quiero el nombre recargó creo que tengo 2 jose vicente y un javier ahora quiero el teléfono pues tengo los teléfonos o puedo decir que quiero punto nombre [Música] puedo decir que quiero apellido apellido apellidos apellidos plural más y teléfono y así comprobamos como es cierto que podemos recuperar todos los datos que hay en la base de datos bien una vez que tenemos esto ya hemos demostrado como somos capaces de almacenar información y como somos capaces de mantener esa información guardada para luego más adelante poder recuperarla bueno pues a continuación vamos a recuperar el ejercicio anterior y vamos a ver cómo podemos aplicar lo que hemos aprendido hasta ahora para mejorar este ejercicio anterior

si recuperamos el último ejercicio vamos a verlo por aquí vamos a ver knox diligencia artificial vamos a ponerlo por aquí el ejercicio 8 voy a duplicarlo se va a convertir en ejercicios tenía la particularidad de que era capaz de reconocer formas ejercicio días pero sí bien y era capaz de almacenar todos estos registros en un archivo en un archivo ahora mismo en ninguna parte en el serie de estadísticas ahora lo que quiero es que si yo alimento al sistema con una serie de elementos con una serie de imágenes en este caso vamos a empezar por algo sencillo el sistema elabore un registro de lo que ha aprendido es decir ahora mismo yo no estoy todavía haciendo que el sistema tome decisiones yo como ser humano por ejemplo recordamos que si alimento al sistema tenemos saberlo ejercicio díaz y cambio a círculo vengo por aquí [Música] cierro esto de momento dar lo abriré me voy a ejercicio 10 index y en lo que hago es decirlo el programa que las imágenes círculo recargo y ahora lo que quiero es decirle al sistema que almacene cuál es la proporción entre horizontales verticales diagonales y tal realmente nosotros ahora mismo según este método de cálculo que hemos visto en principio podríamos como seres humanos interpretar que 0.8 0.81 parece correcto verticales 0.3 no parece que sea demasiado correcto porque decimos 16 un círculo debería tener el mismo número de verticales diagonales está ahora mismo lo cierto es que aunque es una buena observación ahora mismo da igual por qué o sea las personas cuando aprenden no aprenden sobre la realidad aprendes una percepción entonces el sistema ahora mismo está percibiendo que esto es así y aunque nosotros podamos concebir que objetivamente no es correcto lo cierto es que si finalmente el sistema parte de una percepción incorrecta pero esa percepción incorrecta le permite tomar decisiones correctas finalmente porque entraríamos en el debate de qué es la verdad realmente y tampoco quiero entrar en ese debate porque pues realmente sería infructuoso para lo que ahora estamos hablando no digo que no sea sano digo que sea infructuoso para hablar de la inteligencia artificial en general pero para este ejercicio podemos resolverlo perfectamente siendo que en verticales hay un 0,3 porque no solamente es a lo siguiente y es que nos le vengo por aquí y cojo círculo 2 por ejemplo j vejez recargo cargamos círculo 2 y pone 0 3 18 y 8 y nos damos cuenta que el círculo es más pequeño de lo que toca es más más pequeño lo que era antes es decir se cumplen la proporción y si se cumple la proporción lo que quiero es que el programa cuando vea una forma que tenga 03 10 noche 0.8 diga esto es un círculo si ahora cogemos un cuadrado qué estás aquí y recargamos el programa técnicamente ahora mismo no va a ver que es un cuadrado pero va a ver que las proporciones han cambiado entonces de lo que se trata ahora es de enseñarle al programa que es un círculo y que es un cuadrado vamos a empezar con estas dos cosas así que ahora establecemos un proceso de aprendizaje pero en este proceso de aprendizaje ahora lo importante es que el programa sepa guardar resultados porque yo al mismo cierro este esta pestaña el programa está olvidando todo lo que ha aprendido en tres pero si yo le pongo una segunda imagen olvida la primera y se le pone una tercera olvida la segunda y eso al final pues no me sirve de mucho realmente lo que quiero es que cada imagen que yo le alimento al sistema el sistema la pueda recordar ahora a continuación lo que voy a hacer es lo siguiente vamos a ver vamos a combinar el código de estos dos ejercicios y al final del todo al final del todo aquí está al final del todo yo vengo por aquí me voy a archivos recientes ejercicio 9 vale y yo digo en una base de datos en una base de datos y creo una tabla tenían una tabla y esto es pues reconocimiento para llevarla a uno en estas bases de datos del reconocimiento de formas así que crea tablas y no existe forma de formas y de único esto me voy a saltar y digo en nombre verticales horizontales diagonales 1 diagonales 2 y por último yo lo que hago es decirle al sistema el copio insert into formas values y ahora si tengo ahí 1 2 3 4 y 5 1 234 y sí y aquí vengo y por qué y me escapo y me escapo y en el escapó y me escapo para combinar la cadena con variables técnicamente en la primera parte esto es círculo de dientes algún círculo bueno extra cuadrado cuadrado y ahora pongo e verticales es n v horizontales estas diagonales 1 y este es diagonal esto es lo que estoy haciendo ahora es que si yo vengo aquí y ahora recargo este mismo ejercicio todo es igual hasta el momento pero si yo ahora me voy a aplicación y en aplicación me voy a web sql y me voy a formar comprobaré como ya estoy guardando esta información en una base de datos y le estoy diciendo las proporciones que tiene ese elemento con respecto a lo que debería tener bien ahora a continuación lo que quiero es que el sistema aprenda y quiero que aprenda de una forma similar a cómo ha aprendido en los ejercicios anteriores los ejercicios anteriores el programa lo que ha hecho es aprender de una forma muy concreta ha aprendido bueno pues básicamente como diríamos repitiendo muchas veces una cosa así que yo ahora lo que tendría que hacer es alimentar le al sistema con muchas imágenes de cuadrados y muchas imágenes de círculos voy a hacer un poquito de entre comillas trampa vale no voy a hacer trampas realmente lo que voy a hacer es generar yo mismo las imágenes de forma automatizada para no irme ahora a un programa como photoshop y tirarme media hora haciendo círculos podría hacerlo pero en este caso es más fácil si hacemos un pequeño programa que nos ayude a continuación voy a crear un pequeño programa lo voy a guardar dentro de ejercicio 10 lo voy a llamar como generar formas 1 html y voy a escribir el siguiente código ambos pienso uy cuál es el wish que estoy cogiendo en las imágenes 500 entonces el proceso intro píxeles height es igual a 512 píxeles y ahora script y digo bar contexto es igual a documento punto grado elemental aire lienzo punto context 2 d ahora contexto punto fil recto y va a ser más punto random por 512 punto random por 512 coma más un tornando por qué vamos a hacer una cosa 256 256 por 256 más puntos random por 256 y con esto si ahora esto es generador forma 1 punto html cada vez que recargue tendré un rectángulo diferente entonces que ocurre pues que esto me va a permitir ver y curioso esto me va a permitir hacer lo siguiente de acuerdo la imagen me la guardo en ejercicio 10 me la guardo en y aprendizaje y esto va a ser cuadrado esto va a ser recargo esto va a ser cuadrado 2 recargo esto va a ser y así el momento cuadrado 3 vamos a generar múltiples imágenes cuadrado 4 [Música] qué curiosa esta imagen vamos a ver qué sale de aquí cuadrados 60 diría esta no vale pero porque no es un cuadrado al final cam pero son cuadrados un jugo más no sé qué importante sí que importa porque una cosa es un cuadrado yo soy el entrar con un rectángulo todo en el cuadrado no es una cosa vamos a hacerlo bien tenemos un rectángulo y otra cosa es otra cosa entonces me voy al código y digo la anchura rondón 1 un chulo y ahora solo un cuadrado más grande o más pequeño por un cuadrado eres cuadrado 2 hijo cuadrado 6 27 28 9 y cuadrado 10 con esto ya tengo 10 cuadrados ahora yo lo que podría hacer y los estoy alimentando como material de aprendizaje es guardar esto como generador 2 html y quiero copiar y pegar esto para decirle al sistema que contexto punto de kim paz contexto punto arc voy a ser más punto random 256 porque mientras como más en cuando por 512 más fondo random por cien por ejemplo con acero como marc y por 2,3 y contexto punto close pub si todo ha ido bien ahora me voy a generador de formas bien es lo que ocurre y contexto punto field y tengo un círculo así es que esto va a ser círculo 1 y me guardo el círculo me guardo el círculo s no porque está cortado 4 5 con los 6 los 7 mucho círculo 9 y el círculo abierto antes de continuar cuando suelo hacer esto la gente dice bueno es que esté un poco trampa o solo están un poco preparados porque dejamos jamás trabajabas que te lo quita estás hablando las en las imágenes que trabajaba speed en este caso mi respuesta es sí y no por cierto cierto estas imágenes quiero abrirlas en él para comprobar si tienen transparencia o no vale tienen transparencia lo que yo estaba cargando aquí jpg pues voy a cargar todas las imágenes en el químico porque al final lo que está cargando el sistema son imágenes entonces cuando ahora nuestro sistema cargue las imágenes realmente el sistema no sabe de dónde han salido esas imágenes es decir no sabe si son círculos que ha generado javascript círculos que haya pintado en photoshop o círculos que yo he pintado donde quiera por eso estoy haciendo trampa aunque parezca que se está evaluando lo que ha hecho javascript no es realmente así entonces voy a exportar esto básicamente los estoy convirtiendo al jpg pero a continuación tendremos que hacer dos tandas de aprendizaje y ahora que lo tenemos como jpg es cuando a continuación en la siguiente parte mejora este programa ahora si tenemos ya todo como jpg y png muy bien se ha guardado con el formación se ha guardado con el fondo negro porque alguien tendría el fondo negro vamos a traer estas imágenes estoy abriendo las imágenes y a ver vamos con las imágenes voy a hacer una vida segura no más que no parezca aunque no se haya actualizado el resultado pero por esto previa parece que me estáis en lo que sí no vale vamos allá y ahora en cuanto acabemos esta fase lo que vamos a hacer es entrar en la fase de entrenamiento dónde vamos a alimentar de forma automatizada evidentemente todas y cada una de estas imágenes al sistema gracias a todo esto está en pensar que estamos haciendo está este entrenamiento y luego evidentemente tenemos que demostrar que el entrenamiento ha valido de algo tenemos que poner el sistema a prueba y comprobar que es capaz de distinguir círculos y cuadrados pero si nos fijamos este mismo esquema que hemos hecho este mismo software que hemos desarrollado nos va a servir para evaluar qué es un ojo que es una boca que esa nariz que es una cara que es prácticamente cualquier otra cosa lo que estamos haciendo que todo estado que lo que estamos haciendo es empezar con un par de formas muy controladas para asegurarnos que comprendemos los resultados que el sistema va extrayendo bien ahora en ejercicio 10 voy a guardar esto como index.html y lo que quiero ahora es que el sistema entre en un bucle donde cada vez vaya y cogiendo una imagen diferente así que voy a hacer lo siguiente esto es función dibuja vale así que yo ahora voy a hacer lo siguiente y voy a decir que bar temporizador es igual a dibujar entonces al final del todo y voy a decir dentro de nuevo en el bucle con clear time out temporizador y se time out dibuja y quiero que me lo ejecute dentro de 10 segundos de hecho con solo punto log interacción si ahora recargo vamos a index.html el sistema tarda lo que tiene que tardar y dice nueva iteración es lo que va haciendo que va a ir haciendo es repetir este esquema cada 10 segundos puesto 10 segundos más que nada para darle tiempo a que procese la imagen eran 10 segundos me dije nueva iteración cuidado con la base de datos sql porque probablemente se va a ir llenando de hecho se va llenando con el mismo dato cosa que tampoco me interesa ahora mismo lastra porque es exactamente la misma imagen ahora vaciar la base de datos de la forma vamos a ver qué es controlar mayúsculas r evento y al hacer control mayúsculas ere pues la base de datos se vacía control mayúsculas r es lo mismo que pulsar botón derecho y volver a cargar de manera forzada que es básicamente vaciar la caché vale entonces esto es lo que hace que bueno en este caso no sea siempre lo puedo eliminar manualmente puedo hacer nada chivo que elimina normalmente ya está pero ha sido raro en fin vale a lo que vamos ahora lo que quiero es que cada vez que pase por aquí imagen cuadrado esto va a estar dentro del bucle y ahora vengo por aquí y digo bar número de imagen es igual a 1 y digo en mi imagen efe rf es igual a a número imagen y al final del todo al final del todo dijo número imagen más más para que cada vez que entra en este bucle coja una imagen diferente si esto ha ido bien vamos a cerrar el siguiente vídeo si el ejercicio anterior- aire correctamente ahora el sistema lo que va a hacer es computar la primera imagen a ver un momento momento porque hayan acogido nada vamos a verlo de segundos cuadrado 2 jpg así claro claro y esto es porque el archivo está en la carpeta de aprendizaje vamos allá recargamos ha cogido 0 0 y 1 vale no lo sé el siguiente 0 0 y 1 el caso es que no está cogiendo la imagen correcta punto jpg porque me cuadra porque cuadrado y punto jb casos que la imagen sí que debería estar cogiendo la vamos a aplicar el carbón aprendizaje cuadrado 1 punto jpg cuadrados punto jpg algo me dice funcionando imagen sí claro fantástico esto es imagen al principio es el número uno y ahora esto lo pongo al final para que le dé tiempo a cargar la siguiente imagen esta imagen número 2 y temporizador de 10 segundos y digo yo que en mis segundos haber dado tiempo para cargar la primera imagen vamos a verlo esto ya es otra cosa bien veo que se cumple esa condición de que las horizontales verticales prácticamente están a 1 mientras que las diagonales están cerca de cero por el problema dos rectángulos vale ok no tengo muy claro guardado la siguiente iteración ahora sí y vemos qué bueno 0,2 0,2 pero se cumple que las horizontales son las que más vale bueno pues parece que esto está en funcionamiento ahora voy a hacer este pequeño script que me permita vaciar la base de datos para que no de momento ahí se empieza a refrescar 0.03 vale muy bien pues vamos allá entonces voy a crear un nuevo archivo voy a guardarlo como vacía la base de datos punto html pues necesito el archivo el ejercicio 9 este la base de datos es la base de datos es esto y la transacción es drop table formas entonces vengo por aquí como esto nací a base de datos html de repente está procesando la gloria como si hubiera entrado en un bucle infinito y no lo haría porque de hecho voy a hacer una cosa voy a abrir esto en un documento vacío vale sí parece que se había quedado en el sándwich inspeccionamos me voy a application me voy a inteligencia artificial vale veo que inteligencia artificial no existe pero está vacío así que ahora es cuando ahora sí me voy a index 2 html y voy a empezar a meter las 10 imágenes de círculos insisto estamos en la fase de aprensión ag es la fase de aprendizaje no deberíamos contentarnos con diez círculos o diez cuadrados si metemos 1000 mejor que mejor y de hecho el sistema fijémonos que de esta forma es así yo cogiera una librería de por ahí por internet que ya hablaremos de esto pero si no la librería de proyecto por internet de mil círculos o de un millón de círculos que será alimento y el programa va aprendiendo yo como mucho voy mirando esta tabla para asegurarme que es bueno los retos que salgan son los que yo espero que salgan aunque esto es un poco la parte delicada del aprendizaje o la orientación es decir yo no estoy para decirle al sistema lo que tiene que salir porque es lo que tiene que salir está la informática tradicional sino que en cierta forma tengo que respetar que si el sistema llega a estas conclusiones pues el sistema de sistema llega hasta conclusiones vale entonces tengo ya 5 por ejemplo aquí tengo un 0.03 ya que tengo 0,3 pero yo digo esto esto es lo que sale entonces cuando trabajamos con inteligencia artificial y cuando lleguemos a este punto es muy bueno pues que no sabe lo que tiene que salir muchas veces cuando nos paramos a pensar como vimos nosotros nos damos cuenta de que vemos incorrectamente la mayoría del tiempo pero esto no nos impide llegar a conclusiones o sea corremos el riesgo de intentar aplicar a la inteligencia artificial los paradigmas de la programación tradicional y no deberíamos 9 y por último para cuando lo haga mal y por último iremos con el 10 y ahora haré lo mismo con los círculos vale vamos allá y 10 venga ahora anuló esta url tengo aquí index 2 hago un nuevo archivo y lo guardo index 3 punto html pero y ahora básicamente lo que quiero es decirle al sistema un momento estará cuadrado y yo que creador o sea yo he creado el cuadrado el círculo ah cuba cuadrado de los males muy bien que va a ser medio círculo podría hacer pues harán index 3 quiere decir lo del sistema que esto es círculo 1 esto es círculo y esto es círculo y a ver qué pasa así que ahora a cargo index 3 y vamos allá el sistema está aprendiendo yo lo único que puedo hacer es observar el sistema tiene ya una pequeña base de datos de cuadrados ahora está cogiendo una base de datos de círculos pues bueno observó que los horizontales siguen siendo los que más aparecen pero la proporción de verticales e diagonales pues cambia pues bueno pues lo que sea me espero a que el sistema de aprenda me espero a que el sistema cargue los diez círculos como si hubieran sido mil círculos y al final el sistema lo que está haciendo es pues empezar a crear una base de datos e de cuadrados y de círculos de momento qué vamos a hacer en la siguiente parte del ejercicio nuestra siguiente parte del ejercicio evidentemente como podemos esperar lo que va a ocurrir es que vamos a plantear en la pantalla un cuadrado o un círculo y le vamos a hacer al sistema que es esto y el sistema mediante lo que ha aprendido anteriormente de que es un cuadrado de que es un círculo debe hacer una estimación lo importante de todo esto es que yo no le habría dicho al sistema que es un cuadrado que es un círculo yo no se lo he dicho lo que he hecho es simplemente enseñarle al sistema muchos cuadrados enseñarle el sistema muchos círculos y dejar que el sistema llegue a su propia conclusiones de qué es un cuadrado y qué es un círculo y esta es la idea de la inteligencia artificial la idea del ente gente artificial no es que yo le diga al sistema lo que tiene que buscar porque para eso ya está la la programación los paradigmas de programación tradicionales la gracia de la inteligencia artificial está en que el sistema sea adaptativo y el sistema sea capaz en base a una serie de herramientas que le proporcionado por supuesto pero sea capaz de llegar a sus propias conclusiones de que es un cuadrado y que es un círculo y ahora a continuación veremos evidentemente esas conclusiones son correctas o no lo son creo que ya debemos estar casi íbamos para nuestra licitación 21 porque la iteración 10 estaba duplicada creo más pero un poco como mucho a agradar a un error ya está muy bien y ahora lo que ocurre ahora paremos la ejecución pero vamos a poner el index normal era lo que ocurre ahora cuando al sistema cargue pero qué ocurre como digo es que tenemos una base de datos el sistema tiene ya una memoria interna de qué es un círculo y qué es un cuadrado en base a cuatro parámetros otra cosa que quiero decir es que yo no quiero decir que la única forma de trabajar el reconocimiento de forma sea con un vertical horizontal y los diagonales son cuatro ficheros que yo he puesto encima de la mesa que se suelen usar mucho en reconocimiento de formas inteligencia artificial pero que se pueden usar las que se quieran porque porque diagonal y porque vertical pues porque podría haber sido cualquier otra porque son cuantificables porque son entendibles fácilmente pues la idea está en que porque tengo que usar cuatro podría usar 20 pitchers porque tienen que ser diagonales cocientes el circulito si el rectángulo si yo que se vale es decir la idea es que hay diferentes conjuntos de validación que lo que he hecho es poner una encima de la mesa que suele ser el clásico el típico el tópico el que mucha gente usa pero puedes probar tus propios ficheros puedes cambiar el número de ficheros y puedes probar el resultado que pueden dar o que pueden dejar de dar

bueno pues ahora en la siguiente parte del ejercicio lo que tengo que hacer voy a duplicarlo por cierto ejercicio 10 ejercicio 11 vale pues en la siguiente parte del ejercicio lo que tengo que hacer es decirle al sistema que vamos a ver hay estados que quiero introducirle un círculo y quiero que el sistema me diga si ese elemento es entonces un círculo un cuadrado y quiero que el sistema me diga si eso es un círculo o un cuadrado o qué es entonces me voy a ir a brasil al quinto por qué no voy a crear una imagen nueva de 512 por 512 eso sí para que la imagen sea comparable voy a rellenar la rebelde blanco ya está y ahora voy a dibujar un círculo por ahí por donde sea que lo rellenó de negro no seleccionó nada y lo exportó como pero ya archivos aplicaciones puede saber por nombre este box e inteligencia artificial ejercicio 11 y voy a llamar esto como evaluación 1 punto jpg así que ahora le voy a exportar y ahora quiero decirle al sistema elimino lo que sería el bucle voy a abrir ejercicio 11 index 3 lo voy a guardar como index 4 y vamos a ver esto es evaluación punto jpg me cargo toda esta parte de aquí para que sólo el ejecutó una vez me cargó esta parte de aquí y la inserción momento vamos a verlo ahora yo voy a recargar esto es ejercicio 11 index 3 de estrés creo que es el html y ahora me voy a encontrar con lo siguiente esto es lo que soy yo no me suena que eso sea lo que soy yo invex 3 jaime x 4 inverso 4 bien me dice que la imagen es broker porque la imagen no está en aprendizaje está fuera de aprendizaje ejecutó ahora e vale está en broker y me dice que evaluación punto jpg no se ha encontrado vamos a ver por qué ejercicio 11 a evaluación uno es evaluación al recargo y al recargar vamos a ver ahora me dice que vale mismos ahora me dice que esta imagen sea lo que sea tiene esta proporción y esa imagen sea lo que sea la debo contrastar contra esto que estoy viendo en la pantalla pero como la puedo contrastar pues vamos a ver a continuación diferentes técnicas mediante las cuales lo podemos contrastar y que nos permiten hacer que ese trabajo sea lo más fácil posible ahora a continuación voy a hablar voy a recuperar el concepto de s como idea el concepto de sin muy de en este caso va a ser muy fácil de aplicar no voy a aplicar ni siquiera puramente la secc muy bien porque yo ya he normalizado estos valores previamente ya los he colocado entre un rango conocido que es 0 y 1 y esto es lo que hacía realmente la secc 9 que era normalizar los valores en este caso lo que voy a hacer es aplicar varias estrategias una de ellas la más sencilla de todas va a ser redondear y yo voy a decir que cuando voy a asumir que esto que tengo aquí es cuatro neuronas les voy a asumir que cuando una neurona sea mayor o igual que 0,5 esto no está encendida y cuando una neurona sea menor que 05 la neurona estaba apagada así que lo que voy a hacer es ver cuando se me activan o se desactivan las neuronas a qué corresponde el estímulo es una manera de hacerlo en este caso va a ser con sql entonces en este caso lo que voy a hacer es lo siguiente me voy al código donde está el código aquí está y ahora voy a hacer lo siguiente me voy aquí me voy a abrir en el ejercicio 9 creo que es el archivo 2 es este de aquí vale y ahora quiero lo siguiente ahora quiero select enfermera cosa voy a ver de hecho incluso si puedo tenemos aquí con formas ahora se les paul formas web nombre es igual hombre es igual eres h formas en web un hombre es igual a círculo y me da una serie de formas ahora yo lo que quiero es decirle al sistema que no me deja es copiar bueno me dejas copiar select all from select round verticales from formas y lo que hace esto es redondear los números a 1 a 0 entonces en este caso lo que voy a hacer es decirle al sistema que quiero hacer lo siguiente código 24 aquí from formas realmente lo que quiero es la palabra forma quiero nombre quiero nombre son formas aquí cuidado porque si hago esto lo que ocurre es que se pierde al entrar tengo que hacer esto selección hombre transformas para pasarlo a varias líneas where ronda y verticales es igual verticales estuve aquí anda round horizontales de negarse muertes a mí y ahora lo mismo por aquí lo mismo por aquí diagonales 1 diagonal estos m 1 en excesos y aquí ya nos encadenamos o sea que si encadenamos con un límite cuidado cuidado porque esto tampoco vale esto es más punto round igualmente tengo que redondear los hierros donde uno redondeo el otro y eso si todo va bien y si todo va bien nervioso va bien ahora recargo a ver ahora [Música] registros encontrados esto no es necesario prueba pero por si acaso pero no aquí y de estatus dolor ya la consola en la consola yo digo el nombre sólo quiero el nombre es nombre cellectricon tres nombres pues vamos allá recargamos el sistema está calculando dole verticales horizontales diagonales nuestro fuera vale y ahora lamento lo que ha hecho es que no he entrado en ninguna parte lo cual me extraña voy a hacer una cosa dar y sql es igual a esto esto es mi sql esto es mi sql quiero con sole punto log y sql más que nada para comprobar para confirmar que estoy cargando lo correcto porque en una petición sql pues evidentemente vale vamos a ver se le nombre transformas en s wear falta de espacio para empezar ay salta un espacio luego hay falta un espacio y fotón espacio y falta de espacio y falta un espacio vamos a recargarlo y bueno aunque parezca que no pero ya tenemos en la pantalla el resultado de la operación ahora que la sentencia secuela es correcta nos dice lo que tienes en la pantalla es un vamos a verlo mejor si quieres lo que tienes en la pantalla es un más esto de aquí vamos a poner espacio recargamos y lo que tienes en la pantalla es un círculo pero no me he quedado contento digo y si esto ha sido casualidad vamos a probarlo más a fondo así que vengo por aquí deshago y ahora dibujo otro círculo diferente de otro radio en otra parte de la pantalla otro círculo lo pintó de negro puedo probar hoy es el pinto de gris pues no se puede probarlo a ver qué pasa esto es evaluación 2 me vengo al código le digo que ahora quiero ejecutar evaluación 2 recargo la pantalla y comprobamos que de hecho el círculo que va a salir realmente esa evaluación 2 y me dice lo que tienes en la pantalla es un círculo vale vamos a continuar en este caso parece que está reconociendo bien el círculo pero y si todo lo reconoce como círculo vamos a poner un cuadrado y vamos a comprobar si lo sigue reconociendo como un cuadrado o sea como un círculo o lo reconoce como un cuadrado entonces me vengo por aquí aquí y voy a dibujar un cuadrado hola quiero que sea proporción [Música] ahora se dibuja un cuadrado ahí porque ahí pues porque yo que sea luego dibujamos otro y lo llamo evaluación 3 y me vengo por aquí me vengo al código evaluación 3 recargo y dice lo que tienes en la pantalla es un cuadrado y si ahora vengo por aquí voy a hacerlo otra vez voy a dibujar otro cuadrado diferente z un cuadrado más bien por aquí si en este caso estoy manteniendo que se ha encuadrado porque descripción del sistema que es un cuadrado no que es un rectángulo bueno por aquí evaluación 4 aquí cambio el código cambiado evaluación 4 recargo en la pantalla pongo en este cuadro para asegurarme que el que va a salir realmente es el correcto es el último que he creado y me dice lo que tienes en la pantalla es un cuadrado es decir tenemos ya un sistema mediante el cual de una forma bastante rugosa de momento evidentemente pero el sistema puede saber mediante cuatro neuronas y mediante dos formas sencillas distinguir entre un cuadrado y un círculo es interesante desde el punto de vista en el que este sistema es perfectamente escalable es decir lo he hecho lo más sencillo posible para que quede ilustrativo para que para ilustrar el concepto de que yo no le he dicho al sistema que es un cuadrado y que es un círculo y es más y ahora mismo podría ni saber los datos a los que el programa ha llegado se podía información podría ser totalmente interna y de hecho como había avanzado anteriormente yo puedo no estar de acuerdo con estos datos que en la pantalla pero que los que funcionan pues si el sistema detecta con un cierto vías con un cierto desfase los círculos en la fase de aprendizaje pues aplica ese mismo desfase en la fase de evaluación y el resultado es correcto entonces como digo lo que estoy haciendo es ejecutar un sistema sencillo desde el punto de vista en que tengo cuatro neuronas únicamente tengo una sola capa de neuronas y tengo dos formas y además en la fase de aprendizaje lo que he hecho es decirle al sistema bueno que lo único que quiero es en este caso después meterle 10 círculos y 10 cuadrados y fijémonos que esto ha sido suficiente como para que el sistema sepa identificar correctamente qué es un círculo y qué es un cuadrado

anteriormente hemos hablado del concepto de que el software debería en definitiva correr de una manera paralela o haciendo que cada neurona no corriera de forma secuencial con respecto a las demás sin embargo hasta ahora los ejercicios que hemos desarrollado realmente no corren así sino que corren de forma completamente secuencial bien pues de esta forma a continuación lo que voy a hacer es poner sobre la mesa una serie de técnicas que nos permiten realmente implementar el paralelismo arafo ahora mismo ocurre lo siguiente si yo abro el monitor de actividad básicamente este monitor de actividad me permite y saber cuál es el rendimiento de la cpu en este caso tengo en este equipo un procesador intel i5 esto quiere decir que el procesador de cuatro núcleos pero el software que desarrollado ahora mismo no es capaz todavía de aprovechar esos cuatro núcleos este software es secuencial y cuando digo que es secuencial lo que quiero decir es que realiza las tareas una detrás de la otra no realiza las tareas de forma paralela así que elimina unos cuantos ejercicios vamos a abrir por ejemplo vamos tengo ejercicio abrimos el último archivo que tengamos podemos hallar y lo que ocurre en este caso es que si seguimos la ejecución de este ejercicio nos daremos cuenta que primero se ejecuta algo y luego se hace otra cosa y luego se hace otra cosa y luego se hace otra cosa y luego se hace otra cosa es decir el software ahora mismo es secuencial no es paralelo y esto quiere decir que el software ahora mismo está funcionando pero no estamos implementando la filosofía de la que he hablado anteriormente que consiste en simular el comportamiento paralelo de las neuronas del cerebro arenal así que como digo a continuación voy a presentar una metodología que nos permite precisamente trabajar de una forma paralela y nuevo secuencial esta metodología que consiste en utilizar los múltiples núcleos de un sistema en este caso en el lenguaje que estamos trabajando recibe el nombre de workers digamos que son como trabajadores así que voy a hacer lo siguiente voy a guardar este archivo dentro de esta carpeta vamos a crear una carpeta nueva ejercicio 12 esto va a ser index.html y creó un archivo esto esto efe esto de aquí bien a continuación voy a especificar lo siguiente voy a crear un nuevo archivo y este archivo lo voy a guardar en la misma carpeta con el nombre que quiera realmente voy a poner trabajador punto j s en algunos ejercicios suelen poner el nombre de worker js pero cuando hago eso la gente cree que es que el archivo se tiene que llamar worker punto j s y no es así el archivo se puede llamar como queramos eso sí tiene que acabar en j s así que a continuación lo que voy a hacer es que voy a ir al google por ejemplo ah voy a ir a la cruz y voy a poner porque eres javascript workers valoramos la guía de mozilla y vamos a algún ejemplo de código estás voy a este ejemplo hoy aquí y el body voy a ejecutar un script que va a hacerlo 7 en este caso en este caso lo que voy a hacer es decir que creó un my work en que un trabajador y le digo que es igual a new work air en este caso lo que suelo hacer es cambiar todo aquello que puedo a castellano para que quede claro qué es lo que puedo cambiar y qué es lo que no puedo cambiar entonces en este caso no puedo cambiar la palabra bar porque es la definición de variable puedo cambiar el nombre de la instancia y de worker lo que hace en este caso es no puedo cambiar la palabra view es la creación de un nuevo objeto no puedo cambiar el worker lo que sí que puedo cambiar evidentemente es el nombre del archivo es trabajador punto j s y ahora voy a decir lo siguiente mi trabajador punto b 6 es decir cuando el trabajador cuando el worker me envíe un mensaje en este caso con sole punto lo voy a decir se ha ejecutado el worker para continuación lo que hago básicamente en este caso es decirle al sistema que quiero un mes es el otro método con el que voy a trabajar tanto en un lado como en el otro es un método llamado post message y trabajador aquí lo tenemos y vamos a hacer lo siguiente vamos a enviar un mensaje que es hola de esta forma tengo implementado en este caso dos métodos que es el post message y el orbe sets el post meses envía mensajes desde el archivo principal hasta el worker y el onubense lo que hace es escuchar todos aquellos mensajes que se reciban desde el worker hasta el archivo principal ahora a continuación lo que tengo que hacer es ir al trabajador y hacer lo siguiente vamos a escoger este ejemplo por ejemplo vamos a ver no y voy a copiar a este código y voy a decir con message es decir cuando reciba un mensaje voy a final entonces en este caso voy a decir vamos a ver ejemplo bueno voltear esto y voy a poner post message es decir cuando el walker recibe un mensaje en este caso lo que estaba ocurriendo es que el worker devuelve un mensaje y el mensaje que devuelve es si estás leyendo esto es que te lo da el worker vale vamos al index y dice se ha ejecutado el worker vale nos vamos a por ello y vamos allá ahora me voy a loca host me voy a inteligencia artificial vamos con el ejercicio sí no hay nada en la pantalla pero se ha ejecutado nada en la pantalla pero me voy a la consola y dice se ha ejecutado el worker se ha ejecutado el worker lo que hace básicamente en este caso es decir esto de aquí simplemente se ha ejecutado el worker ahora bien yo lo que quiero ahora es poner un event el joven por cierto lo podemos cambiar por lo que queramos dentro y entonces en este caso voy a poner mi evento punto dato vamos a volver a recargar y dice y esto es lo importante si estás leyendo esto es que tarda el worker ejemplos que si estás leyendo esto es que te lo da el worker es un texto que está dentro del worker pero el index no tiene ese texto si estoy leyendo este texto es porque realmente proviene del worker ya tenemos una primera demostración en la que podemos comprobar como realmente podemos enviar y recibir información vamos a por la segunda demostración donde ya hemos visto cómo recibimos información vamos a ver como enviamos y recibimos ahora a continuación vamos a hacer lo siguiente vamos a empezar a comprender esto para que nos va a servir digo bar número es igual a 3 ahora digo que quiero enviar número recordemos que número vale 3 lo que hago ahora es un mes el evento y quiere referir nuevo número a un nuevo número es igual a mi bebé entro punto data y esto por ejemplo lo multiplicó por ejemplo por 3 así que ahora digo el resultado es nuevo empleo esto qué es lo que hace bueno lo que hace es recoger un número y enviarlo al worker el worker lo multiplica por 3 y se lo devuelve al objeto principal se lo devuelve al espacio principal de esta forma estamos tirando información a un walker el worker es el que la calcula y luego nos la devuelve así que ahora lo que hago es que recargo y dice que efectivamente el resultado es 9 parece que nos hemos complicado una barbaridad para algo que a priori podríamos hacer de una forma mucho más sencilla pero no es así no es así desde el punto de vista en que lo que podríamos hacer no es realmente tan sencillo porque finalmente sólo estaríamos aprovechando un núcleo de procesamiento y si estamos haciendo esto es precisamente para aprovechar varios núcleos de procesamiento voy a hacer un ejercicio sencillo vamos a examinar esto brackets y aquí en el worker voy a hacer lo siguiente en meses voy a hacer una función bucle bucle y digo vamos a ver par temporizador entonces yo aquí y digo el temporizador es igual a receta y madoff y ejecuta el bucle dentro de un segundo para darle un poquito de ventaja clear time out temporizador se está auto temporizador es igual a 7 bout el bucle pero ahora lo quiero ejecutar en 10 milisegundos y ahora lo que quiero hacer es decirle al sistema que post message y voy a decir hola por hola pero esto veo esto norte o este otro goteo y ya está así que ahora me voy con meses pues lo que me pasa es que ahora recargo recargo bien y me empieza a decir muchas veces hola incluso quizás podría realizar alguna operación local más queda para poner a funcionar el procesamiento global número es igual a 1 punto y muchos recitales así que ahora digo número por igual 1.0 y muchos triples y ahora quiero ponerme ese número de esta forma hacemos el programa calculé algo más complejo bien aquí tenemos un número vemos cómo va creciendo es posible que pronto llegue al infinito para que llegue para que tardé en llegar al infinito vemos como él ya tenemos exponenciales lo que se suele hacer es meter unos pocos ceros y así al meter unos pocos ceros pues y hacemos que tarde más y seguir creciendo pero va a tardar más en llegar hasta el final bien pues me voy al monitor de recursos y en el monitor de actividad a ver monitor y el monitor de actividad veo observó como el procesador no está al 100% observamos allí a ver si se actualiza como el pulsador no está al 100% de hecho sabemos que chrome tiene el procesador al 11% pero la gracia de todo esto es que yo ahora a continuación se puede volver voy a parar y ahora a continuación la siguiente parte del ejercicio que voy a hacer es crear tantos workers como charo bueno pues la idea la gracia de todo esto consiste en que yo ahora puedo venir y puedo decirle al sistema puedo decirle a index que quiero más workers así que simplemente lo que tengo que hacer es copiar este bloque de código y luego podemos hacer matrices de workers vale pero de momento vamos a crear manualmente unos pocos workers más mi trabajador 2 mi trabajador 2000 trabajador 2000 trabajador 3 mi trabajador 3 y mi trabajador 3 y mi trabajador 4 mi trabajador 4 y mi trabajador 4 insisto que se podría hacer una nueva actriz un array de workers pero en este caso quiero 4 manualmente ahí por cierto y los 4 pueden apuntar al mismo archivo js en este caso como ejecutar el mismo código no hay ningún problema también se pueden hacer diferentes archivos js pero no es obligatorio volvemos el caso es que ahora vuelvo a recargar y lo que tengo ahora es que si me voy al código comprobaremos como ahora el uso del procesador es mayor y de hecho el uso del procesador llega un momento en el que podrá llegar perfectamente al cien por ciento en este caso también te digo que estoy perdiendo mucho tiempo en los cónsules entonces a ver el código vamos a quitar con soles cargamos parece que no esté ocurriendo nada pero sí que está ocurriendo en este caso voy a hacer una cosa enfermera cosa en el trabajador bar contador es igual a 1 entonces contador + + y si el contador porcentaje de 1000 es igual a cero es decir una de cada mil veces hazme un post message del número esto lo que va a hacer es hacer un post meses pero sólo una de cada mil veces de esa forma el worker contiene una trabajando pero no pierdo tanto tiempo en los cónsules recargamos para funcionar allí tenemos vamos a ver el monitor de actividad en crecimiento y desde luego lo que puedo hacer es decirle al worker que quiero que ejecuta el bucle tan rápido como pueda luego también hay que tener en cuenta que el micro hay que tener en cuenta que en chrome e en cuanto pierdo el foco el sistema quita recursos al archivo abierto al entonces por eso esto es un poco como la física cuántica encuentro es una partícula ha cambiado pues es un poco igual cuando veo la gráfica es que ya no tengo el foco y por tanto no veo la gráfica real bueno como decía como decía y puedo hacer una matriz de workers entonces yo aquí lo que puedo hacer en este caso ejecución para asegurarnos que realmente metamos el sistema es lo siguiente tengo por aquí un libro siguiente número workers es igual a los 8 10 16 bar trabajador es igual ánimo a raya o sea no es un solo elemento sino que son varios y ahora vivo número 33 el otro no por mar y es igual a 0 y es menor que número workers y más más lo que hago es hacer esto lo que hago es meter esto dentro de una matriz y así con muy poco esfuerzo como podemos ver acabó de crear 16 workers pero quien crea 16 podría crear 32 o podría crear el número que generó que sera el cierre lo vuelvo a ejecutar el cuidado el cometió algún error liniers línea 10 esto es mi trabajador recargamos número es not the fine dónde estás número número aquí dos meses nada no quiero enviar nada así que ahora me voy al monitor de actividad y observamos que la cosa cambia bastante ya no tengo cuatro tareas tengo 16 tareas y si tengo 16 tareas como vamos a poder comprobar tengo realmente que ahora si estoy obteniendo el máximo rendimiento del procesador es decir –resultados no sé si soy el micrófono por el ventilador del portátil acaba de ponerse a ventilar fuertemente y sobre todo es muy importante aquí es que estoy comprobando como estoy utilizando realmente los recursos de multi procesamiento del sistema y estoy enviando workers que trabajan en paralelo es decir ya no voy a trabajar de forma secuencial sino que voy a ser capaz de dividir tareas de repartir tareas en cada uno de los workers y de que cada tarea funcione de forma paralela y de esta forma se podría aproximar tal y como he presentado el concepto en el módulo 1 del curso me podría acercar más al funcionamiento independiente y paralelo de las neuronas y no como hemos trabajado hasta ahora que hemos trabajado de una forma bastante secuencial

bueno pues ahora una vez que hemos hecho una demostración básica acerca de cómo funciona un worker es cuando lo que tendríamos que hacer es y aplicar esto algo más concreto para ello evidentemente en primer lugar tenemos por ejemplo el ejercicio vamos a ver por aquí los bajitos tenemos el ejercicio números vamos a convertirlo en el 13 bien y el ejercicio 13 es el que tiene en primer lugar esto que estamos viendo aquí vamos a ver elementos 4 con brackets y vamos a ver porque creo que no quiero creo que no quiero es el qué vamos a ver era él 10 3 muy bien sería en los retos ok create erbol insert correcto muy bien pues entonces tierra por aquí me voy a alejar 713 voy a abrir en menos cuatro pero lo voy a convertir en index 5 archivo acuerdo me la guardo en la última carpeta ejercicio recuerdo como index 5 puntos html y copio el contenido de esta manera no pierdo nada y continúo a partir de ahí bien la idea es la siguiente la idea es que yo quiero convertir toda esta información en algo secuencial tengamos en cuenta que esto es el super bloque pastor aquí fijémonos que tenemos el vertical tenemos el horizontal tenemos el diagonal y tenemos aquí el diagonal 2 bien en principio lo que parece claro es que lo que querríamos sería bueno vamos a ver sería hacer un worker con cada alguna de estas cuatro cosas con cada uno de estos cuatro pitchers pero tenemos un problema y el problema está en que los workers o prácticamente cualquier mecanismo de computación de multiprocesamiento no nos permiten pasar otro objeto que no sea una cadena de números es decir no nos permiten pasar un objeto como por ejemplo una imagen sino que lo que tenemos que hacer es pasar una cadena y tenemos que pasar datos esto nos da un pequeño reto vale y es que lo que tenemos que pasar realmente son estos datos que tenemos aquí vamos a por ello vamos a ver a continuación vamos a ver como esto no es tan sencillo porque voy a crear un nuevo archivo y lo voy a guardar como dentro de ejercicio 13 voy a guardar como una nueva carpeta llamada workers y dentro de esta carpeta voy a crear un nuevo llamado horizontal punto j s evidentemente voy a crear unos cuantos este es vertical punto j s este es diagonal 1 punto j s y este es diagonal 2 punto js estamos preparando los contenedores dentro de los cuales vamos a trabajar qué es lo que realmente hace qué que esto tarde lo que hace que tarde es que todo esto que estamos viendo aquí se realiza de forma secuencial lo que quiero en este caso es que esté súper bloque que se ejecuta digamos de forma independiente perdón de forma secuencial lo que quiere es que se juguete ahora de forma independiente quiero crear ahora mis cuatro workers así que en este caso voy a hacer lo siguiente worker 1 es igual a new worker y voy a llamar dentro de workers voy a llamar a horizontal punto j s si queremos voy a hacer word que horizontal y así luego los localizamos fácilmente un worker vertical un work diagonal 1 y un worker diagonal 2 vertical y bueno de otros y ahora lo que quiero hacer es pasarles la información y que cada uno de estos workers haga realmente su tarea en este caso lo que puedo hacer es algo tan sencillo como lo siguiente vamos a hacer un ejemplo sencillo worker 1 punto post message esto está dentro de él la función dibuja correcto porque unos meses hola porque el 1.1 message es un tiempo datos y con solé punto log el worker te saluda me voy a cualquier uno no es buscar unos worker horizontal worker y frontal me voy a horizontal y diego con message y vamos a recuperar el 12 el worker con meses de según la fuente horizontal función y post message y voy a seguir hola bien si todo va bien invex 5 todo bien nos vamos a ejecutar ejercicio 13 invex 5.7 ml y si todo va bien vamos a ver worker message esta función vale mujer horizontal con meses por qué no escrito bien esto y punto 6 no escrito correctamente es igual a función recargamos y nos dice ok y cuando nos dice ok el momento horizontal dos meses cola del 5 horizontal post message aquí en meses con solé puntos aquí el worker te saluda no lo haya visto ok y ahora en el momento el worker te salva vale pues vamos a ver a continuación lo que tienes en la pantalla es un cuadrado eso quiere decir que index 5 y sabéis que no he copiado el correcto pero bueno la verdad es que esto ahora mismo para lo que quiero hacer da igual entonces tengo por aquí estos workers y ahora lo que quiero hacer es que realmente compute nada de información

y hacer otro desarrollo en pantalla en este caso voy a partir desde el ejercicio 11 así que voy a dejar 111 voy a crear el ejercicio 14 en este caso no voy a trabajar con workers no simplemente porque lo que voy a hacer es algo bastante independiente realmente and worker voy a ir ejercicio 14 donde parto desde el ejercicio 11 pero aquí de aquí 14 voy a esto es el ejercicio 14 voy a partir del index 40 con brackets este ejercicio 14 index 4 logrado como invex 5 y una vez que lo he grabado como index 5 ahora a continuación lo que quiero es abrir por ejemplo un programa como el gym y que quiero detectar no ya un cuadrado sino un círculo quiero detectar múltiples círculos vamos a ver por aquí voy a crear mi imagen las imágenes que estoy trabajando de cuántos son en trozos por 512 rajasthan pues ahora con el gym voy a generar una imagen de 512 mil 512 está claro que no tengo problemas para reconocer que es un cuadrado que es un círculo pero quiero que el programa reconozca cuando hay varios cuadrados y cuando hay varios círculos en pantalla entonces voy a dibujar un primer círculo por aquí elíptica y el relleno dónde estás allí es mayúsculas fue y relleno de negro dibujo otra elipse lo relleno de negro y dibujo otra elipse lo relleno de negro me llenará tengo tres elipses voy a guardarlas escritorio tres elipses tres círculos bueno a mí con esto voy a hacer una cosa voy a abrir una nueva pestaña ya sé en el escritorio copiar archivo tres círculos y lo pego en el ejercicio 14 ahora lo que quiero hacer es que el sistema detecte estos círculos por ejemplo yo tengo aquí y la imagen es tres círculos punto png así este ejecutó este es el index 5 y claro qué es lo que va a ocurrir en pantalla probablemente el sistema detectará lo mismo me dice lo que tienes en pantalla es un círculo pero esto es incorrecto ya que tengo en pantalla son tres círculos lo que ha hecho es detectar la proporción entre formas en base a la base de datos que tenía previamente guardada y ha generado este diagnóstico pero yo sé que realmente no tengo un círculo tengo tres círculos lo que quiero hacer es que el sistema operativamente vaya bloque a bloque de la pantalla y sea capaz de detectar y detectar varias formas iguales y que incluso me diga dónde están así que para esto lo que vamos a hacer a continuación es simplemente indicarle al sistema vamos a ver lo que no quiero vamos a ver esta función dibuja no quiero que lo que coge el sistema compara no quiero que lo que coge el sistema vaya en todo el absoluto así que a continuación vamos a hacer pasar dónde está la anchura de altura 512 el sdo después bar anchura realmente es 512 para altura es igual a 512 pero bar baqueta y llevarlo es igual a voy a poner por ejemplo 128 vamos a verlo aquí bar paso es igual por ejemplo a 32 lo que quiero ahora es que el sistema sea capaz de detectar vamos a ver si es claro x es igual a cero y bar y es igual a cero ahora quiero que el sistema coja la equis y la llorera en el market y en el baquetón el género te quiero parte parker y entonces y entonces esto es x y barker market vamos a ver esto es un paquete realmente multiplicamos igualmente en este caso estamos multiplicando por la anchura del baqueta vamos a reemplazar cada una de las variables los parámetros de las variables que acabamos de crear así que a partir de ahí lo que queremos es con esta imagen obtener únicamente una zona concreta que va a ser el de sant domènec y ese es el cual acero y se igual a cero queremos dibujar un market de 128 x 128 en algún momento esto se dibuja vamos a buscar dónde está el dibujo vamos a buscar el primer estado y esto va a estar en x coma y aquí veo todavía en 1512 vamos a probarlo index 5 y estoy trabajando en este caso bien gettyimages trata el valor no es de tipo long en la línea de 54 parquet es igual a 128 x es igual a 0 en principio es correcto y me dice que el valor no es de tipo long 128 vamos a poner por ejemplo 00 128 128 y entonces nos dirán que es la línea de 55 y uno y vamos a ver dónde puede estar el error 0 y vamos a poner x se generó en los 20 como adentros pasar ese equipo 10 aquí pongo cero y en línea 55 de alguna forma externa no está cogiendo estos valores porque supongamos que los pongo aquí dentro para llegar al sistema sí que los está cogiendo pues vamos a ver por qué eso se llama market market vamos a ver la continuación y ahí parece que está dibujando algo nos dice que lo que parece que tenga en la pantalla es un cuadrado que realmente no es así y por cierto porque todo esto de sobra y lo que voy a hacer a continuación vamos a hacer es eliminar la flora antes que nada lo primero que quiero ver es por ti no me está cogiendo estos valores cuando se ejecuta dibujar ahí está el problema y es porque esto debe ocurrir después de aquí creo las variables recargo pero un segundo vamos a decir 5 vale es interesante es interesante que no coja esas variables cuando está cogiendo todas las demás es interesante vamos a ver por qué profesor enferma cosa resuelve punto el ojo el bar que es más barato pero 5 segundos y dice el paquete es 128 x el río vamos a esperar un segundo no tenemos ni file aquí se crea y ahí es donde puede haber otro error porque si nos damos cuenta vamos a poner aquí 0 0 y entonces 57-58 es la equis el aire por mí x y mi ingeniero x y probablemente ahí está el problema aún así mi x vamos a ver notarán ver 1 me x es igual a 1 x y dice no te harán ver dar mi super x es igual a 1 ni super x y dice no tan hambre es que es curioso había una coma vale es correcto para mí x y x me x y línea del 61 entonces mi x y vale en el último estado y x y recargo eso está bien eso me dice que vaya lo que tengo no me dice si es un círculo o son cuadrados lo que tienes en la pantalla es algo con solé puntos aquí me ejecutó recargamos aquí me ejecuto en principio parece que no está encontrando nada lo cual quiere decir que vamos a ver seleccionadas de formas encuentro verticales es curioso no está encontrando nada pues no encontrará antes había dicho que era un cuadrado ahora no reconoce la forma lo cual realmente no me causa ningún problema porque realmente eso todavía no es un círculo lo que quiero ahora es ir tirando paso a paso a lo largo del objeto si quiere a continuación lo que voy a hacer es lo siguiente cada vez que ejecuta esto vamos a ver la función esto es dibuja vamos a ver dónde acaba dibujado dibuja empezó aquí y acaba aquí y ahora vivo clear time out temporizador temporizador es igual hacer time out y ejecutó dibuja dentro de un segundo y entonces digo en x + igual o mi x es más igual paso sí me x es mayor en cintura en este caso mi x es igual a cero y mi y es más igual a paso el gasto y sí y es mayor es bueno realmente que 512 en ese caso ejecuto esto esto quiere decir que cuando acabe el dibujo pues para vamos allá recargo haré una versión nueva del proyecto tenemos ya un primer paso ahora está dibujando el segundo paso tercer paso vemos cómo poco a poco va reconociendo dentro de que le cuesta un poco voy a eliminar esto voy a ejecutarlo tan rápido como pueda vamos a ejecutarlo de nuevo hoy voy a ir afinando voy a ir afinando aparte de que quiero quitar el extremo vamos a ver cosas una vez que tenemos esto lo voy a guardar como index 6 aquí lo ejecutó como index 6 voy a tocar un poco esto el paso es de 128 el paquete es de 256 para el que pasó ejecutó el indec 6 me quiero librar de estas líneas bueno existen ahí tenemos un trozo ahí tenemos otro trozo ya estoy empezando a reconocer por aquí trozos de mar que está lo que quiero hacer es librarme de las líneas rojas las líneas rojas vienen porque el sistema detecta incorrectamente los bordes de la derecha pero veo que por lo menos de hecho no se me llegaba a decir aquí tengo un círculo en alguna parte igual no consuele punto log no quiero esto no quiero esto con solo un tono esto de ello no quiero la petición conmigo que quiero que me diga y finalmente lo que tengo es un círculo son cuadrados o qué es y parece que no me lo está diciendo no pasa nada vamos a eliminar vamos a añadir el resto vamos a eliminar la parte donde coge digamos pues esto es x x 4 esta serie es dato vale lo que quiero 33 510 los píxeles 500 por algo estos estos días si esto es correcto pero pero no pero no esto es parte contexto de team en estatal de 4 vamos a verlo claro ahí lo que estoy haciendo va dibujando pero ahí y ya está el problema está en que aquí no se lleva dibujando vamos a ver con arco esto es x como y con él es como el guerrero para el momento vale pues en este caso vamos a hacer que es igual a cero igual a mi x y es igual a mí y esto es x es menor a mi x + baquet y esto es igual a mí y más váter vamos a por ello bordes es igual a contexto vamos a verlo x como y ahora es correcto porque eso es local así vamos viendo cómo va detectando cada uno de los bloques de la imagen al final incluso me dices lo que tienes la pantalla son cuadrados ahora me dice se supone que es un círculo y está fallando evidentemente pero bueno y ahora lo que quiero es eliminarlo unos de algunas de las detecciones incorrectas que tengo en la pantalla vamos a guardar este proyecto como index 7 vale y una vez que lo guardo como index 7 vamos a causar esto aquí existe y ahora lo que quiero es estas formas de aquí de color rojo esas formas de color rojo son las verticales así este en el caso del vertical tengo todos los datos porque es igual al contexto ok y bueno aquí básicamente lo que haciendo es cambiar el contador sí no es cierto que esté en el borde pues vamos a verlo el borde vertical se podría representar como porcentaje y por qué partido por 4 realmente no porque quieres averiguar se el pixel es el pixel del lado el pixel del costado entonces ese pixel se puede averiguar por 41 para que por cuatro ya esto el porcentaje de baquet por 4 es igual a 0 en este caso no es igual a 0 pero lo que va a hacer es con un sí correcto pero es esto vamos a verlo estoy en el index 7 recargamos en principio no hace nada se aferró esto estoy en index 7 pero ahora es quitar eso otra cosa que puedo hacer es comprobar si eso viene producido por estas líneas porque igual igual es más sencillo igual esto de aquí lo que está produciendo los datos x2 menor que rango y vamos a verlo voy a abrirlo en una nueva ventana dibujando eso fijémonos que hay en apariencia no dibuja líneas pero no error de disco voy a ejecutar otra vez parece que viene un error de disco ahora parece que sigue encontrando bordes y voy al final porque sé que en algún momento dice que lo que tengo en la pantalla es un círculo pero de vez en cuando dice que es un cuadrado entonces tengo que averiguar dónde está ese objeto cuando encuentra en la pantalla un círculo por cierto lo que puedo hacer es lo siguiente y voy a crear un nuevo canvas a continuación voy a crear un canvas esto de aquí está en horizontal y esto es el tiempo después dentro del lienzo para éstas efe contiene el hierro pongo por aquí lienzo detector el vivo qué contiene lienzo es posible otras latif contiene el lienzo canvas es mi posición absolute 20 píxeles leer 0 píxeles bien entonces ahora en el contexto 3 voy a crear contexto detector lienzo detector y entonces lo que voy a hacer es que cuando detecte un círculo cuando detecte un lo que sea voy a decir lienzo detector el contexto detector punto estruch recto lleva desde mi x como am y hasta market como baguette creo que tendré que hacer uno con texto detector punto deje en paz y creo que tendré que hacer un contexto detector punto austral y un contexto detector punto close paz así que si todo va bien se detecta algo el contexto detector punto esto es straw ahí estaba en la zona de efecto algo y de hecho con texto detector punto está él y telecinco con más a ver qué opciones me dan y vale es igual a red y contexto detector y punto por eso se llama razón a html5 canvas lewis luego 10 igual es un poco bestia pero vamos a probarlo ahí parece que empieza a despertar un círculo y parece que empieza a afectar bueno un cuadrado en este caso y un círculo ya está detectando y momento de momento incorrectamente pero al menos ya es algo con menos lo que están haciendo es empezar a detectar ya formas vale pues vamos a continuar y ahora lo que quiero lo que sigo queriendo es eliminar estas líneas rojas haciendo que no detecte lo que tiene en el borde del círculo cuidado cuidado bueno pues lo que he hecho en la pantalla es en este caso en el código vamos a ver esto lo he hecho en el código es decirle que quiero menos píxeles en x realmente con la detección de bordes podría ser algo parecido qué es vamos a ver en este caso estoy cogiendo los bordes pues voy a decir x es igual a menor rango menos 4 por ejemplo vamos a recargar el sistema lo que va haciendo es detectar cuidado en este caso porque recogieron el rango y bueno aquí recoge todos los píxeles vamos a refrescar lo vemos que en los bordes tiene tendencia a detectar extremos y vamos a hacer lo siguiente x es menor que hoy y es mayor que y bueno el bayern es por ejemplo voy a decir cuadrícula de 3 1 claro esto es cero y lo que necesito en este caso es averiguar o sea que digamos que empecé en x mayor y en la equis que no sea tan grande como el resto vamos allá otra cosa que quiero hacer es y poner colores diferentes si el nombre es un círculo o es un cuadrado entonces esto es igual a círculo pues en ese caso el contexto va a ser color rojo se copie pego en ese caso va a ser de color azul de esta forma voy a poder diferenciar entre cuando reconoce un círculo y cuando reconoce un cuadrado vamos a verlo aquí de momento está reconociendo círculos ahí en principio reconocido un cuadrado la razón que sea al menos puedo empezar a detectar cuando reconoce una cosa y cuando reconoce otra esto se me ha vuelto a poner aquí y ahora lo que voy a hacer es jugar voy a jugar con un paquete de unos 150 píxeles o 198 píxeles el paso lo voy a hacer de 32 y vamos a probar ahí está reconociendo diferentes círculos y me indica todo lo que en principio reconoce como un círculo de hecho es más voy a hacer otra imagen donde voy a poner algún cuadrado está reconociendo trozos de círculos realmente lo que quiero es que reconozca solo cuando vea lo que está reconociendo algo que se parece a un círculo en realidad lo que quiero es que reconozca cuando algo realmente es un círculo en principio no reconoce ningún cuadrado igual ahora empieza a reconocer alguno pero voy a editar la imagen para que realmente haya algún cuadrado vamos a alguien mucha hacer es hacer 3 a 0 y ahora elipse quiero una biopsia aquí qué va a ser de color negro quiero otra elipse por aquí que va a ser de color negro y quiero un rectángulo por aquí que va a ser de color negro ya que estamos pero otro rectángulo por aquí que va a ser de color negro exportó esto esto es bueno formas un tope de g me voy aquí en escritorio cojo formas los traigo a las 10 y 14 los reemplazó en el código esto podría servir el ejercicio 8 y vamos allá ahora vamos por ejercicio 8 con algún círculo pero lo que quiero ver es si cuando llega a los debajo reconoce algún cuadrado y reconoce un trozo de círculo y ahí vamos a verlo hay que reconocer algún cuadrado por qué es un trozo de cuadrado realmente pero ahí está empezando a reconocer algo que se parece a un cuadrado bien ahora quiero un poquito más de precisión solo quiero recordar que reconozco un círculo cuando lo tenga muy claro pero por lo menos vemos que aparte de que hay abajo está dibujando un círculo igual donde no toca pero lo que quiero ahora es utilizar esto para reconocer círculos y cuadrados con mayor precisión bueno pues ahora lo que quiero hacer es enferma nueva versión index 9 quiero en este caso hacer una evaluación un poquito más estricta ya que lo que estoy haciendo es un redondeo donde en ambos casos estoy redondeando al siguiente número entero entonces voy a probar un redondeo con decimales cuidado porque tengo aquí un redondeo en sql y un re don diego en javascript así que quiero mysql round de finales muy bien roundup decimales vale parece que y saber decimales ok pero bueno a ver habrá que confiar en los decimales muy bien para text entonces round voy a poner un decimal esto lo que va a hacer es aumentar el requisito de aumentar la exigencia realmente verticales sale y ahora en javascript no es tan fácil el script decimales porque voy a tener que hacer una multiplicación y la división al entero más cercano y este es y eso es redondeo decimal stella lo que hay que hacer allí para un redondeo decimal para que lo que está haciendo es no quiero esto eso es un truco hay un truco bueno bueno pues igual y una laca guantes con esto de verdad hacer este texto y lo que quiero hacer es eso ponerlo a prueba aquí en el máximo 22 me voy a aquí estoy en el ejercicio 9 y vale vale y efectivamente vale si dice notaran ver de vez en cuando sólo un poco la verdad y tras ver creo que es cuando llega al final y ahora lo que voy a hacer es el tópix parece que me va a convenir bastante voy a poner un decimal porque en sql he puesto un decimal y bueno voy a hacer esto poquito esto quito y esto no copie lo pego con esto lo que ellos vuelven más exigente porque no redondeó a un solo decimal ya no redondeó al siguiente número entero quería decir sino que redondeó al siguiente decimal ahora solo cuando en principio no tenga clarísimo es cuando debería reconoce un círculo o un cuadrado bueno en este caso parece que estoy siendo demasiado exigente porque el sistema no me está detectando vale ahí parece que tiene un rectángulo el círculo le ha costado más el rectángulo parece que lo está cogiendo con un poquito más de alegría me ha cogido un círculo curiosamente vale así que ahora poco a poco vamos a continuar y voy a contar un poco en la pantalla lo que ha pasado porque al hacer la comparación para hacer la comparación ahora que ya tengo claro esto al redondear cuidado al redondear lo que estoy haciendo voy a lanzar mi sql preparar un poco esto donde round verticales es igual a 03 y rando horizontales es igual a 0,8 es decir lo que estoy haciendo en este caso es aumentar la exigencia indicándole al programa que bueno que tiene que haber una coincidencia en el decimal para que realmente la neurona salte claro ahora lo que ocurre ahí por ejemplo ha pillado un cuadrado bastante bien ahora lo que ocurre es que el sistema tiene que tener muy clara la coincidencia para que realmente dé un resultado mysql puedo seguir jugando por cierto con con la detección entonces para ello bueno y vamos afinando para ello voy a hacer lo siguiente nos vamos a ver s bueno pues ahora lo que puedo hacer es decirle al sistema que cada vez que esto ocurra cada vez que mi y sea mayor cada vez que me y sea mayor 1512 en ese caso mi x es igual a 0 y es igual a 0 y entonces lo que voy a hacer es probar una combinación diferente de pasos por ejemplo vamos a ver para que te lo tengo a 128 paso lo tengo a 32 hacer lo siguiente paso 32 pues pasó paso igual a 0.75 paso lo voy a hacer grande y así vamos a empezar a probar y luego por otra parte quiero un poquito menos de precisión y en este caso en este caso cuando cálculo el súper bloqueo lo que puedo hacer es no necesariamente trabajar con tanto contador pero cuidado en este caso hay que tener en cuenta aquí por ejemplo x que es igual a más igual a 4 que si cambio la proporción o sea si cambio la precisión puede cambiar el resultado tengo hay un paquete muy grande hay un resultado muy grande de momento no reconoce círculos ahora parecen un cuadrado y bueno ahora lo que tendría que hacer lo que me gustaría hacer es preguntarle a mysql si hay algún tipo de dato ahora por cierto debe estar ahora lo que está haciendo es hacer el backend más pequeño pues quería preguntarle si hay algún tipo de dato que sea cercano a ver mysql y es mier vale ni eres valero el sol yo no quiero saber si es exactamente igual quiero saber vamos a ver quiero saber si un valor está cercano a otro vale aquí por ejemplo es un valor en la tolerancia esto le podría servir vamos a ver voy a copiar esto voy a mysql y dijo vamos a ver reponerlo por aquí esto es un comentario porque es un recorte y esto es mayor o igual que esto por o 0.9 and en el centro esto max lo sabe muy bien and verticales a ver si esto es que si no andan verticales para comprobar cómo lo está pasando correctamente porque es que si no creo que está fallando el color sí esto es mayor por 1.1 vale esto era menor esto es menor y ahora lo mismo por aquí voy a hacer esto más pequeño porque es cristiano no voy a ver lo que estoy haciendo verticales voy a hacer esto horizontales pues yo no sabía copiar y pegar porque no sea que lo rompa y podría ser vale ahora copio esto pero aquí esto aquí esto allí efe esto aquí esto aquí vale y entonces esto es horizontales horizontales este es en este es un h estés diagonales 3 diagonales 1 diagonal estos este es en el 1 este es n de uno este es n de 2 y éste será de 2 si todo va bien ya no estoy cogiendo un valor exacto sino que estoy cogiendo un valor parecido en qué versos me encuentro estoy en la nueve vamos a recargar es cuidarlo bien no encontrar ninguno buenos encontrando de todos mismos que antes creo hay cuatro círculos porque básicamente y he puesto por ejemplo un 10% entonces lo que voy a hacer es poner un porcentaje mayor guardo esto como index 10 bien y ahora aquí bueno voy a poner un bar tolerancia que es igual por ejemplo a 0.2 y esto es por una tolerancia y esto es uno más por en asia entonces por ejemplo si pongo un 0.2 ahora en principio podríamos ver esto ya es el ejercicio 10 podríamos pensar que será más tolerante al principio en principio de momento no y sigue encontrando sí correcto está aplicando el porcentaje de tolerancia y bueno ahora a ver qué va a encontrarlo es el bar que está un poco más grande el backup de 200 parece que encuentra círculos hay cuadrados y la idea es un poco eso la idea es e ir comprobando como el sistema ahora con un bueno estaba a 120 creo para aprobar con un 8 no encuentro pero probablemente en la siguiente pasada encuentra un poco más a los 16 de momento no allí parece que ha empezado a encontrarlo y parece que al menos al principio el círculo le ha convencido todavía el sistema es impreciso pero si nos damos cuenta porque nos tiene cierta tendencia de reconocer los círculos como círculos y los cuadrados como cuadrados a ver yo creo que ahora ya en la siguiente pasada debería reconocer bueno y reconocimiento por alguna razón los sql para los esperes pero hace falta no sé si era la tolerancia es también demasiado grande puede ser vamos a poner una tolerancia d 0.1 buenos que han hecho puedo gestionar la tolerancia lo que me hace falta evidentemente es que ahora el sistema sea más rápido lo cual puede lograrse evidentemente perdiendo profesión y a ver ahora por allá antes un círculo yo creo que ahora debería tenerlo ahora en la siguiente vuelta y ahora detecta algún círculo y sobre todo quiero llegar al final y comprobar que detecta al cuadrado vemos la siguiente fase tal vez se empiece a detectar al círculo bueno no debería vamos a verlo todavía pero espero que ahora en la siguiente vuelta detecte algún cuadrado ahora mismo está detectando círculos ella esperaba que cogiera un cuadrado y bueno otra canción es demasiado poco vamos a poner más pasos de oración 0.2 y el paso 32 mira había cogido un cuadrado vaya justo al final suele pasar he puesto nuestra canción allí he cogido el círculo y si todo va bien ahora continuación empezará a rectángulos y dentro de nada ahí tenemos a un rectángulo parece que detecta otro rectángulo aunque no lo hay pero por lo menos aunque el sistema está para afinar evidentemente pero al menos está claro en la parte superior está detectando círculos en la parte inferior está detectando rectángulos siempre puedo irme al aquí y por ejemplo dar la vuelta a la imagen para hacer algo sencillo imagen en ésta transformar voltear 180 grados formas 2 me voy al fin del seleccionó formas 2 los pasos ejercicio 14 actualizó el código 2 me voy a chrome para conectar la batería de hecho está vale pues vamos a probar esta nueva imagen recargamos bien ahora tenemos los rectángulos en la parte de arriba vamos a ver si tenemos los rectángulos como digo en la parte de arriba y si todo va bien yo creo que si en un momento empezará a reconocer rectángulos en la parte de arriba rectángulos azules en la parte de arriba y círculos en la parte de abajo y llegamos a la parte de abajo aunque hay ayer conocido un rectángulo vamos a verlo ahora bueno empieza a reconocer diagonales y con esto como vemos lo que tenemos es un sistema que poco a poco haciendo cada vez más capaz de reconocer formas geométricas en pantalla insisto estamos trabajando con círculos y con cuadrados pero por supuesto podemos entrenar al sistema para que reconozca formas más complejas lo que estamos haciendo básicamente es conseguido un sistema que de momento reconoce formas sencillas a modo de entrenamiento y una vez que tenga estas formas sencillas pues llamamos a por formas más complejas

vamos a empezar a trabajar con características más avanzadas de todo lo que tiene que ver con inteligencia artificial para ello voy a ir a esta carpeta que se llama inteligencia artificial avanzado esta carpeta existe en un ordenador dentro de la carpeta mamá dentro de ht docs dentro de una carpeta llamada inteligencia artificial avanzado y vamos a hablar de varias cosas a lo largo de este curso en primer lugar teniendo en cuenta que ya hemos trabajado con redes neuronales y reconocimiento de formas vamos a analizar un poco voy a crear un nuevo ejercicio ejercicio 1 vamos a hablar un poco de varias cosas la inteligencia artificial la inteligencia en definitiva no tiene que ver necesariamente con la percepción pero quieras que no la percepción es la entrada de los datos que luego va a utilizar la inteligencia artificial entonces de esta forma muchas veces adquisición de datos y procesamiento inteligente de los datos van del plan de la mano no se pueden separar la una de la otra bien pues vamos a analizar cuáles son las principales fuentes de adquisición de datos voy a abrir un text edit y voy a escribir rápidamente una serie de conceptos por una parte pensemos cómo adquiere el ser humano los datos bueno pues el ser humano adquiere datos en primer lugar a través de la vista visión artificial adquiere datos a través de el sonido a través de la escucha adquirir datos a través del olfato adquiere datos a través del gusto y adquiere datos a través del tacto estos son nuestros sentidos donde evidentemente en el caso del ser humano la vista es la que tiene un mayor grado de importancia no sabría poner un porcentaje no puedo poner pero sería un porcentaje bastante subjetivo verdaderamente entonces por ejemplo podríamos poner un 90 por ciento para la vista igual el 90% es mucho no lo sé ahora vemos un 5% para la escucha podríamos poner un 3% para el olfato un 2% para el gusto y un 1% para el tacto insisto estos porcentajes y lo menos agregó de inventar probablemente hay estudios que hayan intentado afinar más estos porcentajes o incluso quizás el resultado de esos estudios sea que no se puede establecer un porcentaje fijo para todos y cada uno de los seres humanos porque cada ser humano puede utilizar sus sentidos en un porcentaje diferente ligeramente diferente para trabajar en su día a día pero cuando suelo decir esto cuando el suelo colocar esto hablando insisto ahora mismo del ser humano es para ilustrar que el sentido principal con el que sobrevive el ser humano es la vista si una persona no tiene tacto por lo que sea por alguna enfermedad o por algún accidente no tiene tacto probablemente podrá hacer su vida normal y la gran mayoría de veces el resto de sus conciudadanos probablemente ni siquiera se enteraron de que no tiene tacto una persona puede no tener gusto y ocurre exactamente lo mismo que no tener tacto estoy hablando de la sociedad moderna evidentemente en un momento dado en una situación de supervivencia digamos vamos a poner entre comillas en la jungla pues no tener tacto o no tener gusto puede ser peligroso porque te está privando de información que te puede ayudar a sobrevivir pero estoy hablando de una sociedad desarrollada estoy hablando de una persona que vive en una por ejemplo ciudad y que por ejemplo pues no es tan importante no tocamos tantas cosas que nos llegan que nos queman a lo largo del día sino que todo nuestro entorno está artificialmente diseñado para no ser lo mismo ocurre con el olfato si estás en la jungla pues quizás te interese a oler poder o leer al tigre que se acerca aunque igual tigre antes a ti pero bueno pero en la vida doméstica digamos en la vida moderna si te fijas piénsalo cuántas veces al día usas el olfato el sonido es mucho más importante igual aquí me equivocado igual esto es un 85% y esto son 15 no lo sé pero una persona que no tenga audición puede hacer su vida más o menos normal evidentemente la escucha es muy importante para la interacción con otros seres humanos pero desde luego no tener escucha es mucho peor que no tener vista es decir una persona que no tiene vista una persona ciega o con capacidades visuales mermadas pues en nuestra sociedad actual suele tener mayores dificultades que una persona que no tiene cualquiera de los otros sentidos para que estoy poniendo estos porcentajes o simplemente para justificar que si intentamos hacer una inteligencia artificial que piense como nosotros en ese caso la adquisición de datos a través de la visión es la vía de entrada más importante yo aquí he puesto el ser humano pero luego tenemos otro concepto que es el internet de las cosas entonces en internet las cosas es interesante desde el punto de vista de internet of things internet de las cosas donde en el internet de las cosas tenemos sensores y los sensores por ejemplo me permiten obtener adquirir más información los sensores le permiten realmente obtener todos estos sentidos que tienen el ser humano más por ejemplo pues por ejemplo los sensores de localización no tiene el ser humano sí que hay animales que tienen sensores parecidos dentro de lo que cabe no tiene una red de satélites pero sí que se pueden orientar en el espacio de una forma más absoluta que el ser humano hay otros sensores que podemos por ejemplo decir sensor de temperatura pero técnicamente esto está en el tacto y va a decir que hay sensores de humedad pero eso también está en el tacto técnicamente entonces bueno simplemente por ejemplo puedo abrir un navegador y puedo poner sensores o sensores sensor que seguro que en inglés pues vamos a ver yo te di países ya veremos pero la carne de descarga pero mira por ejemplo en esa imagen parece que ahí empezamos a tener cosas entonces vamos a ver tenemos a través de la máquina revisión desplazamiento temperatura que es el tacto humedad vibración o sonido químicos aunque no sería el olfato técnicamente pero bueno el flujo por ejemplo fuerza niveles esto sería un poco una vista dispositivos eléctricos y magnéticos esto no tiene el ser humano lo tienen otros animales pero el ser humano no aceleración o giro esto sí que lo tiene el ser humano curiosamente a través del oído yo la primera vez que me lo dijeron me sonó un poco raro pero lo cierto es que si por ejemplo en un momento dado tienes algún episodio de dificultades acústicas pues auditivas así que es cierto que se afecta a tu sentido del equilibrio así que es curioso pero en el sonido en los oídos es lo que utilizamos para mantener en ciertos grados el equilibrio bueno pues la idea con todo esto estamos hablando de sensores y hablamos en este caso de adquisición de la información y cómo vamos a procesar correctamente la información vamos a empezar por tanto por la vista al empezar por la vista una de las primeras cosas que nos tenemos que plantear es que los muertos los animales evidentemente que somos los que tenemos el sentido de la vista tenemos dos ojos entonces dentro de que los animales tenemos los ojos si nos fijamos ahí iba a decir ninguno pero seguro que digo ninguno y me equivoco seguro que algún biólogo me dice no hay un animal que tiene un ojo vale venga hay animales que tienen más de los ojos evidentemente tenemos las arañas tenemos las moscas que tienen dos ojos pero son múltiples en fin cada cada animal o cada insecto cada lo que sea adaptado digamos sus medios de percepción para su supervivencia pero en los animales por ejemplo en los mamíferos tenemos dos tipos de ojos tenemos ojos en el frente y porque tenemos los ojos al frente y no en el lado y por ejemplo esto sería un ciervo con los ojos en el frente y con los que raros que son y ojos en la periferia por ejemplo miramiento en este artículo y básicamente nos van a decir que los seres humanos tenemos los ojos en el frente porque somos depredadores mientras que los animales que tienen los saber aquí por ejemplo tenemos a los otros animales que tienen los ojos a los lados entonces y allí está vamos a ver hay una teoría esto esto va a ser muy difícil de probar pero actualmente está bastante aceptada que es que los aquellos animales que son depredadores tienen los ojos en el frente porque tener dos puntos de vista te ayuda a medir la profundidad y aquellos animales que tienen los ojos en los lados son aquellos animales que son los cazados cazadores y cazados y son aquellos donde no necesitan medir la distancia con respecto de su cazador lo que necesitan es poder mirar en 360 grados para saber cuándo se acerca un depredador y poder empezar a correr si yo soy por ejemplo un ciervo y se me acerca un depredador un león un lobo o lo que sea me da igual medir cómo de lejos está ese depredador porque en cuanto lo vea voy a echar a correr si yo soy por ejemplo un depredador si soy un loser un león soy un tigre y voy a lanzarme encima de una presa necesito mi perfectamente la distancia con respecto a esa presa para que cuando salte no caiga ni después ni antes justo sobre la presa entonces en nuestro caso vamos a analizar cómo funciona la visión estereoscópica para trabajar con inteligencia artificial si yo por ejemplo vamos a ver josé vicente carratalá voy a una foto voy a la foto mía pero esto es para hacer con cualquier foto evidentemente entonces si yo cojo por ejemplo esta foto aquí y ya abre esta foto yo tengo que enseñarle a la máquina de alguna forma que es el frente y que es el fondo es decir en este caso yo estoy viendo una imagen digamos monos cop y acá estoy viendo una sola imagen y hay cosas que me pueden hacer saber por ejemplo que aquí hay un frente que es la persona y hay un fondo que es este decorado pero si yo me pregunto cómo de lejos está esta pared pues con una sola imagen no lo puedo saber intuyo mi educación me ha enseñado que si estoy viendo una línea y esa línea se corta por detrás y nada corta a este objeto que es el suéter pues en este caso podríamos pensar que este objeto es el que está por delante y el otro objeto es el que está por detrás y eso sería correcto pero cuanto por detrás la visión estereoscópica por tanto me permite saber qué objetos están delante y qué objetos están detrás y gracias a eso lo que puedo hacer es saber diferenciar objetos por ejemplo gracias a eso si en esta imagen estoy detectando una cara lo que podría hacer es el fondo automáticamente y quedarme únicamente con el objeto que quiero detectar y no gastar proceso en estar trabajando con los píxeles de un fondo que realmente no me van a aportar nada así que por esto queremos la visión artificial y por eso queremos la visión estereoscópica lo que queremos es segregar lo que queremos es separar lo que queremos es quedarnos con lo importante y eliminar lo superfluo y de esa forma ahorrar recursos así que vamos a trabajar vamos a buscar una imagen estéreo pero la imagen que cualquier persona pueda encontrar en google entonces por ejemplo encuentro una imagen como esta encuentro una imagen donde no puedo encontrar varias imágenes evidentemente pueden contar múltiples imágenes pero el objetivo en este caso es buscar una imagen que vamos a ver esto por ejemplo estaría bien esta imagen por aquí vale esta imagen también estaría bien vamos allá por ejemplo con esta imagen el texto es porción de la wikipedia una imagen más grande vamos a hacer abro imagen en pestaña nueva quiero el original de hecho cualquier original pero ahora voy a bajar más que nada para bueno eso para para rebajar cosas escritorio pues es para estéreo para exterior en el cambia el nombre por quitarle la atribución de autoría a la imagen porque está claro de dónde ha sacado pero si para no tener que poner todo ese nombre cuando empiece a programar evidentemente vale pues para estéreo y lo que voy a hacer ahora es convertir este par estéreo a dos imágenes independientes y lo que voy a hacer a continuación es la mitad de este menos de hecho en imagen en el tamaño del lienzo voy a decirle que en horizontal quiero el 50% lo quiero lo quiero ahí y redimensionar y este es el ojo izquierdo existe lo guardo como izquierdo un tope en eje es un poco placebo porque estoy cuando un png a partir de un jpg lo cual realmente al final acaba siendo un png pero bueno y ahora voy a hacer lo contrario ahora voy a mover la imagen de control z imagen tamaño del lienzo voy a poner 50% pero ahora me quedo con la otra parte redimensionó exportó lugardo como derecha punto png vale y ahora bueno el único problema que tienen estas dos imágenes es que son bastante grandes y para empezar a hacer pruebas me van a causar problemas pero sí que van a hacer que el programa al principio vaya lento son imágenes que tienen 1.384 por 1400 entonces a continuación vemos como las imágenes hoy el sábado vemos como hay las imágenes tienen un ligero paralaje y cuando de un ligero paralaje quiero decir que puedo esta imagen la puedo pegar en la otra voy a hacerla 50% transparente y esto es lo que quiero decir lo que quiero decir a ver quiero mover no quiero mover una capa esto es lo que quiero decir y es que el león por ejemplo si le movemos en este caso estoy haciendo manualmente para llegar al programa veremos que si cuadro por ejemplo en el ojo del león vemos como el edificio se descuadró ahí lo podemos ver mejor creo yo vemos como el león se queda aparentemente quieto y es el fondo en el que se desplazan entonces en un para estereoscópico precisamente tenemos los ojos para eso tenemos los ojos para ver claramente que hay una diferencia en el ángulo y lo que voy a hacer en este caso es ver cuánto se ha desplazado cada pixel para saber quién está delante y quién está detrás voy a reestructurar esto como las imágenes estaban un poco movidas no pasa nada para una primera iteración del ejercicio para hacerse lo más sencillo el ejercicio lo que voy a hacer es decirle que esto es el izquierdo sobre escribir e izquierdo pero estoy aquí es derecho vale y ahora y ahora lo que voy a hacer es descartar cambios voy a volver a abrir los dos y voy a hacer los más pequeños entonces bueno voy a la imagen en escalar la imagen voy a decir que no sé vamos a ver de hecho en el lienzo y a decir de hacer las imágenes cuadradas el tamaño del tiempo quiero en píxeles en píxeles a 400 es sobre un trozo la imagen el tamaño del lienzo 1400 ahora un trozo de imagen suelta evidentemente relleno con color blanco por ejemplo colapsó la capa con menor cappa el relleno de blanco la colocó bajo y nuestras convino hacia abajo y lo guardo y ahora una vez que guardado y ahora voy a hacer la imagen más pequeña entonces voy a escalar la imagen voy a escalar la imagen y esto me permite y esto me permite ahora guardar este resultado como derecha derecha pequeña e izquierda peque izquierdo pec y así voy a trabajar con este par de imágenes un poquito más manejables sabiendo que luego evidentemente siempre puedo llevarme las vamos a abordar todas llevarme las tamaños más grandes bueno pues creo una carpeta llamada img imágenes platero y abro brackets vamos a crear de nuevo vamos a guardarlo y lo voy a guardar en inteligencia artificial aquí ejercicio 1 y lo voy a guardar como index.html vale ahora una vez que tenemos esto es cuándo por aquí en este proyecto y voy a empezar a hacer lo siguiente canvas bueno izquierdo por ejemplo louis es igual 512 píxeles height es igual a 512 píxeles este es el izquierdo vamos a por el derecho y luego un resultado es nuestro derecho y esto es un resultado a continuación lo que voy a hacer mediante un script es introducir la información dentro de esos canvas una vez que tenemos esto es cuando ahora lo que voy a hacer es introducir lo siguiente no vamos a ver quiero se para con texto izquierdo es igual a el documento punto miguel element baile haití izquierdo punto jet contexto no sé qué hacer también un poco más pequeño vale ahora con texto derecho es derecho y contexto final el contexto resultado es el resultado vale ahora voy a decir lo siguiente y es que la imagen izquierdo es igual a new image imagen izquierdo punto src es igual a img barra izquierdo punto png s izquierdo o la siesta izquierdo punto png ahora voy a explicar esto dar imagen derecho es igual a new image imagen derecho es igual a derecho pd ya lo que pongo es la las imágenes dentro del elemento recordemos qué función dibuja conjunto en cálculo debe ser ejecutado se time out en un pequeño intervalo de tiempo más que nada para que el sistema le dé tiempo a cargar las imágenes entonces ahora lo que hago es fe y punto email otro email perdón droguett y quiero la imagen izquierdo en 0,0 y en el contexto derecho voy a hacer lo mismo con texto derecho imagen derecho en 00 si todo ha ido bien y el mante está activado que no lo sé no ignorar esta versión porque arrancó servidores ahora me voy a aquí a sacar un señor el host barra inteligencia y fuera ya no sé de inteligencia artificial avanzada y ejercicio 1 y ahí en un segundo si no hay errores si parece que quiera haber algún error imac y mac liman imágenes image image y ahora hay bien vamos a ver me dice que las imágenes en broke en broken quiere decir en la unidad f8 que no se encuentra de hecho derecho punto png derecho punto png porque es derecha y luego también recordemos mi imagen y también recordemos que él tengo que las imágenes pequeñas pero la izquierda derecha y ahora me voy a cambiar de izquierda a derecha y si se izquierdo es derecho entonces voy a derecho derecho pec lado izquierdo lado derecho y así no nos liamos con derecho bien ejecutemos y vale si todavía ahí tenemos nuestros tras nuestro par de imágenes pero ahora cada uno está ubicado en un canvas y me falta este canvas de aquí que va a ser el que me dé el resultado bueno pues una vez que tenemos este canvas lo que voy a hacer en este caso es averiguar cuál es la profundidad para averiguar cuál es la profundidad lo que tengo que hacer es comparar píxel a píxel y ver cuánto se ha desplazado cada uno de los píxeles y ver cuánto se ha desplazado es lo que me dará esa medida de la distancia entonces para esto lo que tengo que hacer es meter las dos imágenes en la memoria para empezar a trabajar con ellas entonces voy a hacer nosotros voy a decir que un bar imagen izquierdo en memoria es igual a [Música] con texto izquierdo punto getty image data desde 0 0 hasta 512 512 lo quiero todo y ahora dar imagen derecho en memoria es igual al contexto derecho punto y realmente semana con texto derecho pero entonces ahora lo que tengo que hacer es empezar a trabajar la imagen de forma que el píxel a píxel grupo de píxeles a grupo de píxeles pueda comprobar dónde se ha ido el pixel en la otra imagen voy a empezar comparando deslizadas a la derecha es exactamente igual el rotulado exactamente el mismo lo que quiero comparar es una con respecto de la otra así que ahora lo que tengo que hacer es decir ford mark x es igual a cero x es menor o igual que 512 x + más esto lo que hace es me recorre toda la imagen en la x y ahora a continuación pongo lo mismo pero para la y marc y y y con respecto a imágenes de 512 por 512 esto lo que va a hacer es recorrer todos los píxeles uno a uno con respecto a la imagen ahora bien ahora viene la cuestión yo no puedo comparar píxel a píxel porque lo que va a ocurrir es que la imagen son píxeles demasiado pocos vamos a venir otra vez al quinto y vamos a analizar lo que voy a buscar realmente y aquí me voy a reciente no voy a izquierdo pequeño por ejemplo y me acerco mucho y claro yo si cojo un píxel pues no irá este píxel es igual que el de al lado y diría usted sufre son pixel no me da realmente nada de información pero si yo cojo por ejemplo que te diría yo un bloque de píxeles un bloque de píxeles pues yo sí que puedo comparar ese bloque de píxeles contra él y contra el bloque de píxeles vecinos y vecinas y vecinos y vecinas vecino y vecino vale entonces la idea es que no voy a comparar un píxel voy a comparar un bloque un cuadrado de píxeles para ello lo que tengo que hacer es definir primero el cuadrado entonces vamos a ver el cuadrado entonces voy a llamarlo cuadrado de xy cuadrado y lleva una amplitud voy a colocar aquí una serie de variables que no hace falta dar amplitud cuadrado es igual a 3 luego lo cambiaremos cuadrado x y esto lo que va a hacer es la imagen número 1 cuadrado x es igual a cero menos amplitud esto lo que va a hacer es x menos amplitud vamos a verlo menos a metros cuadrado hasta que x sea menor que perdón contexto x cuadrado x sea menor que x más amplitud cuadrado y ahora paso bar paso paso es igual a por ejemplo 1 paso es cada cuantos píxeles voy a ver x más igual a paso tengo la equis ahora lo que voy a hacer es la y sonia cuatro foros anidados esto empieza a ser peligroso desde el punto de vista del rendimiento pero no tenemos más remedio y más que se va a complicar y ahora cuadrado y es esto y cuidado existo es cuadrado y este es cuadrado x entonces esto es y y ya está bien ahora lo que voy a hacer es en la imagen número 1 voy a localizar cuál es la información puede hacer esto o puedo hacer otra cosa voy a hacer lo siguiente un momento voy a eliminar esto igual logró conocer lo que voy a hacer es dar datos imagen datos imagen izquierdo es igual a con texto izquierdo punto getty image data desde x como y hasta amplitud cuadrado con amplitud cuadrado lo que estoy haciendo es un cacho unos píxeles en este caso un bloque de 3 x 3 ahora lo que voy a hacer es decirle al sistema que una vez que tengo eso lo quiero comparar con diferentes elementos de el anterior entonces ahora sí es cuando necesito ese doble núcleo four volverlo a escribir y lo que voy a hacer es vamos a ver necesito buscar un mejor candidato cuadrado x si realmente es x 2 pensando como nombre a la variable es x menos amplitud cuadrado una cosa amplitud cuadrado y otras cosas área búsqueda es igual a 3 por ejemplo haría búsqueda x2 x2 sea menor a x más área búsqueda x2 más igual pasó ahora sí lo mismo para la y y 2 y esto lo que va a hacer esto lo que va a hacer es que ahora este de mí extreme va a hacer lo siguiente va a hacer en el contexto derecho quiero que me des el email data de x 2 y 2 metro cuadrado y amplitud del cuadrado es decir si por ejemplo vamos a verlo aquí si por ejemplo cojo este rectángulo voy a pintarlo para que veas exactamente lo que estoy haciendo una pinturita sencillita por ejemplo este es el rojo pinto voy a bajar la opacidad y a continuación le voy a decir al sistema wow el siguiente que estoy buscando lo estoy buscando aquí lo estoy buscando aquí lo estoy buscando aquí y en definitiva lo que estoy haciendo es dibujar un cuadrado es decir un cuadrado así y buscar cuánto se ha ido cuando se ha ido ese bloque y cuanto se haya ido lo que va a hacer es permitirme saber quién está más cerca y quién está más lejos los píxeles que se hayan ido menos son los que están más cerca los píxeles que se han ido más son los que están más lejos vamos a probarlo ahora tengo toda esta información y lo que necesito es buscar un mejor candidato el mejor candidato es aquel en el que los píxeles digamos se anulen más por ejemplo puedo averiguarlo haciendo lo siguiente si yo cojo esto soy cojo esto y lo que es lo pego utilizo la operación de diferencia diferencia vamos a ver no sé si o no copio y pego y ahora si bien utilizo la operación de diferencia para saber que aquel pixel que sume 0 a que el bloque que sume 0 es el que coincide más perfectamente entonces se llevó y moviendo este elemento fijémonos que cuando lo muevo la diferencia ya no es 0 3 el momento en el que la diferencia sea la menor posible en el momento en el que la imagen se vuelva de color negro es donde corresponde realmente la imagen en este caso estoy comparando un mismo trozo de imagen lo que tengo que hacer ahora a continuación es comparar la izquierda contra la derecha y ahora a continuación lo que voy a hacer por tanto es crear un mejor candidato vamos a verlo [Música] y qué de crisis vamos a ver lo siguiente bar candidatos marzo es igual a mil millones de trillones para el candidato x es igual a cero bar candidato y es igual a cero bien entonces a continuación eso me va a decir cuánto será el pixel realmente a continuación lo que voy a hacer es averiguar la suma y voy a hacer lo siguiente esto es punto data realmente y esto es punto data en redes con todo esto ahora vengo por aquí y digo por mar y es igual a 0 y es menor a contexto cuidado punto blanco y más más por ejemplo y voy a hacer zuma mar temporal suma es igual a esto ahora temporal suma es más igual al valor absoluto de la resta entre jimmy no sé qué voy a hacer entre 2000 rey menos cuidado esto es de mí pues esto es de desde mail mire después de haber hecho todo esto ahora a continuación lo que tengo que hacer es averiguar cuál es realmente la suma entonces esto lo pongo realmente aquí dentro estoy pensando si va realmente dentro de ejercicio es complicado en el sentido de que hay que pensar muy bien lo que estamos calculando entonces ahora vamos a ver temporal suma es igual dv es cierto que temporal suma es menor que suma en ese caso zuma es igual a temporal suma y en ese caso y en ese caso dónde estás la equis candidato x es igual a x2 y candidato y es igual a y 2 lo que hace es buscar un mejor candidato de esta forma y mi punto data valen yo diría que esto aquí y al final de todo esto al final todo esto aquí voy a hacer con solo punto el ojo para el pixel – x coma y el desfase es x2 coma menos y 2 vamos a probarlo vamos a probarlo aquí es cuando esto puede empezar a explotar un poco y al probarlo entonces la consola si no hay ningún error porque a todo esto ya son rato que esté escribiendo pero va y ahí parece que empezamos tener un problema para el pixel 9 para el pixel 8 500 vamos a verlo muchas muchas habilidades de consola como podemos imaginar pero el caso para el pixel 7 449 píxel a píxel el desfase es 10 como 44 64 48 nos parece que no el pixel en este caso me está cogiendo siempre el pixel 10 en x de hecho incluso me extraña que llegue al píxel 10 en x porque el desfase sí claro x2 2 y – y 2 paramos la ejecución yo creo que ya volvemos a hacerlo vamos a ver cosas x + + esto va a ser pasó imagen lo pasó súper imagen y esto va a ser más igual a paso super imagen y esto va a ser más igual a paso super imagen esto lo que va a hacer es que si yo le digo paso super imagen es igual a 4 pues no me va a evaluar todos los píxeles sino que va a evaluar cada 4 píxeles y así me ahorro cálculos el programa está rascando evidentemente que el monitor de actividad pues está la vida la que tengo esto está aquí calculando para el cálculo sigue calculando no quiero esto mv estoy a saco y no vamos a dejarlo ahí rodar un poco esto y vamos hablarlo parece que le cuesta lo que puedo hacer es que el paso sea mayor pasó súper imagen por ejemplo sea 10 o sea 16 o sea algo así la máscara quiero rebajar cálculos porque fíjate que ya había bajado el tamaño de la imagen en previsión de que le iba a costar ahora vale venga el desfase es 5 15 x 5 15 499 vamos a ver más arriba 403 no parece que lo estén o no parece que lo estoy cogiendo bien vamos a ver este chis – éxitos el caso y trozos que vamos a recargar para el pixel se desfasado cada vez el pixel se desfasa más y el desfase es que es imposible que sea eso entonces tiene que haber un error en el código aquí está el problema y es que esto es cx y esto es fx y esto es cero vamos allá 00 en algún pixel sale o sale algo pero ese algo no me cuadra el desfase es imposible que sea tanto el rapero es confirmarlo desfase x desacelera y no me cuadra que sea dando esto es x menos área de búsqueda x más área de búsqueda x2 más pasos o sea más igual pasó y dos aquí ese es un principio de problema vamos a probarlo bien nos dice que él el mejor candidato siempre es el 0 0 es como que de hecho esto es técnicamente cierto para una misma imagen pero no para dos imágenes diferentes el hecho de que sea siempre 0 0 es como que no estoy cogiendo la imagen correcta esto es de mí y de mi contexto izquierdo contexto derecho la ley esto es de mí – debe recoger de dni menos de mí 0 0 ya te digo que cuando pone 0 0 es que es como la imagen que he puesto en el game que parece que lo esté buscando contra sí misma y entonces y lo que ocurre vamos a verlo es que parece que estoy cogiendo la imagen contra sí misma personas y m ibm es contexto izquierdo contexto derecho con texto izquierdo es izquierdo y derecho este izquierdo y contexto derecho con texto izquierdo getty page dato esto debió ser un poco más pequeño para verlo mejor y es esto rojo carbó x2 x-men sale de búsqueda así x menos área de búsqueda para un momento el vídeo hasta encontrar dónde está lo que debe ser mejorado porque no me creo hacer una cosa voy a hacer que área de búsqueda aquí en la amplitud cuadrado sea 5 y el área de búsqueda sea 5 cuidado porque los cálculos ahora van a tardar más sigue dando 00 y si la 0 0 es que está toda la impresión de que está buscando a esta imagen contra sí misma voy a buscar dónde está el fallo voy a hacer una cosa lo que voy a hacer es el primer guarda entre el lugar a guardar esto como index 2 para ver cómo el ejercicio va evolucionando y voy a hacer una cosa puede decir con solé punto long demostrar la suma porque lo que quiero es aquí mostrar que se vea interesante y si vivo temporal suma o sí vale porque quiere mostrar ahí si temporal suma es menor que su ma quiero mostrar la suma claro cuidado estamos en el ejercicio index 2.7 ml ahora estoy comprobando que píxel a píxel realmente el programa es capaz de empezar a hacer sumas y al hacer sumas encontrar realmente quién es nuestros suspensiones de la dos tonos no importan pero empezar a encontrar quién es el mejor candidato veo que todos se acaban en cero por ejemplo allí en mil 28 vamos a verlo entonces ahí sí que debe haber un un mejor candidato vamos a verlo y temporal suma dime quién es x2 1 tienes x2 dime quién es y 2 porque quiero que este programa vaya diciendo vamos a ver 6 512 4 84 91 al principio no debería ser debería ser cero vamos a reinar de arriba por ejemplo las sumas 504 y con respecto al píxel 128 320 es 133 36 entonces por eso por eso 133 36 vale esto es x 2 – x y estos y 2 – y vamos a verlo vamos a poner un super paso más grande pasó super imagen 32 a cargo y aquí realmente ya empezamos a tener información de valor y es que fijémonos cómo vamos a los 9 más arriba el programa en principio está encontrando dónde está en principio como digo el mejor candidato vuestro entonces ahora esto es es desfase x desfase y entonces ahora ocultamos este con soler recargamos y ahora sí aparte de que los últimos no valen pero ahora sí tenemos que nos va indicando el desfase de cada uno de los elementos muy bien pues si tenemos esto ahora podemos empezar a pintar el resultado en la pantalla otra cosa es que es ver si esto es correcto o no que de momento yo diría que no lo es pero podemos empezar a pintar cosas en pantalla entonces ahora lo que voy a hacer es que en el contexto resultado que por cierto habrá dos contextos resultados es contexto resultado punto de beijing paz contexto resultado del mutún y el mutuo es x&y contexto resultado es lento que va a ser x más diferencial de x y no más diferencial de y contiene estos resultado punto puntos truck y yo creo que vamos a verlo recargamos bien la gente live recargamos y ahí lo que nos está diciendo es cuando se mueven cada uno de los vectores y todavía es pronto para ser resultados pero yo creo que se empieza por aquí a intuir que está empezando a aparecer el león entonces vamos a continuar muy bien vamos a continuar y ahora voy a decir que esto va a ser 16 y ahora que en principio esto empieza parece a estar en funcionamiento voy a quitar este corso le punto log para que no malgaste tantos recursos en la consola recargo recargo y bueno yo creo que se empieza a ver como el programa va a ser capaz de calcular el desfase entre los diferentes elementos yo creo que ahí se empieza a ver que el programa realmente está siendo capaz de esto ahora qué es lo que está ocurriendo en la pantalla bueno pues lo que está ocurriendo en la pantalla es simplemente que cuando el programa no encuentra un mejor candidato tiene una línea desde cero a cero el descaro esto no vale entonces lo que vamos a hacer es que bueno podemos ampliar el rango o podemos decirle que cuando no encuentra un candidato simplemente no dibuja una línea o algo así no los el caso en algún candidato tiene que encontrar pero ahora veremos no siempre tiene por qué vamos ahora a ampliar el rango bueno vamos a hacer varias cosas vamos a ver vamos a paso súper imagen 8 vamos poco a poco esto cada vez le va a costar un poquito más voy a hacer un porcentaje para que sepamos por dónde va el tema vale yo creo que esto ya se empieza a ver cómo realmente esto va a pasar a dar frutos y ahora quiero lo suficiente vamos a ver quiero iguana final es igual a 512 por 512 esto luego lo convertiremos una variable entonces si esto es final voy a crear un mal contador que es igual a cero al final de todo esto lo que voy a hacer es contador más más y cuando y ahora vamos a ver contador porcentaje de 1000 es igual a cero es doble igual a cero en ese caso quiero con solé punto el porcentaje y es contador partido 512 por 512 ok esto va dentro de un paréntesis multiplicó por 100 y lo le pongo un porcentaje y esto hace falta otro porcentaje apasionada para que sepamos por dónde va el cálculo recargamos vale from a 307 vamos a ver 1,5 bueno esto en principio vamos a ver vamos allá contador contador quien es de 102 y vamos a ver 15 esto sea correcto está en el sitio correcto puede ser un reposo 026 más realmente con que me parece un 100% me vale sí claro ya sé lo que ocurre ya sé lo que ocurre esto es porque tengo el super paso entonces el super paso esto es correcto cuando realmente el 1.5 de los puntos que debería estar calculando entonces esto lo multiplicó x porque pues por paso super imagen paso super imagen vamos a verlo 24 48 73 y estos y ahora nos lleva al final y así por lo menos pues puedo saber en qué estado está el cálculo cuando el programa nos respondemos puedo saber qué está pasando si lo pongo por cien que esto me da un porcentaje y ahí lo que puedo averiguar es cuánto le queda para calcular y cuando llega al cien por cien no hacía ni un poquito puede ser depende pero veo esto en la pantalla claro si veo esto en la pantalla ahora es cuando puedo aumentar el radio de cálculo tengamos en cuenta que puesto que el radio de cálculo hacer otro vídeo vale tengamos en cuenta que el radio de cálculo lo había puesto vamos a ver cuánto el área de búsqueda era 5 vamos a poner 15 pero cuidado para lo que va a ocurrir es que cuanto yo más amplíe el programa más le va a costar buscar vamos a intentar ahorrar un poco de cálculos en este caso lo que voy a hacer es quiero saltar el cuarto componente el cuarto componente en este caso como puedo hacer más igual a cuatro para quedarme únicamente con el rojo con esto lo que voy a hacer es que el sistema vaya más rápido fijémonos que he aumentado el ritmo y disminuido cálculo realmente pero al aumentar el radio de búsqueda evidentemente el programa o el programa le cuesta más vamos allá al refrán o teóricamente será de mayor calidad pero pero a mayor coste evidentemente vamos allá dentro de poco vale allí todavía cuando hay puntos en los que se van dos formas vamos viendo cómo va encontrando cosas va encontrando algunos ficheros algunos elementos pero pues ahí lo que hace el sistema es que no está siendo capaz de encontrar en estas líneas diagonales información pero en muchas otras líneas diagonales sí que está encontrando ahí realmente información vamos a ver vamos a ver porque ahora a continuación lo que queremos es buscar ahora voy a hacer un mapa de profundidad donde lo que me interesa es averiguar cuál es la distancia real y al averiguar la distancia real quiero crear un mapa de profundidad y al crear un mapa de profundidad sabré quién es quién está adelante y quién es quién está detrás para ello voy a hacer un nuevo vídeo y una nueva versión del ejercicio bueno pues ahora lo que voy a hacer es lo siguiente y es que vamos a ver voy a guardar esto como en x 3 punto html ahora recuerdo acordar de poner bien en la pantalla esto es resultado 2 bar con textos resultados 2 y ahora simplemente lo que quiero es poner la pantalla en el contexto con textos resultado 2 punto está el feel style es igual a rgb algo en 200 200 200 y ahora lo que voy a hacer es el contexto resultados dos puntos phil rect y voy a decir en x y quiero vamos a ver por aquí quiero que quiero el paso es para imagen pasó súper imagen como paso super imagen y lo que va a ocurrir con esto es que ahora recargo me voy recordemos al 3 rgb snow de find vamos a ver si entre comillas recargamos 2% 4% ahora mismo está siendo calculado en un núcleo con lo cual pues habría que pasarlo a multinúcleo evidentemente 43% 46% ahora recortar el cálculo sería simplemente pero no por lo menos ya podemos empezar a ver bien y lo que vaya no no no vale vale no vale porque si vale ok pero esto no es el contexto 2 es resultado 2 super paso 332 calculé 39 78 y ahora lo que quiero es averiguar la distancia al averiguar la distancia y vamos a repasar un poco vamos con el 16 lo que quiero es que según el vector me diga exactamente cuál es el color que tengo que poner mejor bien pues para averiguar la distancia lo que quiero hacer es bueno mira creo que es pitágoras la distancia entre dos puntos a distancia entre los puntos a distancia no nunca me acuerdo de la fórmula de memoria había que dar un poco frito a ver mientras tanto esto como vale y también lo que puedo hacer bueno iba a pintar cuadrados pero vaya punto 1 puntos truco correcto y lo mismo no sé si va a pintar sí perfecto venga así por lo menos tengo los cuadraditos que está en persona pintar vale y ahora aquí y ahora él recupera imagen así estábamos con pitágoras o la que perseguir no sé si es que la gente a ver si era esto efectivamente tener en a pitágoras sí muy bien pero y no te has libres creo que este programa se ha visitado antes en descripción algún momento anterior y esto pues ya está entonces esta fórmula la convertimos en lo siguiente es igual todo todo todo todo todo ese cuerpo porque ese qr porque es la raíz cuadrada de algo por algo esto parece una potencia esmas.com de algo dos más más puntos de algo como 2 y ese algo ya sea algo es pues x 1 x 2 vale – algo algo menos algo y esto es x2 x + diferencial de x men x se podría resumir así luego bien y luego como realmente toca momento no estoy pensando no no y él y ok entonces ahora lo que voy a hacer es que aquí voy a poner distancia distancia x a ver qué pasa luego a finales s por fin vale vamos allá recargamos y si todo va bien y si todo va bien y si todo va bien bueno pues muy bien pues aquí empezamos a ver cositas como podemos ver de hecho según el esquema está esto estaría invertido más que nada porque más que nada porque vamos a ver esto es 255 menos distancia no cuidado cuidado cuidado esto no acepto 55 – de distancia y esto va así y así lo que hacemos es que lo que está blanco es lo que está cerca y lo que está negro es lo que está lejos refrescamos y si todo va bien por qué y si está bien como podemos comprobar pues lo que está más blanco es lo que está más cerca y lo que estamos oscuro poco a poco es lo que está más lejos el programa como podemos ver aquí no está acabado está lejos de estar acabado pero en definitiva por lo menos podemos empezar ya a obtener una serie de resultados voy a continuar voy a continuar y en este caso numeración una cosa y es que esté 59 multiplicar por 15 igual me he pasado esto tiene una fórmula pero realmente no estoy poniendo de ojo simplemente para no complicar más los cálculos sino poder obtener algo ya visualmente en la pantalla por lo menos podemos empezar ya a ver cosas esto ya solo esto nos permitiría distinguir el león y empezar a realizar cálculos sobre realmente lo que nos interesa y es un poco lo que queríamos donde por supuesto este algoritmo es ampliamente mejorable es lo que tenemos que hacer a continuación hay cosas que tenemos que afinar vamos a ver pero sobre todo lo importante en este caso es estar empezando a distinguir entre el fondo y el frente incluso podemos comprobar que aquellos puntos de la melena del león digamos estar más cerca porque están más blancos estos puntos de aquí están más grises a que realmente distingue un poco de volumen ahora lo que quiero evidentemente una vez que tengo esto por cierto ya puedo quitarle estruch esto que era bueno antes cuando era todo gris ahora que ya no es todo gris pues podemos aclararlo mejor así y ahora voy a realizar un cálculo de más profundidad y así veremos hasta qué punto este resultado está empezando a ser correcto o no bien tengo eso entonces ahora lo que voy a hacer es decirle que el paso super imagen es de 8 vamos a recargar y ahora evidentemente pues va a tardar más en calcular vamos a verlo dejar de cable bueno vemos que con un tamaño menor de búsqueda pues el resto no se va afinando con lo cual está lo cual está bien lo cual está divertido ahora voy a hacer una cosa ahora lo que quiero hacer es decirle al sistema que quiero que el propio sistema sea iterativo cuando digo que sea interactivo lo que quiero decir es que el sistema vaya afinando poco a poco y vaya trabajando con mayor precisión entonces vamos a por esto y voy a hacer lo siguiente para ello el cálculo va a ser lo siguiente part temporizador esto yo creo que lo voy a hacer una siguiente versión del ejercicio porque va a ser un salto grande esto es index 4 esto es dar temporizador es igual a esto al final de calcular voy a poner el cuidado clear time out temporizador el temporizador es igual a la sexta y más dentro de un segundo y ahora lo que voy a hacer es que vamos a ver dónde está el súper para súper imagen lo voy a poner a 64 paso super imagen pasó súper imagen es mayor que 2 en ese caso pasó súper imagen porque se no se colgará un mayor que uno pasó esta imagen / igual a 2 cada vez que pase por aquí lo que quiero que ocurra es que el programa pues mi vida recargamos estamos ahora en el x4 y una buena noticia con respecto a ahora es que se va a convertir en eritrea tivo vemos cuadrados grandes pero ahora si nos fijamos ahora el programa va a empezar a alterar y va a hacer los cuadrados más pequeños vemos como ahora le cuesta más evidentemente como es normal vale vemos como ahora le va costando más y evidentemente evidentemente esto pues bueno dentro de un rato lo que puede hacer es saber si puedo grabar un timelapse y dentro de un rato nos va a proporcionar un resultado pues cada vez más preciso insisto hasta llegar a uno porque si no intentará partir por uno y ahí la cosas puede complicar vamos a verlo si todo va bien pocos segundos tenemos ya el siguiente y ahora lo que va a hacer es que va a volver a empezar pero ahora evidentemente le va a costar cada vez más voy a parar el cálculo pero por lo menos ahora sabemos que tenemos un cálculo completamente iterativo bien ahora me gustaría lo siguiente y es que a medida que el programa va dibujando me gustaría que fuera dibujando en los cuadrados y esto ahora mismo no lo puede tener estos hemos fijado especialmente cuando el sistema va lento donde estás aquí un momento en cuanto el sistema va lento lo que estaba ocurriendo es que hasta que no acaba el porcentaje no veo lo que está calculando yo me gustaría verlo un poco antes bueno una forma de hacer esto es la siguiente vamos y hacer lo siguiente y es que voy a decir bar extra x es igual a vamos a ver es igual a 0 o qué momento no voy a hacer x aquí directamente fuera para x es igual a cero bar y es igual a cero vale entonces yo lo que voy a hacer es que me voy a cargar este este doble foro como tengo un poco de miedo y por cierto voy a guardar en una siguiente versión que es un cambio importante entonces como tengo miedo de romperlo lo que voy a hacer es que voy a moldear los foros esto lo que va a hacer es ahora mismo calcular me solo x 5 sólo el primer cuadrado ese entonces ahora cada vez que cálculo le voy a decir x + + y digo es más cuando vamos allá hechos y calcula y calcula y 800 777 eso lo hago ahora x + + hola x + + así vale x más igual a súper el paso súper imagen x más igual la pasó súper imagen al x lo que va a hacer ahí es calcular los cuadraditos bien entonces yo le digo x es mayor en este caso 512 tenemos que convertir en variable x es igual a cero y más igual a paso super imagen y cuando y sea mayor 512 en ese caso es igual a cero y igual a cero eso lo que va a hacer es que el sistema va a empezar a calcular por cierto que esto lo voy a convertir en 10 mide segundos atrás crea todo lo rápido que pueda y ahora ahora sí vamos a ver y pasó súper imagen partido por 2 ahora si esto lo que hace es volver a empezar volver a empezar pero afinando y de esta forma lo que vamos haciendo es que el sistema lo que vamos haciendo es que el sistema vaya calculando pero nos lo vaya mostrando dentro de lo que es el porcentaje pues por lo menos así puedo saber qué es lo que está ocurriendo y así lo que puede hacer es saber lo que puedo hacer es saber por dónde va y no es tan desesperante puedo obtener un con esto puede obtener un porcentaje evidentemente y vale y puedo saber mejor qué es lo que está ocurriendo muy bien ahora ya tengo que esto es imperativo pero me gustaría trabajar con alguna fórmula de espiral lo que ocurre en este caso es que el sistema está empezando a trabajar desde la vista periférica digamos perdón así desde la esquina superior izquierda cuando realmente cuando vemos vemos mucho mejor desde una vista centrada vemos primero lo que está en el centro de nuestra vista y luego poco a poco vamos afinando en la medida de nuestras posibilidades pues lo que está en el contorno exterior entonces lo que voy a hacer a continuación es intentar implementar un sistema de espiral donde bueno cada vez vaya empezando a trabajar desde el centro y no desde la esquina superior izquierda vamos a hacerlo en un nuevo archivo voy a implementar un algoritmo de espiral voy a parar un poco la ejecución para que no saque el sistema voy a guardar una copia incremental del proyecto y ahora a continuación lo que voy a hacer era ley y me voy a implementar un algoritmo espiral bastante rudimentario todo se ha hecho no era un archivo que tenga menos 64 por 64 pero que tenga un poco de ruido y veremos mejor lo que estamos haciendo ahora en colores quiero mira esto una capa nueva lo pintó de blanco y bajo la paridad así tengo para pintar bien entonces ahora voy a pintar de verdad no se para he dibujado en juaritos para ver lo que estoy haciendo y ahora voy a empezar en un píxel voy a empezar en un píxel por ejemplo este va a ser el pixel 256 por 256 porque es porque es de 512 partido por 2 es decir el centro de la pantalla ahora dónde estás más grande siendo se hace grande entonces ahora voy a hacer x1 entonces esto quiere decir que estoy en el paso dónde estás ahora dar paso es igual a 1 paso creo que lo utilizado antes paso pues ya lo utilizado aquí arriba va a dar paso a espiral entonces y esto lo veo y ahora vivo el primer paso x mayor luego sí y luego así y entonces esto es x 1 a ver el tiempo canalizando cuales paso espiral x paso espiral y pero básicamente es ahora bajo abajo bajo bajo y otra vez entonces primero entrando esto realmente es x y la espiral para bucle espiral es igual a 1 un bucle espiral vamos a analizarlo estoy cansando y espera el estado spears al estado es igual a 0 sí spears al estado es igual a 0 en ese caso formaron lo primero espiral x + + y ahora a formar espiral y es igual a cero realmente no realmente es estoy en el que me cuesta menos igual hay algún algoritmo vamos a verlo pero se quería implementar una mano pero creo que igual me cuesta menos buscar uno que exista voy a verlo en fer una cosa yo ya estaba buscando implementar una espiral de arquímedes pero voy a hacer una cosa que igual es más divertida y más sencilla que es la siguiente bar radio es igual a cero radio 1 y bar ángulo es igual a 0 entonces en cada uno de los pasos que dar ok y de firmar radio es más igual a uno y rara ángulo es más igual a 1 así que se nos va a ir nadar variedad y ahora voy a decir lo siguiente voy a decir x es igual a más puntos de el ángulo multiplicado por el radio y esto de hecho incluso voy a ser más punto round ahora esto es la equis esto es ley griega punto seno y voy a decir sí la x es menor que 0 y es menor que 0 la equis es mayor que 512 la y es mayor que 512 en ese caso en ese caso que por cierto esto es 256 más 2 256 más ahora vamos a verlo muy bien ahora en este caso diré que x es igual a los 56 esto siempre es igual realmente radio es igual a 0 y ángulo es igual a 0 este es el indec 6 vamos a verlo vamos a ver qué sale de aquí cuidado 75 el 75 radio más igual a 1 porque porque lo que estoy haciendo es redefinir y no quiero redefinir y ahí lo que está ocurriendo es que el sistema está trabajando en espiral así cuando esto ocurre y cuando esto ocurre quiero decirle que pasó super imagen partes de igualados vamos a verlo ahora vale para haciendo esto aquí muy bien lo que vamos a hacer vemos que finalmente va saliendo igual solo divertido pero pero el radio bueno esto es cómo podemos ver al final de on va saliendo pero va saliendo desde un punto de vista más centrado ahora mismo creo que esta idea que tengo bien pues vamos a ver esto es más un tope por 2 partido y esto es el paso super imagen yo creo que esto va a ser al revés a ver vamos a verlo ok ok espiral sé que parece que va al reverso si para hacer al revés entonces pasos pero imagen partido x punto x 2 bueno son espirales muy curiosas de hecho no es exactamente lo que quería de hecho pero vamos a dibujarlo en alguna parte donde lo podemos dibujar es por ejemplo arriba más que nada para asegurarnos técnicamente al final será correcto pero para asegurarnos de que realmente hace lo que necesitamos entonces voy a hacer una cosa voy a hacer aquí el choque esto es contexto izquierdo punto fil recto voy a decir contexto izquierdo punto y está él es igual a black y así lo que va a hacer es para pintar ahora debería pintarme el contexto izquierdo debería estar me pintando algo a ver dos euros y ahí se está pintando pero qué está pasando pues lo que está pasando aparentemente es que en el bucle y está cogiendo los datos en el izquierdo técnicamente esto no hace falta con texto derecho con texto izquierdo porque está cogiendo todo bueno no pasa nada porque lo que puedo hacer es canvas espiral espiral con texto espiral es espiral y lo que voy a hacer es decir que esto lo dibujo en el contexto espiral y ya está y así no machacamos haga bien recargamos ahora en contexto aquí abajo eso es lo que está ocurriendo vale qué bueno es un sistema de cálculo la verdad pero no es el que quería realmente voy a decir y cuando esto ocurre contexto espiral punto clear recta de 0 0 512 como a 512 entonces esto es más punto por 20 por ejemplo por 20 lo que quiero es que me haga una expirar voy a probar unos cuantos pasos una aproximación tanto la he obtenido en base a poner pues este aumento de radio y este aumento de ángulo ustedes ven pruebas pero si nos fijamos por ejemplo en esta espiral que tenemos aquí podremos comprobar como el sistema lo que va haciendo es en base a esta distribución de puntos que podemos ver en la pantalla por lo menos vacío en una espiral y una cosa que me gusta bastante es que los puntos tienen una densidad razonablemente uniforme donde hay ligeramente más densidad en el centro y ligeramente menos densidad en los extremos que esto de hecho es justo lo que quiero que ocurra porque quiero darle más importancia a lo que ocurre en el centro y menos importancia lo que ocurre en los extremos entonces si nos fijamos por ejemplo empezamos a ver cómo es el sistema realmente está empezando a realizar este cálculo en base a y los puntos que hay en el centro el sistema es suficientemente es razonablemente satisfactorio porque fijémonos que de esta forma lo que está haciendo es empezar a ver qué es lo que está más cerca y qué es lo que está más lejos pero simular de alguna forma la visión periférica del ser humano o de los animales es decir nos importa más lo que está delante o sea lo que está en el centro perdón y nos importa menos lo que está en la periferia falta afinar probablemente es el algoritmo pero al menos es un algoritmo que en un momento dado pueda verter fácilmente en un procesamiento en vídeo porque por lo menos prioriza pienso que de una forma razonablemente buena lo que estoy realmente buscando qué es quiero ver primero lo que está en el centro y luego más adelante lo que está en los extremos y así al final por lo que voy a hacer es averiguar hacia el final lo voy a hacer es averiguar quién está delante y quién está detrás de una forma insisto razonablemente interactiva voy a dejarlo calculando voy a ocultar voy a ocultar el resultado derecho radio el recto derecho voy a hacer style no este no es el derecho el derecho de la izquierda debe está el es igual a display none esto lo que va a hacer es que no se va a ver en pantalla pero sí que se muestra para el cálculo qué es lo que importa y bueno voy a dejarlo calculando un rato para ver que el resultado me da al final

hasta ahora todos los ejercicios que hemos hecho estaban hechos teniendo en cuenta imágenes fijas y no hay ningún problema por ello en el sentido de que un archivo de imagen fija pues puede ser una fuente de adquisición de información tan válida como un archivo de cualquier otro tipo pero evidentemente es también interesante analizar qué es lo que ocurre cuando tenemos archivos en movimiento vamos a ver entonces hay la idea está en que voy a crear un documento nuevo voy a ir a inteligencia artificial avanzado voy a ir a ejercicio 2 y lo que quiero ahora vamos abrir brackets lo que quiero ahora es trabajar sobre un código que me permita trabajar realmente en animación en vídeo voy a crear nuevo archivo lo guardo en ejercicio 2 guardo como index html y lo primero que quiero es el alcade e información así que para adquirir información voy a seleccionar la plantilla voy a ir a chrome voy a buscar html5 webcam y voy a la información de una webcam así que vamos a ver vamos a alguna plantilla de las muchas que hay por internet [Música] código javascript vale estoy donde buscar la más sencilla posible yo creo que con esta me puede servir ahora también lo que hace recién que el código asiste vengo por aquí hoy vamos a eliminar este point copiamos esto de aquí y ahora voy a crear un script y en el script lo que voy a hacer es introducir este código muy bien e introducir este código en este caso y digo voy a limpiarlo para hacerlo lo más sencillo posible y además este ejercicio que estoy haciendo quieras que no pues va a constituir una especie de plantilla así que bueno hay un controller con un botón hay un vídeo eso sí entonces lo que voy a hacer es esto fuera el vídeo sí el capturen no lo quiero es decir no quiero empezar a capturar cuando pulse sobre un botón quiero empezar a calcular directa a capturar directamente luego elegimos empezar a capturar con un botón fantástico pero snap por qué me dice snap cuando el botón es nada vale vamos a definir unas constantes que es la definición del vídeo mientras entienda por 720 de momento vale y en este caso tenemos una función donde lo que hace es intentar con un try cats ejecutar el vídeo y si no puede en ese carro suelta un error me parece fantástico es decir yo soy el el primer digamos defensor de del trayecto pero en este caso yo lo que quiero es simplemente pues ejecutar el código así que esto fuera quiero dejar el código lo más sencillo posible y luego evidentemente está clarísimo que el try cut siempre es una variable perdón siempre está la estructura de control muy positiva muy conveniente para intentar hacer algo y si falla pues entonces lo que sea vale pues vamos a ver el contexto vamos a ver por aquí vamos al contexto y en este caso no veo que se esté definiendo el contexto aquí está el contexto es igual a camp basket con textos de igual esto lo cambio ahora y en el disney para lo que quiero es que esto se ejecuta constantemente entonces esta es la función de inicio a la función de inicios ok y ahora 7a el inicio dentro de un segundo y función inicio y la función de inicio va a tener esto vamos a probarlo a ver si de algún error ejercicio 2 permitir la cámara vale pero no será audio bien aquí tengo la cámara ya está y vamos a inspeccionar pero ya elementos consola vale y ahora quiero elementos esto que estoy viendo es el vídeo y aquí tengo el canvas el canvas de momento no está todavía dibujando vale pues vamos allá tengo ahí el vídeo correctamente representado y ahora lo que quiero básicamente es decirle al sistema que constraints de pecho está cogiendo el vídeo correcto y con texto email vídeo en 00 lo que sea vale pues a partir de ahí voy a hacer que esto es bar temporizador es igual a esto te digo killer time out temporizador y s time out inicio dentro de un segundo es decir me lo va a ejecutar cada segundo vamos a verlo ahora vale es como estoy oyendo doble es un poco la pista de micrófono que te oí es doble no puedo bajar esto voltear el audio controles esto permite bajar el volumen aquí sigo grabando volumen hasta el ritmo pero ahora lo que voy a hacer es decirle al sistema que quiero bajar el volumen entonces esto en 5 videos set volumen con nadal salomé es esto entonces punto volumen voy a decirle aquí [Música] que vivió punto volumen entonces recargo y así directamente el volumen es cero y no me vuelvo tarumba escuchando en el mismo abs y no ha perjudicado al audio correcto y para a continuación podemos observar como lo que estoy haciendo podemos ver ahí es pasar el contenido del vídeo al del vídeo al canvas que está por ahí abajo con una actualización de un segundo en este caso el vídeo en el canvas lo que puedo hacer es 1280 x 720 para qué tenga la misma resolución y 1280 y por simplemente más que nada para que no me distorsión y ahora debajo a un segundo de definición o un segundo de retraso tengo el objeto y por último también lo que puedo hacer es en un momento dado con el estilo pues puedo el vídeo y decirle display mount para qué solo me muestre el canvas vale que curioso ahora deja de mostrar es interesante que por nuevo vídeo porque es pleno se me deje beber el canvas cuando está hecho de unas cuantas veces y nunca sucedió de esto mira transformó es kyle y le voy a decir 0 0 sí pero para el vídeo está ahí y se dejó el vídeo que digo quiero display no y se me queda congelado que es curioso es curioso porque display none no elimina el vídeo sino que cosméticamente lo oculta o sea sigue estando en el don pero cosméticamente lo oculta entonces no lo sé pues 0 píxeles height 0 píxeles usa lo quiero ocultar le quiero que el vídeo esté pero yo no lo vea quiero únicamente el canvas vale esto está mejor muy bien pues ahora a continuación evidentemente en lugar de pues una vez por segundo puedo hacer 10 fotogramas por segundo ahí lo veo más claro o lo podría hacer a 33 a 30 fotogramas por segundo no me hace falta que sea tan fluida ahora mismo vemos que estoy viendo algo que parece un vídeo pero no es un vídeo realmente es un canvas no quiero que esté tan fuerte vale lo voy a poner igual a 200 a 5 fotogramas por segundo muy bien ahora si yo tengo esto a continuación no vamos a poder demostrar la misma forma que muestro hasta ahora realmente como yo puedo interceptar este canvas entonces voy a hacer una sencilla operación simplemente de demostración para por ejemplo invertir los píxeles ahora a continuación lo que voy a hacer es simplemente vamos a verlo con textos de emails y ahora bart datos es igual al contexto contexto agett image data desde cero como acerbas también los 80 como las 720 y ahora y esto es punto dato que directamente los datos y realmente no realmente estos son los datos entonces quiero por mar y es igual a 0 y es menor que datos punto data punto link y más más y ahora voy a hacer que datos y más más no y es más igual a 4 porque quiero ir cada píxel y me quiero dejar el alfa sin tocar entonces datos de datos punto data es igual a 255 menos datos punto trata de ello es decir estoy invirtiendo el color y lo mismo y lo mismo lo quiero hacer con el componente rojo que es este con el componente verde que es este y con el componente azul que es este y por último contexto punto put emails data datos vamos a verlo será recargo lo que va a ocurrir ok porque no está funciona primero se trata de datos y dimensión y estos datos de ataque y más 3 es igual a 255 vale ok vale no hay nada en el kart no es lo cual me extrañó converso muy bien no veis el sofá por último se trata así si ese es el perdón perdón pues se trata de datos como 0,0 es lo que quiero poner y dónde lo quiero poner y ahora si nos fijamos lo que ha ocurrido es que tengo la imagen en negativo es decir he invertido los tres canales de color simplemente esto que acaba de hacer es una demostración para comprobar que podemos un vídeo meterlo en el canvas y una vez que el vídeo está en el canvas podemos hacer lo que nos dé la gana podemos empezar a tocar el vídeo podemos empezar a gestionar podemos empezar a hacer literalmente lo que queramos bien una vez que tenemos esto es cuando ahora voy a guardar esto como una siguiente versión del ejercicio y es cuando a continuación lo que quiero es saber cuando hay movimiento dentro de una imagen y cuando no es decir y ahora mismo en esta imagen donde la imagen está quieta lo que quiero averiguar es qué píxeles se están moviendo y qué píxeles están sietes porque básicamente lo que voy a necesitar lo que voy a querer es descartar al igual que el ejercicio anterior nos ha servido para diferenciar el frente del fondo nos ha servido para y poder extraer los objetos que están delante y quitar el fondo este ejercicio nos va a servir que de hecho y luego lo vamos a combinar con el anterior nos va a servir para decirle al sistema que es lo que queremos es quedarnos únicamente con aquellos píxeles digamos que se estén moviendo vamos allá así que con esto lo que vamos a hacer realmente es reutilizar parte de lo que hemos utilizado hasta ahora entonces me voy con texto esto es contexto con texto con texto con texto y vamos a comprobar cómo se funcionando y algún error quizás en contexto 10 vale ahí está y en lo que quiero es como decía reutilizar parte del código del ejercicio anterior para localizar cuánto se mueven los píxeles vamos al ejercicio 1 a por ejemplo el index 9 vamos a ver aquí está aquí aquí lo que quiero en este caso distancia pero otro canvas por cierto para pintarlo en el mismo vamos aquí pero contiene canvas pero otro cambio se igual y el resultado y voy a ver si eres contiene canvas exposición absoluta posición relativa mientras que canvas es posición absoluta 20 píxeles y left ser píxeles y así estarán los dos pegados bien ahora lo difícil es esto porque me voy al index 2 quito lo de convertir lo negativo ya hemos visto cómo funciona y ahora quiero los datos ahora quiero crear una imagen anterior una imagen con la que comparada es decir que quiero que cada fotograma se compare con el fotograma anterior y por eso es por lo que tengo que decirte bar el fotograma anterior entonces voy a decir qué fotograma anterior es igual a contexto punto image dato 0,0 a 1280 720 y así me guardo el fotograma anterior ahora lo que quiero en este caso es fotograma actual es igual a lo mismo una vez que ya tengo los fotogramas lo que quiero del ejercicio 9 es para equis y para ella y es decir dar paso es igual a los 16 por ejemplo quiero bar x es igual a 0 x es menor a 1280 x no es igual paso y y menos y paso esto 7 venta vale y ahora lo que ocurre vamos a verlo es que ahora quiero este código para ver cuánto se ha movido dibujamos la imagen contador suma jornada diferencial de x ya estamos a distancia es igual a cero diferencial de x es todo esto al fin a distancia y esto esto es el radio este espiral pero esto ahí muy bien ahora esto no va a funcionar directamente evidentemente por supuesto pero vamos a verlo vamos a hacer una cosa en este campo y voy a colocar otro campos llamado anterior con texto anterior es igual a camas anterior y canvas anterior es igual a anterior cada vez que pase por aquí con texto anterior punto por email data e este fotograma network el fotograma actual ok y vamos a esto de momento lo voy a nuclear lo voy a meter vamos a ejecutarlo muy bien multimedia se trata esto lo pongo en 0 0 ok pero ahí lo que estaba ocurriendo y esto es el resultado de hunted y esto es la anterior el resultado resultado un resultado vale contiene canvas louis 1280 píxeles height 720 píxeles vale contiene canvas contiene canvas ahora parece que sí pero está como parado ahora así que lo que estoy viendo en la parte de abajo hace momentos aburridos pero que estoy viendo en la parte de abajo hasta que se quedó frito vamos a verlo ahora lo que estoy viendo en la parte de abajo es el fotograma anterior parece que no igual podemos ver si tiro un retraso de unos dos mil 200 segundos milisegundos y ahora se mueve la mano claro ahora mismo no hay ahora mismo hay diferencia prácticamente ok aquí esto lo pongo aquí y lo que quiero es comprobar que funciona más actual programa actual con pero igual a 1 contador + + y soy contador es mayor o igual que 1 en ese caso solo en ese caso ejecuta me este código ahora 3 vamos a verlo ahora a horas todo bien quieres que la imagen sea y al revés creo que hay una diferencia de un fotograma entre las imágenes desde el tipo i versador e vale fotograma actual 57 fotograma actual vamos a ver mallorca 2 y ahora el siguiente ahora sé y ahora veo que siempre hay una diferencia entre un fotograma y el siguiente es el anterior ahora es cuando puede buscar la diferencia entre los dos y al buscar la diferencia entre los dos elementos vamos a ver el resultado está ahí ahora es cuando puedo averiguar cuántos se mueven el uno con respecto al otro vamos a cerrar el siguiente ejercicio en el siguiente vídeo para ello lo que voy a hacer en este caso es guardar el index 3 y ahora ves lo que estoy aquí estoy aquí yo creo que no va a funcionar a menos que y lo empiece a modificar entonces esto es contexto área búsqueda no está definido muy esto es contexto anterior y esto es con un texto resultado a ver muy bien ni siquiera tiene vale canvas resultado entonces canvas el resultado claro es que esto tiene que ir allí contexto resultado es igual a canvas un resultado y entonces contexto resultado y bueno me va a dar errores porque me hacen falta variables y esto es amplitud cuadrado para su imagen de estos y vamos a ver recargamos espero errores parecería raro no voy a ningún error de hecho no está pasando nada así porque estoy en la línea extra esencia yo me extraña que no haya ningún error zuma satisface pues suma suma su máxima de esta suma súmese igual a esto y éste no lo ha copiado vamos a echar vale momento bueno es curioso porque en el momento por lo menos está dibujando cosas no parece que sean correctas pero por lo menos está dibujando cosas así que ahora para empezar paso 16 paso 64 por lo menos porque además quiero que el software vaya fluido estas son líneas en el momento no están encontrando nada evidentemente voy a bajarlo a 200 y bueno y poco más bueno valen ok las líneas de momento los transformó nada por cierto voy a decir con texto el resultado cada vez que arranco con texto resultado apuntó que recto es 0,0 a 1280 720 para que lo borré cada vez y ahora lo que tengo que hacer es buscar esos puntos de uno a otro contexto que tenéis trato con texto anterior temporales 1 y esto en principio parece correcto pero evidentemente no lo será no será porque además voy a ponerlo cada por ejemplo y ahora en la consola menos 32 menos 16 es decir no está encontrando correctamente ninguno de los píxeles que vamos a ver la siguiente iteración menos 32 menos 16 exactamente estoy en lo mismo es decir no estaba cogiendo correctamente texto con texto anterior [Música] principio tibio es correcto evidentemente en alguna parte no lo es ya voy a buscarlo voy a buscarlo y a continuación comprobaré a ver dónde está voy a grabarlo como index 4 y en x 4 lo que habré hecho es aplicar el código del ejercicio anterior vale pues lo había ocurrido es que estaba mezclando por una parte el super paso y el paso entonces he puesto aquí el paso super imagen y aquí el paso es que paso le haya puesto 32 con lo cual no hacía realmente ningún cálculo bueno para el paso de hecho el puesto 4 a cabal para el 4 porque manera de búsqueda es muy grande pues así un poco aligerar los cálculos entonces volvemos aquí y ahora veremos como para qué ahora en cuanto se refresque el fotograma vemos como bueno salvo la televisión negra para que el fondo que tengo es un poco extraño pasar esto a más velocidad para que el límite sea el cálculo bajar la cámara iremos viendo como el programa intenta seguir el movimiento de la cara pero un fondo tener un fondo neutro tampoco me conviene para esto pero bueno y ahora lo que voy a hacer es decirle al sistema el paso super imagen lo voy a bajar a 32 recargó podría hacer pruebas con imágenes más pequeñas también es cierto lo que está ocurriendo es que no hay pequeño la mujer es un grande quería decir con lo cual bueno cómo hacer espero si puedo trabajar con la imagen más pequeña de hecho que seguro que puedo para ello vamos a guardar el ejercicio 5 y voy a hacer lo siguiente voy a tirar un 640 por 720 resolución anchura altura el resto del código el 5 y así lo que está tardando el sistema de éxtasis metros a ver si la podemos bajar 6 paso super imagen 32 es correcto pero el paso bueno hasta 4 y está bien hay perdido profesión llegado ahí porque cuando me muevo rápido el sistema me deja de detectar porque he puesto un área de búsqueda de 16 por subir a 32 de nuevo y el paso de 8 y en paro super imagen pues igual 16 u 88 aunque probablemente va a ser mucho bueno estudia otra cosa pasó super imagen 16 haciendo es moverme para comprobar que el sistema me está siguiendo y puedo hacerlo con la mano si el sistema realmente me está detectando por cierto otra cosa que quiero hacer y por ejemplo veo como unos asteriscos es que quiero descartar aquellas sumas que no sean correctas entonces en este caso digo si suma es igual es igual a cuanto a esto de aquí quiere decir que realmente ha habido algún cambio vamos a verlo y lo que quiero es que sólo aparezca en el caso de que realmente haya algún campo pero esto debería buscar un fondo bueno no sé si de la vuelta a la mesa realmente donde no tengo una pared blanca para que el sistema se pueda mejor porque cuando el fondo es demasiado blanco simplemente no lo atrapa correctamente voy a probar a darme la vuelta a la mesa para eliminar tanto ruido voy a optar por una estrategia razonablemente sencilla qué va a consistir en lo siguiente voy a cada uno de estos píxeles voy a mutar y para ello voy a grabar una siguiente versión del ejercicio desde aquí hasta aquí vamos a la versión 6 un nuevo error quejas 7 18 vale pues ahora lo que voy a hacer es que voy a marcar solo aquellos puntos que realmente sean diferentes entonces digo punto 1 es igual con texto en data tx y en 111 de lata llegar punto 2 es igual al contexto punto getty image data de x y como 1 1 punto data así que a continuación punto y jugador esto es contexto el anterior punto 1 punto data de y punto 2 pero el punto de alta no hace falta [Música] el valor absoluto es mayor que no sé 40 por ponerlo en ese caso contexto resultado punto field recto en x y coma 55 vamos a probarlo y es notifam y claro de 0 vale entonces ahí como podemos fijarnos lo que apruebe el programa hace es detectar únicamente los puntos que realmente están en movimiento y después de haber hecho este filtrado es cuando podemos indicar que solo queremos realizar el cálculo sobre aquellos puntos en los cuales se cumplen esta condición así que ahora lo que puedo hacer es primero des comentar el código voy a guardar una versión incremental vamos a por las 7 y vamos a desbloquear el comentario y por otra parte la llave del condicional la voy a colocar al final de todo este código tras lo cual lo voy a sangrar para que quede claro que está dentro de ese bloque condicional vale si todo ha ido bien y estamos ahora en la versión 7 del ejercicio lo que vamos a poder comprobar es que solo va a realizar el cálculo sobre a aquellos puntos que ahora mismo se estén moviendo en la pantalla con lo cual el rendimiento del sistema mejora bastante ya que ahorramos una unidad de cálculos y podemos ver que los vectores en principio empiezan a ser correctos hay que tener en cuenta que en aquellas superficies en las que el color es similar es difícil que realmente coja un vector de movimiento pero en aquella superficie es donde hay una cierta irregularidad en el color pues es más fácil detectar la dirección estamos trabajando a 200 milisegundos voy a probar a bajar a 100 aunque sospecho que ya tenemos un cuello de botella con el rendimiento pero no por si acaso va bastante bien y ahora lo que puedo hacer es cambiar el super paso lo teníamos a 16 ahora sí puedo probar a bajar a 8 algo que era prohibitivo antes de hacer el filtro ahora nos lo podemos permitir entonces en la primera interacción evidentemente no ha podido detectar pero si nos fijamos ahora mismo los vectores de movimiento son bastante son bastante mejores bien lo voy a volver a poner a 16 porque a 8 en el primer filtro así que innecesariamente cargante simplemente lo que me gustaría ahora es trabajar con flechas entonces para eso he encontrado por aquí una pequeña librería que dibuja una flecha más que nada porque aquí ya están calculados los senos y los cosenos de la punta de la flecha para ahora no perder tiempo calculando un poco de trigonometría entonces voy a esta función tengamos en cuenta que el autor nos está diciendo que tengo que poner el contexto begin pad y contexto stroke antes y después así que me vuelvo al código voy a desactivar mi código de línea por si acaso más adelante lo quiero recuperar voy a poner esta función fuera del código ahora quiero contexto resultado punto beijing paz y contexto resultado punto stroke no hace falta tanto contexto resultado punto estruch y aquí en el medio lo que voy a hacer es poner la función de canvas a row que me invita a poner el contexto resultado el from es la equis el from es la y el tú es la equis más el diferencial de equis y el y slayer y además el diferencial de y si todo ha ido bien a decirle que quiero recuperar esta línea es el stroke white vamos a volver y vamos a verlo y ahora muy bien bueno yo diría que las flechas están al revés están absolutamente al revés así que esto va a ser más diferencial de x más diferencial de y y el destino le quite los diferenciales así que si todo bien ahora comprobamos como las flechas están correctas y bueno voy a hacer el punto aquí este fin recto contexto resultado punto feel style es igual a white y voy a hacer unos puntitos de 2 píxeles por 2 píxeles con esto podemos comprobar vamos a por la mano con esto podemos comprobar como el sistema es capaz detectar qué píxeles están en movimiento y a partir de ahí comprobar cuál es la dirección de movimiento de estos píxeles esto será interesante más que nada para que el sistema descarte toda aquella información que no es importante y se quede con aquella información que realmente debe valorar por ejemplo también nos puede servir para quitar el fondo y dejar el frente y en definitiva para filtrar algunos tipos de cálculo

bueno otra otra cosa una vez que ya tenemos esto vamos a ir al ejercicio 7 una vez que tenemos esto la pregunta es qué podemos hacer a continuación es decir qué hacemos con las flechas para que nos sirven las flechas entonces las flechas el movimiento en sí mismo nos puede servir para detectar en qué cosas se tiene que fijar una inteligencia artificial y en qué cosas no se tiene que fijar tanto así que ahora a continuación lo que voy a hacer es lo siguiente lo que voy a hacer voy a ir a brackets vamos traer el ejercicio 7 voy a crear un nuevo ejercicio lo voy a guardar dentro d 3 junto a html y ahora lo que quiero sobre este ejercicio es de momento de momento temporalmente esconder este código vamos señor y ahora simplemente no está ocurriendo nada vale vamos a verlo 116 116 vamos a ver 116 quitamos esto y esto recargamos y ahí lo tenemos y ahora quiero hacer una función de búsqueda de béjar borders así que voy a hacer esto x es igual a 0 x es menor que anchura x + + y es igual a 0 y es menor de altura y más más y ahora lo que quiero hacer es que para cada uno de los píxeles quiero averiguar si hay un borde vamos a hacer algo muy sencillo bar pixel 1 es igual con texto getty images data de x y como 11 y a continuación lo que voy a hacer es que bajar pixel 2 parte 2 es igual a x1 y entonces dicho esto claro ahí lo que estoy haciendo técnicamente es como tenía que establecer una operación por cada uno de los píxeles de la imagen es probablemente vamos a encontrar más operativo toda la imagen es decir la imagen uno es igual a contexto de inmediato 00 287 20 bar imagen 2 es igual al contexto punto g data cuidado anchura y altura 0,0 anchura y altura y esto es contexto con texto anterior y ahora para cada uno de los píxeles formar y es igual a 0 y es menor que imagen 1 punto data punto links y + + y a partir de aquí y más más y más igual a 1 y massimo la 4 y ahora lo que quiero es hallar quiero decirle que es cierto puntos alta menos imagen dos puntos data + 4 que es el pixel siguiente todo esto el valor absoluto es menor donde yo estoy es menor que no sé un 20 por ejemplo en ese caso lo que voy a hacer es lo siguiente en el contexto por ejemplo voy a hacer imagen 1 punto data de allí es igual a 0 en caso contrario es igual a 255 lo mismo voy a hacer para y 1 y 2 y uno y más 2 entonces al final lo que hago es contexto punto inmediata y más uno vamos a ver de imagen vamos a ver que hay porque igual en la línea 72 hay un error si aquí falta un paréntesis línea 72 pero para teóricamente no falta pero son estos así es menor que 20 vale 62 un corchete vale vamos a ver la última data quiero poner esto en 00 siempre mira esto bien y haciendo esto vemos como el sistema empieza por la información voy a hacer esto en imagen 2 hoy voy a hacer lo siguiente vamos a ver la imagen temporal es igual a imagen 1 imagen temporal y así guardo los datos en un contenedor valga la redundancia temporal y ahora vamos a verlo ahí lo que estoy haciendo es buscar vamos a ver no se ve todavía una mano buscar los bordes buscar las aristas y al buscar las aristas lo que estoy haciendo es poner aquellos datos vamos a poner 100 y ahí vemos cómo empezamos a buscar no tengo un efecto bastante el suelo era completamente involuntario pero es curioso bien y esto ocurre porque antes de hacer nada más contexto punto crear recta 0,0 como anchura como altura vale no vamos a verlo vale realmente nada claro esto hay que ponerlo al principio me sigue pintando por algún motivo es curioso está como encontrando los bordes y vamos a ver con texto clear recta esto lo he guardado como index es correcto y bueno contexto otro email vídeo voy a guardarlo como ejercicio 2 para asegurarme que el sistema no esté cogiendo una versión anterior ok con texto que tenéis datos y ahí el problema está en la imagen temporal por qué esto está mal está ahora mismo yo no quiero la imagen 2 yo quiero esto la misma imagen ahí es lo que estaba mal muy bien e imágenes notifight la imagen 1 vale y ahora ahí podemos empezar a ver es menor que 100 pues voy a poner menor que 20 y ahí como podemos ver ya tenemos un detector de bordes vamos a afinar un poquito más menor que 30 porque 40 o 50 estoy buscando también los bordes vaya pues menor que 5 estoy buscando los bordes nuestra cosa con respecto al píxel superior perdonar con respecto al píxel vecino esto me puede servir para que aquellos píxeles que estén dentro de este bloque pues realmente los coja los pinte vamos a verlo vamos a invertirlo por cierto por nada en particular más que nada es que parece que el color está invertido por ejemplo y ahora una vez que tengo este detector de bordes es cuando puedo decir que lo que quiero es estoy aquí sí esto si esto es cierto esto es cierto y -4 y más 4 más y más anchura por 4 y esto es cierto estoy revisando los píxeles de izquierda a derecha arriba y abajo en ese caso ahí tendré un buscador de gorda es un poco más avanzado vale ahí tenemos realmente un buscador de bordes que básicamente nos permite averiguar el objetivo es que yo por ejemplo ahora sí tengo píxeles el movimiento en esta zona de la cabeza pues lo que voy a hacer es buscar los contornos es decir voy a buscar hasta qué punto puedo tener contornos y vamos a averiguarlo me ponen otros que va a ser demasiado grande afinamos el algoritmo allí por ejemplo pues bueno quizás empezaría a funcionar ya lo que tengo que hacer ahora es buscar un algoritmo que sea un poquito más sólido y que me permita encontrar dónde hay realmente un problema entonces con esto lo que puedo hacer es crear un pequeño bucle for crear un pequeño bucle form para que me permita ver el pixel en x y en y vamos a por ello una vez que tenemos esto una vez que tenemos vamos 3 index 2 es cuando podemos crear un algoritmo que nos permita trabajar con una detección de bordes un poquito más compleja y un poquito más limpia en este caso estamos cogiendo manualmente pixel arriba pixel abajo lo que podemos hacer es bueno buscar lo siguiente vamos para cada uno de los píxeles es dice es igual voy a poner radio realmente es anchura captura ya lo tengo utilizado así que voy a poner por ejemplo para alcance es igual a 3 formar x es igual a 0 – alcance x es menor ella es más más arábigo por lo mismo pero en y por aquí y ahora aquí digo gatillo es igual a cero más a bs a bs este busco si gatillo es mayor que 0 y entonces gatillo + + vale pues lo que hacemos en este caso es que imagen 1 punto data es imagen pero esto es y más x por 4 más ingeniera por anchura por 4 y esto es y él y esto es correcto pues en ese caso vamos a hacer lo siguiente y gatilló es mayor que 5 por ejemplo que 3 o lo que sea vamos allá con esto lo que he hecho es tiene nexos con esto lo que he hecho es hacer lo algoritmo que haya bordes vamos a inspeccionar para ver si tenemos algún error que parece que sí en el ibex-35 el 75 si esto era un punto y coma y gracias de 6 el otro punto de color mariara anchura 4 es notifight por anchura por 4 y ahí básicamente lo que tenemos es un método de detección de bordes como podemos ver el borde hallado ahora es mucho mejor más pesado evidentemente pero también más preciso vamos a decir si gatillo es mayor que 5 por ejemplo y ahí pues intentamos eliminar ruido a través de gatillo es mayor que 1 por ejemplo el gatillo es mayor que 2 y lo que estoy intentando hacer evidentemente es un método de hallar bordes para que en el momento en el que tenga una serie de píxeles moviéndose yo pueda decir bueno dime cuál es el contorno que está encerrado dentro de estos píxeles ahora a continuación por ejemplo lo que quiero es pintar y cuando digo que quiero pintar lo que quiero decir es que quiero empezar a rayar quiero empezar a pintar contorno para ver qué es lo que está metido dentro de este objeto es decir para ver ahí para diferenciar una cara por ejemplo ahora lo que tengo que hacer es bueno buscar algún algoritmo de los de pintura que me permita pintar de la forma más rápida posible los elementos en pantalla ahora que tengo por ejemplo está aquí esta imagen ya pintada puedo crear un algoritmo de pintura o bien lo que puedo hacer es buscar un algoritmo de pintura que se llama baqueta telecinco canvas vaquer paint para que si lee por ejemplo pues vamos a ver of love field y veremos que hay personas que postean algoritmos de relleno con botes de pintura y que son bastante bastante efectivos esto no sé qué es pero esto no es lo que estaba buscando y payró i’ve loved field html5 canvas flor estaba preguntando por un método como éste y bueno hay hay frutos fil por ejemplo phil pixel y feel pixel como vemos es vamos a ver eso es elementos pues bueno lo que digo lo que quiero es digamos si yo cojo un píxel por ejemplo este quiero decirle al sistema quiero rellenar todo esto con color quiero poder rellenar con color y a partir de ahí lo que quiero es averiguar un perímetro en definitiva para poder extraer un objeto en pantalla y poder decir no quiero realizar una evaluación de formas con redes neuronales por ejemplo sobre toda la pantalla porque estoy perdiendo el tiempo sino en lo que quiero es únicamente centrarme en aquello que está en movimiento y por tanto es candidato a ser un objeto interpreta bleu bueno pues vamos con esta parte del relleno y en este caso vamos a ver aquí vance y el correcto vamos a html5 canvas field flow field tengo aquí un feeder entonces bueno aquí veo que alguien ha dejado una función que en principio parece que lo hace bastante rápido vamos a ver y tengo aquí perfil el segura function pero esto vamos a copiar todo esto y bueno en principio en principio en principio pues vamos a pegarlo en nuestro correo vamos allá vamos a pegarlo aquí en funciones guardo recargo 3 en textos y lo que voy a hacer ahora estamos con el index 2 correcto voy a grabarlo como index 3 3 es intentar realizar un relleno pero tenemos entonces una luz más superior y entonces ahora entonces ahora lo que voy a hacer es que para cada fotograma bueno pues eso por qué donde pone ftx es contexto contexto con texto siempre que vea un contexto en este caso estoy soltura [Música] vale en principio los tres contextos yo creo que ya canvas punto wifi estos anchura la empresa ahora y lo que voy a hacer es que por ejemplo vamos a ver cómo se usa esto es crucial y por ejemplo voy a poner anchura partido por 2 altura partido por 2 si todo va bien recargo bien sacando el inspector porque seguro que tengo algún error recargo bien get píxel por píxel post tiene pinta de ser otra función son otras funciones las pongo aquí abajo ejecuto en principio desde llanes talla haciendo el efecto es curioso estas son las funciones era teóricamente sí y ahora bien eso es justo eso es exactamente lo que quería y es que si nos fijamos lo que está haciendo es rellenar esa parte interior ahora lo que tengo que hacer evidentemente es hacer que los márgenes sean más fuertes pero por lo menos veo que está rellenando ya la parte correcta muy bien voy a hacer que los márgenes no que me rellene el centro yo no quiero rellenar realmente el centro en este caso me estoy aprovechando de que mi cabeza está en el centro lo que quiero es ahora mezclar los dos códigos para que rellene únicamente el la cabeza digamos real vamos allá así que ahora vamos a hacer soy gatillos mayor que uno en este caso no no seis gatillos mayor que cinco por decirte algo recargo y como vemos lo que hace es rellenar un trozo menor ya no se puede escapar digamos sería cuestión de buscar un punto un punto medio en el que coja únicamente lo que me interesa ahora una vez que tengo esto voy a hacer otra cosa y es que voy a decir que solo rellene si el pixel es blanco entonces con un texto punto y más datos anchura partido 2 altura partidos 2,11 punto data es igual no es mayor que 200 si el componente es más bien blanco en ese caso rellena esto lo que va a hacer es evitar se rellenan los contornos podemos comprobar y lo que está haciendo es únicamente rellenar lo blanco intentar intentar al menos no rellenar pero de fuera y ahora la gracia de todo esto está en que yo lo que tengo que rellenar es realmente los puntos que se mueven de la pantalla ahora viene la parte difícil porque lo que tenemos que hacer es combinar el código que estamos generando en todo momento yo creo que lo que haría ahora sería generar varios canvas para poder trabajar con más comodidad entonces voy a crear por aquí un canvas resultado vale pues este es si no sé por ejemplo pero este es el resultado voy a poner el stec ambas aquí y este camas lo voy a llevar vamos a verlo pues bordes de esta forma de esta forma por aquí canvas bordes es igual a bordes ahora contexto con texto bordes es igual a canvas bordes y con eso lo que voy a hacer es que esto todo esto de allí es hallar bordes vamos a ponerlo aquí y esto es con texto bordes vamos a verlo vamos a probarlo vamos a ver y dices hay algún error bueno vale ahí estamos y ahí está y ahora lo que quiero es desactivar está de color rojo vale así correcto por qué recordemos que en las funciones con texto bordes y creo que estaba también por aquí con texto bordes yo creo que yo no todavía no esto está aquí con texto bordes y con desbordes y ahora es cuando lo que puedo hacer es desbloquear el código anterior el código anterior y esto es detectar movimiento hasta aquí desbloqueamos ahora esto puede que pese más y ahí tenemos las flechas y ahora básicamente lo que quiero es hacer que el relleno se produzca en cada una de estas flechas vemos como detecta el movimiento pues ahora lo que tengo que hacer es que es cierto hallar bordes esto es rellenar de rojo el resto más pequeño y ahora digo que si esta imagen y a mí rellena me de equis de color rojo si todo está bien y no explota recargo un error con solá ningún error de momento aunque tampoco hace nada comentar un poco este código ahora ahora estaba empezando a hacer s parece que está empezando a rellenar parece que ahí se queda un poco frito no pasa nada esto es cierto anda contador es mayor que 2 vamos a recargar porque parece que la primera iteración se queda un poco frito sigo teniendo un contrato del pregunto voy a en otra pestaña no es esto lo que está machacando no no voy a hacer un curso si esto es cierto y contador es mayor qué 20 con esto lo que pretendo hacer es darle un poco de ventaja al sistema que el sistema de puré él solo aunque se quede un poco frito eso quedó frito o sea que de los fritos y recargar pero parece que el surfing estoy llegando a un punto en el que se queda muy frito ahora me quedo quieto ahora empezar a rellenar se quedó frito bien voy a probar de nuevo y bueno me llega un momento en el que se queda frito los rellena nada pero en cuanto a veces a mover ahí hay algo que está haciendo que se quede frito hay alguna condición haciendo que se quede frito se estaba llegando algún pixel no lo sé vamos a ver 200 sólo estoy rellenando voy a rellenar el negro por probar y ahora hay empieza a verlo el rojo se lo rellena el negro lo convierte en rojo vamos a ver qué puede hacer vale pues tenía una teoría y la teoría se ha confirmado entonces claro en lugar de poner el color rojo he puesto color azul porque estoy preguntando si es cierto que la componente roja es 255 pero claro si la componente roja es 255 y lo pintó de rojo que es rojo 255 en ese caso estoy pintando de rojo cuando a continuación pregunta y volverse rojo es decir estaba haciendo un bucle infinito entonces para no rayar lo que he hecho es que el componente rojo es 255 y lo que hago es pintar de azul y así son dos colores correctamente independientes eso es lo que hace que al recargar pues ocurra esto no parece que haga mucho aunque podemos ver cómo va cogiendo por zonas voy a hacer una cosa voy a poner así voy a poner la mano y la idea lo que quiero vamos a ver momento y allí nos fijamos en cuanto a la vez en cuando pero lo que hace es la mano de color azul vale ahora lo que está ocurriendo y ahí es que coge algunos píxeles de fuera pero cuando coge la mano por ejemplo si nos fijamos pues es capaz de distinguir bastante bien entre lo que es la mano y lo que no lo es vale entonces vale lo que puedo hacer etc lo que puedo hacer al final es pintar siempre el pixel del final del largo por ejemplo después de todo esto hoy [Música] dónde está esto y muchos que se cierran vamos a ver este pues al final fruit field r 2 puntos 25 5,2 puntos 255 de 2 puntos 2 55 es notación de objetos no sé si esto viene al poner la coma era punto y coma no lo sé ahora veremos pero no sé cómo está mal no sé si es por ejemplo 2,2 vale está pintando de y esto qué es muy bien 255 con tan poco estaba la pitada de seguros la verdad sácalo frito pues me voy a pintar de verde sí vale y así puedo empezar a distinguir y me acusa de otro y así por ejemplo se agua así lo que puedo hacer es empezar a distinguir objetos y puedo empezar a solidificar por ejemplo esto no estaría permitiendo ahora mismo diferenciar completamente la mano de la pared por ejemplo ahí lo mismo con la cabeza allí por ejemplo bueno podría limpiar pero en definitiva yo creo que ya estamos viendo cómo puedo seleccionar elementos y puedo detectar patrones de movimiento para a partir de ahí pues poder hacer sólidos y poder eliminar el fondo y puede poder que hacer que el programa se fije únicamente en lo que a mí me interesa que se fije con todo esto y ahora lo que puedo hacer es que me voy aquí arriba vamos a ver esto un poco para que nos sirve vengo aquí arriba y aquí está y ahora aparte de que voy a guardar la siguiente presión del ejercicio ahora es cuando quiero juntarme un poco todo porque me voy al canvas y llamó a este final creo el canvas final tiene lo mismo de siempre contexto final jamás final bien y ahora a continuación lo que quiero hacer es quedarme únicamente en los elementos de color de esta imagen más son los elementos de transparencia de esta imagen y vamos allá entonces o no bien pues ahora al final del todo al final del todo al final del todo al final del todo de estar movimiento somos lo de uno y lo de otro y digo poco bar datos imagen es igual al contexto punto image data desde cero punto cero hasta anchura como altura ahora va datos transparencia es igual a contexto bordes y punto gates image data en 1300 anchura como la altura y ahora lo más interesante de todo es que puedo venir aquí y decir no bar es igual a 0 y es menor que datos imagen punto data punto link y más más y ahora entonces imagen punto dato y 4 que es la transparencia es igual a datos transparencia punto data d de 3 que es el canal azul vale sí todo ello bien a ver momento o hacemos los de siempre sí en otras transparencia de datos ese fuera cero am y no solo es igual a cero + 2 es igual a 255 en ese caso datos imagen data de y 4 que es la transparencia es igual a cero y por último con texto final punto image data en tanto su imagen como a 0,0 si esto ha ido bien estoy ahora en el index 4 si estoy bien algo qué está pasando ahí debería tener a 6s se exportaron con texto final punto correcto 00 mil 280 la altura ese es el cuadro ahora vamos a verlo pero el contexto final 2 punto 4 3 vale que esta transparencia a ver casarse sí vale los haciendo al revés creo yo claro que la sazón atrás es igual a 255 en caso contrario datos imágenes data de más 3 que es la transparencia es igual a cero ahora sí voy a poner la pantalla así claramente la mano eres cuando únicamente se queda la mano todo vale sí vale estoy cogiendo el contexto no sé de dónde y es donde ahora en un momento aparecerá la información parece que parece como que esté cogiendo la imagen parece que surgiendo esa vale no pasa nada tampoco pero bueno como podemos ver como podemos ver por lo menos empieza ya a salir lo que quiero es que únicamente vamos a verlo ahí únicamente se queda con la forma que yo quiero lo cual me va a facilitar bastante la tarea para cuando tenga que reconocer formas a partir de esas imágenes me falta eliminar un poco el ruido pero vamos con un poco más tratamiento de imagen lo podemos conseguir perfectamente

la metodología que hemos escrito hasta el momento para resolver lo que sería vamos a crear el ejercicio 4 para resolver la transparencia podría hacer una metodología válida puede haber metodologías más sencillas e incluso vamos a ejercicio 4 y al volver el ejercicio 4 vamos a volver un poco sobre nuestros pasos vamos a ver y ahí estamos y voy a hacer una variación del ejercicio 3 ahí está y ahí tenemos la referencia del reinado en el ejercicio 4 el ejercicio 3 2 veces e vale lo recuerdo de hecho 2 dios 2 pero un poco de luz index 3 y ahora index 4 en el suelo en 25 con lo cual será indexes quiero ese en el que estés muy bien pues ahora a lo que éste tenía un buen rendimiento ejercicios indec 6 ejercicios de 6 lo copio y pego en ejercicio 4 este es index y voy a desarrollar a partir de aquí por tanto el ejercicio 4 inverso y vamos a éste lo abro con el grifo y lo que quiero en este caso es decirle al sistema que únicamente quiero quedarme con con este proyecto vamos a ver esto por cierto fuera en esta hora que es juraría que le había hecho abrir con brackets pero no se ve que por accidente le ha dicho a ver que con wifi abrimos ahora este es el index 4 voy a encargarme temporalmente todo esto no pasa nada porque lo tengo guardado en otros archivos así simplificamos un poco el código también para ver que esto en cierta forma puede ser fácil y ahora el balón y ahora lo que quiero por ejemplo es decirle al sistema vamos a ver cuántos contextos tenemos este contexto tengo el contexto resultado y ahora por ejemplo lo que quiero decirle al sistema es que que recrear un nuevo contexto en el cual hay que reponer realmente todos los elementos con los que estoy trabajando entonces este canvas el óxido que contiene canvas lo pongo aquí ejecutó vamos a ponerlo aquí y ahí podemos comprobar como aparece incluso se mueve la mano empiezo a parecer la mano era lo que quiero hacer es decirle al sistema por cierto el contiene canvas es altura y flota con ambas y canvas voy a decirle que flote a la izquierda para qué vaya alineando los canvas y ahora en lugar de trabajar por ejemplo con una matriz de puntos a cuando estoy refrescando esto lo voy a cerrar de momento esto lo máximo a cuanto estoy trabajando estoy trabajando a 200 quiero ver hasta qué punto esto rinde vieron vemos que el rendimiento es bastante aceptable bueno pues ahora pues ahora lo que quiero es cambiar de momento los fill recto bueno por algo como por ejemplo un rectángulo más grande o un círculo en este caso voy a dibujar un rectángulo más grande más grande porque los círculos en canvas son más caros de computar y ahora mismo quiero rendimiento entonces paso super imagen bien pues x menos paso super imagen partido 2 y menos lo mismo paso super imagen partidos paso super imagen y pasó super imagen con esto dibujar y cuadrados más sólidos ahí lo tenemos a grados que sé se solapan entre ellos y ahora lo que voy a hacer a continuación es decirle al sistema que quiero no quiero que me ponga por ejemplo los no me está cogiendo la diferencia de píxeles y quiero que me coja pues el alfa otra cosa que puedo hacer es vamos a bar un multiplicador radio es igual a 2 por ejemplo y entonces voy a esto por un multiplicador radio esto por multiplicador radio esto por multiplicador radio y esto por multiplicado el radio y así dibujar cuadrados más grandes seguiríamos tengo un objeto más sólido bien ya continuación voy a pasar al siguiente la siguiente versión de este ejercicio lo que voy a hacer es el color del vídeo y a continuación el alfa de la imagen y así pues vamos a poder fijarnos en qué es lo que tenemos que estar mirando en la pantalla esto vale ahora tirar menores que 40 menos 20 y así lo afinamos no algo así nos fijamos mejor en lo que tenemos que fijarnos en definitiva como digo voy a guardarlo como index 2 vale pues a continuación en el index os voy a crear un canvas más canvas resultado pues lo cambio por final así que canvas anterior post canvas final es igual al final ok el contexto resultado pues creó un nuevo contexto llamado contexto final y ahora lo que voy a hacer es que una vez que he hecho esto digo bar resultado original es igual al contexto punto de email data desde 0 0 anchura como altura bar alfa que realmente sería se escribiría alfa por la transparencia es contexto resultado imex data de 0,0 a anchura y altura y ahora lo que voy a hacer es que favor y es igual a 0 y es menor que original punto data punto links y más más y voy a decirle al sistema que original esto suma más igual a 4 original punto data de más 3 es decir de la transparencia y es el rojo y más 1 es el verde y más 2 es el azul y más 3 esta transparencia es igual a alfa unto data de y más 3 y por último en contexto final y me trata y quiero el original que debe tener la información de color de uno más el alfa de otro si todo esto aire bien nos venimos aquí recargamos nos vamos al ejercicio 2 a la parte de los 30 4 hay un error como no vamos a ver última se trata así que me pasó lo mismo y es que como 0 0 y vamos a ver la obra vale y ahora como podemos observar ahí tenemos un poco la mezcla de los dos es decir tenemos un poco que el sistema lo que está haciendo es quedarse con lo mejor de los dos es decir digamos que dejó de mover la cabeza y ahora solo se mueve la mano y se le mueve la cabeza pues solo me muestra la cabeza de eso de esta forma el programa lo que está haciendo es analizar con qué nos cuenta que de esta forma el sistema lo único que está haciendo es comprobar si los objetos son diferentes no es también en donde se mueven no está mirando nada más que simplemente son diferentes el uno y el otro es otra forma de calcularlo vale pero en definitiva lo que queremos quedarnos es solo con un trozo de imagen afinamos un poco más el código por ejemplo hay menor que 20 pues somos por mayor que bien ahora mismo tampoco tengo mucha luz aquí pero por ejemplo fijémonos que de esta forma afecta bastante mejor es la mano detecta bastante mejor aquellas zonas que están en movimiento como digo podríamos hacerlo con círculos en lugar de con rectángulos voy a probarlo no me cuesta mucho pero lo que quería era pues bueno mirar con rectángulos más que nada porque los rectángulos son mucho más ligeros computacionalmente me voy a contexto resultado punto arq y digo x coma y coma así como paso super imagen por multiplicador radio con 0 + punto y coma 2 pero como es un arco tenemos que decir contexto resultado punto playing paz para arrancar una forma contexto resultado punto y contexto resultado punto klaus paz entonces bueno esto vamos a ver que computacionalmente es más claro esto sin textos vemos que ahí tenemos círculos y los círculos parece que nos marcan el contenido de una forma más clara qué vale otra cosa que puedo hacer vemos como en el momento en el que paro parece que el sistema me pierde es una cosa que podemos hacer es jugar un poco con la transparencia vamos a y guardar esto por cierto puede ser una cosa esto esta versión la voy a dejar con los rectángulos vale la siguiente versión la 3 la voy a dejar con los círculos y la siguiente versión la 504 es la que voy a jugar con la transparencia así que ahora a continuación lo que voy a hacer es lo siguiente en la versión 4 de momento de momento voy a evitar hacer un clear recto del contexto resultado entonces vamos a ver como en el contexto resultado ahora mismo a ver más fantástico entonces voy a dibujar en contexto resultado style es igual a rgb a 2 552 55.255 0.1 y contexto el resultado punto feel recto de 0,0 a anchura como altura esto en lugar de dibujar sobre el proyecto en lugar de dibujar ahí por ejemplo qué está pasando alguien podría estar dibujando ahí en los círculos con texto el resultado a pintarlo con blanco con este resultado pintó de blanco en tarro de rojo y mira lo que me escama st es que el contexto resultado a sí muy bien contexto resultado punto feel style es igual a black y eso es lo que no me cuadra lo que vale ahora sí voy a pintar con los 55 255 0.1 y es lo que va a hacer es que como vemos deja un rastro y al dejar un rastro lo que va a hacer en este caso es que me permite no olvidar los píxeles anteriores a la mano por ejemplo hagamos la mano mejor y esto a continuación lo que me permite es agradecerle al siguiente al sistema lo siguiente y es que no es alfa es rojo y ya está vamos a verlo no vale ella está al revés fantástico es 255 – alfa es lo contrario mueve la cabeza y démonos cuenta como la parte que selecciona a la cabeza es mejor ok el sistema detecta mejor ahora el movimiento y lo representa en pantalla ahora vemos en la mano vemos que el sistema de esta forma se fija sólo en lo que está en movimiento es un poco como el ojo animal sólo se fija en aquello que está en movimiento vale ahora a partir de ahí a partir de ahí voy a hacer una prueba descarga el sistema donde en lugar de trabajar con un paso super imagen de 16 voy a probar a 8 a ver si no se cuelga mucho vale mamá más lento claramente más lento vemos que de hecho funciona realmente bien meto la mano coge la mano vale con 8 y va claramente más más rápido y ahora por ejemplo lo que puedo hacer es utilizar esto para que el sistema me diga qué es lo que está en movimiento aunque claramente lo vemos en la pantalla pero con esto lo que quiero es que el sistema a continuación diagnostiqué y por ejemplo me pinte un rectángulo y me diga exactamente qué es lo que se está moviendo de la pantalla

anteriormente hemos hablado de la visión estereoscópica ahora mismo estamos hablando de la detección del movimiento entonces cómo podríamos hacer el reconocimiento facial utilizando la percepción de la tridimensionalidad a través de una webcam bueno pues podríamos hacerlo de la siguiente forma una webcam no es estéreo una webcam tiene un único ojo pero si nos fijamos cuando hemos trabajado con con visión en estéreo básicamente lo que hemos hecho es comparar un ojo con otro quizás lo que podríamos hacer en este caso es comparar un fotograma contra otro vamos a verlo a continuación vamos a ver vamos a ver vamos a ver quiero hacer una variación es curioso porque localhost e inteligencia artificial y quiero el ejercicio 1 entonces voy a hacer así index 93 o sea por qué entonces ejercicio 1 pero quiero clonar oficial el ejercicio 1 lo quiero crear para que se llame ejercicio 5 vamos a comprobar como ahora aparece como ejercicio 5 y ahora en lugar de dos imágenes lo que voy a hacer es dos fotogramas del mismo vídeo lo voy a tocar un poco y lo voy a decir cómo puedo una foto que desde aquí pues bueno yo creo que puedo hacerlo con quick time en plan a lo bestia nueva grabación de vídeo se activara la cámara eso espero vale y vamos a ver vamos a verlo a continuación no puedo fotos lo que sé que puedo hacer esto fueron es un giro un poco alavesa acaba de hacer dos fotos en estas dos fotos girón poco la cabeza volverlo a hacer vale vamos a ver lo cierro por allí ahora me voy al king voy a abrir estas dos fotos son como que he hecho como dos capturas 1145 esto es malo ok y ahí está la diferencia entre las fotos copio una foto el apego en la otra realmente no hay no hay nada que cuadrar la verdad entonces voy a recortar aquí recortó 11 y ya que esto lo pasó a 512 por 512 y entonces no pasa nada y esto lo voy a guardar como izquierdo y esto lo voy a guardar como derecho en este caso el reconocimiento de profundidad va a ser un poco al contrario y es que lo que está más cerca a aparecer qué es lo que está más lejos pero no pasa nada derecho izquierdo ejercicio 5 imágenes el derecho izquierdo izquierdo vale ya muy bien fantástico reemplazar como es el ejercicio 5 vamos allá vamos a recargar localhost de licencia artificial ejercicio 5 me he quedado en qué versión index 9 vamos a verlo en la recarga vale algo ha pasado así es que es izquierdo pec y derecho pk papelera derecho pero vamos ahora vamos allá y si todo va bien para lo que va a hacer es que si nos fijamos lo que está alrededor lo está detectando como blanco y la propia cara la está detectando como negra entonces lo que quiero en este caso es el contrario para lo que quiero es que lo que se mueva realmente ahí vemos qué el centro de la cara es lo que más está moviendo ahora cuando acabe con la cara vemos que el rededor no se mueve a ver por sí me parecía como que estuviera detectando el farolillo este por esto es curioso es curioso e a ver momento ejercicio 5 9 vale es efe derecho que en principio es correcto pero pues lo que necesito ahora mismo la parte de ella al fondo que es claro no está pillando miel correcto pero lo que necesito ahora mismo es invertir un poco la situación vamos a este ejercicio lo voy a convertir en ejercicio 10 y el ejercicio 10 cuando pinto cuando pinto phil recto en fil style voy a hacer esto para hacer esto y yo voy a hacer esto de esta forma recargo ahora voy a ejercicio 10 y en principio va a hacer lo contrario principio ahora lo que hará es dejar únicamente la cara ahora también lo que quiero es a distancia porque una cosa es que dar componente es igual a esto y así pongo componente lo toco una sola vez entonces esto es componente esto es componente esto es componente y esto lo voy a multiplicar por 10 para empezar para que no me dé colores muy blancos exageradamente blancos y ahí reconozca un poco la cara con la que estoy trabajando bueno la idea con todo esto es que evidentemente a continuación vamos a mezclar ejercicios porque lo que quiero es trabajar únicamente con aquellos píxeles que que cambian que se mueven no quiero que me reconozca el fondo sino que lo que quiero es que el sistema reconozca únicamente aquellos píxeles como hemos hecho en ejercicio anterior que se estén moviendo de esta forma digamos que conseguiremos optimizar podría hacer la demostración con el gym otra cosa que voy a necesitar es que evidentemente este software sea más rápido más potente es decir voy a regresar a utilizar los cálculos porque por ejemplo para calcular una imagen vemos cómo le cuesta bastante y bueno en definitiva en definitiva otra cosa que podría hacer es que en base a los píxeles atrapados y en base en base a la profundidad en lo que puedo hacer es generar un modelo tridimensional si tengo la profundidad y tengo el color puedo generar un modelo de una cara vamos a verlo primero lo que estoy haciendo es comprobar que realmente detecta correctamente el movimiento de los píxeles me está dando la impresión de que me ha detectado el bigote fenomenalmente bien y parece que tengo también las cuencas de los ojos entonces bueno y la idea es que el software está detectando correctamente en apariencia a los rasgos faciales sabes que tengo esto es cuando por ejemplo puedo utilizar toda esta información para y decirle al sistema cuando tiene que calcular y cuando no tiene que calcular más que nada para que no pierda tiempo calculando cosas que no tiene ningún sentido que calculé para esto vamos a hacer el siguiente vídeo una demostración en la cual voy a decirle al sistema que solo calculé aquello que se está moviendo en pantalla para conseguir esto de momento de momento lo que voy a hacer es tocar esto con lo siguiente vamos a ver de momento esta imagen por aquí vale voy a tocarlas voy a el lazo voy a recortar únicamente el trozo que me interesaba eliminar los auriculares con los que estoy grabando lo estoy recordando un poco la bestia lo sé y eliminó el vino me quedo únicamente con ese trozo me quedo sin orejas pero bueno no pasa nada ahora me vengo a esta otra imagen vuelvo a recordar podría recordar lo mismo pero bueno voy a seleccionar nada recortó de hacerlo hacer otros recortes diferente aunque si esto podría recortar lo mismo tampoco pasaría nada pero vale ok clic recortó el corto y ahora no selecciona nada experto me voy a ir a alguno con derechos es nuestra izquierda pk era igual realmente cuidado y está mal escrito izquierdo pk esto es derecho pk reemplazar al reemplazo reemplazo y ahora voy a decirle al sistema es un elemento es transparente no lo tenga en cuenta porque porque el ejercicio anterior hemos trabajado con elementos transparentes así que el escritorio ojo izquierdo y derecho no tengo en imágenes reemplazo reemplazo vale y ahora en el código versión del ejercicio número 11 qué hacer con el sistema es decir lo siguiente lo que voy a hacer es que solo calculen en el caso de que el pixel tenga opacidad vamos a verlo calcula vale y ahora píxel a píxel ahí está temporal suma un momento y ahora digo lo siguiente en el dtm y por ejemplo en alguno de los dos realmente me da igual para cada píxel e amplitud cuadrado sí esto es tal estar aquí estar allí es trabajo vamos a ver pero esto me cuadra esto me cuadra estos ejes 2 y 2 511 y 512 fuego doble estoy buscando aquí el punto en el que va píxel a píxel esto es lo que quiero rayet if dime punto y mide 3 es decir la transparencia vale es igual a cero o es menor que 200 tiene poca transparencia en este caso voy a hacer todo esto entonces esto va aquí y esto va a ver esto afuera y este donde acaba todo esto esto es para volver vale x esto es igual al radio esta nada y estoy con lo cual ahora desbloqueo esto dónde está el dim y dime dime qué vale y vamos a probarlo esto lo que va a hacer es que si teóricamente si no se encuentra un píxel ni se molesta en calcular vale vamos a presión la estación al contrario fantástico pues al revés y si me es menor es mayor que 200 correcto vale ahora fijémonos como lo que está haciendo es únicamente calcular lo que corresponde y no perder el tiempo calculando cosas que no tocan de esta forma ahora así lo que estamos intentando hacer es general bueno un modelo de profundidad que luego derivará en un modelo tridimensional vamos a verlo hay algún elemento todavía por ahí que coge la información pero bueno no pasa nada y ahora una vez que tenga esto evidentemente lo que quiero hacer es aplicarlo al ejercicio anterior al ejercicio 4 en el que somos capaces de aislar objetos en pantalla y somos capaces de bueno calcular un fotograma sobre otro y bueno esto sería para dejarlo un poco calculando ahora evidentemente el problema que vamos a tener es que en el ejercicio anterior la captura de fotogramas es de pues eso no sé dos fotogramas por segundo cinco fotogramas por segundo en cambio en este ejercicio un cálculo completo pues cuesta a tiempo cuesta algo de tiempo entonces hay una cuestión de optimización evidentemente inevitablemente hay una cuestión en la que tenemos que ver cómo hacer que el software sea de tiempo real en el sentido de que cuando la cara se mueva pues guarde los cálculos pero pueda continuar más allá pueda continuar más adelante voy a parar el vídeo y tenemos ya un primer software en el cual podemos crear una especie de cara en 3-d y a partir de ahí y a partir de ahí lo que vamos a hacer es combinar los dos ejercicios voy a hacer un pequeño juguete y bueno para hacer este juguete voy a guardar me esta imagen vamos a ver me voy a guardar en aplicaciones en mamá en hd dukes en vigencia artificial ejercicio 5 img y voy a guardar esto como feta punto png vale entonces dentro del proyecto voy a crear un nuevo archivo lo voy a guardar como visualizador estamos en 5 visualizador punto html y voy a hacer lo siguiente va a empezar un ejercicio nuevo que realmente es un ejercicio subejercicio de lo anterior se puede aplicar a muchos otros por cierto y es un visualizador de imágenes 3-d un poco para ver qué es lo que vería el programa para que estamos haciendo todo esto esto va a ser un gambas con es igual a color wyss es igual a 512 hyde es igual a 512 píxeles este excepto y ahora algún script voy a necesitar una librería llamada jquery pajín a la foquita área aunque sigue calculando y así ahorramos recursos y bajar la librería jquery para automatizar un montón de cosas realmente abajo y esto lo tiene un ejercicio 5 me copió el nombre y así aquí un script src que es igual a esto vale ahora lo que voy a hacer es que voy a crear un canvas más resultado y en resultado voy a decir que cuando el resultado punto mangos move voy a ejecutar una función en la que voy a seleccionar algo de contenido entonces quiero comprobar si esto está funcionando asiste usted elige 5 visualizador punto html ok con solo voy a poner un pequeño estilo dónde canvas border un píxel sólido gray y ahora cuando paso el ratón por aquí vemos como solo cuando lo paso por ahí el sistema dice ok esto lo que va a hacer es que yo ahora puedo venir por aquí y puedo decir lo siguiente vale con texto color es igual a document.getelementbyid color punto de contexto 2 d con texto zeta es igual documento efe con de elgeta y ahora hago lo siguiente para datos color es igual al contexto color e getty image data desde 00 hasta 512 512 nuestros z es igual a contexto z 1 y me trata desde 0,0 hasta 512 como a 512 y vamos allá y ahora lo que quiero es lo siguiente si averiguar la posición y y la z entonces 3 consuele punto log y punto page x con más punto page ingeniera recargo cuidado que pasó faltó más vale entonces me dice de 500 y pico ahí me dice 6 530 entonces lo que necesito es el movimiento elemento que me da la e punto nada pues x esto es un top 1 punto efe betis – esto y esto es p y – this punto la distancia a la parte de arriba vale vamos a verlo me falta un paréntesis aquí ahora algo así ok ok left creo que no es una función sino que es una propiedad es con sol el ojo page x lefrak notarán ver pues vamos a jquery d posición muy bien también pro sitio en punto left vale position punto left por sitio top muy bien vamos allá ok ahora esto me dice vale y ahora quiero que cuando oí 51 ahora creo que cuando el píxel está en el medio sea 0 entonces esto es – 256 256 y de esta forma cuando el píxel esté en el medio será 0 0 y cuando se vaya yendo pues evidentemente se irá viendo hacia unos sitios u otros muy bien vamos allá ahora function dibuja time out dibuja un segundo esto realmente bueno sí dibuja y ahora digo la imagen en color es igual a new image imagen en color punto src es igual dónde estás visualizador img pues a izquierdo por ejemplo ing esquerra pk punto penal imagen zeta imagen zeta como llamado a esto zeta vale entonces lo que voy a hacer es contexto color punto draw email quiero dibujar imagen color en 0,0 y contexto z trimage quiero dibujar imagen zeta como 0,0 y entonces hago esto y actualizó los contextos y ahora recargo y ahora lo que quiero es que al pasar el pincel por aquí lo que el sistema haga sea mover poco a poco los píxeles vamos a por ello cada vez que ejecute de esto quiero ejecutar la dibuja y la función que dibuja vamos a verla en el siguiente vídeo ahora a continuación la función de dibuja lo que va a hacer es todos y cada uno de los píxeles y entonces la función redibuja va a dos parámetros qué son estos dos de aquí ni más ni menos estoy aquí el primero es la equis el segundo es la y mark x como bueno directamente x como genera así que se dibuja y agregó form bar y es igual a 0 es menor que a datos color punto data punto link y más igual a 4 realmente y ahora para cada uno de los píxeles de color lo que quiero es re dibujar los elementos y ahora vamos a ver quiero cada píxel y quiero mover lo quiere moverlo hacia arriba o hacia abajo según lo que haga falta nosotros hacerlo con canvas o con elementos estoy pensando momento estoy pensando a ver con qué me conviene max qué puedo hacer con miles de pequeños dips o lo puedo hacer en un canvas con dips es más sencillo con canvas es más eficiente así que es la eterna pelea entre sencillez o eficiencia a ver el momento lo piense voy a probar a hacerlo con canvas por cierto que tengo que decir qué bar contexto resultado es igual a documento punto get by resultado punto get contexto 2 d y dar datos resultados es igual contexto resultado getty image data de 0 0 a 512 512 ahora el resultado estoy cogiendo los datos resultados y ahora digo datos resultados punto dato es igual a datos color gato rey pero es una cosa pero bueno ay al desplazamiento desplazamiento de 15 es igual a equis bar desplazamiento y es igual a y y entonces vengo por aquí y digo esto es más desplazamiento de x x 4 x datos z un trato de cero pero nada vale más aunque llegarían por 512 x 4 por datos z a ver cuidado a ver esto lo que está haciendo si el correcto punto nata de vale porque yo creo que ella y lo mismo por aquí 1 2 d + 1 y 2 y cada vez que hago esto digo datos resultado es igual a datos color y ahora en contexto resultado punto put email data de datos resultado 0 0 vamos a verlo recargamos bien y si hacemos así vale empezamos a dibujar cosas no es lo que quería pero voy a hacer lo siguiente contexto resultado punto clear recta es de 0,0 a 512 a 512 ok momento nueva sí datos datos color aquí esto aquí y si datos color punto data de realmente esto realmente esto sí más 3 3 es igual a cero o mejor dicho vamos a verlo ahí está empezando a poner no sé por qué no se ve el color porque solo se ve el color aquí extraño no se mueve realmente nada vamos a verlos así que parece que le cuesta calcular pero de alguna forma sí que responde voy a hacer una variación esto es visualizador 2 esto luego ya copiar y pegar para comprobar que funciona esto va a ser los 55 de momentos 0 0 pero ok visualizador 2 porque yo entiendo ahora esto es igual a 2 color punto data él paso 1 las dos pero veámoslo ahora cuando eso vale entonces la pregunta es por qué no porque no funcionaron quizás quizás esto de aquí vamos a verlo para que ese desfase x es igual a v x x datos z punto data y esta es la cuestión él bart es fácil es fácil x es igual a b y por datos z punto data esto es lo que quiero escoger el color que haya a continuación más despacio desfase de x claro esto vamos a partir por 10 porque igual es demasiado esto lo redondeo debe x x 4 y oh en trozos por cuatro que es la anchura pues esto en principio debería funcionar pero bueno ahora veremos más uno probemos lo vale hasta el fandi find no está definido ok este diario creo que es el que ha causado el problema aquí dice que no está definido cuidado por esto debe y no está definido vive y sale negro aunque el sistema no era global venga y perfecta intento hacer algo no sale todavía pero está claro en el sistema y está intentando hacer algo por lo menos empieza a salir partido 100 esto empiezas a leer casi salía los seis partidos que aparecen muy bien vamos a ver bueno voy a eliminar a eliminar la red contexto resultado punto direct de redibujado y dentro de poco saldrá por aquí cuando él quiera el resultado pero bueno la idea es que podremos ver la tridimensionalidad a la media de un agujero negro hay que decirlo pero en cuanto esto salga podemos ver la tridimensionalidad voy a probarlo

a continuación vamos a retomar el ejercicio 3 vamos que tenemos por aquí ahí está vamos a por él 3 4 el ejercicio 4 allí para hacer aquí 25 pulsamos con el ejercicio cuatro iguales correría la cortina para que se vea un poco mejor bien con esto lo que tenemos en la pantalla es que el sistema es capaz de detectar como hemos visto anteriormente vamos a ver aquí el cuidado pues el sistema como decía aparte de la gran cantidad de ruido producida porque hay poca luz yo creo que a lo mejor y ahora hay bastante más luz esto quiere decir que ahora podemos trabajar mejor y ahora lo que quiero es detectar los elementos que hay en la pantalla quiero que el programa me lo rodee para esto vamos a seleccionar el ejercicio 5 ay perdón el cuadro quería decir que sí lo vamos a convertir en el 6 vamos a ver una técnica que nos permite detectar objetos de una forma relativamente sencilla en la pantalla vamos allá vamos al ejercicio 6 recargamos bien nos vamos aquí abrir ejercicio 6 6 y vamos a continuar a partir de ahí muy bien pues continuamos y vamos allá por aquí en 34 dejar tus 6 y ahora dentro de que los cuatro canvas los voy a meter en un mismo contenedor esto va a ser contiene canvas contiene canvas tiene una resolución de 1024 por 1024 y eso quiere decir que me puedo hacer este pequeño y cuidado y de alguna forma con utilizarlas canvas pues no he hecho ahora sí bien entonces ahora dentro del resultado cargar y contiene el resultado que va a tener unos pequeños cambios adicionales qué son los siguientes campos gráfica horizontal que es de 512 x 32 por ejemplo gráfica vertical que es de 32 x 512 vale ahora gráfica horizontal tiene un posición absoluta con un drop 0 píxeles y un left ser píxeles y realmente gráfica vertical tiene lo mismo contiene resultado exposición relativa voy a marcar un segundo este borde un píxel solid white más que nada para ver las gráficas si todo va bien ahora ahí arriba aunque no la quiero ahí no sé por qué está ahí resultado se han ido arriba contiene el resultado posición relativa tiene resultados como que no ha funcionado y el resultado vamos a verlo se han colocado arriba no sé por qué esto es canvas estos miramos estas el canvas hasta es contiene el resultado vale esto no wyss 0 píxeles 512 píxeles 512 píxeles vale esto sigue estando aquí y esto contiene el resultado sigue estando allí me cuadra mucho front left y así tenemos los cuatro elementos en pantalla bien ahora lo que importa es que dentro de las gráficas en todos los pequeños canvas que he creado voy a crear unas pequeñas gráficas que me digan exactamente cuántos elementos tengo entonces lo que voy a hacer a continuación es sumar vamos a su manera y ahora para cada uno de los elementos por cierto qué canvas de ser directamente contextos con texto gráfica h hacer contexto gráfica horizontal es igual el documento apuntó gates element by que es gráfica h get contexto 2 d con texto gráfica vertical es lo mismo pero con gráfica vertical de esta forma y ahora vengo por aquí y lo que quiero hacer ahora es muestra las gráficas actual y digo formar es igual a 0 y es menor que pues bueno es menor realmente aquí estoy pensando si reutilizar esto como tengo alfa bien ahora qué con texto final punto dato lenin y más más y ahora voy a hacer lo siguiente para cada uno de los elementos es igual a cero y realmente no dar datos horizontal es igual realmente datos enteros es igual a contexto final no contexto resultado punto getty image data el 0,0 a 512 512 y ahora y es igual a 0 y es menor que 512 y más más y yo voy a hacer lo siguiente xx ahora quiero contar todos los píxeles que hay en vertical estoy viendo cuál es la forma más sencilla de hacer esto yo creo que es la siguiente claro y es igual más datos es igual a contexto resultado data desde como y estos le hirieron no sabes esto es la y va desde cero como el ingeniero vale más de 0 512 y y más 1 ahora sí y ahora lo que hago es zuma ese fuera cero y es igual a 0 y es menor que datos punto data link y más más zuma es igual es más igual a 4 zuma es más igual a datos punto data y por último con texto gráfica con texto gráficas punto fil recto y voy a dibujar uno escogido desde la iss hasta la y griega más una vez era 12 y 1 contexto gráfica vertical entonces en la y y quiero dibujar un rectángulo de suma 1 y vamos allá si bien éste sigue siendo el index 4 lo convertiré en otra cosa un error y dime xstrata el wii 60 y dime estado en el wef estero a ver 2 en el 60 vale aquí es cuidado también porque para asegurarme que no sea ese y la anchura es cero la línea ciento porque es 512 y más 1 that is not y find gratos punto dato vale y ya empieza a dar una gráfica la gráfica ahora mismo está en negro el programa se ha ralentizado bastante bien zuma partido mucho zuma partido mucho más allí parece y parece que está empezando a ver algo y bueno yo básicamente lo que quiero es el resultado ahí parece que vamos a ver algo momento de momento nada el sistema está haciendo allí al momento no parece que afecte a la gráfica curioso que la suma vaya creciendo y creciendo y no sé x hasta el punto y teóricamente es correcto ralentizando la realidad a veces puedo hacer una cosa como ya estoy trabajando con la xl y quizás puedo decirle al programa que quiero reutilizar datos vamos a verlo como creo que lo que está ralentizando es este foro es decir este jet y me estado voy a lo siguiente y ahora esto es es igual a cero es que tengo que hacer dos dobles bucles estoy pensando cuál es la mejor forma de hacerlo y la más barata leches es menor al 512 x más ahí lo tendríamos seguro luego lo mismo para tijeras igual a cero y es menor al 512 y más más y esto me permitiría se suman más igual datos punto data por 4 más por cuatro 4 por 512 con esto el resto allí y si todo va bien recargo esto es el index 5 bien por ahí entre la gráfica creo que le hayan sacado demasiado vamos a ver no pintamos de momento no estamos tentados del momento no sé por qué con solo punto el ojo suma cuidado esto es 13000 suma siempre 13.000 que eso me siempre 13.000 y aunque suman a 13.000 y debería estar haciendo con sólo la suma y la idea es obtener el máximo pico ahora parece que va más rápido pero 0 0 a 0 10 10 vamos a tirar al agua a ver si pinta algo y pintarlo ahora quiero sumar vale y ahora quiero allí pero y pero x es el problema y ahora sí quiero la suma la suma pues como a 1 partido bueno a partir de los 10 mil millones de trillones no hay esa machaca siempre da la misma suma esto es también lo que me extrañó h siempre estaba dando la misma suma por eso me extrañó muchísimo su más igual a cero su mamá sí wallace todo aquí la suma de estos datos x x 4 4 ahora ahora la suma de algo diferente refrescando la pantalla parece que hay algo empieza a ocurrir en todo momento vamos a decir contexto gráfica vertical punto clear recta desde 00 hasta 32 512 la gráfica algo está haciendo vamos a pintarla de rojo porque no había nada el style es igual muy bien rojo no se ve vamos a tirar white y voy a hacer en este caso 332 menos suma porque parece porque parece que lo tengo al contrario entonces esto es x partido 4 o no dolor estoy consiguiendo y el canvas gráficas y gráfica v voy a poner que el estilo es igual hablar porque es que no es teniendo nada la gráfica la gráfica aquí vale ahora parece que la gráfica quiere ser correcta y ahora solo la gráfica solo muestra aquellos puntos donde realmente hay contenido creo que la gráfica realmente me está mostrando la equis creo que he confundido el vertical y horizontal estoy bastante convencido sé gráfica muestra el horizontal no hay problema horizontal horizontal y ahora esto va desde cero hasta equis debe invertirlo 3,0 4 como suba 30 4,1 y contexto gráfica horizontal copio ahora contexto gráfica vertical el 3,0 esto como el 4 esto es la y y luego tenemos la equis y ahora estoy sumando lo contrario y vamos a verlo vertical fil style es igual a red horizontal es decir como decir ‘basta’ 512 32 y 32 512 alguien más como baja vamos a comprobar que es la horizontal horizontal está bien voy a hacer que él el dibujo a menor así la gráfica saldrá más clara en la gráfica podremos ver mejor qué objetos tenemos y ahora vamos con la gráfica vertical una vez que tenemos esto vamos con la gráfica vertical 12 su más aguacero 4 y 4 eso es el problema tampoco el señor 32 – suma partido 5000 comprobamos que es correcto nuevo hace una esquina los otros son correctos una vez que tenemos estas gráficas es cuando ahora por ejemplo podemos detectar un área de interés simplemente os haciendo el programa se fije en lo primero que tiene que fijar estableciendo cuál es el rango mínimo y máximo de la pantalla entonces por ejemplo vamos a ver podría dibujar un rectángulo visualmente rectángulo en el que quiero averiguar cuáles son las mínimas coordenadas y las máximas coordenadas estoy pensando cómo hacerlo estoy pensando cómo hacerlo para que el sistema y detecte a partir de ese punto a partir de las gráficas el valor máximo en primer lugar lo que está claro es que podríamos detectar el propio valor máximo dentro de la pantalla así que vamos allá y para ello tal máximo esto qué es es la es igual a cero y veo y esto stem sur es igual la suma es la mayor pecho es mayor en suma en ese caso suma es igual a temps uma máximo x es igual a x ahora máximo y sitem zuma es igual a suma máxima y es igual y esto va a hacer que yo de esta forma conozca cuál es el punto central de atención y eso quiere decir que ahora puedo hacer lo siguiente contexto final punto phil styles es igual a igual y ahora contexto final de máximo x menos 2 cómo y menos 52,100 esto dibuja un aspa vertical esto es 50 esto es todos estos 100 y esto es 2 y todo ha ido bien el sistema lo que va a hacer es pintar una línea de color blanco no se la estoy viendo escriba en la estoy viendo pero no la mujer con texto final al final final final esto está pintando ya arriba el tono tampoco con solo punto rojo máximo x + coma más máximo y vamos a ver que está cogiendo se está cogiendo algo pero temps uma es igual a esto entonces si suma es mayor que te en suma suma igual que te en suma en suma ese brazo es igual a suma quitamos el consola recargamos en la pantalla comparemos el con sol en suma sí pero hoy qué curioso si te ha parecido hace un momento pero parece que en lugar de estar buscando el mejor candidato está buscando el peor candidato está buscando la sala más baja se suma es mayor paso por el micrófono pero parece que esté buscando el peor candidato no lo veo vamos a poner red para parte de que lo pone en él este es el contexto final recargamos este es el index tengo el fin de este mes en la red esta era una cruz de cuatro estoy ternero recargamos por ello se van viniendo a la cruz creo que no coincide para nada con pero sobre todo esto no sé qué es sobre puntos vamos viendo como en principio la griega siempre es cero lo cual ya de por sí es extraño maxim y ya que ha desaparecido me lo habrá cargado yo no te digo pero pero vamos a verlo y ahora muy buena cabeza y parece que el sistema evita en lugar de buscar el objeto que tengo en pantalla lo que extracción es evitarlo el opresivo lo que hace es evitarlo se va hacia otra parte entonces parece que el sistema está cerca de funcionar pero hay algo que se lo impide vamos a verlo pues ya está localizado donde estaba el tema y es que claro realmente yo no quería un máximo yo quería un mínimo por una razón muy sencilla el blanco es el máximo valor el negro es el mínimo valor entonces algo así ahora hago así con la mano y nos fijamos como y es a recoger por donde está la mano empieza a seguir la mano recoge también la muñeca coge el movimiento de la muñeca con la mano porque la cara exactamente igual ahora va a ser el sistema base yendo donde está al máximo el sistema va siguiendo dónde está en este caso el máximo de movimiento el mínimo de color digamos bien y a partir de ahí es cuando podemos establecer cuál es el área mínima y el área máximo es decir digamos que yo por ejemplo en este caso para establecer dónde está aquello que estoy buscando pues vamos a ver pues lo que haría es especificar una área de búsqueda vamos a por ello ahora a partir de aquí por ejemplo pues sí no podría hacer un radio y lo que podríamos hacer es analizar cuál es el valor intermedio para bueno averiguar vamos a ver el segundo en el 50% quiero decir vamos a hablar y podría hacer bar radio es igual 50 y ahora por ejemplo podría hacer con texto final punto beijing paz con texto final punto stroke recto desde máximo x menos dónde estás radio pero máximos x como menos radio máximo y menos radio como máximo como radio por dos como radio por 2 con texto final punto stroke contexto final y punto ya está si yo hago esto lo que va a ocurrir y al menos close para participar te falta punto close paz vale nuestro correcto razón x menos sabio y ahí como podemos ver el sistema estaba haciendo es dibujar una cajita esa cajita por ejemplo podría ser la zona en la que se va a fijar el sistema con texto final punto stroke style es igual a red es en lo que se va a fijar el sistema para saber qué es lo que tiene que realizar por ejemplo allí ahora voy a afinar un poco más el sistema para que no coja elementos tan parecidos esto está aquí y esto es mejor que bien pues menorca mente y vamos allá el por ejemplo vemos que detecta mejor la posición de la cara

Deja una respuesta

Tu dirección de correo electrónico no será publicada.