Déformation de vidéo
Par -Alexandre LEGOUT aka LAlex- le 14 septembre 2009, 02:37 - AS3 / Flex2 - Lien permanent
J'ai découvert récemment le clip de la chanson "Unintended" de Muse.
Hormis la beauté de la chanson, j'ai beaucoup accroché sur l'effet donné à la
vidéo dans le clip.
Bon, ben il ne restait plus qu'à le reproduire dans Flash...
Bon alors déjà, le principe.
En observant un peu, c'est assez simple: plus on descend vers le bas de
l'image, plus les pixels sont anciens...
En gros, l'image se renouvelle par le haut, ligne par ligne, au fur et à
mesure. Il suffit donc de garder en mémoire les anciennes images, et d'afficher
pour la première ligne, la première ligne de l'image actuelle, sur la deuxième,
la deuxième ligne de l'image à t-1, etc...
Ensuite, s'agissait de trouver une vidéo sur laquelle l'effet rendait bien.
En gros, il faut une partie d'image fixe, et une partie qui bouge lentement
sinon c'est moche.
Et donc au final, j'ai fait une vidéo rapide de porte qui s'ouvre depuis ma
petite maison de campagne, et voilà! (cliquez sur l'image pour voir tout
çà)
Et comme je sais que vous êtes joueurs, je vous ai même fait une version ou qu'on peut le faire avec la webcam!
Et bien sûr la classe, qui hérite de Bitmap pour être plus pratique! ![]()
package com.lalex.unin {
import flash.display.Bitmap;
import flash.display.BitmapData;
import flash.events.Event;
import flash.geom.Point;
import flash.geom.Rectangle;
import flash.media.Video;
/**
* @author lalex
*/
public class UnintendedVideo
extends Bitmap {
// Targeted video
private var video : Video;
// Time after capture has been stopped
private var time:int = 0;
// Bitmap datas
private var datas : Array;
public function UnintendedVideo(vdo : Video) {
video = vdo;
}
public function start() : void {
bitmapData = new BitmapData(video.width, video.height);
bitmapData.draw(video);
time = 0;
datas = [bitmapData.clone()];
refresh();
addEventListener(Event.ENTER_FRAME, samplingEnterFrameHandler);
}
public function stop() : void {
removeEventListener(Event.ENTER_FRAME, samplingEnterFrameHandler);
addEventListener(Event.ENTER_FRAME, endingEnterFramehandler);
}
private function endingEnterFramehandler(event : Event) : void {
//If still ending, duplicate the previous image
if (time++ < bitmapData.height) {
datas.push(datas[datas.length-1]);
refresh();
//If last image is fully displayed, stop handling enter frame event
} else {
removeEventListener(Event.ENTER_FRAME, endingEnterFramehandler);
}
}
private function samplingEnterFrameHandler(event : Event) : void {
var newBitmapData:BitmapData = new BitmapData(video.width, video.height);
newBitmapData.draw(video);
datas.push(newBitmapData);
refresh();
}
private function refresh() : void {
var curY:int = -1;
var maxY:int = bitmapData.height;
var curDatas:Array = datas.concat();
var rect:Rectangle = new Rectangle(0, 0, bitmapData.width, 1);
var pnt:Point = new Point(0, 0);
bitmapData.lock();
while(++curY < maxY) {
var last:Boolean = false;
var curData:BitmapData = curDatas.pop();
rect.y = curY;
//If there's not enough history, let's draw to the bottom
if (curDatas.length == 0) {
rect.height = maxY - curY;
last = true;
}
pnt.y = rect.y;
bitmapData.copyPixels(curData, rect, pnt);
if (last) break;
}
bitmapData.unlock();
// Keeping more history than height is useless and cost memory
datas = datas.slice(-bitmapData.height);
}
}
}
Oui bon, pour un retour aprés autant de silence, j'aurais pu faire plus
pointu je vous l'accorde...
Mais j'ai du bon thème a développer, reste à trouver le temps, et la motivation
(quand on passe son temps la tête dans le code, pas évident d'y passer son
temps libre non plus...)
Commentaires
L'effet est vraiment sympa.
salut,
même que ça s'appelle le "slit-cam" cet effet
et tu peux lui donner n'importe quelle forme pas seulement des rayures horizontales genre http://www.youtube.com/watch?v=jvmZ...
et sinon, voilà 2, 3 idées débiles que des artistes ont eu autour de ce principe: http://www.flong.com/texts/lists/sl...
le kronos projector est super drole: http://www.nicoptere.net/AS3/chrono... (record puis click sur l'image de droite)
++ ^^
bien bien cool ! Une porte en chocolat, miam.
* "slit scan" pardon
@nicoptere> Tu es un puit de sciences! Merci pour l'info..
Super sympa !
Merci de cette collaboration
Fil des commentaires de ce billet