javascript - survival - xkcd password
¿Cómo está xkcd haciendo xk3d? (3)
Es (semi) manual, y Randall está intentando convertir la conversión en una fuente colectiva, mira aquí
Me sorprenden los webcomics tridimensionales de hoy en día que se encuentran en xkcd . ¿Cómo hubiera hecho eso? ¿Necesitaría volver a hacer manualmente cada comic o hay alguna forma de automatizarlo?
Editar
Los cómics 3D todavía están disponibles en http://xk3d.xkcd.com
Sí, está usando un script, xk3d.js , combinado con un sistema automático para dividir los cómics en capas.
Esto se ve bien en algunos, como el primero . Pero otros, como 483 , realmente podrían darte un dolor de cabeza, debido al texto en 3D manchado.
Como consecuencia, están buscando voluntarios para dividirlos manualmente en mejores capas.
Cada imagen se divide en capas: cada capa es su propio archivo PNG e incluye mucha transparencia.
Todas estas imágenes están anidadas dentro de un <div> :
<div id="comic">
<!-- style attributes omitted -->
<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_bike.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_handle.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_girl.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_mask.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_guy.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_computer.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_corners.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_desk.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_box.png" >
<img src="http://imgs.xkcd.com/xk3d/880/headache_text.png" >
</div>
... el <div id="comic"> está relativamente posicionado (o lo que es más importante, no está posicionado estáticamente) y cada imagen está absolutamente posicionada dentro de él, así como también cambia de tamaño. A medida que mueves el mouse, se realizan algunos crujidos de números intensos para volver a calcular los nuevos valores para las propiedades CSS top e left de cada imagen.
Escribí más sobre esto en mi sitio web y le expliqué cómo crear su propia versión simplificada desde cero: http://richard.jp.leguen.ca/not-blog/how-is-xkcd-in-3d
La división de cada imagen en capas, sin embargo, está automatizada, con un llamado (¿bromistas de abril?) Para que los voluntarios lo mejoren.