Curso Creador de Avatares

a continuación voy a programar un sistema de generación de avatar es así que para ello me voy a ir a htc voy a crear una carpeta llamada avatar dentro de esta carpeta llamada avatar voy a poner un archivo y vamos a ver dentro de este archivo vamos a ir a continuación vamos a crear un nuevo archivo y lo voy a guardar dentro de hb box dentro de avatar con el nombre index.html a partir de aquí dentro de este archivo vamos a crear la típica estructura html [Música] a ver que tengo los dedos un poco pesados y voy a crear una serie de etiquetas donde voy a crear canvas con él y del lienzo con de momento un wish de 512 píxeles un height de 512 píxeles con lo cual ahora a continuación voy a crear un script para controlar ese canvas donde voy a decir qué va la anchura es igual a documento punto que element baile al lienzo y el wish y de la misma forma para altura es igual a document.getelementbyid lienzo punto height bien dicho esto ahora a continuación voy a decir que dar contexto es igual a documento get element by heidi lienzo punto get contexto el contexto 2 d y ahora por tanto lo que voy a hacer es lo siguiente voy a decir que ahora para aquí por ejemplo voy a decir que el contexto punto de yin paz y al decirle contexto punto de gimp voy a decir contexto punto arq donde voy a empezar con anchura partido por dos coma altura partido por 2,200 por ejemplo vamos a ver 200,0 más entonces ahora a continuación bueno y para aquí y para el otro y así que a continuación voy a decir contexto punto stroke y vamos a ver lo que he dibujado vamos a arrancar el man no el man no el minecraft y vamos a arrancar voy a arrancar un navegador y voy a poner local horse barra avatar bien con esto lo que hemos hecho es dibujar pues un arco desde cero hasta más hasta aquí no hay mucha sorpresa el azar está aquí y esto aquí balear a continuación puedo decir que por ejemplo pues bueno altura partido 3 esto no va a ser 200 sino que va a ser de 100 y así tengo un poco lo que sería la parte de arriba de la cabeza del personaje vale bueno ahora por ejemplo podríamos hacer pues una segunda circunferencia vale vamos a hacer lo siguiente voy a dibujar una circunferencia completa y yo creo que así por lo menos podremos ver mejor lo que estamos haciendo y ahora luego lo juntamos entonces ahora tengo una primera circunferencia voy a por la segunda altura partido 1.2 vamos a verlo no lo sé ahora quiero una segunda circunferencia de 80 vale no tanto partido 1.8 una cosa así ahora sí esta sería la parte debajo de la cabeza del personaje y luego quiero pues un trapecio quiero dibujar un trapecio entonces para eso digo contexto punto beijing paz y al decirle contexto peckinpah tengo contexto punto justo y lo muevo por ejemplo hasta este punto vale qué es anchura partidos 2 ahora lo haremos absoluto porque si no esto va a ser un desmadre vale anchura puntos más 100 coma altura partido 3 y entonces ahora qué contexto punto line anchura partidos 2 más 80 de altura partido 1.8 anchura partidos 2 minutos 80 y ahora esto es anchura partidos 2 menos 100 altura partido 3 contexto punto strong así que guardamos y recargamos vamos a verlo vemos que tenemos por ahí ese punto vamos a ver esto es lento la gente ahora sí y bueno le podemos decir con texto close pub para que cierre ahí la línea y entonces ahora si cerramos y con esto como vemos lo que tenemos es como diríamos una primera aproximación vale una primera aproximación a lo que sería pues una cabeza voy a voy a hacer lo siguiente vamos a ver la verdad es que este sistema yo creo que nos sirve vamos a hacer una cosa vamos a suponer que el configurador siempre va a ser de 512 por 512 altura partido 3 vamos a ver calculadora 512 partido 370 vale siendo 70 refrescamos 256 y esto es teniendo los 12 partidos 1.828 4 284 así que 25 62 56 25 62 56 y vamos a verlo 170 170 170 cada perdón esto es 284 y 284 y 170 guardamos recargamos tenemos lo mismo vale y ahora lo que quiero para que sea escalable vale es decir que ahora sí quiero anchura partido 2 anchura partido 2 + 100 anchura partidos más 100 anchura partido 2 menos 100 y ahora aquí en el 170 esto es 256 270 86 altura partidos menos 86 56 – 284 – 30 altura a partir de dos menos 30 altura partido 2 -30 y altura partido 286 creo que se va a descuadrar correcto porque esto es más 30 ok ahora sí ahora tengo por ahí una cabeza vale y sobre todo lo importante es que ahora a continuación lo que voy a hacer es parametrizar cuando digo parametrizar lo que quiero decir es que el usuario pueda controlar digamos todos estos parámetros mediante una serie de sliders entonces todo esto es la función dibuja function dibuja entonces si ahora la pongo aquí dentro realmente parece que no va a pasar nada pero a continuación voy a hacer un dibujo un dibujo inicial muy bien vamos a vamos a vamos a ver vamos a definir el estilo del electrón así que contexto punto y vamos a ver a punto nuestro wef es igual a 2 píxeles o a 4 píxeles vamos a verlo stroke hasta él sandwich la en wifi es igual a 4 vale ahora tenemos eso digamos de color bueno de color más sólido y ahora a continuación lo que voy a hacer a la continuación lo que voy a hacer es pintar tres como voy a pintar bueno pues contexto punto de impacto voy a hacer lo siguiente voy a hacer contexto punto vamos a ver este film vale porque ahora le dio el contexto punto field style y voy a poner orange digamos color de piel naranja de momento ahí lo tenemos parece un campo de baloncesto pero no lo es entonces ahora a continuación pues voy a hacer lo mismo beijing paz y en lugar de contexto nuestro concepto fuera de contexto field y por último con texto en paz con texto por fin y con esto lo que tenemos es digamos digamos el momento una cabeza algo que puedo hacer también evidentemente es venir por aquí y decir también puedo crear secciones arco de el cráneo mandíbula esto es trapecio que une los dos elementos y esto es arco del cráneo trapecio que une a los elementos arco de la mandíbula aunque y ahora voy a hacer lo siguiente voy a dibujar una caja y entonces dijo con texto punto pekín paz contexto punto recto y voy a decir lo siguiente anchura partidos 2 como altura partidos 2 voy a decir el canal tiene dos partidos menos – 30 a partidos y esto es 60 a 200 vamos a probarlo y contexto punto extra vale ahí tenemos un cuello me he pasado 160 y ahora esto es línea del cuello y ahora yo vengo por aquí y digo relleno del cuello con texto punto recta y recta realmente entonces vamos a comprobarlo vale lo rellenamos y el cuello se queda por detrás bueno pues la idea de todo esto la gracia de todo esto consiste en que podamos editar el personaje y lo podamos editar con parámetros así que vamos a por ello div y de parámetros y entonces ahora vengo por aquí y digo input type slider o game y digo min es igual a pues no lo sé cuando max es igual a 200 no lo sé vamos a probarlo ahí lo tenemos y por ejemplo ahora yo lo que quiero es que este slider controle a una faceta del personaje entonces para que controle a una faceta del personaje pues vamos a hacer lo siguiente vamos a crear una serie de parámetros entonces aquí voy a definir parámetros contexto vale y ahora parámetros de la figura pues sí a continuación voy a decir qué bar anchura cráneo es igual a vamos a verlo por aquí lo tenemos por aquí arco del cráneo a 100 y entonces yo vengo por aquí en el 50 50 y entonces yo vengo por aquí y quiero atrapar el valor de este slider e intentar atraparlo vayamos a intentar sin necesidad de librerías como jquery entonces esto es valor o si valor anchura así que ahora lo que voy a hacer es como digo intentar atrapar ese valor como parece que javascript no está muy pensado todavía todavía para atrapar para atrapar ese valor voy a hacerlo con jquery entonces jquery cdn estás buscando soluciones basadas en javascript pero no me daba una solución sencilla así que lo más sencillo es que usemos de momento j way bien entonces ahora voy a hacer lo siguiente ahora por aquí sur el cráneo vale voy a decir qué con v v anchura cráneo y punto y ahora a quien seleccionó bueno pues vamos a en el documento change en anchura cráneo y voy a ejecutar una función con un event con un escuchado con sole punto lo he cambiado así que por aquí inspeccionó con solá recargo cambio vale cambiaron y a partir de ahí a partir de ahí lo que voy a hacer es decirle lo siguiente al decirle cuando realmente el evento estoy pensando me hace falta porque yo vengo por aquí y le digo y le digo dónde estás anchura cráneo es igual a dis punto vale entonces claro ahora le digo dibuja pero la pregunta es estoy usando una anchura cráneo por aquí pues no entonces me voy a arco del cráneo y cambio esto vamos a ver arco del cráneo aquí ya anchura cráneo para ver si ahora algo así vemos cómo puedo ir cambiando la anchura del dibujo cada vez que dibuje cada vez que dibuje es importante que haga un contexto punto clear recta digamos que porque si no esto parece un santo religioso y desde 0,0 esta anchura como altura así que ahora hago así y veo como ahora sí pues trabajando bien ahí lo que voy a hacer es que en el trapecio anchura cráneo – anchura cráneo y así ese valor web vamos a ver qué pasa vuelve algo está pasando trapecio y trapecio vale ahí s ese arco sí que parece qué esté uniendo pero ay no y parece que se van los dos más anchura cráneo anchura cráneo no sé por qué porque aquí se está rayando vamos a verlo y ahí sí que funciona correctamente pero en cambio aquí anchura cráneo y se va será por algún motivo se va por algún motivo vamos a ver y anchura cráneo se va en es la que bien vamos vamos a voltear un momento todo este código vamos a ver únicamente esto de la estructura y aquí es donde es donde se va vamos a anchura cráneo ahí está bien pero el de la derecha no está bien lamento anchura cráneo vamos a ver line vamos vamos por esto sobre partidos dos más otro el cráneo más al sur el cráneo esto es esto y va aquí y se va allá ahora lamento anchura partido 2 a los 80 al sur a partir de los menos 80 vamos a ver esto y ahí se va y ahora mismo no ve al por qué voy a proceder con los siguientes parámetros pero ahora mismo no veo el por qué voy a proceder vale ahora averiguar en un momento dado o no el por qué se produce esto vale siguiente parámetro el siguiente parámetro es rara anchura mandíbula que es igual a 80 anchura mandíbula anchura mandíbula es 80 80 80 y la mandíbula es 80 vamos a por ello vamos a dibujar anchura cráneo de anchura mandíbula y cuando sobre una mandíbula haga clic vale tengo la mandíbula se me va hacia allá esto es cuidado será mandíbula anchura mandíbula y anchura caneo muy bien ahora a continuación voy a dibujar la altura vale vaya a cambiar la altura digamos de la cabeza entonces para ello voy a crear otra variable llamada altura cabeza va a ser 80 no lo sé de momento y voy a hacer lo siguiente esto sería el cuello nada y esto es y esto es altura cabeza a ver momento arco del cráneo vale esto es anchura partidos anchura partido 2 y esto es altura partidos menos altura cabeza partidos vale esto es altura a partidos dos más altura cabeza partido 2 y esto es altura cabeza partido 2 aquí ya que bien si todo va bien creó un nuevo reims altura cabeza creó un nuevo escuchado alto la cabeza altura cabeza es esto y dibuja y si todo va bien ahora por tanto pues que tengo un nuevo range tengo el anterior tengo ahora también la altura de la cabeza vale ya y puedo empezar a dibujar puedo empezar a tener digamos qué altura del personaje quiero ok vale ya tengo esto por aquí con lo cual sigo teniendo el dilema del trapecio no sé por qué el trapecio suela hacia vencer la cosa como no sé por qué el trapecio se va hacia allá voy a decir con solo y voy a decirle dime dónde vas dime dónde vas 256 104 ya sé cuál es el problema anchura mandíbula altura mandíbula y anchura el cráneo es 100 nos está encadenando en lugar de sumarlos no tengo ni idea por qué está haciendo eso pero lo está haciendo entonces entonces ahora partidos tengo una idea de por qué está haciendo eso pero ahí lo tenemos es simplemente lo que ha hecho es multiplicarlo por 1 para que se fuerce a que sea un número ahí muy bien perfecto claro porque esto porque esto es puntual por 12 puntual por una crisis puntual por 1 ya está y con esto debe funcionar y así lo que hacemos es asegurarnos que todo lo que cogemos realmente se interpreta como es como un elemento bien pues ya tenemos esto por aquí ya tenemos la cabeza y ahora evidentemente pues tenemos que dibujar todo lo demás por supuesto voy a empezar dibujando orejas por ejemplo y pues una vez que dibuje orejas voy a momento estoy haciendo como una especie de mahle de esqueleto así que voy a quitar este momento vamos a hacer el esqueleto y ahora en cuanto tengamos el esqueleto pues dibujamos el resto de cosas dibujamos los rellenos y así lo tendremos todo parametrizado vamos a dibujar como digo las orejas bien así que a continuación nos vamos nos vamos nos vamos a venimos por aquí y ahora voy a hacer lo siguiente vamos a ver las cejas podrían venir más o menos por aquí vamos a ver como lo podemos hacer prefiero encontrarlas en esta intersección hay son orejas muy grandes orejas y ahora digo contexto de paz más pequeño y ahora anchura partidos como altura partido 2 y no bueno – – – vale vamos a ver para tamaño oreja es igual a 40 de momento y bar altura oreja es igual a 40 vamos a verlo entonces esto es anchura partido 2 más anchura clave altura partido 2 menos – tamaño oreja esto es tamaño oreja esto es altura oreja vamos a verlo vale ahí tenemos un círculo poco grande con 20 vale a ver vale esto es una oreja 20 porque hay por ejemplo vamos a verlo una cosa sé bien ahora ahora hoy vamos a continuar vamos a por ello y ahora digo qué al sur al cráneo anchura más de oreja anchura en mandíbula así que ahora veremos [Música] y el papel la sección amos con el trapecio y esto es y esto es más anchura cráneo – de orejo ahora es anchura cráneo vamos a ver esto es aventura mandíbula master oreja esto es menos anchura mandíbula más de oreja menos anchura del cráneo – de oreja si todo va bien esto no por aquí y repartido dos vamos a ver más anchura cráneo más de oreja vale menos de altura oreja anchura mandíbula más de oreja menos más más anchura mandíbula más anchura mandíbula – t por eso y esto es a oreja a oreja vamos a verlo vale ahora sí ahora sí como hay tenemos digamos el tamaño de la oreja voy a hacer un tamaño un poquito más parecido 90 85 vamos a verlo un poco más así vale ya tenemos estos dos elementos con lo cual pues ahora podemos crear la otra oreja podemos crear la oreja de la izquierda entonces hago así vamos a ver beijing paz y menos de todo esto vamos a verlo menos anchura al cráneo menos anchura de tal vale – altura menos censura menos censura menos ahora vamos a probarlo y en principio en principio y en principio está bien en principio está bien con lo cual ahora tenemos que empezar a trabajar otras cosas tales como por ejemplo pues los ojos vale pero de momento tenemos ya ahí lo que sería el el elemento principal bien vamos a decidir un poco por dónde iría por dónde irían los ojos por dónde iría la nariz pro me iría a la boca vamos a por ello asiste ahora por ejemplo tengo aquí vamos a crear el stroke vamos a crear en primer lugar el en primer lugar el esqueleto así es te cojo por aquí esto y digo lo siguiente vaart vamos a ver porque un ojo tiene altura ojo es igual a 20 bar separación ojo es igual a lo que sé preferente vamos a ver ahora van a tamaño ojo es igual a 30 y podría crear un ángulo momento no entonces dijo anchura partido 2 un momento será partido 2 más tamaño cráneo anchura cráneo partido 2 max separación vale la altura es la siguiente la altura es altura partido por 2 digamos que están aquí los ojos menos altura ojo vale ahora tamaño ojo y ya está y vamos a probar así que creo un input y qué hacemos con este input pues vamos a ver qué es tamaño ojo y luego tengo por aquí altura ojo y luego tengo por aquí separación ojo entonces vengo por aquí creo los escuchadores caamaño ojo tamaño ojo altura ojo y separación ojo separación vamos a verlo así que bueno el ojo está por ahí ahora lo hacemos más pequeño el rojo el ojo madre perfecto entonces altura ojo es de menos 20 hasta 20 el separación ojo es de menos 20 hasta 20 y el tamaño ojo es desde 10 hasta 50 yo que sé vas a comprobarlo vale así qué tamaño ojo altura ojo y separación ojo y así por tanto ahora a continuación pues vamos a continuar definiendo pues otro tipo de parámetros tales como por ejemplo el ibis tales como por ejemplo la pupila y todo esto vamos a por ello vamos a continuación ojos por aquí vamos por allá básicamente voy a hacer esto pero voy a decir que tamaño o lo voy a hacer partido por dos y por último para la pupila pues voy a decir tamaño ojo partido por tres partidos por 42 partido por 4 y con eso tenemos pues como la pupila digamos del ojo tengo esto por aquí ya tengo muy teniendo los dos ojos del personaje voy a hacer voy a probar vamos a ver 5 canvas elipse vamos a ver vale entonces voy a intentar dibujar una elipse a ver si me deja y entonces digo elipse esto es correcto esto es correcto y entonces digo tamaño por ahí tamaño partidos por allá entonces se va bien cuánto ciudad bien vamos a e inspeccionar no me he dicho nada pero tampoco ha hecho nada vamos a ver es x y tamaño o tamaño compartido por todos a ver momento y la rotación vale muy bien vamos a ver y tamaño 1 j manejo pero aunque el perfecto ahí tenemos el ojo muy bien fenomenal tenemos el ojo por ahí con lo cual con lo cual con lo cual pues bueno podemos incluso también hacer otro parámetro que sea rotación del ojo así que vamos a por ello vamos a por ello vamos a por ello así que vengo por aquí esto es rotación ojo muy bien añadimos el escuchado y rotación cojo rotación ojo va desde menos dos astados y entonces aquí le digo rotación ojo si vengo aquí y recargo fuego cuidado rotación ojo no esto es dar rotación ojo más rotación rojo es igual a 0 entonces ahora hacemos así y vemos cómo podemos cambiarlo cuidado aquí voy a decirle que el step es igual a 0.1 ahí podemos cambiar los ojos vale y puedo también añadir un parámetro de apertura de ojo entonces input ok ok ok y vamos a ver apertura ojo apertura ojo vamos a verlo a ver mínimo dos no mínimo cero máximo yo que sé step 0.01 y voy a venir por aquí bueno le digo bar apertura ojo es igual a 1 y entonces esto es tamaño partido 2 x apertura ojo apertura ojo el máximo va a ser 2 entonces hago así a extrañas del escuchador apertura ojo apertura ojo y a partir de aquí a partir de ahí para hacer que el ojo esté más cerrado o más abierto bien pues ya tenemos por elche de rojo vamos a centrar un poco más porque por defecto se parecen ojo pero ahí vale y ahora evidentemente como podemos imaginar pues voy a voy a dibujar el otro ojo este es un ojo y entonces – – – – y entonces ahí tengo los ojos y entonces puedo cambiar la altura puedo cambiar el tamaño puedo cambiar cuidado ahí la separación esto es menos separación menos separación menos separación menos separación de la separación y ahora ha llegado la resolución menos menos la rotación menos la rotación y la apertura con esto ya tengo el esquema con lo cual a continuación vamos a por la nariz y por la boca pero básicamente como podemos imaginar pues el esquema va a ser bastante parecido a lo que estamos viendo ahora muy bien pues vamos allá voy a cambiar todos los todas las entradas de the changing food y de esta forma y de esta forma aquí vamos a poder cambiar en tiempo real los elementos de una forma más interactiva a la altura de la cabeza al tamaño de los ojos la altura de los ojos la separación de los ojos en la rotación de los ojos y la apertura de los ojos a partir de ahí a partir de ahí vamos a dibujar un par de cosas más voy a crear otro parámetro llamado bar anchura boca o sea es igual a 20 dar apertura [Música] boca es igual a 5 no lo sé bar altura boca es igual a cero y bar y ahora que con mar rotación es igual a cero ya ves ahora vengo por aquí y luego boca y vamos a por ello vamos a una de estas cosas y digo ahora partidos menos menos anchura cráneo no más anchura cráneo menos altura boca no no no no esto no esto no y eso tampoco eso vale ahora menos – que pues no lo sé – altura mandíbula o menos altura cabeza partido por 2 altura boca y entonces digo y entonces digo esto es una obra de fermín lipset y entonces digo anchura boca apertura boca coma ángulo boca creo que es rotación boca entonces entonces coma cero coma y vamos por aquí a poner sliders por aquí cosas es basura caneo anchura mandíbula altura cabeza tamaño altura ojo separación ojo rotación ojo apertura ojo y ahora vamos con anchura busca apertura boca altura boca rotación boca y entonces y entonces vamos a ponerlos y entonces ancho la boca apertura boca altura boca y roto cielo vamos a por los escuchadores 2 3 y 4 y entonces anchura boca anchura boca apertura la boca apertura boca altura boca altura boca y rotación boca rotas en boca recargo en principio no está apareciendo no sé si tengo algún error pero no está pasando la ley para entonces elipse la x la y vamos a verlo 5 canvas elipse estoy consultando la documentación en otra pestaña les tengo la equis y fuera este parámetro sobra vale la boca se me ha quedado ya arriba muy bien fantástico porque esto es vamos a ver entonces más altura cabeza en la boca aparece por ahí más altura cabeza vale bueno eso es otra cosa entonces ahora entonces ahora pues digo anchura boca web muy poquito vamos a verlo vale anchura boca máx 2% apertura boca más 50 altura boca pues no lo sé de menos 50 50 y rotación boca – 22 vamos a por ello y entonces vamos a ver apertura de la boca apertura por aquí altura puedo cambiar y rotación de la boca pues bueno según se mire vale ok ok ok ok muy bien pues nos quedará la nariz para dibujar la nariz pues vamos a vamos a tirar un arco y bueno en este caso puede ser nariz horizontal que haga un arco hacia arriba o que haga un arco hacia abajo a ver cómo podemos plantear el tema de la nariz saber cómo podemos plantearlo de forma sencilla bueno y vamos a finalizar con la nariz vamos por aquí vamos con la nariz así que por aquí vamos a crear varias varias elipses vamos a ver anchura partido por 2 altura partido por 2 vale y aquí vamos a hacer lo siguiente creamos unas cuantas variables la altura nariz que es igual a 10 vamos a ver vamos a crear por aquí bar anchura a nariz es igual a 10 bar [Música] bueno altura punta es igual a cero bar tamaña punta es igual a 20 por ejemplo y ahora para tamaño nos thrills qué son las aletas de la nariz es igual a 20 y la separación no es thrills es igual a 20 también vamos allá tenemos seis nuevos parámetros así que vamos a por ello tenemos altura nariz anchura nariz tenemos altura punta tamaño punta tenemos tamaño no es tres aletas por ejemplo y separación aletas vamos a meter inputs altura nariz esto es altura nariz ancho la nariz altura punta y vamos a por ello pero esto es anchura nariz altura punta esto es tamaño punta esto es tamaño no es thrills y esto es separación no es thrills con lo cual ahora me vengo por aquí y vamos a crear seis de estos no vacío no vacío 2 3 4 5 y 6 y esto es altura nariz anchura nariz nariz anchura nariz esto es altura punta altura punta tamaño punta tomando apuntó esto es tamaño no es thrills esto esta mañana los trolls y esto por último es separación no es thriller y separación no es thrills bien entonces si todo va bien ahora vengo por aquí vamos a dibujar pues prácticamente 44 elipses anchura partido por 2 altura partido por 2 y ahora digo anchura nariz esto es altura nariz parís rotación no obtiene rotación diríamos vamos a probarlo y tenemos ya por aquí la nariz el bloque de la nariz pecho vamos a ver altura a nariz es este de aquí anchura nariz existe de aquí ahí lo tenemos bien ahora reduciremos el tamaño vamos a decir altura dos partidos por dos más 100 no lo sé o más 50 me pasado más 20 por ejemplo ahí digamos que me gusta más vale vamos allá entonces ahora voy a dibujar una serie de elementos más para dibujar el resto de elementos de la nariz vale entonces entonces ahora voy a dibujar diferentes elementos y dibujar la punta de la nariz esto es a la anchura más 20 vamos a ver esto es altura partido por 2 y esto es más altura nariz [Música] partido por 2 y esto es anchura ahora que el tamaño punta a vernos pues sí el tamaño apunta vale fuese la manía de punta tamaña punta ahí lo tenemos vale poco grande un poco grande tamaño punta 10 y por tanto tamaño en los 35 y separación 10 vale realmente esto lo puedo con seguir con arcos pero bueno igual estamos con elipses has hecho algo así y ahora esto es + 20 + 20 tamaño no strings partido por 2 esto es tamaño no es thrills más separación la separación los tres y por tanto ahora lo que hago es que esto es menos y si todo va bien pues ahí tenemos vamos a ver hoy tamaño de la punta esto no está funcionando tamaño de la punta tamaño de los mástiles separación vamos a ver altura electoralista altura punta tamaño punta tamaño no estériles y separación no es thrills y ahora tengo aquí separación no estrés impresión principio tamaño industrial sí separación no styles no altura punta para estos años una nariz altura punta no está haciendo nada esto es altura nariz no esto es más altura punta vamos a por ello de hecho por aquí podría poner ya una serie de veces para forzar el salto de línea vale y así mansura el cráneo altura punta anchura lo tenemos tamaño punto a la altura de la punta por tanto vale ahora tamaño aletas y separación aletas esto es lo que no está funcionando separación no es trielx separación no es thrills separación no estéril separación no estériles i separación no es thrills y entonces vengo aquí y digo más y menor separación no austria y por algún motivo no está funcionando vale luego aparte altura punta altura punta va a ir este menos 20 hasta 20 altura punta y los nuestros se irán también más alto la punta más altura punta más altura punto muy bien tamaño punta un tamaño a punta tamaño punta irá desde 0 hasta 20 tamaño aletas lo mismo desde 0 hasta 20 y separación hasta 20 vamos a probarlo altura punta vemos como baja todo tamaño punta tamaño aletas y separación alitas es lo que no sé por qué pero no va de separación en los trenes separación no estériles separación no es thrills y ahí había un error y separación los trailers parece que había algún tipo de error quizás era que tenía una sola m separación aletas vemos como ahora así ahora sí tamaño aletas tamaño punta vale ahora si va mejor muy bien y vamos a ver tenemos altura nariz y tenemos anchura nariz ok es una medicina es muy fuerte anchura nariz para de 0 a 100 de 0 a 20 sobre nariz una cosa sé muy bien ya tenemos esto vamos a por más por ejemplo por ejemplo podríamos hacer lo que sería la base del cuello le vamos a hacer los hombros podríamos hacer un poco pues no sé lo que sería la constitución del personaje podríamos hacer el pelo un poco por arriba vamos a hacer el pelo entonces vamos allá bar radio pelo entonces tamaño pelo es radio pelo y entonces digo cuando sobre radio pelo es igual a 0 cuando sobre radio pelo radio pelo entonces a continuación aquí donde está el arco del cráneo os digo pelo y entonces digo anchura cráneo más radio pelo vamos a probarlo pero era 20 vale pues tamaño de pelo vemos que hay digamos sobresale el pelo algo que podremos elegir también el color así que tenemos unas cosas muy bien y como decía vamos con los hombros digamos vamos con la base digamos el cuello así que vamos con los hombros para la separación hombros se iguala a 40 bar tamaño hombros es igual a 40 también bar altura clavícula clavícula es igual pero de momento vamos a ver así que así que vengo por aquí separación hombros separación hombros caamaño a hombros altura clavícula luego entonces separación hombros tamaño hombros altura clavícula bien y entonces separación hombros tamaño hombros altura clavícula y ahora por aquí programarte aquí por una parte digo clavícula y esto es ante una partido por dos y altura partido por dos más altura clavícula y cuánto como 30 vamos a verlo l así el gran tamaño pelo vamos a ver clavícula menos altura cabeza más altura cabeza se impartido por 2 ok vale a las altura cabeza por dos esto ya es otra cosa [Música] 40 50 porque ahí tenemos la base de la clavícula tenemos la altura de la clavícula aleara le ponemos la película menos 20 o menos 50 más 50 a la altura de la clavícula muy bien y ahora vamos a establecer lo que serían por cierto que el pelo radio pero vamos para el 20 vale y ahora pues vamos a vamos a hacer los hombros entonces entonces el tamaño hombros esta altura clavícula vale clavícula vale pues tamaño hombros hombros realmente de que entonces entonces anchura partido por 2 más más bien más separación hombros altura partido por todos para saltar a la cabeza clavícula ok estos 40 vale muy bien al responder es un poquito más 70 una altura clavícula más 30 una cosa así y ahora el segundo hombro qué es menos 70 menos separación y tenemos el resto por aquí separación hombros tamaño hombros no me está haciendo caso plano porque es 40 más tamaño hombros 40 más tamaño hombros tamaño hombros tamaño nuestro momento cero y separación irá desde – 30 hasta más 30 tamaño hombros de 0 a 20 bueno menos 20 realmente y altura clavícula de unos 50 a más 50 vale entonces vengo por aquí tengo la altura de la creencia funciona directamente y la altura de la clavícula con lo cual la cabaña ambrós vale con lo cual ahora lo que quiero es pues un poco como diría yo hacer por aquí pues la línea digamos tenemos por aquí los hombros vale pues cojo el beijing paz y digo esto va a ir esto fuera esto ayer justo esto – 50 [Música] aquí anchura partido 2 más 70 más anchura hombros más altura cabeza ahora veremos vamos a ver vamos a bajarlo vamos a bajarlo y ahora digo esto por aquí esto por aquí vamos a ver esto dónde lleva ok perfecto más y a ver el radio 40 más tono hombros vale 40 más tamaño hombros 40 menos 40 menos tamaño hombros ahora sí y luego pues bajaría hasta abajo bien entonces copio y pego y esto va desde aquí hasta aquí y yo creo que más o menos más o menos ya lo empezamos a tener más o menos ya lo empezamos a tener ahora me haría falta evidentemente ordenar todos estos parámetros y empezar a pintar por supuesto que sí pero pero más o menos ya lo empezamos a tener vamos a ahora empezaremos a pintar pero antes de pintar con texto online un puesto fuera con texto online esto más ahora quiero contexto line esto es menos esto es menos vale ahora quiero contexto online ay y ahora quiero close paz vamos a ver lo correcto ha funcionado correctamente y ya está así que ahora voy a empezar a pintar y ahora al empezar a pintar pues digamos el personaje que era de color sólido antes de ponerme a rellenar color voy a hacer una especie de pelo largo a ver si a ver si lo consigo a ver si me sale entonces para ello para ello voy a crear una variable qué es la siguiente tenía por aquí rayo pelo y entonces voy a hacer radio pero largo hacer pelo largo y para longitud pero es igual a 30 por ejemplo bien entonces entonces evidentemente aquí donde ponía radio pelo no sé dónde estará allí pongo tamaño y pelo largo y esto era radio pelo largo [Música] longitud pelo largo a longitud y esto es respetando el nombre de la variable longitud pelo vale pongo escuchadores 1 2 y 3 realmente 1 y 2 y es radio pero largo radio pelo largo longitud pelo longitud pelo y ahora en el pelo y ahora en el pelo donde estás por aquí hombros aquí está voy a poner lo siguiente voy a poner más anchura más altura a partir de por dos menos altura cabeza más altura pelo altura ojo no ya no me acuerdo longitud pelo pelo pelo pero longitud pelo y ésta vale y ahora es anchura cráneo más radio pelo más no realmente radio pelo largo vale yo creo que ya vamos a ver lo tengo hay un segundo pelo y tengo tamaño pelo tamaño pelo largo y tengo longitud del pelo y entonces ahora voy a decirle que tamaño pero largo es de 0 hasta 40 esto es 30 hasta 40 y esto es desde 0 hasta 200 no lo sé entonces ahora tamaño pero largo puede ser más largo longitud de pelo puede ser más largo ok vamos bien y ahora y ahora al saber ayer el trapecio vale entonces ahora el trapecio por aquí oreja hombros vivo la otra precio vamos con el pelo y digo esto es anchura partido por 2 en su partido por dos más anchura cráneo esto fuera nuestro son controles repartido por dos más anchura cráneo más anchura pero a ver cómo se llama tamaño pelo sera pues no cómo se llama ese parámetro es radio pelo más radio pelo muy bien ahora altura partido por 2 y ahora veremos aquí lo pongo hoy ahora con texto line tú y es anchura más radio pelo largo hola altura altura cabeza más en longitud pelo con lo cual haciendo eso debería ahí está vale debería hacer eso muy bien ahora contexto online de esto mismo pero en negativo o sea que wow perote acs eso es incorrecto por el mal ahora contexto online tú en negativo y contexto line tal cual a eso vamos a ver si es cierto tamaño pero la longitud del pelo y yo creo que ahora sí entonces ahora una vez que tenemos estos elementos yo creo que ahora sí ya llega el momento de empezar a rellenar y para empezar a rellenar pues tenemos que empezar a pensar qué es lo que está adelante qué es lo que está detrás todo esto madre mía porque al final código eso se echó largo pero todo esto son las líneas ahora vamos a ver por qué tenemos que ir mezclando lo que rellenamos de una cosa con lo que rellenamos de otra entonces ahora importa mucho el el orden de los elementos así que vamos a empezar a reordenar aparte de que vamos a necesitar colores como variables pero bueno ahora hablaremos de esto vamos a empezar con el pelo así es que vengo por aquí cojo el pelo me voy a venir por aquí empezar a crear separadores más visuales porque si no no veo nada y entonces ahora en el pelo digo líneas y ahora digo relleno y entonces digo contexto punto feel style es igual a rgb de momento voy a decir 3000 0.3 por tanto ahora voy a hacer pues todo esto pero en lugar de decirle stroke voy a decir feel y si todo va bien vemos cómo y rellenamos de un cierto color estoy rellenando semitransparente más que nada para no dejar de ver estos elementos que tengo delante porque si no pues dejaré de ver ahora cambiaremos el cambiaremos el color para poner un color más sólido bien ahora necesito las orejas en las orejas las tengo por aquí voy a por aquí las orejas y estos son las líneas todas estas son las orejas vale entonces ahora son las líneas son los rellenos rellenos y entonces le digo contexto punto final está el es igual a game y ahora por tanto vivo bueno voy a llegar lo confirma vamos a verlo y ahí tenemos las orejas del personaje vamos allá vamos a continuar que tenemos orejas pues vamos a por la cara vamos a por la cara vamos a poner el cuerpo principal de la cara tendríamos también el cuello y tendríamos también la ropa entonces por detrás del todo vamos con la clavícula de los hombros clavícula y hombros entonces esto lo muevo aquí esto lo muevo aquí lo copió aquí clavícula y hombros esto fuera estas son líneas y ahora vengo aquí copio todo esto porque esto de aquí son rellenos y entonces empieza a llegar con phil esto será contexto punto feel style es igual a lo que se ve de momento ya veremos a que lo cambiamos luego vale de momento es blue ok vamos con la cara vamos a rellenar la cara de hecho el pelo de hecho el pelo estoy pensando voy a pensarlo para um dónde estás clavícula y hombros pelo relleno esto es brown vale de momento ahí va bien vamos a rellenar orejas ya lo tengo línea del cuello esto es la cara pero pero cuello cuello de hecho esto lo puedo resolver casi contexto punto field style es igual a orange de momento y contexto punto feel esto lo tenemos un misterio vale y ahora la cabeza cojo uno de estos la cabeza yo esto lo pego aquí vale arco del cráneo mandíbula trapecio uno de los elementos ojos fuera esto es otra cosa entonces líneas rellenos y entonces sí contexto punto feel style es igual a orange efe ya tengo por ahí la cara y vamos allá con los ojos con los ojos vamos a ver qué pasa con los ojos por qué ojos dónde estás vamos a ver el círculo de fuera no lo quiero de fuera no lo quiero este círculo de aquí esto es el blanco del ojo y esto va aquí estos son líneas esto es el blanco del ojo y estaba aquí y entonces ahora cojo esto lo tengo aquí y estos son los rellenos entonces contexto punto field style es igual a white muy bien guardamos recargamos del momento no pero phil está el señor a white así perdón rellenos fin y amo efe hablamos recargamos valen extraña maestra correcto contexto file style esto es los ojos azules blue vale ok esto es la pupila black ok y entonces ahora pues volvemos a poner esto es vuelto esto es blue esto es placa muy bien y tenemos al personaje de momento con los ojos vamos a hacer segundo tamaña tamaño del pelo pero a ojos perdón no tenemos apertura al ojo y tengo un problema ahí tenemos que ver cómo resolverlo pero bueno y ahora la nariz cámara la boca no tiene mucho misterio con texto juntos feel style es igual a black y contexto punto fin vale y la nariz tiene más misterio es la boca vale vamos con la gris estos son las líneas y ahora voy a copiar para hacer los rellenos líneas y rellenos así que contexto punto film style es igual a orange y entonces él y si todo va bien ahí tenemos la nariz poco rara cambiarle un poquito la altura de la nariz dónde estás altura la punta de la nariz pues no sé en 10 y no hay mejor y una ves ahora vamos a probar vamos a probar el sistema vamos a hacer lo siguiente es algo así ok ok vale muy bien anchura de la mandíbula altura de la cabeza esto hay que apañar lo un poco tamaño del ojo altura del ojo separación del ojo en las cejas me faltan rotación del ojo apertura del ojo anchura de la busca apertura de la boca altura de la boca rotación de la boca altura de la vid anchura del anís altura de la punta tamaño de la punta tamaño de las aletas separaciones las aletas tamaño del pelo tamaño del pelo largo y longitud del pelo longitud del pelo entonces debería estar abajo del todo separación de los hombros tamaño de los hombros y altura de la clavícula vale veo que el pelo debería estar por detrás del todo clavícula y hombros el pelo tiene que estar por 30 lo corto de aquí y lo muevo aquí recargo y así si hago pelo largo vale pues cae por detrás aunque muy bien tendría que hacer el personaje para que el pelo le quedara menos raro evidentemente vamos a trabajar un poco vamos a trabajar un poco las cejas los hechos cejas pero las puedo hacer con cierta con cierta facilidad así que bueno aparte de que tengo que hacer los electores de color en palabra ahora veré cómo los puedo hacer entonces el saber vamos a hacerlos ya realmente y colores color piel color camiseta y color pelo y color ojos entonces esto es un hipotético color esto no se aplica y esto es color piel vemos ahí que hay un color piel podemos el color piel color camiseta color camiseta color pelo con loros y vamos allá así que mar color piel es igual pues qué pues no lo sé vamos a un programa como el ilustrador o como photoshop voy a abrir photoshop vale vamos allá voy a hacer un nuevo proyecto y cojo un color naranja más o menos vale cojo este color de aquí y digo qué digo que estoy aquí color color camiseta camiseta va a ser 0000 ff color pelo pues vamos a el marrón y color color qué color que me queda colores es un color a azul bien entonces entonces vengo por aquí y digo lo siguiente color pelo esto es color camiseta orejas esto es color piel esto es color piel esto es color piel estos blancos siempre estos colores esto es blanco con rojos y esto que es la boca celular en negro y esto es color piel más extremo recargo tengo el personaje de un cierto color pero lo importante en este caso es que quiero ser capaz de cambiar el color de la piel quiero ser capaz de cambiar el color de cualquier cosa voy a poner una serie de colores de base color piel color piel value es igual a esto camiseta es igual a esto pelo es igual a esto ojos es igual a esto vale ahí tengo y lo que quiero es que cuando cambie el color pues quiero cambiar el color así que para ello vamos a poner los nets inputs color piel color piel por uno afuera entonces si todo va bien si hago así puedo cambiar el color de la piel cualquier persona puede cambiarse el color que quiera puede cambiarse de color si quieres me igual pues lo mismo voy a hacer con color camiseta color pelo y color ojos vamos a por ello me puedo cambiar la camiseta me puedo cambiar el color del pelo me puedo cambiar el color de los ojos con esto como vemos pues tenemos ya un selector bastante avanzado y ahora lo que voy a hacer también es empezar a utilizarlo empezar a crear apartados de parámetros para digamos poder empezar a trabajar con soltura puede empezar a trabajar con facilidad y digamos que estos tienen apartados o algo así

Deja una respuesta

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