CursosEmpresasBlogLiveConfPrecios

Interacción sacudir la cabeza

Clase 21 de 27 • Curso de Creación de Filtros Faciales para Instagram con Spark AR

Clase anteriorSiguiente clase

Contenido del curso

Conocer Spark AR
  • 1
    Crea tu primer filtro usando Spark AR

    Crea tu primer filtro usando Spark AR

    00:54
  • 2
    Descarga e instalacion Spark Ar studio

    Descarga e instalacion Spark Ar studio

    06:31
  • 3
    Desplazamientos en el programa

    Desplazamientos en el programa

    04:59
  • 4
    Interfaz y Face mesh

    Interfaz y Face mesh

    07:56
Creando un efecto en los ojos
  • 5
    Crear diseño de ojo en photoshop

    Crear diseño de ojo en photoshop

    04:02
  • 6
    Integrar diseño de ojo en Spark AR

    Integrar diseño de ojo en Spark AR

    14:10
  • 7
    Crear extracción de textura de rostro y retoque facial

    Crear extracción de textura de rostro y retoque facial

    06:10
  • 8
    Descarga de referencias de rostros de Spark AR

    Descarga de referencias de rostros de Spark AR

    02:43
Crea un efecto de maquillaje en realidad aumentada
  • 9
    Creación de  maquillaje en photoshop (boca)

    Creación de maquillaje en photoshop (boca)

    09:24
  • 10
    Creación de maquillaje en photoshop (nariz y ojos)

    Creación de maquillaje en photoshop (nariz y ojos)

    08:26
  • 11
    Integrar maquillaje en spark ar

    Integrar maquillaje en spark ar

    06:52
Publicación de pre diseño del filtro
  • 12
    Vincular cuentas

    Vincular cuentas

    01:20
  • 13
    Cómo subir un filtro a Instagram

    Cómo subir un filtro a Instagram

    13:26
Crear un efecto animado en 2d
  • 14
    Creación de sprite sheet en photoshop

    Creación de sprite sheet en photoshop

    10:53
  • 15
    Integración de sprite sheet en spark ar y creacion de particulas

    Integración de sprite sheet en spark ar y creacion de particulas

    05:05
  • 16
    Interacción de abrir la boca con parches

    Interacción de abrir la boca con parches

    05:46
Personaliza elementos de tu escena
  • 17
    Color de cabello

    Color de cabello

    05:58
  • 18
    Agregar fondo

    Agregar fondo

    06:09
  • 19
    Crear marco o viñeta

    Crear marco o viñeta

    02:14
  • 20
    Imágenes 2D sobre plano

    Imágenes 2D sobre plano

    05:14
  • 21
    Interacción sacudir la cabeza

    Interacción sacudir la cabeza

    04:48
Agregar interacciones al filtro
  • 22
    Agregar sonido

    Agregar sonido

    03:17
  • 23
    Crear instrucciones

    Crear instrucciones

    01:28
Publicación del diseño final de tu filtro
  • 24
    Optimización

    Optimización

    02:06
  • 25
    Cómo asegurarse de que el filtro sea aceptado

    Cómo asegurarse de que el filtro sea aceptado

    04:55
  • 26
    Subir filtro final Instagram

    Subir filtro final Instagram

    07:03
Bonus
  • 27
    Cierre y recomendaciones finales

    Cierre y recomendaciones finales

    00:31
    Daniel Piedrahita

    Daniel Piedrahita

    student•
    hace 4 años

    Cuando conecte por primera vez el parametro de scale en el patch editor a la salida de la transición, los valores del parametro no se fueron a "0" como indica la transición en su "start" lo solucione cambiando debajo de la transición el "vector 3" por "numero" y volviendo a "vector 3" con la intención de que refrescara los valores y funciono, por si le pasa a alguien mas :)

      Luis Eduardo Alanís Villarreal

      Luis Eduardo Alanís Villarreal

      student•
      hace 4 años

      Es cierto, me pasó que no me funcionaba así que hice lo de moverlo a number y devolverlo a vector 3, reconectarlo y ya me funcionó. Gracias

      Andrés Manuel López Ordaz

      Andrés Manuel López Ordaz

      student•
      hace 3 años

      Ey, muchas gracias jaja, me funcionó UwUr

    Christian Alejandro Vargas Menchaca

    Christian Alejandro Vargas Menchaca

    student•
    hace 4 años

    Veo tantas cosas en el filtro y me abruma, pero a la vez me encanta lo mucho que se puede hacer.

      Mayra Lopez

      Mayra Lopez

      student•
      hace 4 años

      Si abruma, pero yo lo hago por partes y pequeños filtros para pequeñas cosas. Animo, si se puede

      Luis Eduardo Alanís Villarreal

      Luis Eduardo Alanís Villarreal

      student•
      hace 4 años

      Exacto, por eso no recomiendo hacer todo el curso de volada. Es ver por partes y ensayar lo que viste e incluso improvisar con un proyecto propio en cada sección para ir aprendiendo.

      Yo además tomo apuntes con las instrucciones (salió borrosa la foto jeje)

      20211229_110747.jpg

    Jhonatan David Ibarra Lavado

    Jhonatan David Ibarra Lavado

    student•
    hace 4 años

    en el minuto 2.58 se vuelve a repetir una parte del video

      Anthony Ismael Manotoa Moreno

      Anthony Ismael Manotoa Moreno

      student•
      hace 4 años

      Muchas gracias por tu reporte :D

      Lo corregiremos pronto

      Tania Sosa

      Tania Sosa

      student•
      hace 4 años

      Hola Jhonatan, este detallito ya fue corregido. Muchas gracias por ayudarnos a mejorar Platzi 💚

    Juan Sebastián Sierra Morales

    Juan Sebastián Sierra Morales

    student•
    hace 4 años

    Resumen SM 🚀


    Interacción sacudir la cabeza

    • Abrimos el patch editor, dirigiéndonos Workspace → Show/hide Patch Editor

    • Seleccionamos el objeto faceTracker0 hacia el Patch Editor

    • Damos click derecho sobre el Patch Editor y agregamos el bloque de Head Shake (Detecta cuando alguien sacude la cabeza) y posteriormente hacemos los mismo para agregar el bloque de Animation (Permite reproducir o detener una animación además de agilizarla o alentizarla)(viene con un bloque pulse) y Transition (Permite realizar la transición de la posición o estado inicial de un elemento (numero o color) a uno final)

    • Conectamos los bloques la salida (Face) de faceTracker(face)→entrada (Face) de head shake → la salida (Shake) de head shake → la entrada (Play) de Animation → la salida (Progress) de Animation → la entrada (Progress) de Transition.

    • Copiamos el tamaño del plano de la tarjeta en cada uno de sus ejes y lo pegamos en el campo End del bloque de transición.

    • Nuevamente en la propiedades del plano tarjeta → Transformations→Damos click en el circulo de la propiedad Scale (tamaño del plano) Para obtener su bloque.

    • Finalmente unimos la salida (Value) del bloque Transition → entrada del bloque de la escala de la tarjeta.

    By SsimorPro

    Paula Abad

    Paula Abad

    student•
    hace 4 años

    Así va mi filtro.

    Captura.PNG

    Abel Camacho

    Abel Camacho

    student•
    hace 4 años

    A sido fácil con la explicación del profesor, pero veo que para dominarlo se necesitaría mucha practica, pero con todos los recursos empleados dan ganas de experimentar con otras ideas.

    Salvador Anwart Meza Jiménez

    Salvador Anwart Meza Jiménez

    student•
    hace 4 años

    Al sacudir la cabeza quiero que se desactive el mouth open para que dejen de salir los murciélagos con el fin de poner otra animación y al volver a sacudirla que reaparezcan, alguien que me pueda ayudar? lo intente sin éxito.

      Daniel Murcia

      Daniel Murcia

      teacher•
      hace 4 años

      para esto lo que puedes hacer es q al sacudir la cabeza, desabilite el visible de as particulas de los murcielagos. (head shaker - switch - visible de particulas murielago)

      Salvador Anwart Meza Jiménez

      Salvador Anwart Meza Jiménez

      student•
      hace 4 años

      Me da hasta verguenza escribir pero lo que estaba mal era mi movimiento de cabeza, es haciendo un movimiento como diciendo NO y yo movia la cabeza como campana, es lo malo de practicar a las 3:00 a.m. gracias por el apoyo

    Jose de Jesus Herrera Ledon

    Jose de Jesus Herrera Ledon

    student•
    hace 4 años

    Como se podria conectar la imagen del plano a una API? Por ejemplo mandar una imagen de servidor o generarla en el dispositivo

      Mayra Lopez

      Mayra Lopez

      student•
      hace 4 años

      No se puede, se tiene que subir el asset y ahi se le da una segunda revisión. De hecho no cualquier imagen es aceptada por spark, si tiene letras o contenido protegido el filtro es rechazado

      Emmanuel Jose Lamprea Florez

      Emmanuel Jose Lamprea Florez

      student•
      hace 4 años

      Es verdad lo que dice Mayra, todo el contenido que se quiera mostrar en el filtro deber ser añadido en el programa, no se puede usar archivos en la nube o parecido, tiene que ser local.

      Ojalá en un futuro implementen mejores funciones

    Jhonatan David Ibarra Lavado

    Jhonatan David Ibarra Lavado

    student•
    hace 4 años

    esto esta brutal, gracias , genial jajaja

    Daniel Piedrahita

    Daniel Piedrahita

    student•
    hace 4 años

    Hola, la parte de los valores para la escala en la transición esta duplicado, saludos, gran curso.

    Nicolas Agustin Goitia

    Nicolas Agustin Goitia

    student•
    hace 4 años

    Cuando los murcielagos pasan sobre la tarjeta de invitacion,se ven con un cuadrado negro de fondo. Hay forma de quitar eso?

      Daniel Murcia

      Daniel Murcia

      teacher•
      hace 4 años

      Nicolas, aqui dees activaar la opcion alpha test en el material del los murcielagos y tambien en el material de la tarjeta

      Emmanuel Jose Lamprea Florez

      Emmanuel Jose Lamprea Florez

      student•
      hace 4 años

      Hola Nicolas 👋🏻 También otra forma es poner el Plano sobre el emitter y listo en la scene.

    Guillermo Jean Pierre Guevara Otero

    Guillermo Jean Pierre Guevara Otero

    student•
    hace 4 años

    ¿Cómo puedo cambiar el número de progress en Transition? cuando conecto el bloque Animation con el de Transition, automáticamente cambia de 0 a 1, y en el ejemplo el Progress de Transition se queda en 0 (que es cuando empieza el efecto).

      Daniel Murcia

      Daniel Murcia

      teacher•
      hace 4 años

      En la parte de la transition, en end, debes tocar y pgar el valor del scalado de la tarjeta. Y en star si te cambia a 1, debes ponerlo manualmente en 0

    Laura Mejia Rodríguez

    Laura Mejia Rodríguez

    student•
    hace 4 años

    No me quedó claro el valor que se debe agregar a la tarjeta, es el minuto 3:11 se copia el valor que está en la Scale 16024 y se pega en el recuadro de Transition (Path Editor) en el campo de End , se pone un número 2 ,en mi caso es punto para que funcione y posteriormente el número copiado de de Scale 16024. y otra pregunta como borro el recuadro amarillo que por error di click a la flecha de Scale.

      Daniel Murcia

      Daniel Murcia

      teacher•
      hace 4 años

      Hola, para borrar el recuadro amarillo, solo debes seleccionarlo y darle borrar con el boton del teclado de borrar.

      En cuanto al escalado que pones en el path de transition, ese debe ser el valor de escalado que tengas de tu plano. el video es para que tengas referencia, pero debes tener en cuenta el valor del escalado del plano que tienes en tu escena

    José Manuel Morales Rodríguez

    José Manuel Morales Rodríguez

    student•
    hace 3 años

    mi avance hasta ahora

    Platzi landing

    Rafael Colinas

    Rafael Colinas

    student•
    hace 4 años

    Que increíble el uso de las interacciones se abre un enorme campo de posibilidades ahora

    Andrés David Loaiza Zamudio

    Andrés David Loaiza Zamudio

    student•
    hace 4 años

    Genial las interacciones de gestos con animaciones

    Juan Camilo Maldonado Perez

    Juan Camilo Maldonado Perez

    student•
    hace 4 años

    TF Interaction shaking head in Intitation

    FT sacudir la cabeza.png

Escuelas

  • Desarrollo Web
    • Fundamentos del Desarrollo Web Profesional
    • Diseño y Desarrollo Frontend
    • Desarrollo Frontend con JavaScript
    • Desarrollo Frontend con Vue.js
    • Desarrollo Frontend con Angular
    • Desarrollo Frontend con React.js
    • Desarrollo Backend con Node.js
    • Desarrollo Backend con Python
    • Desarrollo Backend con Java
    • Desarrollo Backend con PHP
    • Desarrollo Backend con Ruby
    • Bases de Datos para Web
    • Seguridad Web & API
    • Testing Automatizado y QA para Web
    • Arquitecturas Web Modernas y Escalabilidad
    • DevOps y Cloud para Desarrolladores Web
  • English Academy
    • Inglés Básico A1
    • Inglés Básico A2
    • Inglés Intermedio B1
    • Inglés Intermedio Alto B2
    • Inglés Avanzado C1
    • Inglés para Propósitos Específicos
    • Inglés de Negocios
  • Marketing Digital
    • Fundamentos de Marketing Digital
    • Marketing de Contenidos y Redacción Persuasiva
    • SEO y Posicionamiento Web
    • Social Media Marketing y Community Management
    • Publicidad Digital y Paid Media
    • Analítica Digital y Optimización (CRO)
    • Estrategia de Marketing y Growth
    • Marketing de Marca y Comunicación Estratégica
    • Marketing para E-commerce
    • Marketing B2B
    • Inteligencia Artificial Aplicada al Marketing
    • Automatización del Marketing
    • Marca Personal y Marketing Freelance
    • Ventas y Experiencia del Cliente
    • Creación de Contenido para Redes Sociales
  • Inteligencia Artificial y Data Science
    • Fundamentos de Data Science y AI
    • Análisis y Visualización de Datos
    • Machine Learning y Deep Learning
    • Data Engineer
    • Inteligencia Artificial para la Productividad
    • Desarrollo de Aplicaciones con IA
    • AI Software Engineer
  • Ciberseguridad
    • Fundamentos de Ciberseguridad
    • Hacking Ético y Pentesting (Red Team)
    • Análisis de Malware e Ingeniería Forense
    • Seguridad Defensiva y Cumplimiento (Blue Team)
    • Ciberseguridad Estratégica
  • Liderazgo y Habilidades Blandas
    • Fundamentos de Habilidades Profesionales
    • Liderazgo y Gestión de Equipos
    • Comunicación Avanzada y Oratoria
    • Negociación y Resolución de Conflictos
    • Inteligencia Emocional y Autogestión
    • Productividad y Herramientas Digitales
    • Gestión de Proyectos y Metodologías Ágiles
    • Desarrollo de Carrera y Marca Personal
    • Diversidad, Inclusión y Entorno Laboral Saludable
    • Filosofía y Estrategia para Líderes
  • Diseño de Producto y UX
    • Fundamentos de Diseño UX/UI
    • Investigación de Usuarios (UX Research)
    • Arquitectura de Información y Usabilidad
    • Diseño de Interfaces y Prototipado (UI Design)
    • Sistemas de Diseño y DesignOps
    • Redacción UX (UX Writing)
    • Creatividad e Innovación en Diseño
    • Diseño Accesible e Inclusivo
    • Diseño Asistido por Inteligencia Artificial
    • Gestión de Producto y Liderazgo en Diseño
    • Diseño de Interacciones Emergentes (VUI/VR)
    • Desarrollo Web para Diseñadores
    • Diseño y Prototipado No-Code
  • Contenido Audiovisual
    • Fundamentos de Producción Audiovisual
    • Producción de Video para Plataformas Digitales
    • Producción de Audio y Podcast
    • Fotografía y Diseño Gráfico para Contenido Digital
    • Motion Graphics y Animación
    • Contenido Interactivo y Realidad Aumentada
    • Estrategia, Marketing y Monetización de Contenidos
  • Desarrollo Móvil
    • Fundamentos de Desarrollo Móvil
    • Desarrollo Nativo Android con Kotlin
    • Desarrollo Nativo iOS con Swift
    • Desarrollo Multiplataforma con React Native
    • Desarrollo Multiplataforma con Flutter
    • Arquitectura y Patrones de Diseño Móvil
    • Integración de APIs y Persistencia Móvil
    • Testing y Despliegue en Móvil
    • Diseño UX/UI para Móviles
  • Diseño Gráfico y Arte Digital
    • Fundamentos del Diseño Gráfico y Digital
    • Diseño de Identidad Visual y Branding
    • Ilustración Digital y Arte Conceptual
    • Diseño Editorial y de Empaques
    • Motion Graphics y Animación 3D
    • Diseño Gráfico Asistido por Inteligencia Artificial
    • Creatividad e Innovación en Diseño
  • Programación
    • Fundamentos de Programación e Ingeniería de Software
    • Herramientas de IA para el trabajo
    • Matemáticas para Programación
    • Programación con Python
    • Programación con JavaScript
    • Programación con TypeScript
    • Programación Orientada a Objetos con Java
    • Desarrollo con C# y .NET
    • Programación con PHP
    • Programación con Go y Rust
    • Programación Móvil con Swift y Kotlin
    • Programación con C y C++
    • Administración Básica de Servidores Linux
  • Negocios
    • Fundamentos de Negocios y Emprendimiento
    • Estrategia y Crecimiento Empresarial
    • Finanzas Personales y Corporativas
    • Inversión en Mercados Financieros
    • Ventas, CRM y Experiencia del Cliente
    • Operaciones, Logística y E-commerce
    • Gestión de Proyectos y Metodologías Ágiles
    • Aspectos Legales y Cumplimiento
    • Habilidades Directivas y Crecimiento Profesional
    • Diversidad e Inclusión en el Entorno Laboral
    • Herramientas Digitales y Automatización para Negocios
  • Blockchain y Web3
    • Fundamentos de Blockchain y Web3
    • Desarrollo de Smart Contracts y dApps
    • Finanzas Descentralizadas (DeFi)
    • NFTs y Economía de Creadores
    • Seguridad Blockchain
    • Ecosistemas Blockchain Alternativos (No-EVM)
    • Producto, Marketing y Legal en Web3
  • Recursos Humanos
    • Fundamentos y Cultura Organizacional en RRHH
    • Atracción y Selección de Talento
    • Cultura y Employee Experience
    • Gestión y Desarrollo de Talento
    • Desarrollo y Evaluación de Liderazgo
    • Diversidad, Equidad e Inclusión
    • AI y Automatización en Recursos Humanos
    • Tecnología y Automatización en RRHH
  • Finanzas e Inversiones
    • Fundamentos de Finanzas Personales y Corporativas
    • Análisis y Valoración Financiera
    • Inversión y Mercados de Capitales
    • Finanzas Descentralizadas (DeFi) y Criptoactivos
    • Finanzas y Estrategia para Startups
    • Inteligencia Artificial Aplicada a Finanzas
    • Domina Excel
    • Financial Analyst
    • Conseguir trabajo en Finanzas e Inversiones
  • Startups
    • Fundamentos y Validación de Ideas
    • Estrategia de Negocio y Product-Market Fit
    • Desarrollo de Producto y Operaciones Lean
    • Finanzas, Legal y Fundraising
    • Marketing, Ventas y Growth para Startups
    • Cultura, Talento y Liderazgo
    • Finanzas y Operaciones en Ecommerce
    • Startups Web3 y Blockchain
    • Startups con Impacto Social
    • Expansión y Ecosistema Startup
  • Cloud Computing y DevOps
    • Fundamentos de Cloud y DevOps
    • Administración de Servidores Linux
    • Contenerización y Orquestación
    • Infraestructura como Código (IaC) y CI/CD
    • Amazon Web Services
    • Microsoft Azure
    • Serverless y Observabilidad
    • Certificaciones Cloud (Preparación)
    • Plataforma Cloud GCP

Platzi y comunidad

  • Platzi Business
  • Live Classes
  • Lanzamientos
  • Executive Program
  • Trabaja con nosotros
  • Podcast

Recursos

  • Manual de Marca

Soporte

  • Preguntas Frecuentes
  • Contáctanos

Legal

  • Términos y Condiciones
  • Privacidad
  • Tyc promociones
Reconocimientos
Reconocimientos
Logo reconocimientoTop 40 Mejores EdTech del mundo · 2024
Logo reconocimientoPrimera Startup Latina admitida en YC · 2014
Logo reconocimientoPrimera Startup EdTech · 2018
Logo reconocimientoCEO Ganador Medalla por la Educación T4 & HP · 2024
Logo reconocimientoCEO Mejor Emprendedor del año · 2024
De LATAM conpara el mundo
YoutubeInstagramLinkedInTikTokFacebookX (Twitter)Threads