Фоновая тема

Вступление

Оби-Ван Кеноби, Куай-Гон Джинн и Дарт Мол собираются сражаться! Тем не менее, они все забыли принести свои световые мечи. Напишите программу или функцию, которая, учитывая строку в Jediкачестве входных данных, генерирует изображение, похожее на это ^* :

и учитывая строку Sith, генерирует изображение, похожее на это:

Характеристики изображения

• Любой из 3 световых мечей (белый клинок, включая круглый край на конце (2 круглых края для красного) и включая ручку ) имеет длину 900 пикселей (это не включает в себя цветовой градиент вокруг клинка).

• Закругленный край на конце лопасти представляет собой полукруг (очевидно, с дискретным приближением) с диаметром, равным ширине лопасти.

• Клинок (то есть белая часть светового меча) имеет ширину 12 пикселей.

• Зеленый и синий световые мечи разделены на 200 пикселей (от центральной линии зеленого клинка до центральной линии синего клинка).

• Рукоятка для всех 3 световых мечей 180px (1/5 от общей длины). Поэтому сам клинок, включая круглые края, имеет длину 720 пикселей для синих и зеленых световых мечей и длину 360 пикселей для двух лезвий красного светового меча.

• Ручка сине-зеленого светового меча находится внизу светового меча. Ручка для красного светового меча расположена горизонтально по центру.

• Длина градиента от края белого лезвия до полностью белого цвета составляет 1,5 * ширины лезвия (например, 18px для линейных частей).

• Зеленый градиент изменяется от RGB (0,255,0) до белого (255,255,255) (или прозрачный, если вам проще его реализовать). Красный градиент идет от (255,0,0) до белого, а синий градиент идет от (0,0,255) до белого.

• Цвет ручки - RGB (128,128,128).

• Вокруг светового меча может быть белое пустое пространство.

входные

Либо Sithили Jediв виде строки. Вы можете взять эту строку из STDIN в качестве аргумента функции, параметра командной строки или чего-либо подобного. Вы можете предположить, что ввод всегда будет точным Sithили Jediиным образом.

Выход

Вы должны сгенерировать файл изображения, содержащий изображение, соответствующее входной строке. Вы можете свободно выбирать любой формат изображения, если хотите, чтобы это было изображение True Color .

счет

Это код-гольф , поэтому выигрывает самый короткий ответ в байтах. Да пребудет с тобой сила.

^* Изображения в этом посте не отображаются в полном размере.

HTML / CSS решение, 765 740 541 байт

<style>[id]:not(:target){display:none}table{width:900px;height:12px;border-spacing:0}td:last-child{border-radius:0 12px 12px 0}#Sith td:first-child{border-radius:12px 0 0 12px}#Sith td{box-shadow:0 0 18px red}#Jedi{transform:rotate(-90deg);margin:350px 0}#Jedi td{box-shadow:0 0 18px #0f0}*+table{margin:200px 0 0 0}#Jedi *+table td{box-shadow:0 0 18px #00f}td:nth-last-child(2){background:#888;width:180px;box-shadow:none!important}</style><div id=Jedi><table><td><td></table><table><td><td></table></div><table id=Sith><td><td><td></table>

Недавний рефакторинг использует :targetпсевдокласс, а не <form>Javascript.

Чтобы ввести любой ввод, добавьте его в конец URL в качестве цели, например, test.html#Jediилиtest.html#Sith

Вот снова с пробелами и несколькими комментариями:

<style>
  /* hide all but the anchored lightsaber (only lightsabers have ids) */
  [id]:not(:target) { display:none }

  /* tables are lightsabers */
  table { width:900px; height:12px; border-spacing:0 }
  td:last-child { border-radius:0 12px 12px 0 } /* curved tip */
  #Sith td:first-child { border-radius:12px 0 0 12px } /* 2nd curved tip */
  #Sith td { box-shadow:0 0 18px red }
  #Jedi { transform:rotate(-90deg); margin:350px 0 }
  #Jedi td { box-shadow:0 0 18px #0f0 } /* green */
  * + table { margin:200px 0 0 0 } /* gap between Jedi lightsabers */
  #Jedi * + table td { box-shadow:0 0 18px #00f } /* blue */
  /* handles */
  td:nth-last-child(2) {
    background:#888; width:180px; box-shadow:none!important }
</style>
<div id=Jedi>
  <table><td><td></table>
  <table><td><td></table>
</div>
<table id=Sith><td><td><td></table>

Световые мечи - это <table>элементы с одной ячейкой на деталь (лезвие / ручка), которые не скрыты своими idатрибутами.

Лезвия окрашены с помощью CSS box-shadowи световые мечи джедаев подвергаются a transform: rotate().

Картинки или этого не произошло (нажмите для полного разрешения):

Если вы добавите td{background:#fff}body{background:#000}в CSS, вы получите крутой темный вид.

Протестировано в Firefox и Chrome (в Linux). Обратите внимание, что это совсем не соответствует стандартам, так как я пытался максимально уменьшить размер.

Спасибо @manatwork за border-spacingи :target.