4日はあなたと共にありますように！

24

スターウォーズの日を記念して、次のテキストを表示するプログラムを作成し、スターウォーズのオープニングクロールのようにスクロールします。

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

アニメーションGIFを出力するか、プログラムに表示させることができます。出力は次を示す必要があります：

  • テキストは画像/ディスプレイの下部から始まる必要があります
  • 上部に達するまで上にスクロールする必要があります。30テキストが最上部に到達するまで少なくとも数秒かかります。すべてのテキストが最上部に到達するまでアニメーションを継続する必要があります。
  • この距離では、テキスト1/3はサイズ（長さとフォント）より小さくなるまで小さくする必要があります
  • この角度に合わせてテキストを傾ける必要があります。
  • テキストは左右に揃える必要があります。与えられたテキストは、等幅フォント用にすでに正当化されていますが、余分なスペース（改行ではない）を削除して、自分で正当化することができます。
  • テキストは黄色でなければなりません
  • 背景は黒でなければなりません

このビデオは、開始クロールを示しています。

幸運を祈ります。4 回目はあなたと一緒です。

code-golf  graphical-output  kolmogorov-complexity  animation 
— ジャスティン
ソース
5
「あなたと一緒に前に行けますか」はどうですか？
— TheDoctor
@TheDoctorそれはそうでしたが、タイプミスを修正しました。あなたは私が二重しゃれに行くべきだと真剣に考えていますか？
— ジャスティン
3
フォースこれで操作を行うことは困難である。
— TheDoctor
4
@TheDoctor「Forthでやるのは難しいだろう」-ヨーダはあなたのためにそれをした。
— MikeTheLiar
この質問についての1つの面白いこと：投稿する前に、システムはこれが「主観的すぎる」として閉じられるかもしれないと私に警告しました。
— ジャスティン

回答:

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>

途切れ途切れの種類（読み取り：非常に途切れ途切れ：P）。

これがJSFiddleです（-webkit-ベンダープレフィックスが追加されているため、Chromeで動作します）。

— ドアノブ
ソース
私は自分の正当化に熱中していることに気づきました。最初の2つの段落では、最後の行に余分なスペースは必要ありません。
— ジャスティン
1
また、これについては知りません。クロールは左だけではなく、上にスライドします。私はそれを受け入れません。ぎこちない：大丈夫、しかし、スライドだけではなく：大丈夫。
— ジャスティン
3
それはあなたにとってとても些細なことですか？それは私にはとても明白です。おそらく、Chromeでより見やすくなります。私にとって、左端は非常に小さなテキストでも同じ左に留まるため、右端は非常に顕著に左に移動します。その場合、私はそれでいいです。私はそれが本当に....のように見えるのだろうか
— ジャスティン・
1
Firefoxで動作するはずですか？
— ピエールアラード
1
Firefoxで動作する可能性はありますか？
— ルービー
37

HTML / CSS、1047

-webkitプレフィックスなどを削除することでもっとゴルフをすることができますが、当面はこれで十分でしょう：

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

ライブデモ

— きしむ
ソース
1
これは「ただし、余分なスペース（改行ではなく）を削除してもよい」@Quincunxのルールに違反しませんか？
— ドアノブ
2
@PaulDraperは私のために働いています（Chromeで）
— マーティン・エンダー
1
@ m.buettner、変だ。Ubuntu 12.04上のChrome 34。おそらく、私は...このためにクロームバグを報告します
— ポール・ドレイパー
6
理由はわかりませんが、Ubuntu 13.10のFireFox 29.0では機能しません。@PaulDraperの問題とは関係ありません（画面の真ん中にときどきちらつきと薄い黄色の縞模様がある、完全に黒い画面が表示されています）
— IQAndreas
1
-1は有効なHTMLファイルではありません。特定のバージョンのブラウザでのみこれを機能させたい場合は、言語仕様にブラウザの名前とバージョンを含める必要があります。
— バクリウ
20

HTML + CSS + SVG 1614 1625

私も視覚的に正しいことを望みました。マスキングとアニメーションに使用されるSVG。変換に使用されるHTML + CSS。テキストが正確に1/3サイズになるかどうかはチェックしませんでした。

-webkit-プレフィックスのため、Chromeでの表示を推奨。動作するにはCSS 3D変換が必要です。chrome://flags「ソフトウェアレンダリングリストのオーバーライド」を開いて選択する必要がある場合があります。

バイトカウントには、改行と空白が含まれます。

更新1：Firefoxや、プレフィックスを必要としない他のブラウザーのサポートを追加します。さらにクリーンアップした後でも11バイトが追加されました。ブラウザーは、XMLコンパイルパーサーではなくHTMLクランチパーサーを使用して幸運にもSVGを解釈するため、クリーンアップが可能になりました。

ライブ

<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%;                                                                   
}
— イワン・ヴチカ
ソース
1
Firefoxで動作する可能性はありますか？
— ルービー
私は/ -webkit / -moz /がそうするだろうと推測します（そして、さらにいくつかのキャラクターを剃り落とします！）が、私は見ます。
— イヴァンヴチカ
できた （そして、私は特にスターウォーズの大ファンでもない...）
— イヴァン・ヴチカ
4

PerlMagick、661プログラム+ 547テキストファイル= 1208

記念日には遅すぎますが、OPは「アニメーションGIF」と言ったため、...

TL; DR：アニメーションGIFへのリンク（5 Mb、480 * 240、1360フレーム）（このリンクを試すたびに間違ったスタートがあります-ファイルにないので、最初にダウンロードしてみてください。 ...多分、後で説明します-ケーキではなく、IMとGIFのアイデア全体;））。

読みやすくするために改行とインデントを使用：

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

STDINからテキストを読み取りますが、ジオメトリはハードコーディングされているため、おそらく他のテキストはお勧めできません。短くすることもできますが、テキストが上に行くにつれてフェードを追加し、1ピクセル上に移動するとアニメーションが途切れるので、補間を行いました。2.2 GbのRAMを消費し、8年のデスクトップで2〜3分かかります（Windowsの場合はおそらく動作しません）。したがって、GIFを取得する方法は次のとおりです。最後の行を置換（または追加）（200+ Mbファイル）：

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

そして、実行します 

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

品質（パレットサイズなど）と最終的なGIFサイズのトレードオフは明らかです。$i->RemapPerlMagickから直接呼び出しても機能しません。おそらくバグがあります+remap。最初に試行するのに数時間かかると思います。実際には、グローバルパレットがなくても合理的な（わずかに大きい）GIFサイズを実現できますが、$i->Quantizeこれを使用すると、各フレームのローカルパレットが必要なサイズに縮小されます。ああ、パレットを最適化せずに、つまり上記のスクリプトからGIFを「そのまま」保存すると、約9 MbのGIFファイルが生成されます。

— user2846289
ソース
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.