Que o dia 4 esteja com você!

24

Em homenagem ao dia de Guerra nas Estrelas , escreva um programa para exibir o seguinte texto, rolando como o rastreamento de abertura de Guerra nas Estrelas :

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

Você pode gerar um GIF animado ou exibir seu programa. A saída deve mostrar o seguinte:

  • O texto deve começar na parte inferior da imagem / exibição
  • Ele deve rolar para cima até chegar ao topo. Deve levar pelo menos 30segundos para um pedaço de texto chegar ao topo. A animação deve continuar até que todo o texto chegue ao topo.
  • A essa distância, o texto deve ficar menor até que seja menor que 1/3o tamanho (comprimento e fonte)
  • O texto deve estar inclinado para seguir esse ângulo.
  • O texto deve ser deixado à direita e justificado. O texto fornecido já está justificado para fontes monoespaçadas, no entanto, você pode remover os espaços extras (não as novas linhas) e justificar você mesmo.
  • O texto deve ser amarelo
  • O fundo deve ser preto

Este vídeo mostra o rastreamento de abertura.

Boa sorte, e que o quarto esteja com você !

code-golf  graphical-output  kolmogorov-complexity  animation 
— Justin
fonte
5
Que tal "Que o quarto esteja com você"?
— TheDoctor
@ TheDoctor Era o que era, mas corrigi o erro de digitação. Você acha mesmo que eu deveria dar o duplo trocadilho?
— 4603 Justin
3
Quarto seria difícil fazer isso.
— TheDoctor
4
@ TheDoctor "Para fazer em Forth, seria difícil" - Yoda fez isso por você.
— MikeTheLiar
Uma coisa divertida sobre essa pergunta: antes de postar, o sistema me avisou que isso poderia ser fechado como "muito subjetivo".
— 5137 Justin

Respostas:

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>

Meio instável (leia-se: extremamente instável: P).

Aqui está um JSFiddle (com -webkit-prefixos de fornecedores adicionados para que funcione no Chrome).

— Maçaneta da porta
fonte
Acabei de perceber que era excessivamente zeloso em minha justificativa. Os dois primeiros parágrafos não precisam de espaços extras na última linha.
— Justin
11
Além disso, eu não sei sobre isso; o rastreamento desliza para a esquerda, não apenas para cima. Eu não aceito isso. A picada: ok, mas o deslizamento não apenas para cima: não está bem.
— Justin
3
É tão leve para você? É muito aparente para mim. Possivelmente, é mais visível no Chrome. Para mim, a borda mais à esquerda permanece na mesma esquerda, mesmo com texto muito pequeno, portanto a mais à direita se move visivelmente para a esquerda. Nesse caso, eu estou bem com isso. Gostaria de saber o que realmente se parece ....
— Justin
11
É suposto funcionar no firefox?
— Pierre Arlaud 5/05
11
Alguma chance de conseguir fazê-lo funcionar no firefox?
— rooby
37

HTML / CSS, 1047

Eu poderia jogar muito mais com a exclusão dos -webkitprefixos, etc., mas isso funcionará por enquanto:

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

Demonstração ao vivo

— ossifrage melindroso
fonte
11
Isso não viola a regra ", no entanto, você pode remover os espaços extras (não as novas linhas) " @Quincunx?
— Maçaneta da porta
2
O @PaulDraper funciona para mim (no Chrome)
— Martin Ender
11
@ m.buettner, estranho. Chrome 34 no Ubuntu 12.04 . Talvez eu vou apresentar um bug Chrome por causa disso ...
— Paul Draper
6
Não sei por que, mas não funciona no FireFox 29.0 no Ubuntu 13.10 . Não relacionados com a @ da pauldraper problema (estou apenas vendo uma tela totalmente preta, com algum flittering ocasional e streak fina amarela no meio da tela)
— IQAndreas
11
-1 que não é um arquivo HTML válido. Se você intencionalmente quis fazer isso funcionar apenas com uma versão específica do navegador, inclua o nome e a versão do navegador na especificação do idioma.
— Bakuriu 5/05
20

HTML + CSS + SVG 1614 1625

Eu também queria estar visualmente correto. SVG usado para mascaramento e animação. HTML + CSS usado para transformações. Não verifiquei se o texto atinge exatamente 1/3 do tamanho.

Visualização recomendada no Chrome devido ao -webkit-prefixo. Requer CSS 3D transforma para funcionar; pode ser necessário abrir chrome://flagse selecionar 'Substituir lista de renderização de software'.

Estão incluídas no bytecount novas linhas e espaços em branco.

Atualização 1: Adicionando suporte ao Firefox e outros navegadores que não precisam de prefixos. Adicionado 11 bytes, mesmo após limpeza adicional. A limpeza foi possível porque os navegadores, por sorte, interpretam o SVG usando analisadores de trituração de HTML em vez de analisadores de compilador de XML.

Viver

<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
fonte
11
Alguma chance de conseguir fazê-lo funcionar no firefox?
— rooby
Eu presumiria como / -webkit / -moz / faria (e rasparia mais alguns caracteres!), Mas vou olhar.
— Ivan Vučica
Feito. (E eu não sou mesmo um particularmente grande fã de Star Wars ...)
— Ivan Vučica
4

PerlMagick, programa 661 + 547 arquivos de texto = 1208

Tarde demais para o aniversário, mas o OP disse 'GIF animado', então ...

TL; DR: um link para o GIF animado (5 Mb, 480 * 240, 1360 quadros) (há um início falso cada vez que tento este link agora - ele não está no arquivo, talvez tente baixá-lo primeiro. ... talvez eu explique depois - não um pedaço de bolo, toda a ideia de mensagens instantâneas e GIF;)).

Com novas linhas e recuo para facilitar a leitura:

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

Ele lê texto de STDIN, mas a geometria é codificada, então provavelmente qualquer outro texto não seria uma boa idéia. Poderia ser mais curto, mas adicionei o desbotamento ao texto à medida que ele chega ao topo e, movendo-se por um único pixel, resultou em uma animação irregular, fiz uma interpolação. Ele consome 2,2 Gb de RAM e leva de 2 a 3 minutos em uma área de trabalho de 8 anos (e provavelmente não funcionará para os usuários do Windows), então veja como obter um GIF: substitua (ou adicione) a última linha (cria mais de 200 Mb):

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

E então corra 

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

As trocas entre qualidade (tamanho da paleta etc.) e tamanho final do GIF são óbvias. Telefonar $i->Remapdiretamente do PerlMagick não funciona, provavelmente há um bug, leva horas enquanto ele (eu acho) tenta +remapprimeiro. Na verdade, é possível obter um tamanho GIF razoável (apenas um pouco maior) sem a paleta global, mas usando o $i->Quantizeque reduz cada paleta local do quadro ao tamanho necessário. Ah, e sem nenhuma otimização da paleta, ou seja, salvar o GIF do script acima 'como está' produz cerca de 9 Mb de arquivo GIF.

— user2846289
fonte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.