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 Джастин
источник
5
А как насчет "да будет четвертый с тобой"?
Доктор
@TheDoctor Это то, что было, но я исправил опечатку. Вы серьезно думаете, что я должен пойти на двойной каламбур?
Джастин
3
Далее будет сложно сделать это в.
TheDoctor
4
@TheDoctor "Делать в Forth, это будет сложно" - Йода, это для вас.
MikeTheLiar
Одна забавная вещь в этом вопросе: перед публикацией система предупредила меня, что это может быть закрыто как «слишком субъективно».
Джастин

Ответы:

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
Кроме того, я не знаю об этом; ползание скользит влево, а не только вверх. Я не принимаю это. Порывистость: хорошо, но скольжение не только вверх: не хорошо.
Джастин
3
Это так мало для вас? Это очень очевидно для меня. Возможно, это более заметно в Chrome. Для меня крайний левый край остается прежним, даже с очень маленьким текстом, поэтому крайний правый край очень заметно перемещается влево. В этом случае я в порядке с этим. Интересно, как это выглядит на самом деле ...
Джастин
1
Это должно работать на Firefox?
Пьер Арло
1
Есть ли шанс, что вы сможете заставить его работать в Firefox?
Роби
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>

Live демо

брезгливый оссифраж
источник
1
Не нарушает ли это правило «однако, вы можете удалить лишние пробелы (не переводы строк) » @Quincunx?
Дверная ручка
2
@PaulDraper работает для меня (в Chrome)
Мартин Эндер
1
@ m.buettner, странно. Chrome 34 на Ubuntu 12.04 . Возможно, я отправлю сообщение об ошибке Chrome из-за этого ...
Пол Дрейпер
6
Не знаю почему, но это не работает в FireFox 29.0 на Ubuntu 13.10 . Не связано с проблемой @ PaulDraper (я просто вижу полностью черный экран, с некоторыми случайными мерцающими и тонкими желтыми полосами в середине экрана)
IQAndreas
1
-1 это не правильный файл HTML. Если вы намеренно хотели, чтобы это работало только с определенной версией браузера, вам следует указать имя и версию браузера в спецификации языка.
Бакуриу
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%;                                                                   
}
Иван Вучица
источник
1
Есть ли шанс, что вы сможете заставить его работать в Firefox?
Роби
Я бы предположил, как / -webkit / -moz / (и сбрил бы еще несколько символов!), Но я посмотрю.
Иван Вучица
Выполнено. (И я даже не особенно большой поклонник Звездных войн ...)
Иван Вучица,
4

PerlMagick, 661 программа + 547 текстовый файл = 1208

Слишком поздно для юбилея, но ОП сказал «анимированный GIF», так что ...

TL; DR: ссылка на анимированный GIF (5 Мб, 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 ГБ ОЗУ и занимает 2-3 минуты на 8-летнем рабочем столе (и, вероятно, не будет работать для людей с Windows), так что вот как получить GIF: заменить (или добавить) последнюю строку (создает 200+ Мб файл):

$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 Мб GIF-файла.

user2846289
источник