Wonder-wall like
Tómese este post como un ejercicio tirando del hilo de cómohabráhechoesto y un homenaje a quien ha sido una fuente de inspiración desde hace años, Yugo Nakamura.
El trabajo de Yugop, wonder-wall, muestra una retícula de imágenes que reaccionan al cursor creciendo en función de la distancia de éste. La forma en que las imágenes se escalan, distorsionandose, delatan además una deformación de la imagen realizada con algún sistema de triangularización.
Ya está, ya la hemos liado, sólo necesitaba disponer de algo de tiempo para empezar a recoger el fruto de las semillas que el gusanillo de la curiosidad acababa de plantar :)
Hacía mucho tiempo que no había trasteado con comportamientos pseudofísicos y algo menos desde que había probado una clase de triangularización que formaba parte de Sandy en su más tierna infancia, pero cuando pude imaginar la retícula de imágenes sin las mismas -como una retícula de puntos que huyen del cursor- estos dos elementos crearon una imagen clarísima:
Aquí está el fla y este es el código usado:
// import flash.display.BitmapData; const W:Number=stage.stageWidth; const H:Number=stage.stageHeight; var points_ar:Array=new Array(); var gridWidth:int=14; var gridHeight:int=8; var patternWidth:Number = W/(gridWidth-1); var patternHeight:Number = H/(gridHeight-1); var totalgrid:Number = gridWidth*gridHeight; var mouseIsdown:Boolean=false; var range = patternWidth*1.8; var speed = 50; var multispeed=1; var holder:Sprite; init(null); function init(e:Event):void { removeEventListener(Event.ADDED_TO_STAGE, init); holder=new Sprite(); addChild(holder); for (i=0; i<totalgrid; i++) { var step:Number = Math.floor(i/gridWidth); var resetx:Number = i-(step*gridWidth); var point:Telltale = new Telltale(); holder.addChild(point); point.x =point.mix= (patternWidth*resetx); point.y =point.miy= (step*patternHeight); points_ar[i]=point; } stage.addEventListener(MouseEvent.MOUSE_MOVE, inHandler); stage.addEventListener(MouseEvent.MOUSE_DOWN, downHandler); stage.addEventListener(MouseEvent.MOUSE_UP, downHandler); } function repulsion(event:Event) { var ddx:Number=mouseX; var ddy:Number=mouseY; var ddd:Number=Math.sqrt(ddx*ddx+ddy*ddy); if (holder.hitTestPoint(mouseX, mouseY)) { multispeed+.1<1 ? multispeed+=.1 : multispeed; } else { multispeed-.1>0 ? multispeed-=.1 : multispeed; } holder.graphics.clear(); var l:uint=points_ar.length; for (var i = 0; i < l; i++) { var point=points_ar[i]; var dx = mouseX- point.x; var dy = mouseY - point.y; var distance = Math.sqrt(dx*dx + dy*dy); point.x=(point.x-(dx/distance)*(range/distance)*speed*multispeed)-((point.x-point.mix)/2); point.y=(point.y-(dy/distance)*(range/distance)*speed*multispeed)-((point.y-point.miy)/2); if (mouseIsdown) { holder.graphics.lineStyle(0,0x000000,.5); holder.graphics.moveTo(point.mix, point.miy); holder.graphics.lineTo(point.x, point.y); } } } function downHandler(e:MouseEvent):void { playwithme.visible=playwithme.visible==true ? false : playwithme.visible; mouseIsdown=!mouseIsdown; } function leaveHandler(e:Event):void { removeEventListener(Event.ENTER_FRAME, repulsion); stage.addEventListener(MouseEvent.MOUSE_MOVE, inHandler); } function inHandler(e:MouseEvent):void { stage.removeEventListener(MouseEvent.MOUSE_MOVE, inHandler); stage.addEventListener(Event.MOUSE_LEAVE, leaveHandler); addEventListener(Event.ENTER_FRAME, repulsion); }
Ya solo quedaba usar esos puntos para alimentar la clase de triangularización en versión AS3, de la que pude encontrar dos versiones en el blog de Sandy 3D, una de by Alex y otra by Carles Sanz, que fue la que usé.
Un clip invisible que sigue al puntero con cierta fricción era lo que faltaba para restarle brusquedad a las reacciones de los puntos.
Hay que señalar que el comportamiento no es exactamente igual, el original está mucho más trabajado, detectando el rollover sobre las imágenes para crear un escalón virtual que se salta cuando pasas de una imagen a otra y evitando de ese modo ambiguedades en el comportamiento de los puntos cuando te encuentras cerca de los límites de cada imagen.









RSS Articles
Moooola…
parece mentira que con un par de conceptos tan simples se puede conseguir un efecto tan llamativo.
Parece mentira, pero no :)
Al final es más difícil conseguir un buen resultado manteniendo la simplicidad que retorciendo las cosas con afán efectista.
Vía el blog de Ale Muñoz, cito a Einstein:
Make everything as simple as possible, but not simpler. — Albert Einstein
Y creo que esto funciona en todos los ámbitos.
se sale loco¡¡¡
Gracias Mariah! :)
Excelente tip. Muy bueno la inclusión de la física y como mostrar el ejemplo. Muchas gracias por compartirlo. Saludos
Muy buenas,
Sabéis si hay algo parecido a esto en AS2?.
Estoy haciendo una web en Flash(As2) y me interesa este efecto.
Por otra parte tengo un problema en una precarga que me compre en ACTIVEDEN y estaba en AS3 y tambien quiero pasarlo a AS2, me falta solo un detalle por arreglar pero ya estoy desesperado, he preguntado en varios foros pero no dan con la tecla…
Me podrias ayudar?.
Si acaso te envío el archivo para que le eches un vistazo.
Ya me diras ..
Colorate, la clase que use yo para la triangularización es un port a AS3, por lo tanto existe en AS2.
Busca en el blog de sandy que está enlazado en el post, y suerte ;-)