¡Que el 4 de mayo esté contigo!

24

En honor al día de Star Wars , escriba un programa para mostrar el siguiente texto, desplazándose como el rastreo de apertura de Star Wars :

It  is  a  period  of  civil war.  Rebel
spaceships,   striking  from   a  hidden
base,  have   won  their  first  victory
against the evil Galactic Empire.

During  the battle,  Rebel spies managed
to  steal  secret  plans to the Empire's
ultimate   weapon,  the  Death Star,  an
armored   space  station   with   enough
power to destroy an entire planet.

Pursued by the Empire's sinister agents,
Princess  Leia  races  home  aboard  her
starship,  custodian of the stolen plans
that  can save  her people  and  restore
freedom to the galaxy...

Puede generar un GIF animado o hacer que su programa lo muestre. La salida debe mostrar lo siguiente:

  • El texto debe comenzar desde la parte inferior de la imagen / pantalla
  • Debe desplazarse hacia arriba hasta llegar a la cima. Debe tomar al menos 30segundos para que un texto llegue a la parte superior. La animación debe continuar hasta que todo el texto llegue a la parte superior.
  • En esta distancia, el texto debe ser más pequeño hasta que sea menor que 1/3el tamaño (longitud y fuente)
  • El texto debe estar inclinado para seguir este ángulo.
  • El texto debe estar justificado a izquierda y derecha. El texto proporcionado ya está justificado para fuentes monoespaciadas, sin embargo, puede eliminar los espacios adicionales (no líneas nuevas) y justificarlo usted mismo.
  • El texto debe ser amarillo.
  • El fondo debe ser negro.

Este video muestra el rastreo de apertura.

¡Buena suerte, y que el cuarto te acompañe!

code-golf  graphical-output  kolmogorov-complexity  animation 
— Justin
fuente
55
¿Qué pasa con "Que el cuarto te acompañe"?
— TheDoctor
@TheDoctor Eso es lo que era, pero arreglé el error tipográfico. ¿En serio crees que debería ir por el doble juego de palabras?
— Justin
3
Forth sería difícil hacer esto.
— TheDoctor
44
@TheDoctor "Hacer en Forth, difícil esto sería" - Yoda'd eso para ti.
— MikeTheLiar
Una cosa divertida acerca de esta pregunta: antes de publicar, el sistema me advirtió que esto podría cerrarse como "demasiado subjetivo".
— Justin

Respuestas:

8

HTML, 762

<div><pre>It  is  a  period  of  civil war.  Rebel
spaceships,   striking  from   a  hidden
base,  have   won  their  first  victory
against   the   evil   Galactic  Empire.

During  the battle,  Rebel spies managed
to  steal  secret  plans to the Empire's
ultimate   weapon,  the  Death Star,  an
armored   space  station   with   enough
power   to  destroy  an  entire  planet.

Pursued by the Empire's sinister agents,
Princess  Leia  races  home  aboard  her
starship,  custodian of the stolen plans
that  can save  her people  and  restore
freedom to the galaxy...</pre></div><style>pre{transform:perspective(300px)rotateX(25deg);position:absolute;left:99px;color:yellow;animation:a 30s linear}@keyframes a{100%{font-size:0px}}body{background:black}</style>

Tipo de picado (léase: extremadamente picado: P).

Aquí hay un JSFiddle (con los -webkit-prefijos de proveedor agregados para que funcione en Chrome).

— Pomo de la puerta
fuente
Me acabo de dar cuenta de que estaba demasiado celoso en mi justificación. Los primeros dos párrafos no necesitan espacios adicionales en la última línea.
— Justin
1
Además, no sé sobre esto; el arrastre se desliza hacia la izquierda, no solo hacia arriba. No acepto eso. La picadura: está bien, pero el deslizamiento no solo hacia arriba: no está bien.
— Justin
3
¿Es tan leve para ti? Es muy evidente para mí. Posiblemente, es más visible en Chrome. Para mí, el borde más a la izquierda permanece en la misma izquierda, incluso con texto muy pequeño, por lo que el más a la derecha se mueve notablemente a la izquierda. En ese caso, estoy bien con eso. Me pregunto lo que realmente parece ....
— Justin
1
¿Se supone que funciona en Firefox?
— Pierre Arlaud
1
¿Hay alguna posibilidad de que funcione en firefox?
— rooby
37

HTML / CSS, 1047

Podría jugar mucho más al golf eliminando los -webkitprefijos, etc., pero esto lo hará por el momento:

<html><head><style>body{font-family:sans-serif;background:#000;margin:0
auto;height:400px;width:800px;text-align:justify;position:relative;perspective:
150px;-webkit-perspective:150px;}div{font-size:63px;line-height:63px;color:#ee6;
position:absolute;-webkit-transform:rotateX(70deg);transform:rotateX(70deg);}p{
position:relative;-webkit-animation:s 90s linear forwards;animation:s 90s linear
forwards;}@-webkit-keyframes s{from{top:800px;}to{top:-2000px;}}@keyframes
s{from{top:800px;}to{top:-2000px;}}</style><body><div><p>It is a period of civil
war. Rebel spaceships, striking from a hidden base, have won their first victory
against the evil Galactic Empire.</p><p>During the battle, Rebel spies managed to
steal secret plans to the Empire's ultimate weapon, the DEATH STAR, an armored
space station with enough power to destroy an entire planet.</p><p>Pursued by
the Empire's sinister agents, Princess Leia races home aboard her starship,
custodian of the stolen plans that can save her people and restore freedom to
the galaxy...</p></div>

Demo en vivo

— ossifrage aprensivo
fuente
1
¿No rompe esto la regla "sin embargo, puede eliminar los espacios adicionales (no las nuevas líneas) " @Quincunx?
— Pomo de la puerta
2
@PaulDraper funciona para mí (en Chrome)
— Martin Ender
1
@ m.buettner, raro. Chrome 34 en Ubuntu 12.04 . Tal vez presentaré un error de Chrome debido a esto ...
— Paul Draper
66
No estoy seguro de por qué, pero no funciona en FireFox 29.0 en Ubuntu 13.10 . No relacionado con el problema de @ PaulDraper (solo estoy viendo una pantalla completamente negra, con algunas fluctuaciones ocasionales y una delgada raya amarilla en el medio de la pantalla)
— IQAndreas
1
-1 que no es un archivo HTML válido. Si desea hacer que esto solo funcione con una versión específica del navegador, debe incluir el nombre y la versión del navegador en la especificación del idioma.
— Bakuriu
20

HTML + CSS + SVG 1614 1625

Yo también quería ser visualmente correcto. SVG utilizado para enmascaramiento y animación. HTML + CSS utilizado para transformaciones. No verifiqué si el texto llega al tamaño exacto de 1/3.

Visualización recomendada en Chrome debido al -webkit-prefijo. Requiere transformaciones CSS 3D para funcionar; Es posible que deba abrir chrome://flagsy elegir 'Anular lista de renderizado de software'.

En bytecount se incluyen líneas nuevas y espacios en blanco.

Actualización 1: Agregar soporte para Firefox y otros navegadores que no necesitan prefijos. Se agregaron 11 bytes incluso después de una limpieza adicional. La limpieza fue posible porque afortunadamente los navegadores interpretan SVG usando analizadores de procesamiento de HTML en lugar de analizadores compatibles con XML.

Vivir

<div id=a>                                                                      
<div id=b>                                                                      
<svg width=760 height=1000>                                                     
<g mask=url(#m)>                                                                
<g transform=translate(0,0)>                                                    
<animateTransform attributeName=transform type=translate dur=50 fill=freeze from=0,700 to=0,-450 />
<foreignObject width=760 height=800>                                            
<div style=width:740; >                                                         
<p>It is a period of civil war. Rebel                                           
spaceships, striking from a hidden                                              
base, have won their first victory                                              
against the evil Galactic Empire.</p>                                           
<p>During the battle, Rebel spies managed                                       
to steal secret plans to the Empire's                                           
ultimate weapon, the DEATH STAR, an                                             
armored space station with enough                                               
power to destroy an entire planet.</p>                                          
</div>                                                                          
<p>Pursued by the Empire's sinister agents,                                     
Princess Leia races home aboard her                                             
starship, custodian of the stolen plans                                         
that can save her people and restore                                            
freedom to the galaxy...</p>                                                    
</foreignObject>                                                                
</g>                                                                            
</g>                                                                            
<defs>                                                                          
<linearGradient id=g x1=0 y1=0% x2=0 y2=100%>                                   
<stop offset=0% />                                                              
<stop offset=25% />                                                             
<stop offset=35% stop-color=#fff />                                             
<stop offset=100% stop-color=#fff />                                            
</linearGradient>                                                               
<mask id=m>                                                                     
<rect width=100% height=100% fill=url(#g) />                                    
</mask>                                                                         
</defs>                                                                         
</svg>                                                                          
</div>                                                                          
</div>                                                                          
<style>                                                                         
body {                                                                          
margin: 0;                                                                      
width: 100%; height: 100%;                                                      
perspective: 700px;                                                             
-webkit-perspective: 700px;                                                     
background: url(http://vucica.net/s.php);                                       
}                                                                               
#a {                                                                            
position: absolute;                                                             
width: 100%;                                                                    
height: 700px;                                                                  
bottom: 0;                                                                      
transform-style: preserve-3d;                                                   
}                                                                               
#b {                                                                            
margin: auto auto auto auto;                                                    
width: 760px; height: 100%;                                                     
font-family: Courier; font-weight: bold; text-align: justify; font-size: 24pt;  
color: yellow;                                                                  
overflow: hidden;                                                               
transform: rotateX(45deg);                                                      
-webkit-transform: rotateX(45deg);                                              
}                                                                               
svg {                                                                           
position: absolute;                                                             
width: 760px;                                                                   
height: 100%;                                                                   
}
— Ivan Vučica
fuente
1
¿Hay alguna posibilidad de que funcione en firefox?
— rooby
Presumiría que / -webkit / -moz / funcionaría (¡y afeitaré algunos caracteres más!) Pero lo miraré.
— Ivan Vučica
Hecho. (Y ni siquiera soy un gran fanático de Star Wars ...)
— Ivan Vučica
4

PerlMagick, programa 661 + archivo de texto 547 = 1208

Demasiado tarde para el aniversario, pero OP dijo 'GIF animado', así que ...

TL; DR: un enlace a GIF animado (5 Mb, 480 * 240, 1360 cuadros) (hay un comienzo falso cada vez que pruebo este enlace ahora; no está en el archivo, tal vez intente descargarlo primero. Y algunos pequeños parpadeos) ... tal vez lo explique más tarde, - no es pan comido, toda la idea de IM y GIF;)).

Con nuevas líneas y sangría para facilitar la lectura:

use Image::Magick;
$i=Image::Magick->new(
    depth=>8,
    page=>'480x440+20+0',
    background=>'#000',
    fill=>'#ff0',
    font=>'UbuntuMono-R.ttf',
    pointsize=>22
);
$i->Read('text:-');
$j=$i->Clone;
$i->Extent(y=>-440);
for(1..680){
    ($i->[2*$_]=$j->Clone)->Extent(y=>$_-440);
    ($i->[2*$_-1]=$i->[2*$_]->Clone)
        ->Composite(image=>$i->[2*$_-2],compose=>'Blend',blend=>50)
}
$i->Distort(method=>'Perspective','virtual-pixel'=>'Background',
    points=>[0,0,180,180,480,0,300,180,0,420,0,420,480,420,480,420]);
$i->Extent(geometry=>'480x240+0+200');
$g=Image::Magick->new(size=>'480x150');
$g->Read('gradient:#000-#fff');
$i->Composite(image=>$g,compose=>'Multiply');
$i->Set(delay=>10,loop=>0);
$i->Animate()

Lee texto de STDIN, pero la geometría está codificada, por lo que probablemente cualquier otro texto no sería una buena idea. Podría ser más corto, pero agregué desvanecimiento al texto cuando llega a la parte superior y, al subir un solo píxel, se produjo una animación entrecortada, así que hice una interpolación. Consume 2,2 Gb de RAM y tarda 2-3 minutos en un escritorio de 8 años (y probablemente no funcionará para la gente de Windows), así que aquí está cómo obtener un GIF: reemplace (o agregue) la última línea (crea más de 200 Archivo Mb):

$i->Write('out.miff')

Y luego corre 

convert -size 8x1 gradient:black-yellow palette8.png
convert +dither out.miff -remap palette8.png out+.gif
convert +dither out+.gif -layers optimize out++.gif

Las compensaciones entre calidad (tamaño de paleta, etc.) y tamaño GIF final son obvias. Llamar $i->Remapdesde PerlMagick directamente no funciona, probablemente haya un error, lleva horas mucho tiempo (creo) intenta +remapprimero. En realidad, se puede lograr un tamaño GIF razonable (solo un poco más grande) sin la paleta global, pero el uso $i->Quantizereduce la paleta local de cada cuadro al tamaño requerido. Ah, y sin ninguna optimización de paleta, es decir, guardar el GIF del script anterior 'tal cual' produce un archivo GIF de aproximadamente 9 Mb.

— usuario2846289
fuente
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.