Contenido principal
Animación digital
Curso: Animación digital > Unidad 8
Lección 2: Codifica un personaje- ¡Empieza aquí!
- 1. Crear objetos
- 2. Representar el objeto de una figura en código
- Articular un muñeco de nieve (parte 1: construir el cuerpo)
- 3. Juntar figuras
- Articular un muñeco de nieve (parte 2: agregarle una cabeza)
- Articular un muñeco de nieve (parte 3: agregarle un sombrero)
- 4. Funciones
- 5. Definir funciones deformadoras en código
- Articular un muñeco de nieve (parte 4: codificar deformadores)
- 6. Conectar deformadores y figuras con código
- Articular un muñeco de nieve (parte 5: agregar y actualizar deformadores)
- Proyecto: crea tu propio personaje
- Proyecto 2: anima tu personaje
© 2023 Khan AcademyTérminos de usoPolítica de privacidadAviso de cookies
¡Empieza aquí!
Introducción a esta lección
¿Listo para sumergirte en algo de código?
En esta lección vas a construir un modelo sencillo de un muñeco de nieve y articularlo con JavaScript. Después puedes extender el modelo para crear tu propio personaje en el proyecto final.
En esta lección vas a llenar algunas partes importantes de un programa mucho más grande, parecido a cómo las personas trabajan con software en Pixar.
Resumen de la lección
Primero vas a construir unos círculos al usar objetos.
Después vas a combinar varias figuras en un arreglo de objetos.
Por último vas a escribir funciones deformadoras de modo que puedas mover y desplazar tu modelo.
Al final, ¡estarás listo para el proyecto final!
¿Qué necesitas saber antes de empezar?
- Si nunca has programado nada antes, te recomendamos pasar por nuestro curso de Introducción a JS para aprender los conceptos de variables, arreglos, funciones y objetos. Y, por supuesto, ¡regresa cuando estés listo!
- Si ya has programado antes pero no en Khan Academy, te recomendamos que primero te familiarizes con nuestro ambiente, al crear un nuevo programa aquí.
- Si ya aprendiste a programar aquí en Khan Academy, ¡perfecto! Solo repasa los siguientes conceptos y refresca cualquier habilidad que tengas un poco olvidada.
- Esta lección aborda temas de matemáticas (ecuaciones para transformaciones geométricas) apropiadas para segundo de secundaria en adelante. Puedes repasar este concepto en nuestra lección de escenarios y puestas en escena.
Repaso rápido de los conceptos de programación que usarás
Variables
- Esto crea una variable llamada start color #6495ed, start text, s, u, l, l, e, y, s, A, g, e, end text, end color #6495ed que almacena el valor start color #28ae7b, 15, end color #28ae7b.
Arreglos
- Esto crea un arreglo llamado start color #6495ed, start text, a, g, e, s, end text, end color #6495ed que almacena tres valores: start color #28ae7b, 2, end color #28ae7b, comma, start color #ff00af, 4, end color #ff00af, comma, start color #9d38bd, 8, end color #9d38bd.
- start color #6495ed, start text, a, g, e, s, end text, end color #6495ed, open bracket, 1, close bracket tiene el valor start color #ff00af, 4, end color #ff00af.
Funciones
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, start color #ff00af, 100, end color #ff00af, comma, start color #ff00af, 200, end color #ff00af, right parenthesis, ;
right brace
- Esto crea una función llamada start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed que cuando sea llamada escribirá el texto start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text en la pantalla en las coordenadas left parenthesis, start color #ff00af, 100, comma, 200, end color #ff00af, right parenthesis.
start text, v, a, r, end text, start color #6495ed, start text, space, s, a, y, H, e, l, l, o, end text, end color #6495ed, equals, start text, f, u, n, c, t, i, o, n, end text, left parenthesis, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, space, left brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
start text, t, e, x, t, end text, left parenthesis, start text, start color #28ae7b, ", H, e, l, l, o, space, w, o, r, l, d, !, ", end color #28ae7b, end text, comma, space, start color #ff00af, x, end color #ff00af, comma, space, start color #ff00af, y, end color #ff00af, right parenthesis, ;
right brace
- Esta función start color #6495ed, start text, s, a, y, H, e, l, l, o, end text, end color #6495ed ahora tiene dos parámetros de entrada, start color #ff00af, x, end color #ff00af y start color #ff00af, y, end color #ff00af, para definir las coordenadas del texto.
Objetos
- Esto crea un objeto vacío llamado start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed.
start text, v, a, r, end text, start color #6495ed, start text, space, s, n, o, w, m, a, n, end text, end color #6495ed, equals, left brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
start color #28ae7b, start text, a, g, e, end text, end color #28ae7b, colon, start color #ff00af, 2, end color #ff00af, comma
start color #28ae7b, start text, c, o, l, o, r, end text, end color #28ae7b, colon, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af, comma
start color #28ae7b, start text, l, i, k, e, s, end text, end color #28ae7b, colon, open bracket, start color #ff00af, start text, ", m, i, l, k, ", end text, end color #ff00af, comma, space, start color #ff00af, start text, ", c, o, l, d, space, d, a, y, s, ", end text, end color #ff00af, close bracket
right brace
- El objeto start color #6495ed, start text, s, n, o, w, m, a, n, end text, end color #6495ed ahora contiene tres propiedades: start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, a, g, e, end color #28ae7b, end text, equals, start color #ff00af, 2, end color #ff00af y start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, point, start color #28ae7b, c, o, l, o, r, end color #28ae7b, end text, equals, start color #ff00af, start text, ", w, h, i, t, e, ", end text, end color #ff00af. La tercera propiedad de start text, start color #6495ed, s, n, o, w, m, a, n, end color #6495ed, end text es un arreglo llamado start text, start color #28ae7b, l, i, k, e, s, end color #28ae7b, end text.
¡Diviértete!
¿Quieres unirte a la conversación?
Sin publicaciones aún.