Логотип Олимпийских игр - Free Style Edition [закрыто]


30

В том же духе, что и в этом вопросе , ваша миссия состоит в том, чтобы создать самый красивый логотип с максимальным размером 1 КБ.

Правила:

  1. Не более 1К кода (включительно), без внешних данных.

  2. Ответ с наибольшим количеством голосов выигрывает.

Повеселись!


6
Ну, он прямо заявил «в том же духе, что и этот вопрос », поэтому он практически сказал «эй, я знаю, что это дубликат»: D
Майк Кох

5
Разные критерии выигрыша. Так что это похожий вопрос, но не дубликат.
Виктор Стафуса

3
Я на самом деле рад, что кто-то другой создал версию моего вопроса о конкурсе популярности с меньшим количеством критериев, так как я был разорван, куда идти, когда писал.
Адам Марас

@AdamMaras Рад слышать это :)
chubakueno

Я начал вновь открытое обсуждение Меты , так как этот вопрос не должен был быть закрытым.
Адам Марас

Ответы:


44

SVG

1kB? Luxury. Я даже могу печатать вывод, а не удалять все ненужные пробелы. (Конечно, для отступа используются вкладки, которые Markdown конвертирует в пробелы, поэтому количество символов может показаться выше, чем фактическое значение 977. Удаление ненужных пробелов приводит к уменьшению его до 861).

Перекрытия обрабатываются правильно, рисуя кольца в одном направлении, затем применяя зажим и вытягивая их в другом направлении. Цвета и соотношения взяты из официального документа, который по некоторым причинам использует кривые Безье, а не круги.

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="504" height="228">
    <defs>
        <clipPath id="t">
            <rect width="504" height="114" />
        </clipPath>
    </defs>
    <g fill="none" stroke-width="12">
        <g id="u" transform="translate(82,82)" stroke="#0b8ed8">
            <g id="O">
                <circle r="72" stroke="#fff" stroke-width="20" />
                <circle r="72" />
            </g>
        </g>
        <g id="y" transform="translate(167,146)" stroke="#f9a91f">
            <use xlink:href="#O" />
        </g>
        <g id="k" transform="translate(252,82)" stroke="#231f20">
            <use xlink:href="#O" />
        </g>
        <g id="g" transform="translate(337,146)" stroke="#009e59">
            <use xlink:href="#O" />
        </g>
        <g transform="translate(422,82)" stroke="#ee2049">
            <use xlink:href="#O" />
        </g>
        <g clip-path="url(#t)">
            <use xlink:href="#g" />
            <use xlink:href="#k" />
            <use xlink:href="#y" />
            <use xlink:href="#u" />
        </g>
    </g>
</svg>

Рендеринг PNG файла SVG


16
PS Если кто-то хочет утверждать, что SVG не является языком программирования (и я был бы очень склонен с этим согласиться), рассмотрите эту программу PHP в стиле многих представлений PHP на этот сайт, которые просто отражают буквальный текст.
Питер Тейлор

О боже, это выглядит потрясающе. SVG - niceee

39

Javascript (ядро) - 1000 на точку. - WebKit (Chrome)

Играя с холстом.

Не уверен, что это 1024 или 1000 K, но удалось снизить его до 1000 982 940: D

Подходит только для браузеров WebKit. Хром в порядке. Firefox беспорядок. Можете заглянуть в кросс-браузер.


Код:

var w=window;w.onload=function(){function e(e,t){return r()*(t-e+1)+e}function d(e,t){function r(e,t,r,i){c.beginPath();c[u]="xor";c.strokeStyle="#"+e;c.arc(t,r,66,n*i[0],n*i[1]);c.stroke();c[u]="destination-atop";c.arc(t,r,66,n*i[1],n*i[0]);c.stroke()}var i=79+e,s=66+t,o=158,a=[2,1.2],f=[1.8,.8];c.lineWidth=13;r("007a9c",e,t,f);r("ffa100",i,s,a);r("000",e+=o,t,f);r("009b3a",i+=o,s,a);r("e10e49",e+=o,t,f)}var t=Math,n=t.PI,r=t.random,i,s,o=0,u="globalCompositeOperation",a=document.getElementById("c"),f=w.innerWidth,l=w.innerHeight,c=a.getContext("2d"),h=9,p=[];a.width=f;a.height=l;for(i=0;i<l;++i){p.push({x:r()*f,y:r()*l,r:e(1,3),d:e(1,l)})}setInterval(function(){c.clearRect(0,0,f,l-h);d(f/2-200,l-200);c[u]="xor";c.fillStyle="#fff";c.beginPath();o+=e(0,7)?.01:-.01;for(i=0;i<l-h;++i){s=p[i];c.moveTo(s.x,s.y);c.arc(s.x,s.y,s.r,0,n*2);s.y+=t.cos(o+s.d)+1+s.r/9;s.x+=(i%2?1:-1)*t.sin(o)*.4;if(s.x>f+7||s.x<-7||s.y>l-(h-1.2)){p[i]={x:r()*f,y:-9,r:s.r,d:s.d}}}c.fill();if(h<l/1.7)h+=l/9e3},32)}

940: Удалил обертывание onloadи положился на скрипт, вставленный в конец bodyтега + ошибка выравнивания и исправление Firefox.

function e(e,t){return r()*(t-e+1)+e}function d(e,t){function r(e,t,r,i){c.beginPath();c[u]="xor";c.strokeStyle="#"+e;c.arc(t,r,66,n*i[0],n*i[1]);c.stroke();c[u]="destination-over";c.arc(t,r,66,n*i[1],n*i[0]);c.stroke()}var i=79+e,s=66+t,o=158,a=[2,1.2],f=[1.8,.8];c.lineWidth=13;r("007a9c",e,t,f);r("ffa100",i,s,a);r("000",e+=o,t,f);r("009b3a",i+=o,s,a);r("e10e49",e+=o,t,f)}var w=window,t=Math,n=t.PI,r=t.random,i,s,o=0,u="globalCompositeOperation",a=document.getElementById("c"),f=w.innerWidth,l=w.innerHeight,c=a.getContext("2d"),h=9,p=[];a.width=f;a.height=l;for(i=0;i<l;++i,p.push({x:r()*f,y:r()*l,r:e(1,3),d:e(1,l)}));setInterval(function(){c.clearRect(0,0,f,l-h);d(f/2-158,l-200);c[u]="xor";c.fillStyle="#fff";c.beginPath();o+=e(0,7)?.01:-.01;for(i=0;i<l-h;++i){s=p[i];c.moveTo(s.x,s.y);c.arc(s.x+=(i%2?.4:-.4)*t.sin(o),s.y+=t.cos(o+s.d)+1+s.r/9,s.r,0,n*2);if(s.y>l-(h-1.2)){p[i].x=r()*f;p[i].y=-9}}c.fill();if(h<l/1.7)h+=l/9e3},32)

Скрипки:

http://jsfiddle.net/Ifnak/XSBLg/embedded/result/

http://jsfiddle.net/Ifnak/4fSWm/5/embedded/result/

Загружается как в Firefox, так и в Chrome, но довольно сильно загружает ресурсы в FF. Использование requestAnimationFrame()помогло немного, но не достаточно.

Обратите внимание, что снег лежит на дне, поэтому прокрутите вниз, чтобы увидеть медленный рост. Первоначально имел некоторые перекраски на земле, но не мог вписаться в 1024 грн.

Результат (низкокачественный GIF-экран):

введите описание изображения здесь


2
Ницца! Это также работает в IE11.
Данко Дурбич

Работает абсолютно нормально на Firefox 27.0.1.
Натан Осман

32

Mathematica

Из моего ответа в Mathematica.SE Q & A :

ring[x_, y_, v_, t_] := 
  Table[
    {1.2 y, -v x, 0} + {Cos@i, Sin@i}.{{0, -1, 0}, {1, 0, 1/4 - v/2}},
    {i, 0, 2 π, π/200}
  ] ~Tube~ t

Graphics3D[
  Riffle[
    {Cyan, Yellow, Darker @ Gray, Green, Red},
    Array[ring[Sqrt@3/2, #, # ~Mod~ 2, 0.17] &, 5, 0] ],
  Boxed -> False,
  ViewPoint -> {0, 0, ∞}
]

введите описание изображения здесь

Редактировать: в версии 10 изменен стиль освещения по умолчанию; Чтобы отобразить изображение выше, нужно добавить опцию Lighting -> "Classic"к Graphics3D.

Далее игра с освещением для создания плоского двумерного эффекта:

Graphics3D[
  Riffle[
    Glow /@ {Hue[.59], Hue[.13], Black, Hue[.3, 1, .7], Hue[0, 1, .85]},
    Array[ring[Sqrt@3/2, #, # ~Mod~ 2, 0.13] &, 5, 0] ],
  Boxed -> False,
  ViewPoint -> {0, 0, ∞},
  Lighting -> None
]

введите описание изображения здесь


Для Оливера, который сказал, что мой первый результат был «слишком трехмерным», вот реальный 2D-рендеринг с помощью кода jVincent с моим рефакторингом, также из связанного потока:

ringSegment[mid_, deg_, color_] := {CapForm["Butt"],
  Thickness[0.042], White,                   Circle[mid, 1, deg],
  Thickness[0.03],  RGBColor @@ (color/255), Circle[mid, 1, deg + {-0.1, 0.1}]}

blue   = {  0, 129, 188};
yellow = {255, 177,  49};
black  = { 35,  34,  35};
green  = {  0, 157,  87};
red    = {238,  50,  78};

Graphics @ GraphicsComplex[
  {{2.5, 0}, {1.3, -1}, {0, 0}, {5, 0}, {3.8, -1}},
  ringSegment @@@
   {{1, {0, 5/4 π},      black},
    {2, {0, π},          yellow},
    {3, {0, 2 π},        blue},
    {2, {-π 9/8, 1/4 π}, yellow},
    {4, {0, 5/4 π},      red},
    {5, {0, 7/8 π},      green},
    {1, {5/4 π, 5/2 π},  black},
    {5, {7/8 π, 2 π},    green},
    {4, {-3/4 π, 1/4 π}, red}}
 ]

введите описание изображения здесь


@Oliver Обновлено только для вас.
Mr.Wizard

Вот Это Да! Можете ли вы сказать мне, где вы можете скачать Mathmatica?
Оливер Ни

@Oliver Это коммерческий продукт, и довольно дорогой даже для индивидуального некоммерческого использования, но если вы все еще заинтересованы, вы можете получить 15-дневную пробную версию по адресу
Mr.Wizard

1
@ Оливер теперь вы можете получить бесплатную версию Mathematica, если у вас есть малиновый пи
трихоплакс

@trichoplax Теперь Open Cloud позволяет один свободно запускать скромные программы в интерфейсе браузера: develop.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard

28

Руби, 321

К сожалению, определенный глава государства до сих пор является главной темой большинства олимпийских новостей. Итак, вот мой логотип в стиле фристайл (талисман?) Для Игр 2014 года.

w=?$;"UW[NASY_LAQVgKAPSlKAOKGLnHAOIHMnHAOHILpHANHJLqFAOFLKAVMAVMAWKAWLAWKAMIHFGK
NFMLAMGOFFGAGJPGFIAHGFFOWPPAIGFFKQFOKMJHAIJJQGNLGFMAJIJNFIGHFHSGASMMFHHASHGGPK
MFJHTKARJSKAMGFOPJAPPOJAPRKLAQRJLAQTHLAR^LFARaARaAR]HFASZAS[FFRGAT_QGAUZGFFG
U]AQGITAPHKPANKKSALMNSGGAJPOP".codepoints{|r|r-=69;$><<(r<0??\n:(w=w==?$?' ':?$)*r)}

Вывод: (Резервное копирование и косоглазие. Извините за примитивный рендеринг, но он не заслуживает лучшего.)

Путин


6
$$$, грустно, но факт: D
ybeltukov

25

Bash + ImageMagick

convert \
  -size 330x150 xc:white -strokewidth 10 -fill none \
  -stroke \#0885c2 -draw 'arc 100,100 10,10 0,360' \
  -stroke black -draw 'arc 210,100 120,10 0,360' \
  -stroke \#ed334e -draw 'arc 320,100 230,10 0,360' \
  -stroke \#fbb132 -draw 'arc 155,140 65,50 0,360' \
  -stroke \#1c8b3c -draw 'arc 265,140 175,50 0,360' \
  -stroke \#0885c2 -draw 'arc 100,100 10,10 -20,10' \
  -stroke black -draw 'arc 210,100 120,10 -20,10' -draw 'arc 210,100 120,10 90,120' \
  -stroke \#ed334e -draw 'arc 320,100 230,10 90,120' \
  x:

Образец вывода:

логотип олимпийских игр


23

FreePascal

Зимняя Олимпиада? Как насчет некоторых фрактальных снежинок вместо обычных колец.

Рекурсия для центральной ветви довольно очевидна: (dx, dy) = 0,5 (dx, dy). Левая и правая ветви основаны на повороте путем умножения матрицы:

x = x cos (a) - y sin (a)

y = x sin (a) + y cos (a)

1/4 = 0,5 cos (60) и 7/16 - хорошее приближение 0,5 sin (60).

uses graph;
var gd, gm : integer;
var n:integer;

Procedure tree(x,y,dx,dy: integer);
begin
  if dx*dx+dy*dy>0 then begin
    line(x, y, x+dx, y+dy);
    tree(x+dx, y+dy, dx div 2, dy div 2);
    tree(x+dx, y+dy, dx div 4 + dy*7 div 16, dy div 4 - dx*7 div 16);
    tree(x+dx, y+dy, dx div 4 - dy*7 div 16, dy div 4 + dx*7 div 16);
  end;
end;

begin
  gd := D4bit;
  gm := m640x480;
  initgraph(gd,gm,'');
  setbkcolor(white); clearviewport;
  setbkcolor(black); setlinestyle(0,0,3);

  For n:=-1 to 1  do  begin
    setColor(yellow);
    tree(215,240-120*n,0,120*n);
    setColor(lightgreen);
    tree(425,240-120*n,0,120*n);
    setColor(black);
    tree(320,120-120*n,0,120*n);
    setColor(lightred);
    tree(530,120-120*n,0,120*n);
    setColor(lightblue);
    tree(110,120-120*n,0,120*n);
  end;
  readln;
  closegraph;
end.

, ,

образ


Ницца. Если вы можете добавить в алгоритм достаточное количество случайности, вы можете использовать его снова в разделе Давайте смоделируем случайную снежинку .
manatwork

16

Джава

Похоже на мой ответ SVG, но

  • Использует два клипа, чтобы избежать небольших расхождений из-за двойного рисования с использованием псевдонима.
  • Поскольку у Java есть реальные циклы, структура немного лучше.

Обратите внимание, что я не пытался играть в гольф, несмотря на возможность некоторых интересных трюков (например, -57*~dirвместо 57*(1+dir). Это на 923 символов, но гольф до 624 довольно легко.

import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;

public class Rings {
    public static void main(String[] args) throws Exception {
        int[] pal = new int[] {0x0b8ed8, 0xf9a91f, 0x231f20, 0x009e59, 0xee2049};
        BufferedImage img = new BufferedImage(505, 229, BufferedImage.TYPE_INT_ARGB);
        Graphics2D g = img.createGraphics();
        g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
        for (int dir = -1; dir < 2; dir += 2) {
            g.setClip(0, 57 * (1 + dir), 520, 114);
            for (int ring = 2 - 2 * dir; ring != 2 + 3 * dir; ring += dir) {
                for (int subring = 0; subring < 2; subring++) {
                    g.setColor(new Color(pal[ring] | (subring - 1)));
                    g.setStroke(new BasicStroke(20 - 8 * subring));
                    g.drawOval(10 + 85 * ring, 10 + 64 * (ring & 1), 144, 144);
                }
            }
        }
        ImageIO.write(img, "PNG", new File("rings.png"));
    }
}

PNG отображается программой Java


16

Коммодор 64 Бейсик

Опять же ответ C64, но на этот раз мне разрешено использовать спрайты ! Ура!

Я помню, если бы вы хотели использовать спрайты, вы бы начали свою программу с множества скучных DATAутверждений. Для определения монохроматического спрайта с высоким разрешением (24x21 пикселей) вам потребуется 63 байта. На самом деле есть онлайн- редактор спрайтов, который рассчитывает данные для вас, поэтому:

10 DATA 0,254,0,3,255,128,7,255,192,15,131,224,30,0,240,60,0,120,56,0,56,120,0
20 DATA 60,112,0,28,112,0,28,112,0,28,112,0,28,112,0,28,120,0,60,56,0,56,60,0
30 DATA 120,30,0,240,15,131,224,7,255,192,3,255,128,0,254,0

Мне также нужно больше ДАННЫХ для цветов и позиций. Я только что скопировал это из своего ответа на оригинальный вопрос с логотипом Олимпийских игр :

40 DATA 6,0,0,0,2,0,2,4,0,7,1,1,5,3,1 

Тогда вы обычно устанавливаете V=53248. Это 53248должно быть важное число, потому что я все еще помню его 25 лет спустя. Оказывается, это базовый адрес VIC-II (контроллер видеоинтерфейса):

50 V=53248

Затем я прочитал шаблон спрайта в память, начиная с адреса 832. Кажется странным просто писать в ячейку памяти, без выделения, нет new, ничего подобного :) Начальный адрес должен быть кратным 64.

60 FOR I=0 TO 62
70 READ D:POKE 832+I,D
80 NEXT I

Я буду использовать один и тот же шаблон для всех спрайтов.

90 FOR I=0 TO 4
100 READ C,X,Y

Cэто цветовой код, Xи Yгоризонтальные и вертикальные позиции кругов.

Требуется еще несколько POKEс:

110 POKE V+I*2,150+X*11
120 POKE V+I*2+1,130+Y*10

V+0, V+2, V+4, И т.д. ... являются горизонтальным расположением каждого спрайта, а V+1, V+3, V+5... являются вертикальными. Цвета спрайтов начинаются с регистра V+39:

130 POKE V+39+I,C

Указатели данных спрайта начинаются с 2040, а поскольку данные начинаются с 832, мы получаем 832/64= 13, поэтому:

140 POKE 2040+I,13
150 NEXT I

Чтобы включить спрайты, я установил биты 0-4регистра V+21. Я также изменил фон на белый, чтобы мы могли видеть синий круг.

160 POKE 53281,1
170 POKE V+21,31

Это оно!

Олимпийские спрайты


Большой! Не знаю, правильно ли я помню, но, возможно, вы можете удвоить (в аппаратном обеспечении) размер спрайтов по x / y. Я уверен, что вы могли бы сделать это на C128.
Габриэле Д'Антона

Да, вы можете установить биты V+23для двойной высоты и V+29для двойной ширины. (бит #x для спрайта #x).
Данко Дурбич

11

LaTeX / TikZ

Размер: 876 байт (12 строк, строка из 72 символов и конец строки)

\documentclass{standalone}\usepackage{tikz}\def\W{3.762bp}\def\R{71.682
bp}\def\D{12.9041bp}\usetikzlibrary{calc,hobby}\def\Y{-71.7013bp}\def\X
{169.5538bp}\begin{document}\tikz[use Hobby shortcut,every path/.style=
{line width=\W,double distance=\D, white}]{\def\Z{coordinate}\path(0,0)
\Z(A)++(\X,0)\Z(C)++(\X,0)\Z(E)($(A)!.5!(C)$)++(0,\Y)\Z(B)++(\X,0)\Z(D)
;\def~#1#2{\definecolor{#1}{cmyk}{#2}} ~A{1,.25,0,0}~B{0,.342,.91,0}~C{
0,0,0,1}~D{1,0,.91,.06}~E{0,.94,.65,0}\def~#1#2#3#4{\draw[save Hobby p%
ath={#1},double=#1,overlay](#1)+([closed] 225:\R)..+([#2]315:\R)..+([#3
]45:\R)..+([#4]135:\R); \path let\n!={\R+\D/2}in(#1)+(-\n!,0)+(\n!,0)+(
0,-\n!)+(0,\n!);}\def\0#1{\draw[double=#1,restore and use Hobby path={%
#1}{disjoint,invert soft blanks}];}~A{}{blank=soft}{}~B{}{}{blank=soft}
~C{}{blank=soft}{}\0B\0A~E{blank=soft}{}{}~D{}{}{}\0C\0E}\end{document}

введите описание изображения здесь

Размер: 817 байт в одной строке и с двумя оптимизациями:

  • Опция tikzкласса standalone, см. Комментарий Мастера Пшеницы.
  • Многократное использование soft=blankможет быть сокращено путем определения стиля b.
\documentclass[tikz]{standalone}\def\W{3.762bp}\def\R{71.682bp}\def\D{12.9041bp}\usetikzlibrary{calc,hobby}\def\Y{-71.7013bp}\def\X{169.5538bp}\begin{document}\tikz[use Hobby shortcut,every path/.style={line width=\W,double distance=\D,white},b/.style={blank=soft}]{\def\Z{coordinate}\path(0,0)\Z(A)++(\X,0)\Z(C)++(\X,0)\Z(E)($(A)!.5!(C)$)++(0,\Y)\Z(B)++(\X,0)\Z(D);\def~#1#2{\definecolor{#1}{cmyk}{#2}} ~A{1,.25,0,0}~B{0,.342,.91,0}~C{0,0,0,1}~D{1,0,.91,.06}~E{0,.94,.65,0}\def~#1#2#3#4{\draw[save Hobby path={#1},double=#1,overlay](#1)+([closed]225:\R)..+([#2]315:\R)..+([#3]45:\R)..+([#4]135:\R); \path let\n!={\R+\D/2}in(#1)+(-\n!,0)+(\n!,0)+(0,-\n!)+(0,\n!);}\def\0#1{\draw[double=#1,restore and use Hobby path={#1}{disjoint,invert soft blanks}];}~A{}b{}~B{}{}b~C{}b{}\0B\0A~E b{}{}~D{}{}{}\0C\0E}\end{document}

LaTeX / TikZ (читаемая версия)

Следующая более длинная версия, вероятно, легче понять.

  • Перекрытие колец обрабатывается путем рисования колец с пустыми сегментами. Затем на более поздней стадии кольца снова рисуются, но на этот раз пустые сегменты заполняются, а остальные уже нарисованные сегменты колец остаются нетронутыми. Поэтому отсечение вообще не используется.

  • Кольцо с белыми полями нарисовано кружком с двойной линией. Область между линиями заполнена цветом кольца, а более тонкие двойные линии образуют внешнее и внутреннее белое поле.

  • Цвета и размеры взяты из описания страницы в формате PDF на странице 5 официального документа (см. Ответ Питера Тейлера).

\nofiles % .aux file is not needed
\documentclass[tikz]{standalone}
\usetikzlibrary{calc}
\usetikzlibrary{hobby}

\newcommand*{\xshift}{169.5538bp}
\newcommand*{\yshift}{-71.7013bp}
\newcommand*{\radius}{71.6821bp}
\newcommand*{\whitelinewidth}{3.762bp}
\newcommand*{\colorlinewidth}{12.9041bp}

\definecolor{color@A}{cmyk}{1, .25, 0, 0}
\definecolor{color@B}{cmyk}{0, .342, .91, 0}
\definecolor{color@C}{cmyk}{0, 0, 0, 1}
\definecolor{color@D}{cmyk}{1, 0, .91, .06}
\definecolor{color@E}{cmyk}{0, .94, .65, 0}

\begin{document}
  \begin{tikzpicture}[
    use Hobby shortcut,
    every path/.style = {
      line width      = \whitelinewidth,
      double distance = \colorlinewidth,
      white,
    },
  ]
    % define center coordinates for the five rings
    \path
      (0,0) coordinate (center@A)
      ++(\xshift, 0) coordinate (center@C)
      ++(\xshift, 0) coordinate (center@E)
      ($(center@A)!.5!(center@C)$) ++(0, \yshift) coordinate (center@B)
      ++(\xshift, 0) coordinate (center@D)
    ;
    % \drawring draws the first part of the ring with blank parts
    \newcommand*{\drawring}[4]{%
      \draw[
        save Hobby path = {path@#1},
        double          = {color@#1},
        overlay,
      ]
        (center@#1)
        +([closed] 225:\radius) .. +([#2] 315:\radius) ..
        +([#3] 45:\radius) .. +([#4] 135:\radius)
      ;
    }
    % \finishring draws the blank parts of the rings
    \newcommand*{\finishring}[1]{%
      \draw[
        double                     = {color@#1},
        restore and use Hobby path = {path@#1}{
          disjoint, 
          invert soft blanks
        },
      ];
    }
    \drawring{A}{}{blank=soft}{}
    \drawring{B}{}{}{blank=soft}
    \drawring{C}{}{blank=soft}{}
    \finishring{B}
    \finishring{A}
    \drawring{E}{blank=soft}{}{}
    \drawring{D}{}{}{}
    \finishring{C}
    \finishring{E}
    % set calculated bounding box
    \useasboundingbox
      let \n{r} = {\radius + \colorlinewidth/2}
      in
        (center@A) +(-\n{r}, \n{r}) % upper left corner
        (center@B -| center@E) +(\n{r}, -\n{r}) % lower right corner
    ;
  \end{tikzpicture}
\end{document}

Чтобы сэкономить пару байтов, вы можете использовать \documentclass[tikz]{standalone}благодаря этому совету .
Wheat Wizard

@WheatWizard Спасибо, ответ обновляется и сокращается путем определения стиля, bчтобы избежать длинных, blank=softкоторые используются четыре раза.
Хайко Обердик,

10

C ++ 1024 байта

Обновлено: теперь с сглаживанием. Код был несколько де-гольф, хотя по-прежнему вписывается (точно) 1K.

Не использует никаких библиотечных функций, кроме функций ostream для записи выходного файла.

#include <fstream>

namespace {
typedef double d;

int w=512;
d a=1./6,g=1./w,h=1./72,j=h+g,k=h-g,r=5./36;

struct p{d x,y;}ps[]={{5*a,a},{4*a,2*a},{3*a,a},{2*a,2*a},{a,a}};
struct c{unsigned char r,g,b;}cs[]={{237,51,78},{28,139,60},{0,0,0},{251,177,50},{8,133,194}};

d abs(d x) {return x<0?-x:x;}

d sqrt(d x) {
    d e=1e-6,y=1;
    for(;abs(y*y-x)>e;y=.5*(y+x/y));
    return y;
}

d dist(p c,p z) {
    d u=z.x-c.x,v=z.y-c.y; 
    return abs(r-sqrt(u*u+v*v));
}

c lerp(c a,c b,d t) {
    auto l=[=](d a,d b){return a+(b-a)*t;}; 
    return {l(a.r,b.r),l(a.g,b.g),l(a.b,b.b)};
}

d smoothstep(d z) {
    z=(z-j)/(k-j);
    z=z<0?0:z>1?1:z;
    return z*z*(3-2*z);
}

c color(p z) {
    c o{255,255,255};
    for(int i=0,j;i<5;++i){
        j=z.y<.25?i:4-i;
        o=lerp(o,cs[j],smoothstep(dist(ps[j],z)));
    }
    return o;
}
}

int main() {
    std::ofstream o("r.ppm",std::ofstream::binary);
    o<<"P6 "<<w<<" "<<w/2<<" 255\n";
    for(int y=0;y<w/2;++y)
        for(int x=0;x<w;++x)
            o.write((char*)&color(p{x*g,y*g}),3);;
}

Выводит файл .ppm:

введите описание изображения здесь


1
Это не код-гольф : вы можете свободно делать код понятным, если он умещается в 1 КБ.
Питер Тейлор

+1, даже не включая <cmath>
эпидемия

10

R, 70 символов

Использование статистики CRAN-R.

l=c(1,9);plot(3:7,c(6,4,6,4,6),col=c(4,7,1,3,2),cex=10,ylim=l,xlim=l)

R сюжет


9

GLSL

Я чувствую, что немного опаздываю на вечеринку, но, возможно, я смогу восполнить это с первой подачей GLSL на этом сайте. Он предназначен для использования в качестве фрагментного шейдера для примитива заполнения экрана и ожидает разрешение области просмотра в iResolutionуниформе.

Цвета и позиции «позаимствованы» из представления Питера Тейлора . Мне пришлось сократить некоторые имена переменных до 1024 символов, но я надеюсь, что они по-прежнему читаемы.

Смотрите его в Shadertoy (если ваш браузер поддерживает WebGL).

uniform vec3 iResolution;

float circle(vec2 pos, float r) {
    return clamp(r - distance(gl_FragCoord.xy, pos), 0., 1.);
}

float ring(vec2 pos, float r, float d) {
    return circle(pos, r + d) * (1. - circle(pos, r - d));
}

void paint(vec3 color, float a) {
    gl_FragColor.rgb = mix(gl_FragColor.rgb, color, a);
}

void main() {
    struct r_t {
        vec2 pos;
        vec3 col;
    } rs[5];
    rs[0] = r_t(vec2( 82, 146), vec3(.04, .56, .85));
    rs[1] = r_t(vec2(167,  82), vec3(.98, .66, .12));
    rs[2] = r_t(vec2(252, 146), vec3(.14, .12, .13));
    rs[3] = r_t(vec2(337,  82), vec3(.00, .62, .35));
    rs[4] = r_t(vec2(422, 146), vec3(.93, .13, .29));

    float s = min(iResolution.x / 504., iResolution.y / 228.);
    vec2 b = (iResolution.xy - vec2(504, 228) * s) * .5;
    bool rev = gl_FragCoord.y > iResolution.y * .5;

    gl_FragColor.rgb = vec3(1);

    for (int i = 0; i < 5; ++i) {
        r_t r = rev ? rs[4 - i] : rs[i];
        paint(vec3(1), ring(r.pos * s + b, 72. * s, 11. * s));
        paint(r.col,   ring(r.pos * s + b, 72. * s,  6. * s));
    }
}

Результирующий рендеринг


5

Mathematica

Я заменил свой первоначальный ответ тем, который опирается на регионы и их пересечения. Размер кода 973 байта, без заглядывания.

Регионы 1-5 - это кольца. Кольца имеют внутренний радиус 2,5 единицы; внешний радиус составляет 3 единицы. Отношение внутреннего к внешнему и общая логика подхода можно найти здесь .

i = Implicit Region;
R1 = i[6.25 <= (x + 6.4)^2 + y^2 <= 9 , {x, y}];
R2 = i[6.25 <= x^2 + y^2 <= 9 , {x, y}];
R3 = i[6.25 <= (x - 6.4)^2 + y^2 <= 9 , {x, y}];
R4 = i[6.25 <= (x + 3.2)^2 + (y + 3)^2 <= 9 , {x, y}];
R5 = i[6.25 <= (x - 3.2)^2 + (y + 3)^2 <= 9 , {x, y}];

Почему мы не можем просто распечатать 5 колец без учета слоев.

Если мы нанесем эти кольца сразу, они не сцепятся. Обратите внимание, что желтое кольцо лежит поверх синего и черного колец; зеленое кольцо лежит поверх черного и красного колец.

Show[{RegionPlot[R1, PlotStyle -> Blue, BoundaryStyle -> Blue],
  RegionPlot[R2, PlotStyle -> Black, BoundaryStyle -> Black],
  RegionPlot[R3, PlotStyle -> Red, BoundaryStyle -> Red],
  RegionPlot[R4, PlotStyle -> Yellow, BoundaryStyle -> Yellow],
  RegionPlot[R5, PlotStyle -> Green, BoundaryStyle -> Green]
  }, PlotRange -> All, PerformanceGoal -> "Quality", 
 ImageSize -> Large, AspectRatio -> 1/2,
 Frame -> False]

сверху


Листать цвета на 4 пересечениях колец.

Области 6, 8, 10 и 12 являются прямоугольниками, которые служат для указания того, на каком пересечении двух колец сосредоточиться.

Области 7, 9, 11 и 13 - это «перекрытия колец», где кольцо снизу должно быть сверху.

R6 = Rectangle[{-5, -1}, {-2, 1}];
R7 = RegionIntersection[R1, R4, R6];    
R8 = Rectangle[{2, -1}, {4, 1}];
R9 = RegionIntersection[R2, R5, R8]; 
R10 = Rectangle[{-2, -3}, {2, -2}];
R11 = RegionIntersection[R2, R4, R10];  
R12 = Rectangle[{5, -3}, {7, -2}];
R13 = RegionIntersection[R3, R5, R12];

Show[{RegionPlot[R1, PlotStyle -> Blue, BoundaryStyle -> Blue],
  RegionPlot[R2, PlotStyle -> Black, BoundaryStyle -> Black],
  RegionPlot[R3, PlotStyle -> Red, BoundaryStyle -> Red],
  RegionPlot[R4, PlotStyle -> Yellow, BoundaryStyle -> Yellow],
  RegionPlot[R5, PlotStyle -> Green, BoundaryStyle -> Green],
  RegionPlot[R7, PlotStyle -> Blue, BoundaryStyle -> Blue],
  RegionPlot[R9, PlotStyle -> Black, BoundaryStyle -> Black],
  RegionPlot[R11, PlotStyle -> Black, BoundaryStyle -> Black],
  RegionPlot[R13, PlotStyle -> Red, BoundaryStyle -> Red]}, 
PlotRange -> All, PerformanceGoal -> "Quality", 
 ImageSize -> Large, AspectRatio -> 1/2,
 Frame -> False]

кольца


На каких перекрестках перевернули цвета?

Ниже выделены области пересечения, где цвета были «перевернуты». Это было достигнуто путем изменения BoundaryStyleобластей 7, 9, 11 и 13 на White.

Основные моменты


4
Разве вы не можете сделать что-то эстетически лучше в 1k? эти пересечения ужасны!
Габриэле Д'Антона

1
@friol, я улучшил пересечения, используя регионы.
DavidC

1
Это заняло полтора года, но вы, наконец, нашли, как сделать красивые пересечения: D
Beta Decay

Вчера я видел несколько олимпийских колец и понял, что могу использовать регионы для решения проблемы пересечения. Предыдущие были слишком уродливы, чтобы уйти.
DavidC

3

Javascript (three.js) - 910 байт

Для данного html-элемента эта функция создаст кольца в виде трехмерных объектов, а затем отобразит неподвижное изображение для элемента. Работает в браузерах, которые поддерживают WebGL. FIDDLE

function Logo(l){
    var s, c, r;
    s = new THREE.Scene();
    c = new THREE.PerspectiveCamera(45, 4/3, 1, 500);
    c.position.set(75,0,300);
    c.lookAt(new THREE.Vector3(0,0,0));
    var rings = [
        new THREE.Mesh(ring(), mat(0x0885c2)),
        new THREE.Mesh(ring(), mat(0xfbb132)),
        new THREE.Mesh(ring(), mat(0x000000)),
        new THREE.Mesh(ring(), mat(0x1c8b3c)),
        new THREE.Mesh(ring(), mat(0xed334e))
    ];
    for(var i = 0; i < rings.length; i++){
        s.add(rings[i]);
        rings[i].position.set(i*55-125,-(i%2)*50,0);
        rings[i].rotation.set(0,(i%2*2-1)*.18,0,'xyz');
    }
    r = new THREE.WebGLRenderer();
    r.setSize(400, 300);
    l.appendChild(r.domElement);
    r.render(s, c);
}
function ring(){ return new THREE.TorusGeometry(50, 8, 16, 32); }
function mat(color){ return new THREE.MeshBasicMaterial({color: color}); }


2

C ++ с SFML (1003, включая пробелы)

Не маленький для любого воображения, но сохраненный как можно более кратким, но читаемым, и все еще под 1k.

#include <SFML/Graphics.hpp>

using namespace sf;

int main() {
    CircleShape circles[5];
    Color backcolor(255,255,255);
    Color colors[5] = {
        Color(0x0b,0x8e,0xd8),
        Color(0xf9,0xa9,0x1f),
        Color(0x23,0x1f,0x20),
        Color(0x00,0x9e,0x59),
        Color(0xee,0x20,0x49),
    };

    for (int i = 0; i < 5; i++) {
        circles[i] = CircleShape(144, 60);
        circles[i].setPosition(15+160*i, 46+160*(i&1));
        circles[i].setFillColor(Color::Transparent);
        circles[i].setOutlineColor(colors[i]);
        circles[i].setOutlineThickness(-16);
    }

    RenderWindow window(VideoMode(960, 540), L"Olympic Logo", Style::Close);

    while (window.isOpen()) {
        Event event;

        while (window.pollEvent(event))
            if (event.type == Event::Closed)
                window.close();

        window.clear(backcolor);

        for (int i = 0; i < 5; i++)
            window.draw(circles[i]);

        window.display();
    }

    return 0;
}

Изменить: Обновлены цвета на основе представления SVG @Peter Taylor.


1

Delphi

  Canvas.Pen.Width := 10;
  Canvas.Brush.Style:=bsClear;//To prevent solid background
  Canvas.Pen.Color:=clBlue; Canvas.Ellipse(20,30,220,230);
  Canvas.Pen.Color:=clBlack; Canvas.Ellipse(240,30,440,230);
  Canvas.Pen.Color:=clRed; Canvas.Ellipse(460,30,660,230);
  Canvas.Pen.Color:=clYellow; Canvas.Ellipse(130,130,330,330);
  Canvas.Pen.Color:=clGreen; Canvas.Ellipse(350,130,550,330);

Результат

введите описание изображения здесь


0

сделал решение на основе версии Java Swing GUI UltraGolfed (696 чар)

import java.awt.Color;import java.awt.Graphics;import javax.swing.JFrame;import javax.swing.JPanel;class A extends JFrame{public A(){JPanel j=new JPanel(){protected void paintComponent(Graphics g){;((java.awt.Graphics2D)g).setStroke(new java.awt.BasicStroke(3));g.setColor(new Color(0xb,0x8e,0xd8));g.drawOval(10, 10, 80, 80);g.setColor(new Color(0xf9,0xa9,0x1f));g.drawOval(50,40,80,80);g.setColor(new Color(0x23,0x1f,0x20));g.drawOval(90, 10, 80, 80);g.setColor(new Color(0,0x9e,0x59));g.drawOval(130,40,80,80);g.setColor(new Color(0xee,0x20,0x49));g.drawOval(170, 10, 80, 80);}};j.setBounds(0,0,600,400);setSize(600,400);add(j);}public static void main(String[]a){new A().setVisible(true);}}

Полусжатый: (971)

import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
class A extends JFrame
{
    public A()
    {
        JPanel j = new JPanel(){
        protected void paintComponent(Graphics g)
        {;
            ((java.awt.Graphics2D)g).setStroke(new  java.awt.BasicStroke(3));
            g.setColor(new Color(0xb,0x8e,0xd8));
            g.drawOval(10, 10, 80, 80);
            g.setColor(new Color(0xf9,0xa9,0x1f));
            g.drawOval(50,40,80,80);
            g.setColor(new Color(0x23,0x1f,0x20));
            g.drawOval(90, 10, 80, 80);
            g.setColor(new Color(0,0x9e,0x59));
            g.drawOval(130,40,80,80);
            g.setColor(new Color(0xee,0x20,0x49));
            g.drawOval(170, 10, 80, 80);}};
        j.setBounds(0,0,600,400);
        setSize(600,400);
        add(j);
    }
    public static void main(String[]a)
    {
        new A().setVisible(true);
    }
}

Не могли бы вы добавить скриншот?
Паŭло Эберманн


0

SpecBAS

Каждое кольцо состоит из внутреннего / внешнего круга, а затем заполнено.

Пришлось найти перекрестки вручную и заполнить их по отдельности (чтобы вы все еще могли видеть некоторые линии между ними).

1 INK 0: PAPER 15: CLS: LET r=50
2 FOR x=1 TO 3
3 CIRCLE x*100,100,r: CIRCLE x*100,100,r-10
4 IF x<3 THEN CIRCLE (x*100)+50,150,r: CIRCLE (x*100)+50,150,r-10
5 NEXT x
6 INK 0: FILL 165,130: FILL 195,145: FILL 200,55: FILL 215,145: FILL 245,105
7 INK 9: FILL 100,55: FILL 130,130: FILL 145,105
8 INK 10: FILL 270,135: FILL 295,145: FILL 300,55
9 INK 12: FILL 205,145: FILL 215,120: FILL 250,195: FILL 255,105: FILL 280,120
10 INK 14: FILL 105,145: FILL 110,125: FILL 150,195: FILL 155,105: FILL 190,130

введите описание изображения здесь

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.