Semoga yang ke 4 bersama Anda!

24

Untuk menghormati hari Star Wars , tulis sebuah program untuk menampilkan teks berikut, gulir seperti perayapan pembukaan 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...

Anda dapat menampilkan GIF animasi atau membuat program Anda menampilkannya. Output harus menunjukkan yang berikut:

  • Teks harus dimulai dari bagian bawah gambar / tampilan
  • Itu harus menggulir ke atas hingga mencapai bagian atas. Setidaknya perlu beberapa 30detik agar selembar teks mencapai bagian atas. Animasi harus berlanjut sampai semua teks mencapai puncak.
  • Dalam jarak ini, teks harus menjadi lebih kecil hingga kurang dari 1/3ukuran (panjang dan font)
  • Teks harus miring untuk mengikuti sudut ini.
  • Teks harus dibenarkan kiri dan kanan. Teks yang diberikan sudah dibenarkan untuk font monospace, namun, Anda dapat menghapus spasi tambahan (bukan baris baru) dan membenarkannya sendiri.
  • Teksnya harus kuning
  • Latar belakang harus hitam

Video ini menunjukkan merangkak pembukaan.

Semoga beruntung, dan Semoga yang keempat bersama Anda !

code-golf graphical-output kolmogorov-complexity animation Justin
sumber
5
Bagaimana dengan "Semoga yang keempat bersamamu"?
TheDoctor
@ TheDoctor Begitulah, tapi saya memperbaiki kesalahan ketik. Anda serius berpikir bahwa saya harus pergi untuk permainan kata-kata ganda?
Justin
3
Keempat akan sulit untuk melakukan ini masuk
TheDoctor
4
@TheDoctor "Untuk dilakukan di Forth, ini sulit" - Yoda'd untuk Anda.
MikeTheLiar
Satu hal yang menyenangkan tentang pertanyaan ini: sebelum memposting, sistem memperingatkan saya bahwa ini mungkin ditutup sebagai "terlalu subjektif".
Justin

Jawaban:

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>

Jenis berombak (baca: sangat berombak: P).

Inilah JSFiddle (dengan -webkit-awalan vendor ditambahkan sehingga berfungsi di Chrome).

Gagang pintu
sumber
Saya baru menyadari bahwa saya terlalu bersemangat dalam pembenaran saya. Dua paragraf pertama tidak membutuhkan spasi tambahan pada baris terakhir.
Justin
1
Juga, saya tidak tahu tentang ini; perayapan meluncur ke kiri, bukan hanya ke atas. Saya tidak menerimanya. Choppiness: oke, tapi sliding bukan hanya naik: tidak oke.
Justin
3
Sangat sedikit bagimu? Sangat jelas bagi saya. Mungkin, lebih terlihat di Chrome. Bagi saya, ujung paling kiri tetap di kiri yang sama, bahkan dengan teks yang sangat kecil, sehingga yang paling kanan bergerak sangat terasa ke kiri. Kalau begitu, aku baik-baik saja dengan itu. Aku ingin tahu seperti apa rupanya ....
Justin
1
Apakah ini seharusnya bekerja pada firefox?
Pierre Arlaud
1
Apakah Anda bisa menggunakannya di firefox?
rooby
37

HTML / CSS, 1047

Saya bisa bermain golf ini lebih banyak dengan menghapus -webkitawalan dll, tetapi ini akan lakukan untuk saat ini:

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

osifrque melengking
sumber
1
Bukankah ini melanggar aturan "namun, Anda dapat menghapus spasi tambahan (bukan baris baru) " @Quincunx?
Gagang Pintu
2
@PaulDraper bekerja untuk saya (di Chrome)
Martin Ender
1
@ m.buettner, aneh. Chrome 34 di Ubuntu 12.04 . Mungkin saya akan mengajukan bug Chrome karena ini ...
Paul Draper
6
Tidak yakin mengapa, tetapi tidak berfungsi di FireFox 29.0 di Ubuntu 13.10 . Tidak terkait dengan masalah @ PaulDraper (Saya hanya melihat layar yang benar-benar hitam, dengan beberapa garis kuning tipis yang
berkedip
1
-1 yang bukan file HTML yang valid. Jika Anda secara sengaja ingin membuat ini hanya berfungsi dengan versi browser tertentu maka Anda harus memasukkan nama dan versi browser dalam spesifikasi bahasa.
Bakuriu
20

HTML + CSS + SVG 1614 1625

Saya ingin benar secara visual juga. SVG digunakan untuk masking dan animasi. HTML + CSS digunakan untuk transformasi. Saya tidak memeriksa apakah teksnya berukuran tepat 1/3.

Disarankan melihat di Chrome karena -webkit- awalan. Membutuhkan transformasi 3D CSS untuk bekerja; Anda mungkin perlu membukachrome://flags dan memilih 'Override software rendering list'.

Termasuk dalam bytecount adalah baris baru dan kosong.

Pembaruan 1: Menambahkan dukungan untuk Firefox dan peramban lain yang tidak memerlukan awalan. Menambahkan 11 byte bahkan setelah pembersihan lebih lanjut. Pembersihan dimungkinkan karena browser untungnya menafsirkan SVG menggunakan parser pengurai HTML yang bertentangan dengan parser kompilasi-XML.

Hidup

<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
sumber
1
Apakah Anda bisa menggunakannya di firefox?
rooby
Saya akan menganggap sebagai / -webkit / -moz / akan dilakukan (dan mencukur beberapa karakter!) Tapi saya akan melihat.
Ivan Vučica
Selesai (Dan saya bahkan bukan penggemar berat Star Wars ...)
Ivan Vučica
4

PerlMagick, 661 program + 547 file teks = 1208

Terlambat untuk ulang tahun, tetapi OP mengatakan 'animasi GIF', jadi ...

TL; DR: tautan ke GIF animasi (5 Mb, 480 * 240, 1360 bingkai) (ada awal yang salah setiap kali saya mencoba tautan ini sekarang - tidak ada dalam file, mungkin coba unduh dulu. Dan beberapa berkedip sedikit ... mungkin saya akan jelaskan nanti, - bukan sepotong kue, seluruh ide IM dan GIF;)).

Dengan baris baru dan lekukan agar mudah dibaca:

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

Bunyinya teks dari STDIN, tetapi geometri adalah kode-keras, jadi mungkin teks lain tidak akan menjadi ide yang baik. Bisa jadi lebih pendek, tetapi saya menambahkan fading ke teks saat sampai ke atas, dan, bergerak naik dengan satu piksel menghasilkan animasi berombak, jadi saya melakukan interpolasi. Ini memakan 2,2 Gb RAM dan membutuhkan 2-3 menit pada desktop 8 tahun (dan mungkin tidak akan bekerja untuk orang Windows), jadi inilah cara untuk mendapatkan GIF: ganti (atau tambahkan) baris terakhir (buat 200+ File Mb):

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

Dan kemudian jalankan 

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

Pertukaran antara kualitas (ukuran palet dll.) Dan ukuran akhir GIF sudah jelas. Memanggil $i->Remapdari PerlMagick secara langsung tidak berfungsi, mungkin ada bug, butuh berjam-jam lamanya (saya pikir) mencoba +remapterlebih dahulu. Sebenarnya, ukuran GIF yang masuk akal (hanya sedikit lebih besar) dapat dicapai tanpa palet global tetapi menggunakan $i->Quantizeyang mengurangi setiap bingkai palet lokal ke ukuran yang diperlukan. Oh, dan tanpa optimasi palet yaitu menyimpan GIF dari skrip di atas 'apa adanya' menghasilkan sekitar 9 Mb file GIF.

pengguna2846289
sumber