Có thể thứ 4 được với bạn!


24

Để vinh danh ngày Chiến tranh giữa các vì sao , hãy viết chương trình hiển thị văn bản sau, cuộn như thu thập thông tin mở đầu Chiến tranh giữa các vì sao :

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

Bạn có thể xuất một GIF động hoặc để chương trình của bạn hiển thị nó. Đầu ra phải hiển thị như sau:

  • Văn bản phải bắt đầu từ dưới cùng của hình ảnh / màn hình
  • Nó phải cuộn lên trên cho đến khi nó đạt đến đỉnh. Phải mất ít nhất 30vài giây để một đoạn văn bản đạt đến đỉnh. Hoạt hình phải tiếp tục cho đến khi tất cả các văn bản đạt đến đỉnh.
  • Trong khoảng cách này, văn bản phải nhỏ hơn cho đến khi nó nhỏ hơn 1/3kích thước (chiều dài và phông chữ)
  • Các văn bản phải được nghiêng để theo góc độ này.
  • Các văn bản phải được trái và phải hợp lý. Văn bản được cung cấp đã được chứng minh cho các phông chữ đơn cách, tuy nhiên, bạn có thể xóa các khoảng trắng thừa (không phải dòng mới) và tự biện minh cho nó.
  • Văn bản phải có màu vàng
  • Nền phải là màu đen

Video này cho thấy thu thập thông tin mở.

Chúc may mắn, và có thể thứ tư được với bạn !


5
Thế còn "Có thể bên cạnh bạn"?
TheDoctor

@TheDoctor Đó là những gì nó đã được, nhưng tôi đã sửa lỗi chính tả. Bạn nghiêm túc nghĩ rằng tôi nên đi chơi chữ kép?
Justin

3
Forth sẽ khó thực hiện việc này.
TheDoctor

4
@TheDoctor "Để làm trong Forth, điều này sẽ khó khăn" - Yoda muốn điều đó cho bạn.
MikeTheLiar

Một điều thú vị về câu hỏi này: trước khi đăng, hệ thống đã cảnh báo tôi rằng điều này có thể bị đóng là "quá chủ quan".
Justin

Câu trả lời:


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>

Loại choppy (đọc: cực kỳ choppy: P).

Đây là một JSFiddle (có -webkit-tiền tố nhà cung cấp được thêm vào để nó hoạt động trong Chrome).


Tôi chỉ nhận ra rằng tôi quá nhiệt tình trong sự biện minh của mình. Hai đoạn đầu không cần thêm khoảng trắng trên dòng cuối cùng.
Justin

1
Ngoài ra, tôi không biết về điều này; thu thập thông tin trượt sang trái, không chỉ lên. Tôi không chấp nhận điều đó. The chppiness: okay, nhưng trượt không chỉ lên: không ổn.
Justin

3
Nó rất nhẹ với bạn? Nó rất rõ ràng với tôi. Có thể, nó hiển thị nhiều hơn trong Chrome. Đối với tôi, cạnh ngoài cùng bên trái vẫn ở cùng một bên trái, ngay cả với văn bản rất nhỏ, do đó, bên phải di chuyển rất đáng chú ý sang bên trái. Trong trường hợp đó, tôi ổn với nó. Tôi tự hỏi nó thực sự trông như thế nào ....
Justin

1
Có phải nó hoạt động trên firefox?
Pierre Arlaud

1
Bất kỳ cơ hội nào bạn có thể làm cho nó hoạt động trong firefox?
rooby

37

HTML / CSS, 1047

Tôi có thể chơi golf này nhiều hơn nữa bằng cách xóa các -webkittiền tố, v.v., nhưng điều này sẽ làm trong thời gian này:

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

Bản thử trực tiếp


1
Điều này không phá vỡ quy tắc "tuy nhiên, bạn có thể xóa các khoảng trắng thừa (không phải dòng mới) " @Quincunx?
Doorknob

2
@PaulDraper hoạt động với tôi (trong Chrome)
Martin Ender

1
@ m.buettner, lạ quá. Chrome 34 trên Ubuntu 12.04 . Có lẽ tôi sẽ báo lỗi Chrome vì điều này ...
Paul Draper

6
Không chắc tại sao, nhưng nó không hoạt động trong FireFox 29.0 trên Ubuntu 13.10 . Không liên quan đến vấn đề của @ PaulDraper (Tôi chỉ nhìn thấy một màn hình hoàn toàn đen, thỉnh thoảng có một vài vệt màu vàng và mỏng ở giữa màn hình)
IQAndreas

1
-1 đó không phải là một tệp HTML hợp lệ. Nếu bạn cố tình muốn làm cho điều này chỉ hoạt động với một phiên bản trình duyệt cụ thể thì bạn nên bao gồm tên và phiên bản của trình duyệt trong đặc tả ngôn ngữ.
Bakuriu

20

HTML + CSS + SVG 1614 1625

Tôi cũng muốn được chính xác. SVG được sử dụng để làm mặt nạ và hoạt hình. HTML + CSS được sử dụng để chuyển đổi. Tôi đã không kiểm tra nếu văn bản đạt kích thước chính xác 1/3.

Đề xuất xem trong Chrome do -webkit-tiền tố. Yêu cầu chuyển đổi CSS 3D để hoạt động; bạn có thể cần mở chrome://flagsvà chọn 'Ghi đè danh sách kết xuất phần mềm'.

Bao gồm trong bytecount là dòng mới và khoảng trống.

Cập nhật 1: Thêm hỗ trợ cho Firefox và các trình duyệt khác không cần tiền tố. Đã thêm 11 byte ngay cả sau khi dọn dẹp thêm. Dọn dẹp là có thể bởi vì các trình duyệt may mắn giải thích SVG bằng cách sử dụng các trình phân tích cú pháp phân tách HTML trái ngược với các trình phân tích cú pháp biên dịch XML.

Trực tiếp

<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
Bất kỳ cơ hội nào bạn có thể làm cho nó hoạt động trong firefox?
rooby

Tôi sẽ đoán là / -webkit / -moz / sẽ làm (và tắt thêm một vài ký tự!) Nhưng tôi sẽ xem xét.
Ivan Vučica

Làm xong. (Và tôi thậm chí không phải là một fan hâm mộ đặc biệt của Star Wars ...)
Ivan Vučica

4

PerlMagick, chương trình 661 + tập tin văn bản 547 = 1208

Quá muộn cho ngày kỷ niệm, nhưng OP đã nói 'GIF hoạt hình', vì vậy ...

TL; DR: một liên kết đến GIF hoạt hình (5 Mb, 480 * 240, 1360 khung hình) (có một khởi đầu sai mỗi lần tôi thử liên kết này ngay bây giờ - nó không có trong tệp, có thể thử tải xuống trước. ... có lẽ tôi sẽ giải thích nó sau, - không phải là một miếng bánh, toàn bộ ý tưởng IM và GIF;)).

Với dòng mới và thụt lề cho dễ đọc:

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

Nó đọc văn bản từ STDIN, nhưng hình học được mã hóa cứng, vì vậy có lẽ bất kỳ văn bản nào khác sẽ không phải là một ý tưởng tốt. Nó có thể ngắn hơn, nhưng tôi đã thêm mờ dần vào văn bản khi nó lên đến đỉnh, và, di chuyển lên bằng pixel đơn lẻ dẫn đến một hình ảnh động bị giật, vì vậy tôi đã thực hiện một số phép nội suy. Nó ngốn 2,2 Gb RAM và mất 2-3 phút trên máy tính để bàn 8 yo (và có lẽ sẽ không hoạt động cho dân Windows), vì vậy đây là cách lấy GIF: thay thế (hoặc thêm vào) dòng cuối cùng (tạo hơn 200 Tệp Mb):

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

Và sau đó chạy

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

Sự đánh đổi giữa chất lượng (kích thước bảng màu, v.v.) và kích thước GIF cuối cùng là rõ ràng. Gọi $i->Remaptrực tiếp từ PerlMagick không hoạt động, có thể có lỗi, phải mất hàng giờ vì nó (tôi nghĩ) sẽ thử +remaptrước. Trên thực tế, kích thước GIF hợp lý (chỉ lớn hơn một chút) có thể đạt được mà không cần bảng màu toàn cầu nhưng sử dụng $i->Quantizelàm giảm từng bảng màu cục bộ xuống kích thước yêu cầu. Ồ, và không có bất kỳ tối ưu hóa bảng màu nào, tức là lưu GIF từ tập lệnh trên 'như hiện tại' tạo ra tệp GIF khoảng 9 Mb.

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.