Logo Igrzysk Olimpijskich - Free Style Edition [zamknięte]

30

W podobnym duchu co to pytanie , Twoim zadaniem jest stworzenie logo najlepiej patrząc w co najwyżej 1K kodu.

Zasady:

  1. Maksymalnie 1K kodu (włącznie), brak danych zewnętrznych.

  2. Odpowiedź z największą liczbą głosów pozytywnych wygrywa.

Baw się dobrze!

chubakueno
źródło
6
Cóż, stwierdził wprost „w podobnym duchu jak to pytanie ”, więc praktycznie powiedział „hej, wiem, że to duplikat”: D
Mike Koch
5
Różne kryteria wygranej. To podobne pytanie, ale nie jest duplikatem.
Victor Stafusa
3
Cieszę się, że ktoś inny stworzył wersję mojego pytania w konkursie popularności z mniejszymi kryteriami, ponieważ byłem rozdarty, w którą stronę iść, pisząc to.
Adam Maras,
@AdamMaras Cieszę się, że to słyszę :)
chubakueno
Zacząłem dyskusję ponownego otwarcia na Meta , jak kwestia ta nie powinna być blisko-przydatne.
Adam Maras,

Odpowiedzi:

44

SVG

1kB? Luksus. Mogę nawet całkiem wydrukować wydruk zamiast usuwać wszystkie niepotrzebne białe znaki. (Wcięcie używa oczywiście tabulatorów, które Markdown konwertuje na spacje, dlatego liczba znaków może wydawać się wyższa niż rzeczywista 977. Usunięcie niepotrzebnych białych znaków powoduje zmniejszenie jej do 861).

Zakładki są obsługiwane poprawnie, rysując pierścienie w jednym kierunku, a następnie nakładając klips i rysując je w drugim kierunku. Kolory i proporcje są pobierane z oficjalnego dokumentu, który z jakiegoś powodu używa krzywych Béziera, a nie okręgów.

<?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>

Renderowanie pliku SVG w formacie PNG

Peter Taylor
źródło
16
PS Jeśli ktoś chce argumentować, że SVG nie jest językiem programowania (i bardzo chciałbym się zgodzić), rozważ to jako program PHP w stylu wielu zgłoszeń PHP na tę stronę, które odzwierciedlają dosłowny tekst.
Peter Taylor
O mój Boże, to wygląda niesamowicie. SVG jest
39

JavaScript (rdzeń) - 1000 w kropce. - WebKit (Chrome)

Zabawa z płótnem.

Nie jestem pewien, czy jest to 1024 czy 1000 K, ale udało się sprowadzić go do 1000 982 940: D

Nadaje się tylko do przeglądarek WebKit. Chrome OK. Firefox bałagan. Może zajrzeć do przeglądarki.


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: Porzuciłem pakowanie onloadi polegam na wstawianiu skryptu na końcu bodytagu + błąd wyrównania i poprawka Firefoksa.

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)

Skrzypce:

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

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

Ładuje się zarówno w Firefoksie, jak i Chrome, ale jest dość obciążony zasobami w FF. Korzystanie requestAnimationFrame()pomogło trochę, ale niewystarczająco.

Zwróć uwagę, że śnieg leży na dnie, dlatego przewiń w dół, aby zobaczyć powolny wzrost. Początkowo miał trochę przemalowania na ziemi, ale nie mógł zmieścić się w 1024 chr.

Wynik (zrzut ekranu w niskiej jakości z GIF-em):

wprowadź opis zdjęcia tutaj

Runium
źródło
2
Miły! Działa również w IE11.
Danko Durbić
Działa absolutnie dobrze w przeglądarce Firefox 27.0.1.
Nathan Osman
32

Matematyka

Z mojej odpowiedzi w Mathematica.SE Pytania i odpowiedzi :

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

wprowadź opis zdjęcia tutaj

Edycja: W wersji 10 zmieniono domyślny styl oświetlenia; aby renderować powyższą grafikę, należy dodać opcję Lighting -> "Classic"do Graphics3D.

Dalsza gra z oświetleniem w celu uzyskania płaskiego dwuwymiarowego efektu:

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
]

wprowadź opis zdjęcia tutaj


Dla Olivera, który powiedział, że mój pierwszy wynik to „zbyt 3D”, oto rzeczywiste renderowanie 2D za pomocą kodu jVincent z moim refaktoryzacją, również z powiązanego wątku:

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

wprowadź opis zdjęcia tutaj

Mr.Wizard
źródło
@Oliver Zaktualizowano specjalnie dla Ciebie.
Mr.Wizard
Łał! Czy możesz mi powiedzieć, gdzie możesz pobrać Mathmatica?
Oliver Ni
@Oliver Jest to produkt komercyjny i dość drogi nawet do indywidualnego, niekomercyjnego użytku, ale jeśli nadal jesteś zainteresowany, możesz uzyskać 15-dniową wersję próbną z: wolfram.com/mathematica/trial
Mr.Wizard
1
@Oliver możesz teraz uzyskać bezpłatną wersję Mathematica, jeśli masz malinowe pi
trichoplax
@trichoplax Teraz Open Cloud pozwala swobodnie uruchamiać skromne programy w interfejsie przeglądarki: develop.open.wolframcloud.com/app/view/newNotebook
Mr.Wizard
28

Ruby, 321

Niestety pewna głowa państwa wydaje się być głównym tematem większości wiadomości olimpijskich. Oto moje logo freestyle (maskotka?) Na Igrzyska 2014.

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

Wyjście: (Wykonaj kopię zapasową i zez. Przepraszam za prymitywne renderowanie, ale nie zasługuje na nic lepszego.)

Putin

Darren Stone
źródło
6
$$$, smutna, ale prawdziwa: 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:

Przykładowe dane wyjściowe:

logo igrzysk olimpijskich

człowiek w pracy
źródło
23

FreePascal

Olimpiada zimowa? Co powiesz na niektóre fraktalne płatki śniegu zamiast zwykłych pierścieni.

Rekurencja dla gałęzi środkowej jest dość oczywista: (dx, dy) = 0,5 (dx, dy). Gałęzie lewy i prawy są oparte na rotacji przez mnożenie macierzy:

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

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

1/4 = 0,5 cos (60) i 7/16 to dobre przybliżenie 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.

. .

obraz

Level River St
źródło
Miły. Jeśli możesz dodać dużą ilość losowości do algorytmu, możesz ponownie użyć go w symulacji losowego płatka śniegu .
manatwork
16

Jawa

Podobnie do mojej odpowiedzi SVG, ale

  • Wykorzystuje dwa klipy, aby uniknąć niewielkich rozbieżności z powodu podwójnego rysowania z wygładzaniem.
  • Ponieważ Java ma rzeczywiste pętle, struktura jest nieco ładniejsza.

Zauważ, że nie próbowałem grać w golfa, pomimo możliwości kilku interesujących lew (np. -57*~dirZamiast 57*(1+dir). Jest przy 923 znakach, ale gra w golfa do 624 dość łatwo.

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 renderowane przez program Java

Peter Taylor
źródło
16

Commodore 64 BASIC

Znów odpowiedź C64, ale tym razem wolno mi używać duszków ! Tak!

Pamiętam, że jeśli chciałeś używać duszków, zacząłbyś swój program od wielu nudnych DATAinstrukcji. Aby zdefiniować monochromatyczny wzór sprite „wysokiej rozdzielczości” (24 x 21 pikseli), potrzebujesz 63 bajtów. W rzeczywistości istnieje internetowy edytor ikonek, który oblicza dane, więc:

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

Potrzebuję też więcej DANYCH dla kolorów i pozycji. Właśnie skopiowałem to z mojej odpowiedzi na pierwotne pytanie z logo Igrzysk Olimpijskich :

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

Potem zwykle ustawiałeś V=53248. To 53248musi być ważna liczba, ponieważ wciąż ją pamiętam 25 lat później :) Okazuje się, że jest to podstawowy adres VIC-II (kontrolera interfejsu wideo):

50 V=53248

Następnie wczytałem wzór duszka do pamięci, zaczynając od adresu 832. Dziwnie jest pisać po prostu w pamięci, bez alokacji, nie new, nic takiego :) Adres początkowy musi być wielokrotnością 64.

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

Będę używał tego samego wzoru dla wszystkich duszków.

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

Cto kod koloru, Xi Ysą poziomymi i pionowymi pozycjami kół.

Potrzebnych jest jeszcze kilka POKEs:

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

V+0, V+2, V+4, Itp ... są poziome lokalizacje każdej ikonki, podczas V+1, V+3, V+5... są pionowe. Kolory duszka zaczynają się od rejestru V+39:

130 POKE V+39+I,C

Wskaźniki danych sprite zaczynają się od 2040, a ponieważ dane zaczynają się od 832, otrzymujemy 832/64= 13, więc:

140 POKE 2040+I,13
150 NEXT I

Aby włączyć duszki, ustawiam bity 0-4rejestru V+21. Zmieniłem też tło na białe, aby zobaczyć niebieski okrąg.

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

To jest to!

Duszki olimpijskie

Danko Durbić
źródło
Świetny! Nie wiem, czy dobrze pamiętam, ale może możesz podwoić (sprzętowo) rozmiar x / y ikonek. Jestem pewien, że możesz to zrobić na C128.
Gabriele D'Antona
Tak, możesz ustawić bity V+23dla podwójnej wysokości i V+29podwójnej szerokości. (bit #x dla duszka #x).
Danko Durbić
11

LaTeX / TikZ

Rozmiar: 876 bajtów (12 linii, linia z 72 znakami i koniec linii)

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

wprowadź opis zdjęcia tutaj

Rozmiar: 817 bajtów w jednym wierszu i przy dwóch optymalizacjach:

  • Opcja tikzklasy standalone, patrz komentarz Kreatora pszenicy.
  • Wiele zastosowań soft=blankmożna skrócić, definiując styl 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 (wersja do odczytu)

Następująca dłuższa wersja jest prawdopodobnie łatwiejsza do zrozumienia.

  • Zachodzenie na siebie pierścieni odbywa się poprzez narysowanie pierścieni najpierw pustymi segmentami. Następnie na późniejszym etapie pierścienie są ponownie rysowane, ale tym razem puste segmenty są wypełnione, a pozostałe już wyciągnięte segmenty pierścieni pozostają nietknięte. Dlatego obcinanie nie jest w ogóle używane.

  • Pierścień z białymi marginesami jest rysowany za pomocą koła z podwójną linią. Obszar między liniami jest wypełniony kolorem pierścienia, a cieńsze podwójne linie tworzą zewnętrzny i wewnętrzny biały margines.

  • Kolory i wymiary pochodzą z opisu strony PDF strony 5 oficjalnego dokumentu (patrz odpowiedź Petera Taylera).

\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
źródło
Aby zaoszczędzić kilka bajtów można korzystać \documentclass[tikz]{standalone}dzięki tej końcówki .
Kreator pszenicy 18.04.17
@WheatWizard Dzięki, odpowiedź jest aktualizowana i dalej skracana poprzez zdefiniowanie stylu, baby uniknąć długości, blank=softktóra jest używana cztery razy.
Heiko Oberdiek
10

C ++ 1024 bajty

Zaktualizowano: teraz z wygładzaniem krawędzi. Kod został nieco zdez golfowany, ale wciąż mieści się w (dokładnie) 1K.

Nie używa żadnych funkcji bibliotecznych oprócz funkcji ostream do zapisywania pliku wyjściowego.

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

Wysyła plik .ppm:

wprowadź opis zdjęcia tutaj

mattnewport
źródło
1
To nie jest kod-golf : możesz uczynić swój kod czytelnym, pod warunkiem, że mieści się w 1kB.
Peter Taylor
+1 za nawet nieuwzględnienie <cmath>
epidemia
10

R, 70 znaków

Korzystanie ze statystyk 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 fabuła

Kuzyn Kokaina
źródło
9

GLSL

Wydaje mi się, że jestem trochę spóźniony na imprezę, ale może uda mi się to zrekompensować pierwszym przesłaniem GLSL na tej stronie. Ma być stosowany jako moduł cieniujący fragmenty dla operacji podstawowej wypełniającej ekran i oczekuje rozdzielczości rzutni w iResolutionmundurze.

Kolory i pozycje są „zapożyczone” z oświadczenia Petera Taylora . Musiałem skrócić niektóre nazwy zmiennych, aby uzyskać mniej niż 1024 znaki, ale mam nadzieję, że nadal będą czytelne.

Zobacz to w Shadertoy (jeśli twoja przeglądarka obsługuje 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));
    }
}

Wynikowe renderowanie

reima
źródło
5

Matematyka

Oryginalną odpowiedź zastąpiłem odpowiedzią na regiony i ich skrzyżowania. Rozmiar kodu to 973 bajtów, bez golfa.

Regiony 1-5 to pierścienie. Pierścienie mają wewnętrzny promień 2,5 jednostki; promień zewnętrzny wynosi 3 jednostki. Stosunek wewnętrzny do zewnętrznego oraz ogólna logika podejścia można znaleźć tutaj .

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

Dlaczego nie możemy po prostu wydrukować 5 pierścieni bez uwzględnienia warstw.

Jeśli od razu wykreślimy te pierścienie, nie będą się blokować. Zauważ, że żółty pierścień leży na szczycie niebieskiego i czarnego pierścienia; zielony pierścień leży na szczycie zarówno czarnego, jak i czerwonego pierścienia.

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]

na szczycie


Przerzucanie kolorów na 4 skrzyżowaniach pierścieni.

Regiony 6, 8, 10 i 12 to prostokąty, które służą do określenia, na którym przecięciu dwóch pierścieni należy się skupić.

Regiony 7, 9, 11 i 13 to „pierścienie zachodzące na siebie”, gdzie pierścień na dole powinien znajdować się na górze.

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]

pierścienie


Na których skrzyżowaniach odwrócono ich kolory?

Poniżej wyróżniono regiony przecięcia, w których kolory zostały „odwrócone”. Dokonano tego poprzez zmianę BoundaryStyleregionów 7, 9, 11 i 13 na White.

najważniejsze

DavidC
źródło
4
Czy nie możesz zrobić czegoś lepszego estetycznie w 1k? te skrzyżowania są brzydkie!
Gabriele D'Antona
1
@ Friol, poprawiłem skrzyżowania za pomocą regionów.
DavidC,
1
Zajęło to półtora roku, ale w końcu odkryłeś, jak robić ładne skrzyżowania: D
Beta Decay
Wczoraj widziałem kilka kół olimpijskich i zdałem sobie sprawę, że mogę wykorzystać regiony do rozwiązania problemu skrzyżowania. Poprzednie były zbyt brzydkie, żeby odejść.
DavidC,
3

JavaScript (three.js) - 910 bajtów

Biorąc pod uwagę element HTML, funkcja ta utworzy pierścienie jako obiekty 3D, a następnie wyrenderuje nieruchomy obraz do elementu. Działa w przeglądarkach obsługujących WebGL. SKRZYPCE

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
źródło
2

kot (10 bajtów)

Było tak krótkie, że strona odmówiła przesłania go, dopóki nie dodałem tego opisu. Logo reprezentuje igrzyska olimpijskie.

$ $ $
 $ $
Konrad Borowski
źródło
Zasadniczo poprawka odpowiedzi Darrena na inne pytanie
Peter Taylor
2

C ++ w / SFML (1003 włącznie z białymi znakami)

Nie mały jak na wyobraźnię, ale utrzymany tak zwięzły, jak to możliwe i wciąż poniżej 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;
}

Edycja: Zaktualizowano kolory w oparciu o przesłanie SVG @Peter Taylor.

cryptych stoi z Moniką
źródło
1

Delfy

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

Wynik

wprowadź opis zdjęcia tutaj

Teun Pronk
źródło
0

stworzył rozwiązanie oparte na edycji Java Swing GUI UltraGolfed (696 znaków)

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

Częściowo nieskompresowany: (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
źródło
Czy możesz dodać zrzut ekranu?
Paŭlo Ebermann
0

POWERSHELL,
kod 869 i dane wyjściowe na zrzucie ekranu Logo olimpijskie PowerShell

blabb
źródło
0

SpecBAS

Każdy pierścień składa się z wewnętrznego / zewnętrznego koła, a następnie jest wypełniony zalaniem.

Musiałem ręcznie znaleźć skrzyżowania i wypełnić je osobno (aby nadal można było zobaczyć niektóre linie między nimi).

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

wprowadź opis zdjęcia tutaj

Brian
źródło