네 번째가 함께 할 수 있기를 바랍니다!

24

Star Wars day를 기리기 위해 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...

애니메이션 GIF를 출력하거나 프로그램에 표시 할 수 있습니다. 출력에는 다음이 표시되어야합니다.

  • 텍스트는 이미지 / 디스플레이 하단에서 시작해야합니다.
  • 상단에 도달 할 때까지 위로 스크롤해야합니다. 30텍스트가 맨 위에 도달하는 데 최소 몇 초가 걸립니다. 모든 텍스트가 맨 위에 도달 할 때까지 애니메이션이 계속되어야합니다.
  • 이 거리에서 텍스트는 1/3크기 (길이 및 글꼴) 보다 작을 때까지 작아야 합니다.
  • 이 각도를 따르려면 텍스트를 기울여야합니다.
  • 텍스트는 왼쪽과 오른쪽으로 정렬되어야합니다. 주어진 텍스트는 이미 고정 폭 글꼴에 적합하지만 추가 공백 (줄 바꿈 제외)을 제거하고 직접 정렬 할 수 있습니다.
  • 텍스트는 노란색이어야합니다
  • 배경은 검은 색이어야합니다

이 비디오 는 오프닝 크롤링을 보여줍니다.

행운을 빌어 요, 그리고 당신과 함께 5 월 넷째 BE !

code-golf  graphical-output  kolmogorov-complexity  animation 
— 저스틴
소스
5
"앞으로 당신과 함께 할 수 있습니까"?
— TheDoctor
@TheDoctor 그것이 그랬지만 오타를 수정했습니다. 내가 이중 말장난에 가야한다고 진심으로 생각하니?
— Justin
3
넷째는 이것을하기가 어려울 것이다.
— TheDoctor
4
@TheDoctor "Forth에서하기 위해서는 어려울 것입니다."-Yoda는 당신을 위해 그것을했습니다.
— MikeTheLiar
이 질문에 대한 한 가지 재미있는 점은 게시하기 전에 시스템이 "너무 주관적"으로 닫힐 수 있다는 경고입니다.
— Justin

답변:

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에서 작동 함).

— 손잡이
소스
나는 정당화에 열심 인 것을 깨달았습니다. 처음 두 단락은 마지막 줄에 추가 공백이 필요하지 않습니다.
— 저스틴
1
또한 나는 이것에 대해 모른다. 크롤링은 위쪽이 아니라 왼쪽으로 미끄러집니다. 나는 그것을 받아들이지 않습니다. 다름 : 괜찮아요.하지만 슬라이딩은 위가 아니라 괜찮습니다.
— Justin
3
당신에게 너무 경미합니까? 그것은 나에게 매우 분명하다. 아마도 Chrome에서 더 잘 보입니다. 나에게 가장 작은 텍스트라도 가장 왼쪽 가장자리는 같은 왼쪽으로 유지되므로 가장 오른쪽은 왼쪽으로 매우 눈에 띄게 움직입니다. 이 경우에는 괜찮습니다. 나는 그것이 실제로 어떻게 생겼는지 궁금합니다 ....
— Justin
1
파이어 폭스에서 작동합니까?
— Pierre Arlaud
1
파이어 폭스에서 작동하게 할 수 있습니까?
— rooby
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>

라이브 데모

— 으스스한 ossifrage
소스
1
이것이 규칙을 위반 하지 않더라도 "Quincunx"(여기서는 줄 바꿈이 아닌 추가 공백을 제거 할 수 있습니까?)
— Doorknob
2
@PaulDraper가 나를 위해 일합니다 (Chrome에서)
— Martin Ender
1
@ m.buettner, 이상하다. Ubuntu 12.04의 Chrome 34 . 아마도 이것 때문에 크롬 버그
— Paul Draper
6
확실하지 왜,하지만 작동하지 않습니다 파이어 폭스 29.0 에 우분투 13.10 . @ PaulDraper의 문제와 관련이 없음 (난 그냥 화면의 중간에 일부 가끔 flittering 얇은 노란색 줄무늬와 함께, 완전히 검은 화면을보고 있어요)
— IQAndreas
1
-1 유효한 HTML 파일이 아닙니다. 의도적으로 특정 브라우저 버전에서만 작동하게하려면 언어 사양에 브라우저의 이름과 버전을 포함시켜야합니다.
— Bakuriu
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
파이어 폭스에서 작동하게 할 수 있습니까?
— rooby
나는 / -webkit / -moz /가 할 것이라고 가정하고 (그리고 더 많은 문자를 깎을 것입니다!)하지만 내가 볼 것입니다.
— Ivan Vučica
끝난. (그리고 나는 스타 워즈의 팬도 아니고 ...)
— Ivan Vučica
4

PerlMagick, 661 프로그램 + 547 텍스트 파일 = 1208

기념일에 너무 늦었지만 OP는 '애니메이션 GIF'라고 말했습니다.

TL; DR : 애니메이션 GIF 링크 (5Mb, 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.2Gb의 RAM을 사용하고 8 yo 데스크톱에서 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를 저장하면 약 9Mb GIF 파일이 생성됩니다.

— 사용자 2846289
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.