Niech czwarty będzie z tobą!

24

Na cześć Dnia Gwiezdnych wojen napisz program, który wyświetli następujący tekst, przewijając jak indeksowanie Gwiezdnych wojen :

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

Możesz wygenerować animowany plik GIF lub wyświetlić go w programie. Dane wyjściowe muszą zawierać następujące informacje:

  • Tekst musi zaczynać się od dołu obrazu / wyświetlacza
  • Musi przewijać w górę, aż osiągnie szczyt. 30Dotarcie tekstu na górę zajmuje co najmniej sekundy. Animacja musi być kontynuowana, dopóki cały tekst nie osiągnie górnej krawędzi.
  • W tej odległości tekst musi być mniejszy, aż będzie mniejszy niż 1/3rozmiar (długość i czcionka)
  • Tekst musi być pochylony, aby podążać pod tym kątem.
  • Tekst musi być wyrównany do lewej i prawej. Podany tekst jest już uzasadniony dla czcionek o stałej szerokości, możesz jednak usunąć dodatkowe spacje (nie nowe linie) i sam je uzasadnić.
  • Tekst musi być żółty
  • Tło musi być czarne

Ten film pokazuje indeksowanie początkowe.

Powodzenia i niech czwarty będzie z tobą !

code-golf graphical-output kolmogorov-complexity animation Justin
źródło
5
Co powiesz na „Niech czwarty będzie z tobą”?
TheDoctor
@Doctor Tak właśnie było, ale poprawiłem literówkę. Naprawdę myślisz, że powinienem wybrać podwójną grę słów?
Justin
3
Dalej byłoby trudno to zrobić.
TheDoctor
4
@TheDoctor „Aby zrobić w Forth, byłoby to trudne” - Yoda to dla ciebie.
MikeTheLiar
Jedna fajna rzecz w tym pytaniu: przed wysłaniem system ostrzegł mnie, że może to zostać zamknięte jako „zbyt subiektywne”.
Justin

Odpowiedzi:

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>

Niby niepewny (czytaj: bardzo niepewny: P).

Oto JSFiddle (z -webkit-dodanymi prefiksami dostawcy, dzięki czemu działa w Chrome).

Klamka
źródło
Właśnie zdałem sobie sprawę, że byłem nadgorliwy w moim uzasadnieniu. Pierwsze dwa akapity nie wymagają dodatkowych spacji w ostatnim wierszu.
Justin
1
Poza tym nie wiem o tym; indeksowanie przesuwa się w lewo, nie tylko w górę. Nie akceptuję tego Chwiejność: w porządku, ale przesuwanie się nie tylko w górę: nie w porządku.
Justin
3
To dla ciebie takie niewielkie? To jest dla mnie bardzo widoczne. Być może jest bardziej widoczny w Chrome. Dla mnie skrajna lewa krawędź pozostaje na tej samej lewości, nawet przy bardzo małym tekście, więc skrajna prawa przesuwa się bardzo zauważalnie w lewo. W takim razie nic mi nie jest. Zastanawiam się, jak to naprawdę wygląda ...
Justin
1
Czy to powinno działać na Firefoxie?
Pierre Arlaud
1
Czy jest jakaś szansa, że ​​uda ci się go uruchomić w Firefoksie?
rooby
37

HTML / CSS, 1047

Mógłbym -webkitzagrać w golfa o wiele więcej, usuwając prefiksy itp., Ale na razie to zrobi:

<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 na żywo

piskliwy kostuch
źródło
1
Czy to nie łamie zasady „możesz jednak usunąć dodatkowe spacje (nie nowe linie) ” @Quincunx?
Klamka
2
@PaulDraper działa dla mnie (w Chrome)
Martin Ender
1
@ m.buettner, dziwne. Chrome 34 na Ubuntu 12.04 . Być może z tego powodu zgłoszę błąd w Chrome ...
Paul Draper
6
Nie wiem, dlaczego, ale nie działa w FireFox 29.0 na Ubuntu 13.10 . Nie ma związku z problemem @ PaulDraper (widzę tylko całkowicie czarny ekran, z okazjonalnymi migotaniem i cienką żółtą smugą na środku ekranu)
IQAndreas
1
-1, który nie jest prawidłowym plikiem HTML. Jeśli celowo chcesz, aby działało to tylko z określoną wersją przeglądarki, musisz podać nazwę i wersję przeglądarki w specyfikacji języka.
Bakuriu
20

HTML + CSS + SVG 1614 1625

Chciałem też być poprawny wizualnie. SVG używany do maskowania i animacji. HTML + CSS używany do transformacji. Nie sprawdziłem, czy tekst ma dokładnie 1/3 rozmiaru.

Zalecane wyświetlanie w Chrome ze względu na -webkit-prefiks. Wymaga transformacji CSS 3D do pracy; może być konieczne otwarcie chrome://flagsi wybranie opcji „Zastąp listę renderowania oprogramowania”.

W bajtecount znajdują się znaki nowego wiersza i puste.

Aktualizacja 1: Dodanie obsługi przeglądarki Firefox i innych przeglądarek, które nie wymagają prefiksów. Dodano 11 bajtów nawet po dalszym czyszczeniu. Oczyszczanie było możliwe, ponieważ przeglądarki szczęśliwie interpretują SVG za pomocą parserów do łamania HTML, w przeciwieństwie do parserów zgodnych z XML.

Relacja na żywo

<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
źródło
1
Czy jest jakaś szansa, że ​​uda ci się go uruchomić w Firefoksie?
rooby
Zakładałbym, że zrobi to / -webkit / -moz / (i zgolę jeszcze kilka postaci!), Ale popatrzę.
Ivan Vučica
Gotowy. (I nie jestem nawet wielkim fanem Gwiezdnych wojen ...)
Ivan Vučica
4

PerlMagick, program 661 + plik tekstowy 547 = 1208

Za późno na rocznicę, ale OP powiedział „animowany GIF”, więc ...

TL; DR: link do animowanego GIF-a (5 Mb, 480 * 240, 1360 klatek) (za każdym razem, gdy próbuję teraz ten link, następuje fałszywy start - nie ma go w pliku, być może najpierw spróbuję go pobrać. I niewielkie migotanie ... może wytłumaczę to później, - nie bułka z masłem, cała idea IM i GIF;)).

Z nowymi liniami i wcięciem dla czytelności:

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

Czyta tekst ze STDIN, ale geometria jest zakodowana na stałe, więc prawdopodobnie każdy inny tekst nie byłby dobrym pomysłem. Może być krótszy, ale dodałem zanikanie tekstu, gdy dochodzi on do góry, a przesuwanie się o jeden piksel powodowało niestabilną animację, więc wykonałem interpolację. Zjada 2,2 Gb pamięci RAM i zajmuje 2-3 minuty na 8-letnim pulpicie (i prawdopodobnie nie będzie działać na ludziach z Windows), więc oto jak uzyskać GIF: zamień (lub dodaj) ostatnią linię (tworzy ponad 200 Plik Mb):

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

A potem biegnij 

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

Kompromisy między jakością (rozmiar palety itp.) A ostatecznym rozmiarem GIF są oczywiste. Wywołanie $i->Remapbezpośrednio z PerlMagick nie działa, prawdopodobnie występuje błąd, zajmuje to wiele godzin, zanim (jak sądzę) spróbuje +remappierwszy. Właściwie rozsądny (tylko nieznacznie większy) rozmiar GIF można uzyskać bez globalnej palety, ale użycie $i->Quantizetego zmniejsza lokalną paletę każdej klatki do wymaganego rozmiaru. Aha, i bez optymalizacji palet, tzn. Zapisanie GIF-a z powyższego skryptu „jak jest” tworzy plik GIF około 9 Mb.

użytkownik 2846289
źródło