Il 4 maggio sia con te!

24

In onore del giorno di Star Wars , scrivi un programma per visualizzare il seguente testo, scorrendo come il crawl di apertura di 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...

Puoi generare una GIF animata o far visualizzare al tuo programma. L'output deve mostrare quanto segue:

  • Il testo deve iniziare dalla parte inferiore dell'immagine / display
  • Deve scorrere verso l'alto fino a raggiungere la cima. Devono essere necessari almeno alcuni 30secondi affinché un pezzo di testo raggiunga la cima. L'animazione deve continuare fino a quando tutto il testo non raggiunge la cima.
  • A questa distanza, il testo deve ridursi fino a quando non è inferiore 1/3alla dimensione (lunghezza e carattere)
  • Il testo deve essere inclinato per seguire questo angolo.
  • Il testo deve essere giustificato a sinistra e a destra. Il testo fornito è già giustificato per i caratteri a spaziatura fissa, tuttavia, è possibile rimuovere gli spazi extra (non le nuove righe) e giustificarlo da soli.
  • Il testo deve essere giallo
  • Lo sfondo deve essere nero

Questo video mostra la scansione iniziale.

Buona fortuna e il quarto sia con te !

code-golf  graphical-output  kolmogorov-complexity  animation 
— Justin
fonte
5
Che dire di "Possa il quarto essere con te"?
— TheDoctor
@TheDoctor Ecco com'era, ma ho corretto l'errore di battitura. Pensi seriamente che dovrei andare per il doppio gioco di parole?
— Giustino,
3
Forth sarebbe difficile farlo in.
— TheDoctor
4
@TheDoctor "Farlo a Forth, sarebbe difficile" - Yoda l'ha fatto per te.
— MikeTheLiar,
Una cosa divertente di questa domanda: prima di pubblicare, il sistema mi ha avvertito che questo potrebbe essere chiuso come "troppo soggettivo".
— Giustino,

Risposte:

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 di mosso (leggi: estremamente mosso: P).

Ecco un JSFiddle (con i -webkit-prefissi dei fornitori aggiunti in modo che funzioni in Chrome).

— Maniglia
fonte
Mi sono appena reso conto di essere troppo zelante nella mia giustificazione. I primi due paragrafi non richiedono spazi aggiuntivi sull'ultima riga.
— Giustino,
1
Inoltre, non lo so; il gattonamento scorre a sinistra, non solo verso l'alto. Non lo accetto. L'increspatura: va bene, ma lo scivolamento non è solo alto: non va bene.
— Giustino,
3
È così leggero per te? Mi è molto evidente. Forse, è più visibile in Chrome. Per me, il bordo più a sinistra rimane alla stessa sinistra, anche con un testo molto piccolo, quindi quello più a destra si sposta notevolmente a sinistra. In tal caso, sto bene. Mi chiedo come sia davvero ....
— Justin
1
Dovrebbe funzionare su Firefox?
— Pierre Arlaud,
1
Qualche possibilità per farlo funzionare su Firefox?
— Rooby,
37

HTML / CSS, 1047

Potrei giocare a golf molto di più eliminando i -webkitprefissi ecc., Ma per il momento lo farà:

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

Dimostrazione dal vivo

— ossifrage schizzinoso
fonte
1
Questo non infrange la regola "tuttavia, è possibile rimuovere gli spazi extra (non le nuove righe) " @Quincunx?
— Maniglia della porta
2
@PaulDraper funziona per me (in Chrome)
— Martin Ender
1
@ m.buettner, strano. Chrome 34 su Ubuntu 12.04 . Forse presenterò un bug di Chrome per questo ...
— Paul Draper
6
Non so perché, ma non funziona in FireFox 29.0 su Ubuntu 13.10 . Non correlato al problema di @ PaulDraper (sto solo vedendo uno schermo completamente nero, con qualche intermittente occasionale e una sottile striscia gialla nel mezzo dello schermo)
— IQAndreas
1
-1 che non è un file HTML valido. Se si desidera intenzionalmente farlo funzionare solo con una versione specifica del browser, è necessario includere il nome e la versione del browser nelle specifiche della lingua.
— Bakuriu,
20

HTML + CSS + SVG 1614 1625

Volevo anche essere visivamente corretto. SVG utilizzato per mascheramento e animazione. HTML + CSS utilizzato per le trasformazioni. Non ho verificato se il testo raggiunge esattamente 1/3.

Visualizzazione consigliata in Chrome a causa del -webkit-prefisso. Richiede trasformazioni CSS 3D per funzionare; potrebbe essere necessario aprirechrome://flags e selezionare "Sostituisci elenco rendering software".

In bytecount sono inclusi newline e spazi vuoti.

Aggiornamento 1: aggiunta del supporto per Firefox e altri browser che non richiedono prefissi. Aggiunti 11 byte anche dopo un'ulteriore pulizia. La pulizia è stata possibile perché i browser interpretano fortunatamente SVG utilizzando parser HTML-crunching invece di parser compilatori XML.

Vivere

<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
fonte
1
Qualche possibilità per farlo funzionare su Firefox?
— Rooby,
Suppongo che farebbe / -webkit / -moz / (e radere qualche altro personaggio!) Ma guarderò.
— Ivan Vučica,
Fatto. (E non sono nemmeno un grande fan di Star Wars ...)
— Ivan Vučica,
4

PerlMagick, programma 661 + 547 file di testo = 1208

Troppo tardi per l'anniversario, ma OP ha detto "GIF animate", quindi ...

TL; DR: un collegamento a GIF animate (5 Mb, 480 * 240, 1360 frame) (c'è un falso inizio ogni volta che provo questo link ora - non è nel file, forse prova a scaricarlo prima. E qualche leggero sfarfallio ... forse lo spiegherò più tardi, - non un gioco da ragazzi, l'intera idea di messaggistica istantanea e GIF;)).

Con newline e rientro per la leggibilità:

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

Legge il testo da STDIN, ma la geometria è codificata, quindi probabilmente qualsiasi altro testo non sarebbe una buona idea. Potrebbe essere più breve, ma ho aggiunto la dissolvenza al testo man mano che arriva in cima e, spostandomi in alto di un singolo pixel, ho generato un'animazione discontinua, quindi ho fatto una certa interpolazione. Mangia 2,2 GB di RAM e richiede 2-3 minuti su un desktop da 8 anni (e probabilmente non funzionerà per Windows), quindi ecco come ottenere una GIF: sostituisci (o aggiungi a) l'ultima riga (crea oltre 200 File Mb):

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

E poi corri 

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

I compromessi tra qualità (dimensioni della palette ecc.) E dimensioni GIF finali sono evidenti. Chiamare $i->Remapdirettamente da PerlMagick non funziona, probabilmente c'è un bug, ci vogliono ore perché (penso) provi per +remapprimo. In realtà, una dimensione GIF ragionevole (solo leggermente più grande) può essere raggiunta senza tavolozza globale ma utilizzando $i->Quantizeciò riduce ciascuna tavolozza locale di frame alla dimensione richiesta. Oh, e senza alcuna ottimizzazione della palette, vale a dire il salvataggio di GIF dallo script "così com'è" produce file GIF di circa 9 Mb.

— user2846289
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.