Que le 4 soit avec vous!

24

En l'honneur du jour de Star Wars , écrivez un programme pour afficher le texte suivant, défilant comme l' exploration d'ouverture 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...

Vous pouvez générer un GIF animé ou le faire afficher par votre programme. La sortie doit afficher les éléments suivants:

  • Le texte doit commencer par le bas de l'image / affichage
  • Il doit défiler vers le haut jusqu'à ce qu'il atteigne le sommet. Il faut au moins 30quelques secondes pour qu'un morceau de texte atteigne le haut. L'animation doit continuer jusqu'à ce que tout le texte atteigne le haut.
  • Dans cette distance, le texte doit devenir plus petit jusqu'à ce qu'il soit inférieur à 1/3la taille (longueur et police)
  • Le texte doit être incliné pour suivre cet angle.
  • Le texte doit être justifié à gauche et à droite. Le texte donné est déjà justifié pour les polices à espacement fixe, cependant, vous pouvez supprimer les espaces supplémentaires (pas les retours à la ligne) et le justifier vous-même.
  • Le texte doit être jaune
  • Le fond doit être noir

Cette vidéo montre l'exploration d'ouverture.

Bonne chance, et que le quatrième soit avec toi !

code-golf graphical-output kolmogorov-complexity animation Justin
la source
5
Et "Que le quatrième soit avec toi"?
TheDoctor
@TheDoctor C'est ce que c'était, mais j'ai corrigé la faute de frappe. Vous pensez sérieusement que je devrais faire le double jeu de mots?
Justin
3
Il serait difficile de le faire.
TheDoctor
4
@TheDoctor "Pour faire à Forth, ce serait difficile" - Yoda l'a fait pour vous.
MikeTheLiar
Une chose amusante à propos de cette question: avant de poster, le système m'a averti que cela pourrait être fermé comme "trop ​​subjectif".
Justin

Réponses:

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>

Type de saccadé (lire: extrêmement saccadé: P).

Voici un JSFiddle (avec des -webkit-préfixes de fournisseurs ajoutés pour qu'il fonctionne dans Chrome).

Poignée de porte
la source
Je viens de réaliser que j'étais trop zélé dans ma justification. Les deux premiers paragraphes n'ont pas besoin d'espaces supplémentaires sur la dernière ligne.
Justin
1
De plus, je n'en sais rien; l'exploration glisse vers la gauche, pas seulement vers le haut. Je n'accepte pas ça. L'agitation: d'accord, mais le glissement non seulement vers le haut: pas d'accord.
Justin
3
C'est si léger pour toi? C'est très évident pour moi. Peut-être, il est plus visible dans Chrome. Pour moi, le bord le plus à gauche reste à la même gauche, même avec un texte très petit, donc le plus à droite se déplace très sensiblement vers la gauche. Dans ce cas, je suis d'accord avec ça. Je me demande à quoi ça ressemble vraiment ...
Justin
1
Est-il censé fonctionner sur Firefox?
Pierre Arlaud
1
Avez-vous des chances de le faire fonctionner dans Firefox?
rooby
37

HTML / CSS, 1047

Je pourrais -webkitjouer au golf beaucoup plus en supprimant les préfixes, etc., mais cela suffira pour le moment:

<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>

Démo en direct

ossifrage délicat
la source
1
Cela ne déroge-t- il pas à la règle "cependant, vous pouvez supprimer les espaces supplémentaires (pas les retours à la ligne) " @Quincunx?
Poignée de porte
2
@PaulDraper fonctionne pour moi (dans Chrome)
Martin Ender
1
@ m.buettner, bizarre. Chrome 34 sur Ubuntu 12.04 . Peut-être que je vais déposer un bug Chrome à cause de cela ...
Paul Draper
6
Je ne sais pas pourquoi, mais cela ne fonctionne pas dans FireFox 29.0 sur Ubuntu 13.10 . Sans rapport avec le problème de @ PaulDraper (je vois juste un écran complètement noir, avec quelques rayures jaunes flottantes et minces au milieu de l'écran)
IQAndreas
1
-1 qui n'est pas un fichier HTML valide. Si vous vouliez que cela fonctionne uniquement avec une version de navigateur spécifique, vous devez inclure le nom et la version du navigateur dans la spécification de langue.
Bakuriu
20

HTML + CSS + SVG 1614 1625

Je voulais aussi être visuellement correct. SVG utilisé pour le masquage et l'animation. HTML + CSS utilisé pour les transformations. Je n'ai pas vérifié si le texte atteignait exactement 1/3 de la taille.

Affichage recommandé dans Chrome en raison du -webkit-préfixe. Nécessite des transformations CSS 3D pour fonctionner; vous devrez peut-être ouvrir chrome://flagset sélectionner «Remplacer la liste de rendu des logiciels».

Le bytecount comprend les sauts de ligne et les blancs.

Mise à jour 1: Ajout de la prise en charge de Firefox et d'autres navigateurs qui n'ont pas besoin de préfixes. Ajout de 11 octets même après un nettoyage supplémentaire. Le nettoyage a été possible parce que les navigateurs interprètent heureusement SVG en utilisant des analyseurs d'analyse HTML par opposition aux analyseurs compilant XML.

Vivre

<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
la source
1
Avez-vous des chances de le faire fonctionner dans Firefox?
rooby
Je suppose que / -webkit / -moz / ferait (et raserait encore quelques caractères!) Mais je regarderai.
Ivan Vučica
Terminé. (Et je ne suis même pas un grand fan de Star Wars ...)
Ivan Vučica
4

PerlMagick, programme 661 + 547 fichier texte = 1208

Trop tard pour l'anniversaire, mais OP a dit 'GIF animé', alors ...

TL; DR: un lien vers un GIF animé (5 Mo, 480 * 240, 1360 images) (il y a un faux départ chaque fois que j'essaie ce lien maintenant - il n'est pas dans le fichier, essayez peut-être de le télécharger d'abord. Et quelques légers scintillements ... peut-être que je l'expliquerai plus tard, - pas un morceau de gâteau, toute l'idée IM et GIF;)).

Avec des nouvelles lignes et un retrait pour la lisibilité:

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()

Il lit le texte de STDIN, mais la géométrie est codée en dur, donc tout autre texte ne serait probablement pas une bonne idée. Il pourrait être plus court, mais j'ai ajouté un fondu au texte lorsqu'il arrive en haut et, en remontant d'un pixel, j'ai eu une animation saccadée, j'ai donc fait une interpolation. Il mange 2,2 Go de RAM et prend 2-3 minutes sur un bureau de 8 ans (et ne fonctionnera probablement pas pour les gens de Windows), alors voici comment obtenir un GIF: remplacez (ou ajoutez) la dernière ligne (crée 200+ Fichier Mb):

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

Et puis exécutez 

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

Les compromis entre la qualité (taille de la palette, etc.) et la taille finale du GIF sont évidents. Appeler $i->Remapdirectement depuis PerlMagick ne fonctionne pas, il y a probablement un bogue, cela prend des heures car il (je pense) essaie en +remappremier. En fait, une taille GIF raisonnable (seulement légèrement plus grande) peut être obtenue sans palette globale mais en utilisant $i->Quantizece qui réduit chaque palette locale de trame à la taille requise. Oh, et sans aucune optimisation de palette, c'est-à-dire que l'enregistrement du GIF à partir du script ci-dessus «tel quel» produit un fichier GIF d'environ 9 Mo.

user2846289
la source