Cristalab

Tracking en perspectiva en After Effects

Posted: 18 May 2012 05:13 AM PDT

Hasta ahora hemos usado el rastreador para ejecutar trackings sencillos en puntos concretos, pero modificando las opciones para utilizar capturas de múltiples puntos, como bordes en perspectiva, entenderemos las posibilidades que nos ofrece esta herramienta para obtener composiciones mucho más complejas y ajustadas a las necesidades reales de nuestro día a día, en el mundo de la composición dentro de After Effects.

Crearemos un cartel de reemplazo, que incorporaremos en el material original, ajustando su aspecto para que encaje correctamente en el conjunto, capturando el desplazamiento del inicial y componiéndolo con varios ajustes específicos.

Saludos.

Métodos del Objeto Date de Javascript

Posted: 23 Apr 2012 05:31 AM PDT

En este tutorial aprenderemos los métodos del objeto Date de javaScript, analizaremos todos y cada uno de ellos, usaremos ejemplos prácticos , e intentaremos comprender de manera fugaz los métodos set y get de los objetos también aprenderemos a trabajar con fechas, mediante la realización de 2 sencillos ejercicios.

La decisión de hacer un tutorial sobre el objeto Date, siendo una cosa tan vista y con tanta información publicada en la red, ha sido, que en Clab no he visto ningún tutorial concreto sobre ello, y veo a gente de vez en cuando preguntar cosas sencillas sobre las fechas y cómo trabajar con ellas. Además, así aprovecho y me vale de introducción al tutorial que estoy desarrollando, para crear un calendario en jQuery desde cero, de modo que los interesados estad atentos.

¿Quién debería leer este tutorial y quién no?

Caso A: Si de vez en cuando vas andando por la calle, y oyes una voz susurrar a tú oído ddddaaaatttteee, y eso te causa escalofríos incontrolables. No te preocupes, es buena señal, tu eres el target perfecto de este tutorial.
Caso B: Si estás buscando información sobre el objeto Date, pero para otro lenguaje, igual no te viene mal, echarle 15 minutillos a este tuto, y debido a las similitudes entre los lenguajes igual le sacas provecho y todo.

1. El objeto Date

Para comenzar vamos a ver cómo almacenar un objeto date con la fecha actual en una variable y también veremos que nos muestra la consola de depuración si imprimimos esa variable.

Código :

//Creamos una variable y almacenamos la fecha de hoy (paréntesis vacío)  var fechaHoy = new Date();  //Imprimimos la variable en la consola  console.log(fechaHoy);

Si quisiéramos configurar una fecha diferente a la actual, le pasaríamos los parámetros a Date de la siguiente manera:

Código :

var fechaRequerida = new Date(año, mes, día, horas, minutos, segundos, milisegundos)    //O con un total de milisegundos que contarán a partir del 1 de enero de 1970  //Por ejemplo 1334968890477, estaría dentro del 21 de Abril de 2012  var fechaPorMilisegundos = new Date(1334968890477)

¿Cómo funciona el objeto Date?

Aquí hay varias cosas a tener en cuenta:

El mínimo de variables que se le pueden pasar al objeto Date para que funcione correctamente son 2, el año y el mes, introducidos éstos, a todos los que dejemos vacíos javascript los rellenará con la fecha más cercana al primer milisegundo del día 1 del mes del año introducidos
Si sólo se introduce el año, javascript rellenará la fecha con el 1 de enero de 1970, que es la hora universal del objeto Date, pues le estará sumando a esta fecha entre 1 y 9999 milisegundos que serán los años que pongáis
Los meses van de 0 a 11, es decir, 0 = enero, 11 = diciembre
Los días del mes funcionan normal, del 1 al 31
Los segundos y minutos van de 0 a 59
Los milisegundos van de 0 a 999

Bien, vamos también a imprimir, nuestra fecha requerida en la consola:

Código :

console.log(fechaRequerida)

Y la consola nos imprimirá lo siguiente en ambos casos:

Date

Que no es ni de lejos lo que queremos ver, aun así sabemos que contiene una fecha, pues nos lo está diciendo la consola. Así que vamos a ver los métodos y al final sabremos cómo trabajar con el objeto date.

2. Los métodos del objeto Date

¿Qué son los métodos de un objeto?

Que nadie se asuste, los métodos son simples funciones incluidas dentro de un objeto, que desempeñan diferentes acciones.
Imaginemos que tenemos un robot, este será nuestro objeto Abducted. Abducted tiene programado un método que le hace decir algo, y otro que le dice lo que debe decir, vamos a verlo en pseudo-código:

Código :

Abducted {     private var tipoDeFrase:Frase = 'una parida';          function get decirCosa ():Frase {        return tipoDeFrase     }          function set queDecir (nuevoTipoDeFrase:Frase):void {        tipoDeFrase = nuevoTipoDeFrase     }  }

Código :

//Ok, ahora tú me ordenarías:  Abducted.decirCosa()  //Y yo te respondería cual esclavo:  'van 2 y se cae el de en medio'    //Como ves te estaría diciendo un parida, pues es lo que tendría configurado por defecto.    //Ahora bien, tú podrías ordenarme:  Abducted.queDecir('algo inteligente')    //Si después me volvieras a ordenar:  Abducted.decirCosa()  //A diferencia de la vez anterior, yo te respondería:  'No hay nada de malo en pasar por tonto, si en realidad lo que uno está haciendo es inteligente'

Como veis los métodos o funciones get sirven para pedirle datos a Abducted, sin embargo los set nos valen para cambiar una variable o propiedad de Abducted.
Espero que os haya gustado mi explicación casera breve e incompleta, sobre qué son los métodos get y set de un objeto. Y si he conseguido expresarme con claridad, veremos mucho más rápido los métodos a continuación.

Tipos de métodos del objeto Date

Vamos a intentar dividir los métodos del objeto Date en 4 grupos (esta sub-división no es ninguna convención ni nada parecido, es simplemente que me parece más sencillo explicarlo así, si sí son una convención, pues bueno, entonces he pensado lo mismo que muchos):

A. Métodos para obtener o cambiar los valores del objeto Date
B. Métodos para obtener fechas lectibles
C. Métodos para trabajar con fechas en milisegundos
D. Métodos desfasados

A. Métodos para obtener o cambiar valores del objeto Date

Vamos a ver rápidamente los nombres simples de estos métodos (así no se pueden usar).

FullYear
Month
Date
Day
Hours
Minutes
Seconds
Milliseconds

Todos estos métodos se pueden usar de 4 maneras, 2 formas de get y 2 formas de set, a excepción de Day que sólo se pueden usar los get.

Voy a tomar como ejemplo Date y Day. Los get los podemos usar de 2 maneras:

Código :

getDate()  getUTCDate()    getDay()  getUTCDay()

Y los set se usan igual, pero como acabo de explicar que los Day son los únicos que no tienen set, nos quedamos sin ellos en este ejemplo ya que no existen como métodos:

Código :

setDate()  setUTCDate()

Bien, alguno se preguntará ¿y qué maldita diferencia hay entre poner UTC o no ponerlo?. Como trabajamos con fechas, tenemos que tener en cuenta que ahora mismo no es la misma hora en todo el mundo. Por lo tanto cuando trabajemos con fechas, la diferencia entre ponerlo o no, radica en que si no se pone estarás usando tu franja horaria (que es lo más normal), y si lo pones pedirás esa fecha en la hora universal (UTC - Universal Time Coordinated), que es GTM+0 (La del meridiano 0 o meridiano de Greenwich)
Wikipedia UTC

Ahora veamos a qué dato dentro de una fecha corresponde cada uno de los métodos que acabamos de ver, e iremos viendo ejemplos:
(Los links a partir de aquí, son links a ejemplos prácticos en los que podréis usar los métodos a vuestro antojo)

FullYear

Código :

//Obtiene el año en 4 dígitos  getFullYear()  getUTCFullYear()  //Configura la fecha a partir de año  setFullYear(año, mes, diaMes)  setUTCFullYear(año, mes, diaMes)

Month

Código :

//Obtiene el mes (de 0 a 11)  getMonth()  getUTCMonth()  //Configura la fecha a partir del mes  setMonth(mes, diaMes)  setUTCMonth(mes, diaMes)

Date

Código :

//Obtienen el día del mes (de 1 a 31)  getDate()  getUTCDate()  //Configuran la fecha con el día  setDate(diaMes)  setUTCDate(diaMes)

Day

getDay()

getUTCDay()

Código :

//Obtienen el día de la semana (de 0 = Domingo a 6 = sábado)  getDay()  getUTCDay()

Hours

Código :

//Obtienen las horas (de 0 a 23)  getHours()  getUTCHours()  //Configuran la hora a partir de las horas  setHours(horas, minutos, segundos, milisegundos)  setUTCHours(horas, minutos, segundos, milisegundos)

Minutes

Código :

//Obtienen los minutos (de 0 a 59)  getMinutes()  getUTCMinutes()  //Configuran la hora a partir de los minutos  setMinutes(minutos, segundo, milisegundos)  setUTCMinutes(minutos, segundos, milisegundos)

Seconds

Código :

//Obtienen los segundos (de 0 a 59)  getSeconds()  getUTCSeconds()  //Configuran la hora a partir de los segundos  setSeconds(segundos, milisegundos)  setUTCSeconds(segundos, milisegundos)

Miliseconds

Código :

//Obtienen los milisegundos (de 0 a 999)  getMiliseconds()  getUTCMiliseconds()  //Configuran la hora a partir de los milisegundos  setMiliseconds(milisegundos)  setUTCMiliseconds(milisegundos)

setTime()

Código :

//setTime nos vale para configurar una fecha sumando o restando x milisegundos al milisegundo 1 del 1 de enero de 1970  //así si un día tiene 86.400.000 milisegundos, haciendo esto  var mas1Dia = new Date();  mas1Dia.setTime(86400000);  //Si imprimiéramos mas1Dia de una manera lectible, veríamos que mas1Dia = 2 de enero de 1970  console.log(mas1dia.toDateString());  DEVUELVE--> Fri Jan 02 1970

B. Métodos para obtener fechas legibles

Bueno, ya hemos visto como configurar y modificar el objeto date, y obtener datos precisos de él, ahora vamos a ver cómo obtener estos datos de tal manera que casi cualquier humano, pueda leerlos. Los métodos para conseguir esto sin morir en el intento, siempre devuelven un string, son los siguientes:

Ahora que hemos visto sus nombres (y alguno hasta habrá trasteado con los ejemplos prácticos), vamos a generar una fecha de hoy y a pasarla por cada uno de los métodos y veremos lo que obtenemos. A partir de ahora la fecha "Hoy" que se usará para los ejemplos y ejercicios será el 21 de Abril de 2012 y me encuentro en Madrid, España, las horas nos dan más o menos igual, aunque ahora mismo es muy, muy tarde

Código :

//Creamos la fecha de hoy  var fechaDeHoy = new Date()    //toString() devuelve el objeto completo en nuestra franja horaria  console.log(fechaDeHoy.toString());  //SALIDA ---> 'Sat Apr 21 2012 04:50:14 GMT+0200 (Hora de verano romance)'    //toString() devuelve el objeto completo en GMT+0 ó UTC  console.log(fechaDeHoy.toUTCString());  //SALIDA ---> 'Sat, 21 Apr 2012 02:50:14' GMT'    //toLocaleString() devuelve el objeto completo, de acuerdo a las convenciones locales  console.log(fechaDeHoy.toLocaleString());  //SALIDA ---> 'Sat Apr 21 2012 04:50:14' GMT+0200 (Hora de verano romance)'    //toTimeString() devuelve las horas minutos y segundos y franja horaria  console.log(fechaDeHoy.toTimeString());  //SALIDA ---> '04:50:14' GMT+0200 (Hora de verano romance)'    //toDateString() devuelve el día de la semana, día del mes, el mes, y el año  console.log(fechaDeHoy.toDateString());  //SALIDA ---> 'Sat Apr 21 2012'    //toLocaleDateString() devuelve el día de la semana, día del mes, el mes, y el año, de acuerdo a las convenciones locales  console.log(fechaDeHoy.toLocaleDateString());  //SALIDA ---> 'Saturday, April 21, 2012'    //toLocaleTimeString() devuelve las horas minutos, segundos y franja horaria, de acuerdo a las convenciones locales  console.log(fechaDeHoy.toLocaleTimeString());  //SALIDA ---> '04:50:14'    //toISOString devuelve la fecha formateada con el starndard ISO  console.log(fechaDeHoy.toISOString());  //SALIDA ---> '2012-04-21T02:50:14.007Z'    //toJSON devuelve la fecha formateada como fecha JSON  console.log(fechaDeHoy.toJSON());  //SALIDA ---> '2012-04-21T02:50:14.007Z'

C. Métodos para trabajar con fechas en milisegundos

Los siguientes métodos nos devolverán milisegundos y todos ellos estarán basados en torno a la fecha universal del objeto Date de la que ya hemos hablado con anterioridad.
(No os asustéis, al final del tuto en los ejercicios crearemos una sencilla función que nos ayudarán mucho en nuestros cálculos con milisegundos)
Estos métodos son:

Vale, vamos a ver de rápidamente cómo usarlos y que obtenemos de cada uno, en la última parte del tuto ya trabajaremos con las fechas

Código :

//Primero creamos una fecha con el día de "Hoy".  var fechaHoy = new Date();    //1º - getTime() - sin parámetros  console.log(fechaHoy.getTime());  //SALIDA -->  1334968890477    //2º - UTC(año, dia, mes) - 3 parámetros  console.log(Date.UTC(2012, 21, 3));  //SALIDA -->  1380758400000    //3º - valueOf() - sin parámetros  console.log(fechaHoy.valueOf());  //SALIDA -->  1334968890477    //4º - parse('fecha en string') - 1 parámetro  console.log(Date.parse('april 21,  2012'));  //SALIDA -->  1334959200000    //Hasta aquí todas las salidas que hemos recibido, son la cantidad de milisegundos desde el 1 de enero de 1970, hasta la fecha sobre la que estemos aplicando el método.    //5º - getTimeZoneOffset() - sin parámetros  console.log(fechaHoy.getTimezoneOffset());  //SALIDA -->  -120  //Este es el único de los métodos que estamos viendo que no devuelve milisegundos, devuelve la diferencia en minutos entre nuestra franja horaria y la hora UTC, en mi caso, como estoy en GMT+2, -120 minutos

D. Métodos desfasados

No nos hace falta saber que hacen, lo único que necesitamos es que nos chirríen los ojos si lo vemos escrito por algún sitio, porque seguro que nosotros no lo ponemos.

getYear()
setYear()

toGMTString()

Bueno, bueno, bueno, pues con esto hemos terminado nuestro aprendizaje teórico del objeto Date, ahora sólo nos queda un poquito de práctica. Vamos a hacer algún ejercicio.

3. Ejercicios

Ejercicio1 - Ejercicios sencillos

Empezaremos con unos ejercicios sencillos que no precisen de cálculos

Crear variable "fechaHoy" con fecha de hoy
Crear variable "fecha85" que sume 85 días a la variable "fechaHoy"
Crear variable "fecha187" que reste 187 días variable "fechaHoy"
Sumar 2 años a la variable "fecha85"
Restar 24 horas a la variable "fecha187"
Crear variable "fechaResto" que sea la resta de fecha85 - fecha187 y observa lo que obtienes
imprimir en la consola cada paso

Resultados:

Código :

//a)  var fechaHoy = new Date();  console.log(fechaHoy.toString());  console.log('');    //b)  var fecha85 = new Date(fechaHoy);  fecha85.setDate(85);  console.log(fecha85.toString());  console.log('');    //c)  var fecha187 = new Date(fechaHoy);  fecha187.setDate(-187);  console.log(fecha187.toString());  console.log('');    //d)  fecha85.setFullYear(fecha85.getFullYear()+2);  console.log(fecha85.toString());  console.log('');    //e)  fecha187.setHours(fecha187.getHours()-25);  console.log(fecha187.toString());  console.log('');    //f)  var fechaResto = new Date(fecha85-fecha187);  console.log(fechaResto.toString());

Ejercicio - Ejercicio medio

si alguna vez tenemos la necesidad de trabajar con milisegundos, ya sabemos cómo obtenerlos y como configurarlos en una fecha, ahora voy a plantear una función que facilite el trabajo con esos milisegundos.
Lo primero, vamos a ver que son milisegundos y que significan en tiempo.

1.000 milisegundos = 1 segundo = 1000x1
60.000 milisegundos = 1 minuto = 1000x60
3.600.000 milisegundos = 1 hora: = 1000x60x60
86.400.000 milisegundos = 1 día = 1000x60x60x24
31.536.000.000 milisegundos = 1 año = 1000x60x60x24x365

Vale pues vamos a crear una función que nos convierta los milisegundos a todas esas unidades y viceversa

Código :

//La preparamos para que pueda funcionar en los 2 sentidos, convertir milisegundos a unidades y unidades a milisegundos, por lo que además de la cantidad de unidades y el tipo de unidades le pasaremos un modo  function convertirMilisegundos (cantidad, unidad, modo) {     //Configuramos la función para que si no la pasamos exactamente 3 parámetros, nos dé una alerta     if (arguments.length != 3) {        //Preparamos la alerta        alert('La función convertirMilisegundos requiere exactamente 3 parámetros\ncantidad, unidad, modo');        //Salimos de la función sin hacer nada más        return false     }     //Declaramos una variable vacia donde almacenaremos el valor por el que multiplicaremos o dividiremos nuestra cantidad     var valor;     //Detectamos la unidad a usar e inicializamos valor     switch (unidad) {        case 'se': valor = 1000; break;        case 'mi': valor = 60000; break;        case 'ho': valor = 3600000; break;        case 'di': valor = 86400000; break;        case 'an': valor = 31536000000; break;     }     //Detectamos el modo, y devolvemos la operación     switch (modo) {        case 'mu': return catidad/valor; break;        case 'um': return catidad*valor; break;     }       }

Y la usaríamos así, imaginad que vuestra empresa tiene 2 objetos Date con una hora de salida y una hora de entrada de un día cualquiera y el jefe os pide la diferencia en minutos y días, después os dice que multipliquéis esas horas por 5 días que tiene la semana y se lo devolváis en milisegundos para saber cuánto habéis vagueado en el trabajo esta semana. Nosotros obedecemos como un perrito faldero.

Código :

//Primero tenemos los 2 objetos Date que la maldita máquina de fichar del curro no perdona a la hora de comer  var horaA = new Date(2012, 3, 21, 14, 00, 00);  var horaB = new Date(2012, 3, 21, 18, 26, 35);  //Como veréis nos hemos retrasado un poco con la siesta    //Bien, almacenamos las 2 fechas como milisegundos en nuevas variables  var milisecsA = horaA.getTime();  var milisecsB = horaB.getTime();    //Y ahora a la fecha mayor le restamos la menor, para obtener el intervalo de milisegundos que hay entre las 2  var milisecInter = horaB-horaA;    //Ahora nos ha pedido la diferencia en minutos y días  //Muy bien, pues nosotros que somos más eficientes y más chulos que nadie, escribimos:  var enMinutos = convertirMilisegundos(milisecInter, 'mi', 'mu');  console.log(enMinutos);  //SALIDA --> 266.5833333333333    var enDias = convertirMilisegundos(milisecInter, 'di', 'mu');  console.log(enDias);  //SALIDA --> 0.18512731481481481    //Y ahora nos ha pedido que lo multipliquemos por 5 y se lo devolvamos en milisegundos  var por5 = convertirMilisegundos(enDias*5, 'di', 'um');  console.log(por5);  //SALIDA --> 79975000

Y debido a nuestra eficiencia, el jefe nos perdona las siestas.
Como veréis todo es bastante sencillo, espero que os haya gustado y que le saquéis provecho.

Un saludo.

AT boletín - INFORMA

viernes, 18 de mayo de 2012

Cristalab

Cristalab

¿Quién debería leer este tutorial y quién no?

1. El objeto Date

¿Cómo funciona el objeto Date?

2. Los métodos del objeto Date

¿Qué son los métodos de un objeto?

Tipos de métodos del objeto Date

A. Métodos para obtener o cambiar valores del objeto Date

FullYear

Month

Date

Day

Hours

Minutes

Seconds

Miliseconds

setTime()

B. Métodos para obtener fechas legibles

C. Métodos para trabajar con fechas en milisegundos

D. Métodos desfasados

3. Ejercicios

Ejercicio1 - Ejercicios sencillos

Ejercicio - Ejercicio medio

No hay comentarios:

Publicar un comentario