Logotipo dos Jogos Olímpicos - Free Style Edition [fechado]


30

Em um espírito semelhante a esta pergunta , sua missão é criar o logotipo mais bonito com no máximo 1K de código.

Regras:

  1. No máximo 1K de código (inclusive), sem dados externos.

  2. A resposta com mais votos positivos vence.

Diverta-se!


6
Bem, ele declarou diretamente "em um espírito semelhante a esta pergunta ", então ele praticamente disse "ei, eu sei que isso é uma duplicata": D
Mike Koch

5
Diferentes critérios de vencimento. Portanto, é uma pergunta semelhante, mas não é uma duplicata.
precisa saber é o seguinte

3
Estou realmente feliz por alguém criou um -concurso de popularidade versão do minha pergunta com menos critérios, como eu estava dividido sobre qual caminho a percorrer quando eu o escrevi.
Adam Maras 22/01

@AdamMaras feliz em saber que :)
chubakueno

Iniciei uma discussão de reabertura sobre o Meta , pois essa pergunta não deveria ter sido votada perto.
Adam Maras 22/01

Respostas:


44

SVG

1kB? Luxo. Eu posso até imprimir bastante a saída, em vez de remover todo o espaço em branco desnecessário. (O recuo, é claro, usa guias, que o Markdown converte em espaços, e é por isso que a contagem de caracteres pode parecer maior que o 977 real. A remoção de espaço em branco desnecessário a reduz para 861).

As sobreposições são tratadas corretamente desenhando os anéis em uma direção, aplicando um clipe e desenhando-os na outra direção. As cores e proporções são extraídas de um documento oficial que, por algum motivo, usa as curvas de Bézier em vez de círculos.

<?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 rende do arquivo SVG


16
PS: Se alguém quiser argumentar que o SVG não é uma linguagem de programação (e eu estaria muito inclinado a concordar), considere este um programa PHP no estilo de muitos envios de PHP a este site, que ecoam apenas texto literal.
Peter Taylor

omg parece incrível embora. O SVG é um

39

Javascript (núcleo) - 1000 em ponto. - WebKit (Chrome)

Brincando com tela.

Não tenho certeza se é 1024 ou 1000 K, mas conseguiu baixá-lo para 1000 982 940: D

Adequado apenas para navegadores WebKit. Chrome OK. Firefox uma bagunça. Pode olhar para torná-lo entre navegadores.


Código:

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: Inserção onloade inclusão do script no final da bodytag + bug de alinhamento e correção do 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)

Violino:

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

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

Carrega no Firefox e no Chrome, mas é bastante pesado em recursos no FF. Usar requestAnimationFrame()ajudou um pouco, mas não o suficiente.

Observe que a neve fica no fundo, role para baixo para ver o crescimento lento. Inicialmente teve alguma pintura no chão, mas não conseguiu encaixá-lo em 1024 chr.

Resultado (screencast GIF de baixa qualidade):

insira a descrição da imagem aqui


2
Agradável! Também funciona no IE11.
Danko Durbić

Funciona absolutamente bem no Firefox 27.0.1.
Nathan Osman

32

Mathematica

Da minha resposta nas perguntas e respostas do Mathematica.SE :

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, ∞}
]

insira a descrição da imagem aqui

Editar: Na versão 10, o estilo de iluminação padrão foi alterado; para tornar o gráfico acima um vai precisar adicionar a opção Lighting -> "Classic"para Graphics3D.

Brincando com a iluminação para produzir um efeito bidimensional plano:

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
]

insira a descrição da imagem aqui


Para Oliver, que disse que meu primeiro resultado foi "3D demais", aqui está uma renderização 2D real via código do jVincent com minha refatoração, também a partir do thread vinculado:

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

insira a descrição da imagem aqui


@ Oliver atualizado apenas para você.
Mr.Wizard

Uau! Você pode me dizer onde você pode baixar o Mathmatica?
Oliver Ni

@Oliver É produto comercial, e até mesmo bastante caro para uso individual, noncommerical, mas se você ainda estiver interessado pode obter uma versão experimental de 15 dias a partir de: wolfram.com/mathematica/trial
Mr.Wizard

11
@Oliver agora você pode obter uma versão gratuita do Mathematica se você tem um pi de framboesa
Trichoplax

@trichoplax Agora Open Cloud permite uma programas modestos livremente executados em uma interface do navegador: develop.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard

28

Ruby, 321

Infelizmente, um certo chefe de estado parece ser o assunto principal da maioria das notícias olímpicas até agora. Assim, aqui está o meu logotipo do estilo livre (mascote?) Para os Jogos de 2014.

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

Saída: (Faça backup e estrabismo. Desculpe pela renderização primitiva, mas ele não merece melhor.)

Putin


6
$, triste, mas verdadeiro: 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:

Saída de amostra:

logotipo dos jogos olímpicos


23

FreePascal

Olimpíadas de Inverno? Que tal alguns flocos de neve fractal em vez de anéis regulares.

A recursão para o ramo central é bastante óbvia: (dx, dy) = 0,5 (dx, dy). Os ramos esquerdo e direito são baseados na rotação por multiplicação da matriz:

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

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

1/4 = 0,5 cos (60) e 7/16 é uma boa aproximação de 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.

. .

imagem


Agradável. Se você puder adicionar uma boa quantidade de aleatoriedade ao algoritmo, poderá reutilizá-lo em Vamos simular um floco de neve aleatório .
manatwork

16

Java

Semelhante à minha resposta SVG, mas

  • Usa dois clipes, para evitar pequenas discrepâncias devido ao desenho duplo com anti-alias.
  • Como o Java possui loops reais, a estrutura é um pouco melhor.

Note que eu não tentei jogar golfe, apesar da possibilidade de alguns truques interessantes (como em -57*~dirvez de 57*(1+dir). Está em 923 caracteres, mas o golfe chega a 624 com bastante facilidade.

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 renderizado pelo programa Java


16

Commodore 64 BASIC

Mais uma vez, uma resposta C64, mas desta vez estou autorizado a usar sprites ! Yay!

Lembro que se você quisesse usar sprites, começaria seu programa com várias DATAdeclarações chatas . Para definir um padrão de sprite monocromático de "alta resolução" (24x21 pixels), são necessários 63 bytes. Na verdade, existe um editor de sprites online que calcula os dados para você, então:

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

Também vou precisar de mais alguns DADOS para as cores e posições. Acabei de copiar isso da minha resposta para o logotipo original dos Jogos Olímpicos :

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

Então, você costuma definir V=53248. Este 53248deve ser um número importante, porque ainda me lembro 25 anos depois :) Acontece que é o endereço base do VIC-II (Video Interface Controller):

50 V=53248

Depois, li o padrão de sprite na memória, começando no endereço 832. É estranho apenas escrever em um local de memória, sem alocação, não new, nada disso :) O endereço inicial precisa ser múltiplo de 64.

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

Vou usar o mesmo padrão para todos os sprites.

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

Cé o código de cores XeY são as posições horizontal e vertical dos círculos.

POKESão necessários mais alguns s:

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

V+0, V+2, V+4, Etc ... são os locais horizontais de cada sprite, enquanto V+1, V+3, V+5... são verticais. As cores do sprite começam no registro V+39:

130 POKE V+39+I,C

Os ponteiros de dados do sprite começam em 2040e, como os dados começam em 832, obtemos 832/64= 13, então:

140 POKE 2040+I,13
150 NEXT I

Para ativar os sprites, defino bits 0-4do registro V+21. Também mudei o fundo para branco, para podermos ver o círculo azul.

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

É isso aí!

Sprites olímpicos


Ótimo! Não sei se me lembro corretamente, mas talvez você possa dobrar (em hardware) o tamanho x / y dos sprites. Tenho certeza que você poderia fazer isso em um C128.
Gabriele D'Antona

Sim, você pode definir bits V+23para altura dupla e V+29largura dupla. (bit # x para sprite # x).
Danko Durbić

11

LaTeX / TikZ

Tamanho: 876 bytes (12 linhas, linha com 72 caracteres e final de linha)

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

insira a descrição da imagem aqui

Tamanho: 817 bytes em uma linha e com duas otimizações:

  • Opção tikzde classe standalone, veja o comentário do Assistente de Trigo.
  • Os múltiplos usos de soft=blankpodem ser reduzidos pela definição de um estilo 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 (versão legível)

A seguinte versão mais longa é provavelmente mais fácil de entender.

  • A sobreposição dos anéis é tratada desenhando os anéis com segmentos em branco primeiro. Em um estágio posterior, os anéis são desenhados novamente, mas desta vez os segmentos em branco são preenchidos e os outros segmentos já desenhados dos anéis permanecem intocados. Portanto, o recorte não é usado.

  • O anel com as margens brancas é desenhado por um círculo com uma linha dupla. A área entre as linhas é preenchida com a cor do anel e as linhas duplas mais finas formam a margem branca externa e interna.

  • As cores e dimensões são retiradas da descrição da página em PDF da página 5 do documento oficial (consulte a resposta de Peter Tayler).

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

Para salvar alguns bytes, você pode usar \documentclass[tikz]{standalone}graças a esta dica .
Assistente de trigo

@WheatWizard Obrigado, a resposta é atualizada e abreviada ainda mais com a definição do estilo bpara evitar o tempo de blank=softuso quatro vezes.
precisa saber é o seguinte

10

C ++ 1024 bytes

Atualizada: agora com antialiasing. O código foi um pouco descodificado enquanto ainda cabia (exatamente) 1K.

Não usa nenhuma função de biblioteca, exceto as funções ostream, para gravar o arquivo de saída.

#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);;
}

Produz um arquivo .ppm:

insira a descrição da imagem aqui


11
Isso não é código-golfe : você pode ficar à vontade para tornar seu código legível, desde que caiba em 1kB.
Peter Taylor

+1 para não mesmo incluindo <cmath>
epidemian

10

R, 70 caracteres

Usando estatísticas 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)

Gráfico R


9

GLSL

Sinto que estou um pouco atrasado para a festa, mas talvez eu possa compensar isso com a primeira submissão do GLSL neste site. Ele deve ser usado como sombreador de fragmento para uma primitiva de preenchimento de tela e espera a resolução da viewport noiResolution uniforme.

Cores e posições são "emprestadas" da apresentação de Peter Taylor . Eu tive que encurtar alguns nomes de variáveis ​​para ficar abaixo de 1024 caracteres, mas espero que ainda seja legível.

Veja em Shadertoy (se o seu navegador suportar 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));
    }
}

Renderização resultante


5

Mathematica

Substituí minha resposta original por uma que se baseia em regiões e suas interseções. O tamanho do código é 973 bytes, sem uso deolfo.

As regiões 1-5 são os anéis. Os anéis têm um raio interno de 2,5 unidades; o raio externo é de 3 unidades. A proporção da razão interna para a externa e a lógica geral da abordagem podem ser encontradas aqui .

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}];

Por que não podemos simplesmente imprimir os 5 anéis sem levar em consideração as camadas.

Se traçarmos esses anéis imediatamente, eles não se entrelaçam. Observe que o anel amarelo está no topo dos anéis azul e preto; o anel verde fica no topo dos anéis preto e vermelho.

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]

no topo


Inverter cores em 4 interseções de anéis.

As regiões 6, 8, 10 e 12 são retângulos que servem para especificar em qual interseção de dois anéis focar.

As regiões 7, 9, 11 e 13 são as "sobreposições de anel", onde o anel na parte inferior deve estar na parte superior.

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]

argolas


Quais cruzamentos tiveram suas cores alteradas?

A seguir, destacamos as regiões de interseção nas quais as cores foram "invertidas". Isso foi realizado alterando as BoundaryStyleregiões 7, 9, 11 e 13 para White.

luzes


4
Você não pode fazer algo esteticamente melhor em 1k? essas interseções são feias!
Gabriele D'Antona

11
@friol, melhorei as interseções usando regiões.
DavidC

11
Demorou um ano e meio, mas você finalmente encontrou como fazer cruzamentos bonitas: D
Beta Decay

Ontem, vi alguns anéis olímpicos e percebi que poderia usar regiões para resolver o problema de interseção. Os anteriores eram feios demais para sair como estavam.
DavidC

3

Javascript (three.js) - 910 bytes

Dado um elemento html, essa função criará os anéis como objetos 3D e renderizará uma imagem estática para o elemento. Funciona em navegadores compatíveis com 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 ++ com SFML (1003, incluindo espaço em branco)

Não é pequeno por nenhum trecho da imaginação, mas mantido o mais conciso e legível possível e ainda abaixo de 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;
}

Editar: cores atualizadas com base no envio SVG de @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);

Resultado

insira a descrição da imagem aqui


0

fez uma solução baseada em uma edição Java Swing GUI UltraGolfed (696 charas)

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);}}

Semi-comprimido: 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);
    }
}

Você poderia adicionar uma captura de tela?
Paŭlo Ebermann 9/09/15

0

POWERSHELL,
código 869 e saída na captura de tela PowerShell olympic logo


0

SpecBAS

Cada anel é constituído por um círculo interno / externo e preenchido por inundação.

Tinha que encontrar as interseções manualmente e preenchê-las individualmente (para que você ainda possa ver algumas das linhas entre elas).

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

enter image description here

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.