愿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大小（长度和字体）为止
  • 文本必须倾斜以符合此角度。
  • 文本必须左右对齐。给定的文本已经为等宽字体辩解，但是，您可以删除多余的空格（而不是换行符）并自己进行辩解。
  • 文字必须为黄色
  • 背景必须为黑色

该视频显示了开始爬网。

祝你好运，愿第四次与您同在！

code-golf  graphical-output  kolmogorov-complexity  animation 
— 贾斯汀
source
5
那“愿第四次与您同在”呢？
— TheDoctor 2014年
@TheDoctor就是这样，但我修复了错字。您认真地认为我应该去双关语吗？
— 贾斯汀2014年
3
Forth很难做到这一点
— 。– TheDoctor 2014年
4
@TheDoctor“要在Forth中做，这很困难”-尤达（Yoda）为您准备。
— MikeTheLiar 2014年
关于这个问题的一个有趣的事情是：在发布之前，系统警告我这可能会因为“过于主观”而关闭。
— 贾斯汀2014年

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>

有点断断续续（请阅读：非常断断续续：P）。

这是一个JSFiddle（-webkit-添加了供应商前缀，因此可以在Chrome中使用）。

— 门把手
source
我只是意识到我对自己的理由过于热心。前两段在最后一行不需要多余的空格。
— 贾斯汀
1
另外，我对此一无所知。爬网向左滑动，而不仅仅是向上滑动。我不接受。断断续续：可以，但滑动不只是向上：不可以。
— 贾斯汀
3
对你来说太微不足道了吗？对我来说很明显。可能在Chrome中更明显。对我来说，即使是很小的文字，最左边也保持相同的左边度，因此最右边向左移动非常明显。在那种情况下，我很好。我不知道它到底是什么样子
— 贾斯汀
1
它应该在Firefox上工作吗？
— 皮埃尔·阿劳德
1
您有机会在Firefox中使用它吗？
— rooby，2014年
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>

现场演示

— 吱吱作响的骨
source
1
这是否违反了“但是，您可以删除多余的空格（而不是换行符） ” @ Quincunx的规则？
— 门把手
2
@PaulDraper为我工作（在Chrome中）
— Martin Ender
1
@ m.buettner，很奇怪。Ubuntu 12.04上的Chrome 34。也许因为这个原因，我会提交一个Chrome错误...
— Paul Draper 2014年
6
不知道为什么，但是在Ubuntu 13.10上的FireFox 29.0中不起作用。与@PaulDraper的问题无关（我只是看到一个全黑的屏幕，屏幕中间偶尔出现一些抖动和黄色条纹）
— IQAndreas 2014年
1
-1无效的HTML文件。如果您有意使它仅适用于特定的浏览器版本，则应在语言规范中包括浏览器的名称和版本。
— 巴库里2014年
20

HTML + CSS + SVG 1614 1625

我也想在视觉上正确。SVG用于遮罩和动画。用于转换的HTML + CSS。我没有检查文本是否精确到1/3大小。

由于-webkit-前缀，建议在Chrome中查看。需要CSS 3D转换才能工作；您可能需要打开chrome://flags并选择“替代软件渲染列表”。

字节数中包括换行符和空格。

更新1：添加对Firefox和其他不需要前缀的浏览器的支持。即使经过进一步清理也增加了11个字节。之所以可以进行清理，是因为浏览器幸运地使用HTML解析器而不是XML解析器来解释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%;                                                                   
}
— 伊凡·武恰卡（IvanVučica）
source
1
您有机会在Firefox中使用它吗？
— rooby，2014年
我以为/ -webkit / -moz /会做（并剃掉一些字符！），但是我会看的。
— 伊万·武恰卡（IvanVučica）2014年
做完了 （而且我甚至都不是《星球大战》的
— 忠实拥护者
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读取文本，但是几何是硬编码的，因此可能其他任何文本都不是一个好主意。它可能会更短，但是我在到达顶部时在文本上添加了淡入淡出，并且向上移动单个像素会导致断断续续的动画，因此我进行了一些插值。它占用了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->Remap直接从PerlMagick 调用是行不通的，可能是一个错误，它（我认为）+remap首先尝试会花费几个小时。实际上，可以在没有全局调色板的情况下实现合理的（仅稍大一点）GIF大小，但是使用$i->Quantize它可以将每个帧的局部调色板减小到所需的大小。哦，并且没有任何调色板优化，即从上述脚本“按原样”保存GIF会生成大约9 Mb的GIF文件。

— 用户名
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.