Logotipo de los Juegos Olímpicos - Free Style Edition [cerrado]


30

En un espíritu similar a esta pregunta , su misión es crear el logotipo más atractivo en un máximo de 1K de código.

Reglas:

  1. Como máximo 1K de código (incluido), no hay datos externos.

  2. La respuesta con más votos a favor gana.

¡Que te diviertas!


66
Bueno, él dijo directamente "en un espíritu similar a esta pregunta ", por lo que prácticamente dijo "oye, sé que esto es un duplicado": D
Mike Koch

55
Diferentes criterios ganadores. Por lo tanto, es una pregunta similar, pero no es un duplicado.
Victor Stafusa

3
De hecho, me alegro de que alguien más haya creado una versión de mi pregunta en el concurso de popularidad con menos criterios, ya que no sabía qué camino tomar cuando escribí.
Adam Maras

@AdamMaras Me alegra escuchar eso :)
chubakueno

Comencé una discusión de reapertura sobre Meta , ya que esta pregunta no debería haber sido votada de cerca.
Adam Maras

Respuestas:


44

SVG

1kB? Lujo. Incluso puedo imprimir bastante la salida en lugar de eliminar todos los espacios en blanco innecesarios. (La sangría, por supuesto, usa pestañas, que Markdown convierte en espacios, por lo que el recuento de caracteres puede parecer mayor que el 977 real. Al eliminar espacios en blanco innecesarios, se reduce a 861).

Las superposiciones se manejan correctamente dibujando los anillos en una dirección, luego aplicando un clip y dibujándolos en la otra dirección. Los colores y las proporciones se extraen de un documento oficial que, por alguna razón, utiliza curvas de Bézier en lugar 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>

Render PNG del archivo SVG


16
PD: si alguien quiere argumentar que SVG no es un lenguaje de programación (y me inclinaría a aceptarlo), considérelo un programa PHP al estilo de muchas presentaciones PHP en este sitio que solo hacen eco de texto literal.
Peter Taylor

Dios mío, se ve increíble. SVG is niceee

39

Javascript (núcleo) - 1000 en punto. - WebKit (Chrome)

Jugando con lienzo.

No estoy seguro de si es 1024 o 1000 K, pero logró reducirlo a 1000 982 940: D

Solo apto para navegadores WebKit. Chrome bien. Firefox un desastre. Podría considerar hacerlo cruzar el navegador.


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: Se dejó de envolver onloady se basó en la secuencia de comandos que se insertó al final de la bodyetiqueta + error de alineación y corrección de 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)

Violín:

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

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

Se carga tanto en Firefox como en Chrome, pero es bastante pesado en recursos en FF. El uso requestAnimationFrame()ayudó un poco, pero no lo suficiente.

Tenga en cuenta que la nieve cae en el fondo, por lo tanto, desplácese hacia abajo para ver el lento crecimiento. Inicialmente tenía un poco de pintura en el suelo, pero no pudo hacer que encajara en 1024 chr.

Resultado (screencast GIF de baja calidad):

ingrese la descripción de la imagen aquí


2
¡Agradable! También funciona en IE11.
Danko Durbić

Funciona absolutamente bien en Firefox 27.0.1.
Nathan Osman

32

Mathematica

De mi respuesta en 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, ∞}
]

ingrese la descripción de la imagen aquí

Editar: en la versión 10, el estilo de iluminación predeterminado cambió; para representar el gráfico anterior, será necesario agregar la Opción Lighting -> "Classic"a Graphics3D.

Más jugando con la iluminación para producir un efecto plano bidimensional:

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
]

ingrese la descripción de la imagen aquí


Para Oliver, quien dijo que mi primer resultado fue "demasiado 3D-ish", aquí hay una representación 2D real a través del código de jVincent con mi refactorización, también desde el hilo 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}}
 ]

ingrese la descripción de la imagen aquí


@Oliver actualizado solo para ti.
Mr.Wizard

¡Guauu! ¿Me puede decir dónde puede descargar Mathmatica?
Oliver Ni

@Oliver Es un producto comercial, y bastante caro incluso para uso individual y no comercial, pero si todavía está interesado puede obtener una versión de prueba de 15 días en: wolfram.com/mathematica/trial
Mr.Wizard

1
@Oliver ahora puede obtener una versión gratuita de Mathematica si tiene una frambuesa pi
trichoplax

@trichoplax Now Open Cloud le permite a uno ejecutar libremente programas modestos en una interfaz de navegador: desarrollo.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard

28

Ruby, 321

Lamentablemente, cierto jefe de estado parece ser el tema principal de la mayoría de las noticias olímpicas hasta el momento. Por lo tanto, aquí está mi logotipo de estilo libre (¿mascota?) Para los Juegos de 2014.

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

Salida: (Retroceda y entrecierra los ojos. Perdón por el renderizado primitivo pero no merece nada mejor).

Putin


66
$$$, triste pero cierto: 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:

Salida de muestra:

logotipo de los juegos olímpicos


23

FreePascal

¿Juegos Olímpicos de Invierno? ¿Qué tal unos copos de nieve fractales en lugar de anillos regulares?

La recursividad para la rama central es bastante obvia: (dx, dy) = 0.5 (dx, dy). Las ramas izquierda y derecha se basan en la rotación por multiplicación matricial:

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

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

1/4 = 0.5 cos (60) y 7/16 es una buena aproximación 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.

. .

imagen


Agradable. Si puede agregar una buena cantidad de aleatoriedad al algoritmo, puede reutilizarlo en Simulemos un copo de nieve aleatorio .
manatwork

16

Java

Similar a mi respuesta SVG, pero

  • Utiliza dos clips, para evitar pequeñas discrepancias debido al doble dibujo con anti-alias.
  • Debido a que Java tiene bucles reales, la estructura es un poco más agradable.

Tenga en cuenta que no he tratado de jugar golf, a pesar de la posibilidad de algunos trucos interesantes (como en -57*~dirlugar de 57*(1+dir). Está en 923 caracteres, pero los golf hasta 624 con bastante facilidad.

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 por el programa Java


16

Commodore 64 BÁSICO

Una vez más, una respuesta C64, ¡pero esta vez puedo usar sprites ! ¡Hurra!

Recuerdo que si quisieras usar sprites, comenzarías tu programa con muchas DATAdeclaraciones aburridas . Para definir un patrón de sprites monocromáticos de "alta resolución" (24x21 píxeles) necesita 63 bytes. En realidad, hay un editor de sprites en línea que calcula los DATOS por usted, así que:

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

También necesitaré más DATOS para los colores y las posiciones. Acabo de copiar eso de mi respuesta a la pregunta original del logotipo de los Juegos Olímpicos :

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

Entonces, por lo general, se establece V=53248. Este 53248debe ser un número importante, porque aún lo recuerdo 25 años después :) Resulta que es la dirección base de VIC-II (Controlador de interfaz de video):

50 V=53248

Luego leí el patrón de sprites en la memoria comenzando en la dirección 832. Se siente extraño simplemente escribir en una ubicación de memoria, sin asignación, no new, nada de eso :) La dirección de inicio debe ser un múltiplo de 64.

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

Usaré el mismo patrón para todos los sprites.

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

Ces el código de color, Xy Yson posiciones horizontales y verticales de los círculos.

Se POKEnecesitan algunos s má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 ... son las ubicaciones horizontales de cada sprite, mientras que V+1, V+3, V+5... son verticales. Los colores del sprite comienzan en el registro V+39:

130 POKE V+39+I,C

Los punteros de datos de sprite comienzan en 2040, y dado que los datos comienzan en 832, obtenemos 832/64= 13, entonces:

140 POKE 2040+I,13
150 NEXT I

Para encender los sprites configuré bits 0-4del registro V+21. También cambié el fondo a blanco, para que podamos ver el círculo azul.

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

¡Eso es!

Sprites olímpicos


¡Excelente! No sé si recuerdo correctamente, pero quizás puedas duplicar (en hardware) el tamaño x / y de los sprites. Estoy seguro de que podrías hacer esto en un C128.
Gabriele D'Antona

Sí, puede establecer bits de V+23doble altura y V+29doble ancho. (bit #x para sprite #x).
Danko Durbić el

11

LaTeX / TikZ

Tamaño: 876 bytes (12 líneas, línea con 72 caracteres y final de línea)

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

ingrese la descripción de la imagen aquí

Tamaño: 817 bytes en una línea y con dos optimizaciones:

  • Opción tikzde clase standalone, ver comentario de Wheat Wizard.
  • Los usos múltiples de soft=blankse pueden acortar definiendo un 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 (versión legible)

La siguiente versión más larga es probablemente más fácil de entender.

  • La superposición de los anillos se maneja dibujando primero los anillos con segmentos en blanco. Luego, en una etapa posterior, los anillos se vuelven a dibujar, pero esta vez los segmentos en blanco se llenan y los otros segmentos ya dibujados permanecen intactos. Por lo tanto, el recorte no se utiliza en absoluto.

  • El anillo con los márgenes blancos se dibuja en círculo con una doble línea. El área entre las líneas se rellena con el color del anillo y las líneas dobles más delgadas forman el margen blanco exterior e interior.

  • Los colores y las dimensiones se toman de la descripción de la página PDF de la página 5 del documento oficial (vea la respuesta 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 guardar un par de bytes, puede usar \documentclass[tikz]{standalone}gracias a este consejo .
Wheat Wizard

@WheatWizard Gracias, la respuesta se actualiza y se acorta aún más definiendo el estilo bpara evitar el tiempo blank=softque se usa cuatro veces.
Heiko Oberdiek

10

C ++ 1024 bytes

Actualizado: ahora con antialiasing. El código se ha desarmado un poco mientras se ajustaba (exactamente) a 1K.

No utiliza ninguna función de biblioteca, excepto las funciones de ostream para escribir el archivo de salida.

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

Emite un archivo .ppm:

ingrese la descripción de la imagen aquí


1
Esto no es código golf : puede sentirse libre de hacer que su código sea legible, siempre que encaje en 1kB.
Peter Taylor

+1 por ni siquiera incluir <cmath>
epidemian

10

R, 70 caracteres

Utilizando estadí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)

R plot


9

GLSL

Siento que llego un poco tarde a la fiesta, pero tal vez pueda compensar eso con la primera presentación de GLSL en este sitio. Está destinado a ser utilizado como el sombreador de fragmentos para una primitiva de relleno de pantalla, y espera la resolución de la vista en eliResolution uniforme.

Los colores y las posiciones son "prestados" de la presentación de Peter Taylor . Tuve que acortar algunos nombres de variables para obtener menos de 1024 caracteres, pero espero que aún sea legible.

Véalo en Shadertoy (si su navegador admite 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));
    }
}

Representación resultante


5

Mathematica

He reemplazado mi respuesta original con una que se basa en regiones y sus intersecciones. El tamaño del código es de 973 bytes, sin registro.

Las regiones 1-5 son los anillos. Los anillos tienen un radio interno de 2.5 unidades; El radio exterior es de 3 unidades. La relación entre la relación interna y la externa, y la lógica general del enfoque se encuentran aquí .

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 qué no podemos simplemente imprimir los 5 anillos sin tener en cuenta las capas.

Si trazamos estos anillos inmediatamente, no se entrelazan. Observe que el anillo amarillo se encuentra sobre los anillos azul y negro; El anillo verde yace sobre los anillos negro y rojo.

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]

encima


Voltear colores en 4 intersecciones de anillos.

Las regiones 6, 8, 10 y 12 son rectángulos que sirven para especificar en qué intersección de dos anillos enfocarse.

Las regiones 7, 9, 11 y 13 son las "superposiciones de anillo" donde el anillo en la parte inferior debe estar en la 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]

anillos


¿Qué intersecciones tenían sus colores invertidos?

Lo siguiente resalta las regiones de intersección donde los colores fueron "invertidos". Esto se logró cambiando las BoundaryStyleregiones 7, 9, 11 y 13 a White.

reflejos


44
¿No puedes hacer algo estéticamente mejor en 1k? ¡esas intersecciones son feas!
Gabriele D'Antona

1
@friol, mejoré las intersecciones usando regiones.
DavidC

1
Tardó un año y medio, pero finalmente has encontrado cómo hacer bonitas intersecciones: D
Beta Decay

Ayer vi algunos anillos olímpicos y me di cuenta de que podía usar regiones para resolver el problema de la intersección. Los anteriores eran demasiado feos para dejarlos como estaban.
DavidC

3

Javascript (three.js) - 910 bytes

Dado un elemento html, esta función creará los anillos como objetos 3D y luego representará una imagen fija para el elemento. Funciona en navegadores que admiten WebGL. VIOLÍN

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 ++ con SFML (1003 incl. Espacio en blanco)

No es pequeño por ningún tramo de la imaginación, pero se mantiene tan breve pero legible como sea posible y aún por debajo 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: colores actualizados basados ​​en el envío 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

ingrese la descripción de la imagen aquí


0

creó una solución basada en una edición 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 sin comprimir: (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);
    }
}

¿Podría agregar una captura de pantalla?
Paŭlo Ebermann

0

POWERSHELL,
código 869 y salida en captura de pantalla Logotipo olímpico de PowerShell


0

SpecBAS

Cada anillo está formado por un círculo interno / externo, luego lleno de inundaciones.

Tenía que encontrar las intersecciones manualmente y rellenarlas individualmente (para que aún pueda ver algunas de las líneas entre ellas).

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

ingrese la descripción de la imagen aquí

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.