ขอให้คุณอยู่กับคุณ!

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 
— จัสติน
แหล่งที่มา
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)

— ลูกบิดประตู
แหล่งที่มา
ฉันเพิ่งรู้ว่าฉันเป็นคนขยันในการให้เหตุผล สองย่อหน้าแรกไม่ต้องการช่องว่างเพิ่มเติมในบรรทัดสุดท้าย
— Justin
1
นอกจากนี้ฉันไม่รู้เกี่ยวกับสิ่งนี้; คลานไปทางซ้ายไม่ใช่แค่ขึ้น ฉันไม่ยอมรับสิ่งนั้น ความไม่แน่นอน: โอเค แต่การเลื่อนไม่ใช่แค่ขึ้น: ไม่เป็นไร
— Justin
3
มันเป็นเรื่องเล็กน้อยสำหรับคุณเหรอ? มันชัดเจนมากสำหรับฉัน อาจเป็นไปได้ว่า Chrome จะมองเห็นได้ชัดเจนขึ้น สำหรับฉันขอบซ้ายสุดยังคงเดิมเหมือนเดิมแม้จะมีตัวหนังสือเล็กมากดังนั้นการเคลื่อนไหวขวาสุดจะสังเกตได้อย่างชัดเจน ในกรณีนี้ฉันสบายดี ฉันสงสัยว่ามันมีลักษณะเป็นอย่างไร ....
— Justin
1
ควรทำงานกับ firefox หรือไม่?
— Pierre Arlaud
1
โอกาสใดที่คุณสามารถทำให้มันทำงานใน Firefox ได้?
— 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)
— มาร์ตินเอนเดอร์
1
@ m.buettner แปลก Chrome 34 บน Ubuntu 12.04 บางทีผมอาจจะยื่นข้อผิดพลาด Chrome ด้วยเหตุนี้ ...
— พอลผัก
6
ไม่แน่ใจว่าทำไม แต่มันไม่ทำงานในFireFox 29.0ในUbuntu 13.10 ไม่เกี่ยวข้องกับปัญหาของ @ PaulDraper (ฉันเพิ่งเห็นหน้าจอสีดำสนิทโดยมีบางครั้งกะพริบและมีสีเหลืองบาง ๆ อยู่ตรงกลางของหน้าจอ)
— IQAndreas
1
-1 ที่ไม่ใช่ไฟล์ HTML ที่ถูกต้อง หากคุณต้องการทำให้มันใช้งานได้กับเบราว์เซอร์รุ่นใดรุ่นหนึ่งโดยเฉพาะคุณควรระบุชื่อและเวอร์ชันของเบราว์เซอร์ในข้อมูลจำเพาะภาษา
— Bakuriu
20

HTML + CSS + SVG 1614 1625

ฉันต้องการแก้ไขสายตาด้วยเช่นกัน SVG ใช้สำหรับปิดบังและแอนิเมชัน HTML + CSS ใช้สำหรับการแปลง ฉันไม่ได้ตรวจสอบว่าข้อความมีขนาดใหญ่ถึง 1/3 หรือไม่

แนะนำให้รับชมใน Chrome เนื่องจาก-webkit-คำนำหน้า ต้องการการแปลง CSS 3D เพื่อทำงาน คุณอาจต้องเปิดchrome://flagsและเลือก 'แทนที่รายการการแสดงผลซอฟต์แวร์'

รวมอยู่ใน bytecount เป็นบรรทัดใหม่และช่องว่าง

อัปเดต 1: เพิ่มการรองรับ Firefox และเบราว์เซอร์อื่น ๆ ที่ไม่ต้องการคำนำหน้า เพิ่ม 11 ไบต์แม้หลังจากการล้างข้อมูลเพิ่มเติม การล้างข้อมูลเป็นไปได้เนื่องจากเบราว์เซอร์โชคดีที่แปล SVG โดยใช้ตัวแยกวิเคราะห์ HTML ที่มีการบีบอัดซึ่งต่างจากตัวแยกวิเคราะห์ XML ที่เข้ากันได้

มีชีวิต

<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
แหล่งที่มา
1
โอกาสใดที่คุณสามารถทำให้มันทำงานใน Firefox ได้?
— rooby
ฉันจะสันนิษฐานว่าเป็น / -webkit / -moz / จะทำ (และกำจัดตัวละครออกไปอีกสองสามตัว!
— Ivan Vučica
เสร็จสิ้น (และฉันไม่ได้เป็นแฟนตัวยงของ Star Wars ... )
— Ivan Vučica
4

PerlMagick, 661 โปรแกรม + ไฟล์ข้อความ 547 = 1208

สายเกินไปสำหรับวันครบรอบ แต่ OP กล่าวว่า 'Animated 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 แต่รูปทรงเรขาคณิตเป็นโค้ดยากดังนั้นข้อความอื่น ๆ อาจไม่ใช่ความคิดที่ดี มันอาจจะสั้นกว่านี้ แต่ฉันเพิ่มการซีดจางลงไปที่ข้อความเมื่อถึงจุดสูงสุดและการเลื่อนขึ้นทีละพิกเซลทำให้เกิดภาพเคลื่อนไหวที่ขาด ๆ หาย ๆ ดังนั้นฉันจึงทำการแก้ไขบางอย่าง กิน RAM 2.2 Gb และใช้เวลา 2-3 นาทีบนเดสก์ท็อป 8 yo (และอาจไม่สามารถใช้กับ Windows folks ได้) ต่อไปนี้เป็นวิธีรับ 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 จากสคริปต์ด้านบน 'ตามที่เป็น' จะสร้างไฟล์ GIF ประมาณ 9 Mb

— user2846289
แหล่งที่มา
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.