Olympic Games Logo - Free Style Edition [geschlossen]

30

In einem ähnlichen Sinne wie bei dieser Frage ist es Ihre Mission, das am besten aussehende Logo in höchstens 1 KB Code zu erstellen.

Regeln:

  1. Höchstens 1 KB Code (einschließlich), keine externen Daten.

  2. Die Antwort mit den meisten positiven Stimmen gewinnt.

Habe Spaß!

Chubakueno
quelle
6
Nun, er sagte direkt "in einem ähnlichen Geist wie diese Frage ", also sagte er praktisch "Hey, ich weiß, das ist ein Duplikat": D
Mike Koch
5
Unterschiedliche Gewinnkriterien. Es ist also eine ähnliche Frage, aber kein Duplikat.
Victor Stafusa
3
Tatsächlich bin ich froh, dass jemand anderes eine Beliebtheitswettbewerbsversion meiner Frage mit weniger Kriterien erstellt hat, da ich beim Verfassen der Frage in die Irre geführt habe.
Adam Maras
@ AdamMaras Froh, das zu hören :)
Chubakueno
Ich habe eine erneute Diskussion über Meta gestartet , da diese Frage nicht genau abgestimmt werden sollte.
Adam Maras

Antworten:

44

SVG

1kB? Luxus. Ich kann sogar die Ausgabe hübsch drucken, anstatt alle unnötigen Leerzeichen zu entfernen. (Für den Einzug werden natürlich Tabulatoren verwendet, die von Markdown in Leerzeichen umgewandelt werden. Daher scheint die Zeichenanzahl möglicherweise höher zu sein als die tatsächliche Zahl von 977. Durch Entfernen von unnötigen Leerzeichen wird sie auf 861 verringert.)

Die Überlappungen werden korrekt gehandhabt, indem die Ringe in eine Richtung gezeichnet werden, dann ein Clip angewendet wird und sie in die andere Richtung gezeichnet werden. Die Farben und Verhältnisse stammen aus einem offiziellen Dokument, das aus irgendeinem Grund Bézier-Kurven anstelle von Kreisen verwendet.

<?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-Rendering der SVG-Datei

Peter Taylor
quelle
16
PS: Wenn jemand argumentieren möchte, dass SVG keine Programmiersprache ist (und ich würde dem gerne zustimmen), betrachten Sie dies als ein PHP-Programm im Stil vieler PHP-Einreichungen auf dieser Site, die nur wörtlichen Text wiedergeben.
Peter Taylor
omg es sieht aber toll aus. SVG ist niceee
39

Javascript (Kern) - 1000 auf den Punkt. - WebKit (Chrome)

Spiel mit der Leinwand.

Ich bin nicht sicher, ob es 1024 oder 1000 Kist, aber ich habe es geschafft, es auf 1000 982 940 zu bringen: D

Nur für WebKit-Browser geeignet. Chrome OK. Firefox ein Chaos. Könnte sich darum kümmern, es browserübergreifend zu machen.


Code:

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: Wrapping ist weggefallen onloadund verlässt sich darauf, dass das Skript am Ende des bodyTags eingefügt wird + Ausrichtungsfehler und Firefox-Korrektur.

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)

Geige:

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

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

Lädt sowohl in Firefox als auch in Chrome, ist aber in FF ziemlich ressourcenintensiv. Mit requestAnimationFrame()ein wenig geholfen, aber nicht genug.

Beachten Sie, dass der Schnee unten liegt und scrollen Sie nach unten, um das langsame Wachstum zu sehen. Hatte anfangs etwas Übermalung auf dem Boden, konnte es aber nicht passend für 1024 chr machen.

Ergebnis (schlechter GIF-Screencast):

Bildbeschreibung hier eingeben

Runium
quelle
2
Nett! Es funktioniert auch in IE11.
Danko Durbić
Funktioniert absolut einwandfrei unter Firefox 27.0.1.
Nathan Osman
32

Mathematica

Aus meiner Antwort in der 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, ∞}
]

Bildbeschreibung hier eingeben

Bearbeiten: In Version 10 wurde der Standardbeleuchtungsstil geändert. die Grafik zu machen über ein die Option hinzufügen müssen Lighting -> "Classic"zu Graphics3D.

Weiter mit der Beleuchtung spielen, um einen flachen zweidimensionalen Effekt zu erzeugen:

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
]

Bildbeschreibung hier eingeben


Für Oliver, der mein erstes Ergebnis als "zu 3D-isch" bezeichnete, ist hier ein tatsächliches 2D-Rendering über jVincents Code mit meinem Refactoring, ebenfalls aus dem verlinkten Thread:

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

Bildbeschreibung hier eingeben

Mr.Wizard
quelle
@Oliver Nur für Sie aktualisiert.
Mr.Wizard
Wow! Können Sie mir sagen, wo Sie Mathmatica herunterladen können?
Oliver Ni
@Oliver Es handelt sich um ein kommerzielles Produkt, das selbst für den nicht kommerziellen Gebrauch ziemlich teuer ist. Wenn Sie jedoch noch interessiert sind, können Sie eine 15-Tage-Testversion von: wolfram.com/mathematica/trial
Mr.Wizard
1
@Oliver Sie jetzt eine kostenlose Version von Mathematica bekommen können , wenn Sie haben eine Himbeere pi
Trichoplax
@trichoplax Jetzt können Sie mit Open Cloud bescheidene Programme in einer Browser-Oberfläche frei ausführen: develop.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard
28

Ruby, 321

Leider scheint ein bestimmtes Staatsoberhaupt das Hauptthema der meisten olympischen Nachrichten zu sein. Hier ist also mein Freestyle-Logo (Maskottchen?) Für die Spiele 2014.

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

Ausgabe: (Sichern und blinzeln. Entschuldigen Sie das primitive Rendering, aber er verdient es nicht besser.)

Putin

Darren Stone
quelle
6
$$$, traurig aber wahr: 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:

Beispielausgabe:

Olympische Spiele-Logo

Mann bei der Arbeit
quelle
23

FreePascal

Winterolympiade? Wie wäre es mit einigen fraktalen Schneeflocken anstelle von regulären Ringen.

Die Rekursion für den Mittelast ist ziemlich offensichtlich: (dx, dy) = 0,5 (dx, dy). Linker und rechter Zweig basieren auf Rotation durch Matrixmultiplikation:

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

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

1/4 = 0,5 cos (60) und 7/16 ist eine gute Näherung von 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.

. .

Bild

Level River St
quelle
Nett. Wenn Sie dem Algorithmus ein gutes Maß an Zufälligkeit hinzufügen können, können Sie ihn unter Simulieren Sie eine zufällige Schneeflocke erneut verwenden .
Manatwork
16

Java

Ähnlich wie meine SVG-Antwort, aber

  • Verwendet zwei Clips, um leichte Abweichungen durch doppeltes Zeichnen mit Anti-Alias ​​zu vermeiden.
  • Da Java über echte Schleifen verfügt, ist die Struktur etwas besser.

Beachten Sie, dass ich nicht zum Golf habe versucht es, trotz der Möglichkeit, einige interessante Tricks (wie -57*~dirstatt 57*(1+dir). Es ist auf 923 Zeichen, aber golfs bis 624 ganz leicht nach unten.

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 von Java-Programm gerendert

Peter Taylor
quelle
16

Commodore 64 BASIC

Wieder eine C64-Antwort, aber dieses Mal darf ich Sprites verwenden ! Yay!

Ich erinnere mich, wenn Sie Sprites verwenden wollten, würden Sie Ihr Programm mit vielen langweiligen DATAAussagen beginnen. Um ein "hochauflösendes" (24x21 Pixel) monochromes Sprite-Muster zu definieren, benötigen Sie 63 Bytes. Es gibt tatsächlich einen Online- Sprite-Editor , der die DATEN für Sie berechnet.

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

Ich brauche noch ein paar DATEN für die Farben und Positionen. Ich habe das gerade von meiner Antwort auf die ursprüngliche Frage zum Logo der Olympischen Spiele kopiert :

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

Dann würden Sie normalerweise einstellen V=53248. Dies 53248muss eine wichtige Nummer sein, da ich mich 25 Jahre später noch daran erinnere :) Es stellt sich heraus, dass dies die Basisadresse von VIC-II (Video Interface Controller) ist:

50 V=53248

Dann habe ich das Sprite-Muster beginnend mit der Adresse in den Speicher eingelesen 832. Es fühlt sich komisch an, nur auf einen Speicherort zu schreiben, keine Zuordnung, nein new, nichts dergleichen :) Die Startadresse muss ein Vielfaches von 64 sein.

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

Ich werde für alle Sprites dasselbe Muster verwenden.

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

Cist der Farbcode Xund Ygibt die horizontale und vertikale Position der Kreise an.

Noch ein paar POKEs sind nötig:

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

V+0, V+2, V+4, Etc ... sind die horizontalen Positionen jedes Sprite, während V+1, V+3, V+5... vertikal sind. Die Sprite-Farben beginnen beim Register V+39:

130 POKE V+39+I,C

Die Sprite-Datenzeiger beginnen um 2040und da die Daten um beginnen 832, erhalten wir 832/64= 13, also:

140 POKE 2040+I,13
150 NEXT I

Um die Sprites einzuschalten, setze ich Bits 0-4des Registers V+21. Ich habe auch den Hintergrund in Weiß geändert, damit wir den blauen Kreis sehen können.

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

Das ist es!

Olympische Sprites

Danko Durbić
quelle
Groß! Ich weiß nicht, ob ich mich richtig erinnere, aber vielleicht können Sie die x / y-Größe der Sprites (in Hardware) verdoppeln. Ich bin sicher, Sie könnten dies auf einem C128 tun.
Gabriele D'Antona
Ja, Sie können Bits V+23für doppelte Höhe und V+29für doppelte Breite festlegen . (Bit #x für Sprite #x).
Danko Durbić
11

LaTeX / TikZ

Größe: 876 Bytes (12 Zeilen, Zeile mit 72 Zeichen und Zeilenende)

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

Bildbeschreibung hier eingeben

Größe: 817 Bytes in einer Zeile und mit zwei Optimierungen:

  • Option tikzder Klasse standalone, siehe Kommentar des Weizen-Assistenten.
  • Die Mehrfachverwendung von soft=blankkann durch Definieren eines Stils verkürzt werden 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 (lesbare Version)

Die folgende längere Version ist wahrscheinlich einfacher zu verstehen.

  • Die Überlappung der Ringe wird behandelt, indem die Ringe zuerst mit leeren Segmenten gezeichnet werden. Dann werden die Ringe zu einem späteren Zeitpunkt erneut gezeichnet, aber dieses Mal werden die leeren Segmente gefüllt und die anderen bereits gezeichneten Segmente der Ringe bleiben unberührt. Daher wird das Abschneiden überhaupt nicht verwendet.

  • Der Ring mit den weißen Rändern wird durch einen Kreis mit einer doppelten Linie gezeichnet. Der Bereich zwischen den Linien ist mit der Farbe des Rings gefüllt und die dünneren Doppellinien bilden den äußeren und inneren weißen Rand.

  • Die Farben und Maße sind der PDF-Seitenbeschreibung von Seite 5 des offiziellen Dokuments entnommen (siehe die Antwort von 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}
Heiko Oberdiek
quelle
So speichern Sie ein paar Bytes , die Sie verwenden können , \documentclass[tikz]{standalone}dank dieser Spitze .
Weizen-Assistent
@ WheatWizard Dankeschön, die Antwort wird aktualisiert und durch die Definition des Stils weiter verkürzt b, um die blank=softviermalige Verwendung zu vermeiden .
Heiko Oberdiek
10

C ++ 1024 Bytes

Aktualisiert: Jetzt mit Antialiasing. Code wurde etwas de-golfed, während er noch genau in 1 KB passt.

Verwendet keine Bibliotheksfunktionen außer ostream-Funktionen zum Schreiben der Ausgabedatei.

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

Gibt eine PPM-Datei aus:

Bildbeschreibung hier eingeben

mattnewport
quelle
1
Dies ist kein Code-Golf : Sie können Ihren Code jederzeit lesbar machen, sofern er in 1 KB passt.
Peter Taylor
+1 für nicht einmal einschließlich <cmath>
epidemian
10

R, 70 Zeichen

CRAN-R-Statistiken verwenden.

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 Grundstück

CousinCocaine
quelle
9

GLSL

Ich habe das Gefühl, dass ich ein bisschen zu spät zur Party komme, aber vielleicht kann ich das mit der ersten GLSL-Einreichung auf dieser Seite wieder gutmachen. Es soll als Fragment-Shader für ein bildschirmfüllendes Grundelement verwendet werden und erwartet die Auflösung des Ansichtsfensters imiResolution Uniform.

Farben und Positionen sind von Peter Taylors Vorlage "entlehnt" . Ich musste einige Variablennamen kürzen, um unter 1024 Zeichen zu kommen, aber ich hoffe, dass sie noch lesbar sind.

Sehen Sie es bei Shadertoy (wenn Ihr Browser WebGL unterstützt).

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

Resultierendes Rendering

reima
quelle
5

Mathematica

Ich habe meine ursprüngliche Antwort durch eine ersetzt, die Regionen und ihre Schnittpunkte verwendet. Die Codegröße beträgt 973 Byte, ungolfed.

Regionen 1-5 sind die Ringe. Die Ringe haben einen Innenradius von 2,5 Einheiten; Der äußere Radius beträgt 3 Einheiten. Das Verhältnis von innerem zu äußerem Verhältnis und die allgemeine Logik des Ansatzes sind hier zu finden .

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

Warum wir die 5 Ringe nicht einfach ausdrucken können, ohne Schichten zu berücksichtigen.

Wenn wir diese Ringe sofort zeichnen, greifen sie nicht ineinander. Beachten Sie, dass der gelbe Ring auf dem blauen und dem schwarzen Ring liegt. Der grüne Ring liegt auf dem schwarzen und dem roten Ring.

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]

oben auf


Spiegeln von Farben an 4 Kreuzungen von Ringen.

Die Bereiche 6, 8, 10 und 12 sind Rechtecke, mit denen angegeben wird, auf welchen Schnittpunkt zwei Ringe fokussiert werden sollen.

Die Bereiche 7, 9, 11 und 13 sind die "Ringüberlappungen", bei denen sich der Ring auf der Unterseite oben befinden sollte.

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]

Ringe


Welche Kreuzungen hatten ihre Farben gewechselt?

Im Folgenden werden die Schnittbereiche hervorgehoben, in denen Farben "gespiegelt" wurden. Dies wurde erreicht, indem die BoundaryStyleBereiche 7, 9, 11 und 13 auf geändert wurden White.

Höhepunkte

DavidC
quelle
4
Können Sie in 1 km nicht etwas Ästhetisch Besseres tun? Diese Kreuzungen sind hässlich!
Gabriele D'Antona
1
@friol, ich habe die Schnittpunkte mithilfe von Regionen verbessert.
DavidC
1
Es hat anderthalb Jahre gedauert, aber Sie haben endlich herausgefunden, wie Sie hübsche Schnittmengen erstellen können: D
Beta Decay
Gestern habe ich einige olympische Ringe gesehen und festgestellt, dass ich Regionen verwenden kann, um das Kreuzungsproblem zu lösen. Die vorherigen waren zu hässlich, um so zu bleiben, wie sie waren.
DavidC
3

Javascript (three.js) - 910 Bytes

Bei einem HTML-Element erstellt diese Funktion die Ringe als 3D-Objekte und rendert dann ein Standbild für das Element. Funktioniert in Browsern, die WebGL unterstützen. GEIGE

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}); }
XNargaHuntress
quelle
2

Katze (10 Bytes)

Es war so kurz, dass die Website sich weigerte, es hochzuladen, bis ich diese Beschreibung hinzufügte. Das Logo steht für Olympische Spiele.

$ $ $
 $ $
Konrad Borowski
quelle
Grundsätzlich ein Tweak von Darren Antwort auf die andere Frage
Peter Taylor
2

C ++ mit SFML (1003 inkl. Leerzeichen)

Nicht klein bei jeder Vorstellung, aber so knapp und doch lesbar wie möglich und immer noch unter 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;
}

Bearbeiten: Aktualisierte Farben basierend auf der SVG-Einreichung von @Peter Taylor.

Criptychon steht bei Monica
quelle
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);

Ergebnis

Bildbeschreibung hier eingeben

Teun Pronk
quelle
0

eine Lösung basierend auf einer Java Swing GUI UltraGolfed Edition (696 Zeichen) erstellt

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

Semiunkomprimiertes: (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);
    }
}
masterX244
quelle
Könnten Sie einen Screenshot hinzufügen?
Paŭlo Ebermann,
0

POWERSHELL, 869
Code und Ausgabe im Screenshot PowerShell olympisches Logo

blabb
quelle
0

SpecBAS

Jeder Ring besteht aus einem inneren / äußeren Kreis, der dann mit Wasser gefüllt wird.

Musste die Kreuzungen manuell finden und diese einzeln füllen (so dass Sie immer noch einige der Linien zwischen ihnen sehen können).

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

Bildbeschreibung hier eingeben

Brian
quelle