Olimpiyat Oyunları Logosu - Serbest Stil Sürümü [kapalı]


30

Bu soruya benzer bir ruh haliyle , göreviniz en fazla 1K kodunda en iyi görünen logoyu oluşturmaktır.

Kurallar:

  1. En fazla 1K kod (dahil), harici veri yok.

  2. En çok oy alan cevap, kazanır.

İyi eğlenceler!


6
Peki, doğrudan " bu soruya benzer bir ruh hali " yazdı, bu yüzden pratikte "hey, bunun bir kopya olduğunu biliyorum" dedi: D
Mike Koch

5
Farklı kazanma kriterleri. Bu yüzden benzer bir soru, ancak bir yineleme değil.
Victor Stafusa,

3
Aslında, başkası yazdığımda hangi yöne gideceğimi sorduğumda daha az kriterli bir popülerlik yarışması sürümü oluşturduğuna sevindim .
Adam Maras,

@AdamMaras bunu duyduğuma sevindim :)
chubakueno

Meta ile ilgili yeniden açılma tartışmalarına başladım , çünkü bu sorunun yakın oylanması gerekmezdi.
Adam Maras,

Yanıtlar:


44

SVG

1 KB? Lüks. Gereksiz tüm beyaz boşlukları kaldırmak yerine, çıktıyı bile basabilirim. (Girinti, elbette, Markdown'un boşluklara dönüştürdüğü sekmeleri kullanır, bu yüzden char sayısı gerçek 977'den daha yüksek görünebilir. Gereksiz beyaz boşlukların kaldırılması bunu 861'e bırakır).

Üst üste binme halkalar bir yönde çizildikten sonra, bir klips uygulanıp diğer yönde çizilerek doğru şekilde tutulur. Renkler ve oranlar, bir nedenden dolayı daireler yerine Bézier eğrilerini kullanan resmi bir belgeden elde edilir.

<?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 render of SVG file


16
Not Eğer bir kimse SVG'nin bir programlama dili olmadığını (ve kabul etmeye çok meyilli olduğumu) iddia etmek isterse, bu kelimeyi, sadece asıl metinleri ekleyen bu siteye bir çok PHP gönderiminin tarzında bir PHP programı olarak düşünün.
Peter Taylor,

omg olsa muhteşem görünüyor. SVG kullanıcı

39

Javascript (çekirdek) - nokta üzerinde 1000. - WebKit (Chrome)

Tuval ile oynamak.

Bunun 1024 veya 1000 olduğundan emin değil K, ancak 1000 982 940: D’ye indirmeyi başardı

Yalnızca WebKit tarayıcıları için uygundur. Chrome Tamam. Firefox bir karmaşa. Çapraz tarayıcı yapmayı düşünebilirsin.


Kod:

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: Bırakarak düştü onloadve bodyetiket + hizalama hatası ve Firefox düzeltmesinin sonuna eklenmiş komut dosyasına güvendi.

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)

Keman:

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

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

Firefox ve Chrome'a ​​yüklenir ancak FF'deki kaynaklar oldukça yoğundur. kullanmarequestAnimationFrame() biraz yardımcı oldu ama yeterli değil.

Karın dibe düştüğünü unutmayın, böylece yavaş büyümeyi görmek için aşağı kaydırın. Başlangıçta zeminde boyamaları vardı, ancak 1024 chr'ye sığdıramadı.

Sonuç (düşük kaliteli GIF'ed screencast):

enter image description here


2
Güzel! Aynı zamanda IE11'de de çalışır.
Danko Durbić

Firefox 27.0.1'de kesinlikle iyi çalışıyor.
Nathan Osman,

32

Mathematica

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

enter image description here

Düzenleme: 10 sürümünde varsayılan aydınlatma tarzı değişti; tek Seçeneği eklemeniz gerekecektir yukarıdaki grafiği işlemek için Lighting -> "Classic"için Graphics3D.

Düz bir iki boyutlu etki üretmek için aydınlatma ile daha fazla oynama:

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
]

enter image description here


İlk sonucumun "çok fazla 3D-ish" olduğunu söyleyen Oliver için, işte yeniden yapılanmayla birlikte jVincent koduyla, aynı zamanda bağlantılı iş parçacığından gerçek bir 2D render:

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

enter image description here


@Oliver Sadece sizin için güncellendi.
Sihirbaz

Vaov! Mathmatica'yı nereden indirebileceğinizi söyleyebilir misiniz?
Oliver Ni

@Oliver Ticari bir üründür ve bireysel, ticari olmayan kullanım için bile pahalıdır, ancak hala ilgileniyorsanız, 15 günlük deneme sürümünü edinebilirsiniz: wolfram.com/mathematica/trial
Mr.Wizard

1
@Oliver artık bir ahududu pi varsa artık Mathematica'nın ücretsiz bir sürümünü edinebilirsin
trichoplax

@trichoplax Şimdi Açık Bulut Bir tarayıcı arayüzü biri serbestçe koşmak mütevazı programları sağlar: develop.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard

28

Ruby, 321

Ne yazık ki, belirli bir devlet başkanı bugüne kadar Olimpiyat haberlerinin çoğunun ana başlığı gibi görünüyor. Böylece, 2014 Oyunları için serbest stil logom (maskot?).

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

Çıktı: (Yedekleyin ve şaşı. İlkel render için üzgünüm ama daha iyisini haketmiyor.)

Putin


6
$$$, üzgün ama gerçek: 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:

Örnek çıktı:

olympic games logo


23

FreePascal

Kış Olimpiyatları? Normal halkalar yerine bazı fraktal kar taneleri hakkında.

Merkez dalı için özyineleme oldukça açıktır: (dx, dy) = 0.5 (dx, dy). Sol ve sağ dallar matris çarpımına göre rotasyona dayanır:

x = x cos (a) - günah (a)

y = x günah (a) + y cos (a)

1/4 = 0.5 cos (60) ve 7/16, 0.5 sin (60) 'ın iyi bir yaklaşımıdır.

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.

. .

görüntü


Güzel. Algoritmaya iyi miktarda rastgelelik ekleyebilirseniz, rastgele bir kar tanesini simüle edelim olarak yeniden kullanabilirsiniz .
Manatwork

16

Java

Benim SVG cevabına benzer, ancak

  • Kenar yumuşatma ile çift çizim nedeniyle hafif tutarsızlıkları önlemek için iki klip kullanır.
  • Java'nın gerçek döngüleri olduğundan, yapı biraz daha hoş.

Bazı ilginç hileler olasılığına rağmen golf oynamaya çalışmadığımı unutmayın ( -57*~dirbunun yerine 57*(1+dir). 923 karakterde, ancak 624'e kadar golf) oldukça kolay.

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

Java programı tarafından oluşturulan PNG


16

Commodore 64 TEMEL

Yine, bir C64 cevap, ama bu sefer sprite kullanmama izin veriyor ! Yuppi!

Sprite kullanmak istersen, programına sıkıcı DATAifadelerle başladığını hatırlıyorum . "Yüksek çözünürlüklü" (24x21 piksel) monokromatik sprite düzenini tanımlamak için 63 bayta ihtiyacınız var. Aslında bir çevrimiçi sprite editörü var , sizin için hesaplayan var.

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

Renkler ve pozisyonlar için biraz daha DATA'ya ihtiyacım olacak . Bunu orijinal Olimpiyat Oyunları Logosu sorusuna verdiğim yanıttan kopyaladım :

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

O zaman, genellikle ayarlardın V=53248. Bu 53248önemli bir sayı olmalı, çünkü 25 yıl sonra hala hatırlıyorum :) Görünüşe göre VIC-II'nin (Video Interface Controller) temel adresi:

50 V=53248

Sonra sprite desenini adresten başlayarak belleğe okudum 832. Sadece bir hafıza konumuna yazmak, ayırmak yok, hayırnew , , öyle bir şey yok :) Başlangıç ​​adresinin 64 katı olması gerekiyor.

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

Bütün spritelar için aynı deseni kullanacağım.

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

C renk kodu X ve Ydairelerin yatay ve dikey konumlarıdır.

Birkaç POKEsaniye daha gerekiyor:

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

V+0, V+2, V+4Süre, vb ... her hareketli grafiğin yatay yerleridir V+1, V+3, V+5... düşey bulunmaktadır. Sprite renkler kasada başlar V+39:

130 POKE V+39+I,C

Sprite veri işaretçileri başlar 2040ve veriler başladığından beri 832, biz 832/64= alırız 13:

140 POKE 2040+I,13
150 NEXT I

Spriteları açmak 0-4için register'ın bitlerini belirledim V+21. Ayrıca arka planı beyaza çevirdim, böylece mavi daireyi görebiliyoruz.

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

Bu kadar!

Olimpiyat sprite


Harika! Doğru hatırlıyor muyum bilmiyorum, ama belki de spriteların x / y boyutunu iki katına çıkarabilirsin (donanımda). Bunu bir C128'de yapabildiğinden eminim.
Gabriele D'Antona

Evet, V+23çift ​​yükseklik V+29için ve çift ​​genişlik için bit ayarlayabilirsiniz . (sprite #x için bit #x).
Danko Durbić

11

LaTeX / TikZ

Boyut: 876 bayt (12 satır, 72 karakterli satır ve satır sonu)

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

görüntü tanımını buraya girin

Boyut: bir satırda ve iki optimizasyonda 817 bayt :

  • tikzSınıf seçeneği , Buğday Sihirbazı'nın yorumunastandalone bakınız .
  • soft=blankBir stil tanımlayarak çoklu kullanımları kısaltılabilir 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 (okunabilir sürüm)

Aşağıdaki uzun sürüm muhtemelen anlamak daha kolaydır.

  • Halkaların üst üste gelmesi, halkaları önce boş bölümleri olan halkalar çizerek ele alınır. Sonra, daha sonraki bir aşamada, halkalar tekrar çekilir, ancak bu sefer boş kısımlar doldurulur ve halkaların zaten çizilen diğer kısımlarına dokunulmaz. Bu nedenle, kırpma hiç kullanılmaz.

  • Beyaz kenar boşluklu halka, çift çizgili daire şeklinde çizilir. Çizgiler arasındaki alan halkanın rengiyle doldurulur ve daha ince çift çizgiler dış ve iç beyaz marjı oluşturur.

  • Renkler ve boyutlar resmi belgenin 5. sayfasındaki PDF sayfa tanımından alınmıştır (Peter Tayler'in cevabına bakınız ).

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

Bir kaç bayttan tasarruf \documentclass[tikz]{standalone}etmek için bu ipucu sayesinde kullanabilirsiniz .
Buğday Sihirbazı,

@WheatWizard Teşekkürler, dört kez kullanılan buzun önlemek için stil tanımlayarak cevap güncellendi ve daha da kısaltıldı blank=soft.
Heiko Oberdiek

10

C ++ 1024 bayt

Güncelleme: Şimdi antialiasing ile. Kod (tam olarak) 1K'ya uyurken hala biraz kural dışı.

Çıkış dosyasını yazmak için ostream işlevleri dışında hiçbir kütüphane işlevini kullanmaz.

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

Bir .ppm dosyası çıktılar:

görüntü tanımını buraya girin


1
Bu kod golf değildir : kodunuzu okunaklı kılmaktan çekinmeyin, 1kB'ye sığmasını sağlayın.
Peter Taylor

<cmath> dahil olmasa bile +1
salgını

10

R, 70 karakter

CRAN-R istatistiklerini kullanma.

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 arsa


9

GLSL

Partiye biraz geç kaldığımı hissediyorum, ancak belki de bu sitede ilk GLSL gönderimi ile telafi edebilirim. Ekran dolgulu bir ilkel için parça gölgelendirici olarak kullanılmak üzere tasarlandı veiResolution tek tip olarak .

Renkler ve pozisyonlar Peter Taylor'un gönderiminden "ödünç alınıyor" . 1024 karakterin altına düşmek için bazı değişken isimlerini kısaltmak zorunda kaldım, ancak umarım hala okunabilir.

Shadertoy'da görün (tarayıcınız WebGL'yi destekliyorsa).

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

Sonuç oluşturma


5

Mathematica

Asıl cevabımı bölgeler ve kesişimler üzerine çizilen bir cevapla değiştirdim. Kod boyutu 973 bayttır, ungolfed.

Bölgeler 1-5, halkalardır. Halkaların iç yarıçapı 2.5 birimdir; dış yarıçapı 3 birimdir. İç oranın dış orana oranı ve yaklaşımın genel mantığı burada bulunur. .

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

Neden 5 halkayı katmanları hesaba katmadan basamıyoruz.

Bu halkaları derhal çizersek, iç içe geçmezler. Sarı halkanın mavi ve siyah halkaların üstünde olduğuna dikkat edin; yeşil halka hem siyah hem de kırmızı halkaların üzerinde yer alır.

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]

üstünde


Renklerin 4 kesişme noktasında çevrilmesi.

Bölgeler 6, 8, 10 ve 12, hangi iki halkanın kesişimine odaklanacağını belirleyen dikdörtgenlerdir.

Bölgeler 7, 9, 11 ve 13, altındaki halkanın üstte olması gereken "halka örtüşmeleri" dir.

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]

halkalar


Hangi kavşaklarda renkleri ters çevrildi?

Aşağıdakiler, renklerin "çevrildiği" kavşak bölgelerini vurgular. Bu, BoundaryStyle7, 9, 11 ve 13 bölgelerinin bölgeleri değiştirilerek sağlandı White.

vurgular


4
Estetik açıdan 1k daha iyi bir şey yapamaz mısın? bu kavşaklar çirkin!
Gabriele D'Antona

1
@friol, bölgeleri kullanarak kavşakları geliştirdim.
DavidC

1
Bir buçuk yıl sürdü, ama nihayet güzel kavşakların nasıl yapıldığını gördün: D
Beta Decay

Dün bazı Olimpiyat halkaları gördüm ve kesişme sorununu çözmek için bölgeleri kullanabileceğimi fark ettim. Öncekileri olduğu gibi bırakamayacak kadar çirkindi.
DavidC

3

Javascript (three.js) - 910 bayt

Bir html öğesi verildiğinde, bu işlev halkaları 3B nesneler olarak oluşturur ve daha sonra öğeye hareketsiz bir görüntü oluşturur. WebGL'yi destekleyen tarayıcılarda çalışır. KEMAN

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 ++ w / SFML (1003 boşluk dahil)

Hayal gücünün herhangi bir gerilimi ile küçük değildir, ancak mümkün olduğu kadar okunaklı ve hala 1k altında tutulmalıdır.

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

Düzenleme: @Peter Taylor'ın SVG gönderimini temel alarak güncellenmiş renkler.


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

Sonuç

görüntü tanımını buraya girin


0

Java Swing GUI UltraGolfed sürümüne (696 charas) dayalı bir çözüm yaptı

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

Yarı sıkıştırılmış bir: (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);
    }
}

Ekran görüntüsü ekler misiniz?
Paŭlo Ebermann

0

POWERSHELL, 869
kod ve ekran görüntüsünde çıktı PowerShell olimpiyat logosu


0

SpecBAS

Her halka bir iç / dış daireden oluşur, sonra suyla doldurulur.

Kavşakları manuel olarak bulmak ve bunları ayrı ayrı doldurmak zorunda kaldı (bu yüzden hala aralarındaki çizgilerin bir kısmını görebilirsiniz).

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

görüntü tanımını buraya girin

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.