May the 4th be with you!

24

6

In honor of Star Wars day, write a program to display the following text, scrolling like the Star Wars opening crawl:

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

You may output an animated GIF or have your program display it. The output must show the following:

  • The text must start from the bottom of the image/display
  • It must scroll upwards until it reaches the top. It must take at least 30 seconds for a piece of text to reach the top. The animation must continue until all the text reaches the top.
  • In this distance, the text must get smaller until it is less than 1/3 the size (length and font)
  • The text must be slanted to follow this angle.
  • The text must be left and right justified. The text given is already justified for monospaced fonts, however, you may remove the extra spaces (not newlines) and justify it yourself.
  • The text must be yellow
  • The background must be black

This video shows the opening crawl.

Good luck, and May the fourth be with you!

Justin

Posted 2014-05-04T21:00:14.130

Reputation: 19 757

5What about "May the forth be with you"? – TheDoctor – 2014-05-04T22:38:28.427

@TheDoctor That's what it was, but I fixed the typo. You seriously think that I should go for the double pun? – Justin – 2014-05-04T22:40:21.923

3Forth would be difficult to do this in. – TheDoctor – 2014-05-04T22:42:53.307

4@TheDoctor "To do in Forth, difficult this would be" - Yoda'd that for you. – MikeTheLiar – 2014-05-05T13:44:34.207

One fun thing about this question: before posting, the system warned me that this might be closed as "too subjective". – Justin – 2014-05-05T18:20:07.703

Since there is an abundance of HTML answers, what about bonus points for those with HTML soltuions that also work in browsers other than webkit based ones? – rooby – 2014-05-06T11:59:26.160

@rooby That can be handled via votes and bounties. – Justin – 2014-05-08T08:09:28.700

@Quincunx: I meant for you selecting the winner, not extra stack exchange points. – rooby – 2014-05-08T08:57:30.000

Answers

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>

Kind of choppy (read: extremely choppy :P).

Here's a JSFiddle (with -webkit- vendor prefixes added so it works in Chrome).

Doorknob

Posted 2014-05-04T21:00:14.130

Reputation: 68 138

I just realized that I was overzealous in my justification. The first two paragraphs don't need extra spaces on the last line. – Justin – 2014-05-05T01:36:12.970

1Also, I don't know about this; the crawl slides to the left, not just up. I don't accept that. The choppiness: okay, but the sliding not just up: not okay. – Justin – 2014-05-05T01:38:52.863

@Quincunx After a careful rereading of the question, it mentions nothing about sliding (slightly) in another direction. (Although it was so slight I didn't even notice.) I'll keep this answer here, but anyway, I'd be fine if you considered it invalid. – Doorknob – 2014-05-05T02:02:15.803

3It is so slight to you? It is very apparent to me. Possibly, it is more visible in Chrome. For me, the leftmost edge stays at the same left-ness, even with very small text, so the rightmost moves very noticeably to the left. In that case, I'm fine with it. I wonder what it really looks like.... – Justin – 2014-05-05T02:42:37.703

1Is it supposed to work on firefox? – Pierre Arlaud – 2014-05-05T13:14:42.747

1Any chance you can get it to work in firefox? – rooby – 2014-05-06T12:01:50.550

It works in Firefox when removing the -webkit- strings.

– A.L – 2014-05-06T13:31:08.370

If you just remove the -webkit- prefix you break webkit. You have to have both. – rooby – 2014-05-07T01:02:56.667

37

HTML/CSS, 1047

I could golf this a lot more by deleting the -webkit prefixes etc., but this will do for the time being:

<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

r3mainer

Posted 2014-05-04T21:00:14.130

Reputation: 19 135

Nice. This is exactly what I had in mind. Except you change the newlines. – Justin – 2014-05-04T23:08:46.517

1Doesn't this break the rule "however, you may remove the extra spaces (not newlines)" @Quincunx? – Doorknob – 2014-05-04T23:09:59.060

@Doorknob I assumed that referred to the paragraph breaks? – r3mainer – 2014-05-04T23:17:21.987

Does the text get smaller? Not working for me in Chrome. – Paul Draper – 2014-05-05T00:37:07.110

2@PaulDraper works for me (in Chrome) – Martin Ender – 2014-05-05T00:47:37.727

1

@m.buettner, weird. Chrome 34 on Ubuntu 12.04. Perhaps I'll file a Chrome bug because of this...

– Paul Draper – 2014-05-05T00:54:04.387

@Doorknob I guess this is okay. This follows the actual crawl, while mine is slightly off. However, I don't want anyone doing each paragraph on one line. – Justin – 2014-05-05T01:12:28.290

jsfiddle of it: http://jsfiddle.net/73fzU/

– phyatt – 2014-05-05T03:46:17.997

6Not sure why, but it doesn't work in FireFox 29.0 on Ubuntu 13.10. Not related to @PaulDraper's problem (I'm just seeing a completely black screen, with some occasional flittering and thin yellow streak in the middle of the screen) – IQAndreas – 2014-05-05T04:34:52.337

I would have upvoted this if it wasn't in code-golfing... :P BTW, Ubuntu 14.04 Chrome v 34.0.1847.132, working. – thefourtheye – 2014-05-05T13:25:52.543

1-1 that isn't a valid HTML file. If you purposefully wanted to make this only work with a specific browser version then you should include the name and version of the browser in the language specification. – Bakuriu – 2014-05-05T15:57:28.617

@IQAndreas Waiting long enough, it looks like the text appears in FF but it's tiny. – Bob – 2014-05-06T07:52:25.737

Works pretty well for me in firefox, however each paragraph doesn't appear until it gets about a third of the way up the page. – rooby – 2014-05-06T12:03:23.833

20

HTML+CSS+SVG 1614 1625

I wanted to be visually correct, too. SVG used for masking and animation. HTML+CSS used for transforms. I didn't check if the text gets to exactly 1/3 size.

Recommended viewing in Chrome due to -webkit- prefix. Requires CSS 3D transforms to work; you may need to open chrome://flags and pick 'Override software rendering list'.

Included in bytecount are newlines and blanks.

Update 1: Adding support for Firefox and other browsers that don't need prefixes. Added 11 bytes even after further cleanup. Cleanup was possible because browsers luckily interpret SVG using HTML-crunching parsers as opposed to XML-compilant parsers.

Live

<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

Posted 2014-05-04T21:00:14.130

Reputation: 301

1Any chance you can get it to work in firefox? – rooby – 2014-05-06T12:01:34.083

I would presume a s/-webkit/-moz/ would do (and shave off a few more characters!) but I'll look. – Ivan Vučica – 2014-05-06T19:03:51.187

Done. (And I'm not even a particularly big fan of Star Wars...) – Ivan Vučica – 2014-05-06T19:41:58.273

4

PerlMagick, 661 program + 547 text file = 1208

Too late for the anniversary, but OP said 'animated GIF', so...

TL;DR: a link to animated GIF (5 Mb, 480*240, 1360 frames) (there's a false start each time I try this link now - it's not in the file, maybe try to download it first. And some slight flickering... maybe I'll explain it later, - not a piece of cake, the whole IM and GIF idea ;) ).

With newlines and indentation for readability:

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

It reads text from STDIN, but geometry is hard-coded, so probably any other text would not be a good idea. It could be shorter, but I added fading to the text as it gets to the top, and, moving up by single pixel resulted in a choppy animation, so I did some interpolation. It eats 2.2 Gb of RAM and takes 2-3 minutes on a 8 y.o. desktop (and probably won't work for Windows folks), so here's how to get a GIF: replace (or add to) the last line (creates 200+ Mb file):

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

And then run 

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

Trade-offs between quality (palette size etc.) and final GIF size are obvious. Calling $i->Remap from PerlMagick directly doesn't work, there's probably a bug, it takes hours long as it (I think) tries +remap first. Actually, reasonable (only slightly bigger) GIF size can be achieved without global palette but using $i->Quantize which reduces each frame local palette to required size. Oh, and without any palette optimizations i.e. saving GIF from above script 'as is' produces about 9 Mb GIF file.

user2846289

Posted 2014-05-04T21:00:14.130

Reputation: 1 541

Asked: 2014-05-04T21:00:14.130

Viewed: 3 728 times

Active: 2014-10-02T09:55:33.280