Möge der 4. mit dir sein!

24

Zu Ehren von Star Wars Tag , ein Programm schreiben Sie den folgenden Text angezeigt werden , wie das Scrollen Wars - Öffnung kriechen Stern :

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

Sie können ein animiertes GIF ausgeben oder von Ihrem Programm anzeigen lassen. Die Ausgabe muss Folgendes anzeigen:

  • Der Text muss am unteren Rand des Bildes / der Anzeige beginnen
  • Es muss nach oben scrollen, bis es oben ankommt. Es muss mindestens 30Sekunden dauern, bis ein Textstück oben angekommen ist. Die Animation muss fortgesetzt werden, bis der gesamte Text oben angekommen ist.
  • In diesem Abstand muss der Text kleiner werden, bis er kleiner ist als 1/3die Größe (Länge und Schriftart).
  • Der Text muss geneigt sein, um diesem Winkel zu folgen.
  • Der Text muss links und rechtsbündig sein. Der angegebene Text ist für monospaced Schriftarten bereits berechtigt. Sie können jedoch die zusätzlichen Leerzeichen (keine Zeilenumbrüche) entfernen und selbst begründen.
  • Der Text muss gelb sein
  • Der Hintergrund muss schwarz sein

Dieses Video zeigt den Eröffnungs-Crawl.

Viel Glück und möge der vierte mit dir sein !

code-golf  graphical-output  kolmogorov-complexity  animation 
— Justin
quelle
5
Was ist mit "Mögen die Vierten mit dir sein"?
— TheDoctor
@TheDoctor Das war es auch, aber ich habe den Tippfehler behoben. Meinst du ernsthaft, ich sollte das Doppelwort machen?
— Justin
3
Forth wäre schwierig, dies zu tun.
— TheDoctor
4
@TheDoctor "In Forth zu tun, das wäre schwierig" - Yoda hat das für Sie getan.
— MikeTheLiar
Eine lustige Sache bei dieser Frage: Vor dem Posten hat mich das System gewarnt, dass dies als "zu subjektiv" abgeschlossen werden könnte.
— Justin

Antworten:

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>

Art von abgehackt (zu lesen: extrem abgehackt: P).

Hier ist ein JSFiddle (mit -webkit-Herstellerpräfixen, damit es in Chrome funktioniert).

— Türknauf
quelle
Mir wurde nur klar, dass ich in meiner Rechtfertigung übereifrig war. Die ersten beiden Absätze benötigen keine zusätzlichen Leerzeichen in der letzten Zeile.
— Justin
1
Ich weiß auch nichts darüber. der Crawl rutscht nach links, nicht nur nach oben. Ich akzeptiere das nicht. Das Choppiness: okay, aber das Rutschen nicht nur rauf: nicht okay.
— Justin
3
Es ist so gering für dich? Es ist sehr offensichtlich für mich. Möglicherweise ist es in Chrome besser sichtbar. Bei mir bleibt die linke Kante auch bei sehr kleinem Text gleich, so dass die rechte Kante sehr deutlich nach links zeigt. In diesem Fall geht es mir gut. Ich frage mich, wie es wirklich aussieht ...
— Justin
1
Soll es auf Firefox funktionieren?
— Pierre Arlaud
1
Gibt es eine Chance, dass es in Firefox funktioniert?
— Rooby
37

HTML / CSS, 1047

Ich könnte viel mehr Golf spielen, indem ich die -webkitPräfixe usw. lösche, aber dies wird vorerst ausreichen:

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

Live-Demo

— zimperliches Ossifrage
quelle
1
Verstößt dies nicht gegen die Regel "Sie dürfen jedoch die zusätzlichen Leerzeichen (keine Zeilenumbrüche) entfernen " @Quincunx?
— Türklinke
2
@ PaulDraper funktioniert für mich (in Chrome)
— Martin Ender
1
@m.buettner, komisch. Chrome 34 unter Ubuntu 12.04 . Vielleicht werde ich deswegen einen Chrome-Fehler melden ...
— Paul Draper
6
Ich weiß nicht warum, aber es funktioniert nicht in FireFox 29.0 unter Ubuntu 13.10 . Kein Problem mit @ PaulDraper (ich sehe nur einen komplett schwarzen Bildschirm mit gelegentlichem Flimmern und dünnen gelben Streifen in der Mitte des Bildschirms)
— IQAndreas
1
-1 Das ist keine gültige HTML-Datei. Wenn Sie dies absichtlich nur mit einer bestimmten Browserversion ausführen möchten, sollten Sie den Namen und die Version des Browsers in die Sprachspezifikation aufnehmen.
— Bakuriu
20

HTML + CSS + SVG 1614 1625

Ich wollte auch visuell korrekt sein. SVG zum Maskieren und Animieren. HTML + CSS für Transformationen. Ich habe nicht geprüft, ob der Text genau 1/3 groß ist.

Empfohlene Anzeige in Chrome aufgrund des -webkit-Präfixes. Erfordert CSS 3D-Transformationen. Möglicherweise müssen Sie chrome://flags'Software-Rendering-Liste überschreiben' öffnen und auswählen.

In bytecount sind Zeilenumbrüche und Leerzeichen enthalten.

Update 1: Unterstützung für Firefox und andere Browser, die keine Präfixe benötigen, hinzufügen. 11 Bytes hinzugefügt, auch nach weiteren Aufräumarbeiten. Bereinigung war möglich, da Browser SVG glücklicherweise mit HTML-Crunching-Parsern interpretieren und nicht mit XML-Compilant-Parsern.

Leben

<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
quelle
1
Gibt es eine Chance, dass es in Firefox funktioniert?
— Rooby
Ich würde davon ausgehen, dass / -webkit / -moz / dies tun würde (und ein paar weitere Charaktere abschneiden würde!), Aber ich werde nachsehen.
— Ivan Vučica
Getan. (Und ich bin nicht einmal ein besonders großer Fan von Star Wars ...)
— Ivan Vučica
4

PerlMagick, 661 Programm + 547 Textdatei = 1208

Zu spät für das Jubiläum, aber OP sagte "animiertes GIF", also ...

TL; DR: Ein Link zu animiertem GIF (5 Mb, 480 * 240, 1360 Frames) (es gibt jedes Mal einen Fehlstart, wenn ich diesen Link jetzt versuche - er befindet sich nicht in der Datei, versuchen Sie es vielleicht zuerst herunterzuladen. Und ein leichtes Flackern.) ... vielleicht erkläre ich es später, - kein Kinderspiel, die ganze IM- und GIF-Idee;)).

Mit Zeilenumbrüchen und Einrückung zur besseren Lesbarkeit:

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

Es liest Text aus STDIN, aber die Geometrie ist hartcodiert, so dass wahrscheinlich jeder andere Text keine gute Idee wäre. Es könnte kürzer sein, aber ich habe dem Text eine Überblendung hinzugefügt, wenn er oben angekommen ist. Wenn ich um ein Pixel nach oben ging, ergab sich eine abgehackte Animation, sodass ich etwas interpoliert habe. Es verbraucht 2,2 GB RAM und benötigt 2-3 Minuten auf einem 8-jährigen Desktop (und funktioniert wahrscheinlich nicht für Windows-Benutzer). So erhalten Sie ein GIF: Ersetzen Sie die letzte Zeile (oder fügen Sie sie hinzu) (erstellt 200+) MB-Datei):

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

Und dann renn 

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

Kompromisse zwischen Qualität (Palettengröße usw.) und endgültiger GIF-Größe sind offensichtlich. $i->RemapDas direkte Aufrufen von PerlMagick aus funktioniert nicht, es gibt wahrscheinlich einen Fehler, es dauert Stunden, bis es (glaube ich) versucht +remap. Tatsächlich kann eine vernünftige (nur geringfügig größere) GIF-Größe ohne globale Palette erreicht werden, wobei jedoch $i->Quantizejede lokale Frame-Palette auf die erforderliche Größe reduziert wird. Oh, und ohne Optimierung der Palette, dh Speichern von GIF aus dem obigen Skript "wie es ist" ergibt eine GIF-Datei von etwa 9 MB.

— user2846289
quelle
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.