Em um espírito semelhante a esta pergunta , sua missão é criar o logotipo mais bonito com no máximo 1K de código.
Regras:
No máximo 1K de código (inclusive), sem dados externos.
A resposta com mais votos positivos vence.
Diverta-se!
Em um espírito semelhante a esta pergunta , sua missão é criar o logotipo mais bonito com no máximo 1K de código.
Regras:
No máximo 1K de código (inclusive), sem dados externos.
A resposta com mais votos positivos vence.
Diverta-se!
Respostas:
1kB? Luxo. Eu posso até imprimir bastante a saída, em vez de remover todo o espaço em branco desnecessário. (O recuo, é claro, usa guias, que o Markdown converte em espaços, e é por isso que a contagem de caracteres pode parecer maior que o 977 real. A remoção de espaço em branco desnecessário a reduz para 861).
As sobreposições são tratadas corretamente desenhando os anéis em uma direção, aplicando um clipe e desenhando-os na outra direção. As cores e proporções são extraídas de um documento oficial que, por algum motivo, usa as curvas de Bézier em vez de círculos.
<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="504" height="228">
<defs>
<clipPath id="t">
<rect width="504" height="114" />
</clipPath>
</defs>
<g fill="none" stroke-width="12">
<g id="u" transform="translate(82,82)" stroke="#0b8ed8">
<g id="O">
<circle r="72" stroke="#fff" stroke-width="20" />
<circle r="72" />
</g>
</g>
<g id="y" transform="translate(167,146)" stroke="#f9a91f">
<use xlink:href="#O" />
</g>
<g id="k" transform="translate(252,82)" stroke="#231f20">
<use xlink:href="#O" />
</g>
<g id="g" transform="translate(337,146)" stroke="#009e59">
<use xlink:href="#O" />
</g>
<g transform="translate(422,82)" stroke="#ee2049">
<use xlink:href="#O" />
</g>
<g clip-path="url(#t)">
<use xlink:href="#g" />
<use xlink:href="#k" />
<use xlink:href="#y" />
<use xlink:href="#u" />
</g>
</g>
</svg>
Brincando com tela.
Não tenho certeza se é 1024 ou 1000 K
, mas conseguiu baixá-lo para 1000 982 940: D
Adequado apenas para navegadores WebKit. Chrome OK. Firefox uma bagunça. Pode olhar para torná-lo entre navegadores.
var w=window;w.onload=function(){function e(e,t){return r()*(t-e+1)+e}function d(e,t){function r(e,t,r,i){c.beginPath();c[u]="xor";c.strokeStyle="#"+e;c.arc(t,r,66,n*i[0],n*i[1]);c.stroke();c[u]="destination-atop";c.arc(t,r,66,n*i[1],n*i[0]);c.stroke()}var i=79+e,s=66+t,o=158,a=[2,1.2],f=[1.8,.8];c.lineWidth=13;r("007a9c",e,t,f);r("ffa100",i,s,a);r("000",e+=o,t,f);r("009b3a",i+=o,s,a);r("e10e49",e+=o,t,f)}var t=Math,n=t.PI,r=t.random,i,s,o=0,u="globalCompositeOperation",a=document.getElementById("c"),f=w.innerWidth,l=w.innerHeight,c=a.getContext("2d"),h=9,p=[];a.width=f;a.height=l;for(i=0;i<l;++i){p.push({x:r()*f,y:r()*l,r:e(1,3),d:e(1,l)})}setInterval(function(){c.clearRect(0,0,f,l-h);d(f/2-200,l-200);c[u]="xor";c.fillStyle="#fff";c.beginPath();o+=e(0,7)?.01:-.01;for(i=0;i<l-h;++i){s=p[i];c.moveTo(s.x,s.y);c.arc(s.x,s.y,s.r,0,n*2);s.y+=t.cos(o+s.d)+1+s.r/9;s.x+=(i%2?1:-1)*t.sin(o)*.4;if(s.x>f+7||s.x<-7||s.y>l-(h-1.2)){p[i]={x:r()*f,y:-9,r:s.r,d:s.d}}}c.fill();if(h<l/1.7)h+=l/9e3},32)}
940: Inserção onload
e inclusão do script no final da body
tag + bug de alinhamento e correção do Firefox.
function e(e,t){return r()*(t-e+1)+e}function d(e,t){function r(e,t,r,i){c.beginPath();c[u]="xor";c.strokeStyle="#"+e;c.arc(t,r,66,n*i[0],n*i[1]);c.stroke();c[u]="destination-over";c.arc(t,r,66,n*i[1],n*i[0]);c.stroke()}var i=79+e,s=66+t,o=158,a=[2,1.2],f=[1.8,.8];c.lineWidth=13;r("007a9c",e,t,f);r("ffa100",i,s,a);r("000",e+=o,t,f);r("009b3a",i+=o,s,a);r("e10e49",e+=o,t,f)}var w=window,t=Math,n=t.PI,r=t.random,i,s,o=0,u="globalCompositeOperation",a=document.getElementById("c"),f=w.innerWidth,l=w.innerHeight,c=a.getContext("2d"),h=9,p=[];a.width=f;a.height=l;for(i=0;i<l;++i,p.push({x:r()*f,y:r()*l,r:e(1,3),d:e(1,l)}));setInterval(function(){c.clearRect(0,0,f,l-h);d(f/2-158,l-200);c[u]="xor";c.fillStyle="#fff";c.beginPath();o+=e(0,7)?.01:-.01;for(i=0;i<l-h;++i){s=p[i];c.moveTo(s.x,s.y);c.arc(s.x+=(i%2?.4:-.4)*t.sin(o),s.y+=t.cos(o+s.d)+1+s.r/9,s.r,0,n*2);if(s.y>l-(h-1.2)){p[i].x=r()*f;p[i].y=-9}}c.fill();if(h<l/1.7)h+=l/9e3},32)
http://jsfiddle.net/Ifnak/XSBLg/embedded/result/
http://jsfiddle.net/Ifnak/4fSWm/5/embedded/result/
Carrega no Firefox e no Chrome, mas é bastante pesado em recursos no FF. Usar requestAnimationFrame()
ajudou um pouco, mas não o suficiente.
Observe que a neve fica no fundo, role para baixo para ver o crescimento lento. Inicialmente teve alguma pintura no chão, mas não conseguiu encaixá-lo em 1024 chr.
Da minha resposta nas perguntas e respostas do Mathematica.SE :
ring[x_, y_, v_, t_] :=
Table[
{1.2 y, -v x, 0} + {Cos@i, Sin@i}.{{0, -1, 0}, {1, 0, 1/4 - v/2}},
{i, 0, 2 π, π/200}
] ~Tube~ t
Graphics3D[
Riffle[
{Cyan, Yellow, Darker @ Gray, Green, Red},
Array[ring[Sqrt@3/2, #, # ~Mod~ 2, 0.17] &, 5, 0] ],
Boxed -> False,
ViewPoint -> {0, 0, ∞}
]
Editar: Na versão 10, o estilo de iluminação padrão foi alterado; para tornar o gráfico acima um vai precisar adicionar a opção Lighting -> "Classic"
para Graphics3D
.
Brincando com a iluminação para produzir um efeito bidimensional plano:
Graphics3D[
Riffle[
Glow /@ {Hue[.59], Hue[.13], Black, Hue[.3, 1, .7], Hue[0, 1, .85]},
Array[ring[Sqrt@3/2, #, # ~Mod~ 2, 0.13] &, 5, 0] ],
Boxed -> False,
ViewPoint -> {0, 0, ∞},
Lighting -> None
]
Para Oliver, que disse que meu primeiro resultado foi "3D demais", aqui está uma renderização 2D real via código do jVincent com minha refatoração, também a partir do thread vinculado:
ringSegment[mid_, deg_, color_] := {CapForm["Butt"],
Thickness[0.042], White, Circle[mid, 1, deg],
Thickness[0.03], RGBColor @@ (color/255), Circle[mid, 1, deg + {-0.1, 0.1}]}
blue = { 0, 129, 188};
yellow = {255, 177, 49};
black = { 35, 34, 35};
green = { 0, 157, 87};
red = {238, 50, 78};
Graphics @ GraphicsComplex[
{{2.5, 0}, {1.3, -1}, {0, 0}, {5, 0}, {3.8, -1}},
ringSegment @@@
{{1, {0, 5/4 π}, black},
{2, {0, π}, yellow},
{3, {0, 2 π}, blue},
{2, {-π 9/8, 1/4 π}, yellow},
{4, {0, 5/4 π}, red},
{5, {0, 7/8 π}, green},
{1, {5/4 π, 5/2 π}, black},
{5, {7/8 π, 2 π}, green},
{4, {-3/4 π, 1/4 π}, red}}
]
Infelizmente, um certo chefe de estado parece ser o assunto principal da maioria das notícias olímpicas até agora. Assim, aqui está o meu logotipo do estilo livre (mascote?) Para os Jogos de 2014.
w=?$;"UW[NASY_LAQVgKAPSlKAOKGLnHAOIHMnHAOHILpHANHJLqFAOFLKAVMAVMAWKAWLAWKAMIHFGK
NFMLAMGOFFGAGJPGFIAHGFFOWPPAIGFFKQFOKMJHAIJJQGNLGFMAJIJNFIGHFHSGASMMFHHASHGGPK
MFJHTKARJSKAMGFOPJAPPOJAPRKLAQRJLAQTHLAR^LFARaARaAR]HFASZAS[FFRGAT_QGAUZGFFG
U]AQGITAPHKPANKKSALMNSGGAJPOP".codepoints{|r|r-=69;$><<(r<0??\n:(w=w==?$?' ':?$)*r)}
Saída: (Faça backup e estrabismo. Desculpe pela renderização primitiva, mas ele não merece melhor.)
convert \
-size 330x150 xc:white -strokewidth 10 -fill none \
-stroke \#0885c2 -draw 'arc 100,100 10,10 0,360' \
-stroke black -draw 'arc 210,100 120,10 0,360' \
-stroke \#ed334e -draw 'arc 320,100 230,10 0,360' \
-stroke \#fbb132 -draw 'arc 155,140 65,50 0,360' \
-stroke \#1c8b3c -draw 'arc 265,140 175,50 0,360' \
-stroke \#0885c2 -draw 'arc 100,100 10,10 -20,10' \
-stroke black -draw 'arc 210,100 120,10 -20,10' -draw 'arc 210,100 120,10 90,120' \
-stroke \#ed334e -draw 'arc 320,100 230,10 90,120' \
x:
Saída de amostra:
Olimpíadas de Inverno? Que tal alguns flocos de neve fractal em vez de anéis regulares.
A recursão para o ramo central é bastante óbvia: (dx, dy) = 0,5 (dx, dy). Os ramos esquerdo e direito são baseados na rotação por multiplicação da matriz:
x = x cos (a) - y sen (a)
y = x sen (a) + y cos (a)
1/4 = 0,5 cos (60) e 7/16 é uma boa aproximação de 0,5 sin (60).
uses graph;
var gd, gm : integer;
var n:integer;
Procedure tree(x,y,dx,dy: integer);
begin
if dx*dx+dy*dy>0 then begin
line(x, y, x+dx, y+dy);
tree(x+dx, y+dy, dx div 2, dy div 2);
tree(x+dx, y+dy, dx div 4 + dy*7 div 16, dy div 4 - dx*7 div 16);
tree(x+dx, y+dy, dx div 4 - dy*7 div 16, dy div 4 + dx*7 div 16);
end;
end;
begin
gd := D4bit;
gm := m640x480;
initgraph(gd,gm,'');
setbkcolor(white); clearviewport;
setbkcolor(black); setlinestyle(0,0,3);
For n:=-1 to 1 do begin
setColor(yellow);
tree(215,240-120*n,0,120*n);
setColor(lightgreen);
tree(425,240-120*n,0,120*n);
setColor(black);
tree(320,120-120*n,0,120*n);
setColor(lightred);
tree(530,120-120*n,0,120*n);
setColor(lightblue);
tree(110,120-120*n,0,120*n);
end;
readln;
closegraph;
end.
. .
Semelhante à minha resposta SVG, mas
Note que eu não tentei jogar golfe, apesar da possibilidade de alguns truques interessantes (como em -57*~dir
vez de 57*(1+dir)
. Está em 923 caracteres, mas o golfe chega a 624 com bastante facilidade.
import java.awt.*;
import java.awt.image.BufferedImage;
import java.io.File;
import javax.imageio.ImageIO;
public class Rings {
public static void main(String[] args) throws Exception {
int[] pal = new int[] {0x0b8ed8, 0xf9a91f, 0x231f20, 0x009e59, 0xee2049};
BufferedImage img = new BufferedImage(505, 229, BufferedImage.TYPE_INT_ARGB);
Graphics2D g = img.createGraphics();
g.setRenderingHint(RenderingHints.KEY_ANTIALIASING, RenderingHints.VALUE_ANTIALIAS_ON);
for (int dir = -1; dir < 2; dir += 2) {
g.setClip(0, 57 * (1 + dir), 520, 114);
for (int ring = 2 - 2 * dir; ring != 2 + 3 * dir; ring += dir) {
for (int subring = 0; subring < 2; subring++) {
g.setColor(new Color(pal[ring] | (subring - 1)));
g.setStroke(new BasicStroke(20 - 8 * subring));
g.drawOval(10 + 85 * ring, 10 + 64 * (ring & 1), 144, 144);
}
}
}
ImageIO.write(img, "PNG", new File("rings.png"));
}
}
Mais uma vez, uma resposta C64, mas desta vez estou autorizado a usar sprites ! Yay!
Lembro que se você quisesse usar sprites, começaria seu programa com várias DATA
declarações chatas . Para definir um padrão de sprite monocromático de "alta resolução" (24x21 pixels), são necessários 63 bytes. Na verdade, existe um editor de sprites online que calcula os dados para você, então:
10 DATA 0,254,0,3,255,128,7,255,192,15,131,224,30,0,240,60,0,120,56,0,56,120,0
20 DATA 60,112,0,28,112,0,28,112,0,28,112,0,28,112,0,28,120,0,60,56,0,56,60,0
30 DATA 120,30,0,240,15,131,224,7,255,192,3,255,128,0,254,0
Também vou precisar de mais alguns DADOS para as cores e posições. Acabei de copiar isso da minha resposta para o logotipo original dos Jogos Olímpicos :
40 DATA 6,0,0,0,2,0,2,4,0,7,1,1,5,3,1
Então, você costuma definir V=53248
. Este 53248
deve ser um número importante, porque ainda me lembro 25 anos depois :) Acontece que é o endereço base do VIC-II (Video Interface Controller):
50 V=53248
Depois, li o padrão de sprite na memória, começando no endereço 832
. É estranho apenas escrever em um local de memória, sem alocação, não new
, nada disso :) O endereço inicial precisa ser múltiplo de 64.
60 FOR I=0 TO 62
70 READ D:POKE 832+I,D
80 NEXT I
Vou usar o mesmo padrão para todos os sprites.
90 FOR I=0 TO 4
100 READ C,X,Y
C
é o código de cores X
eY
são as posições horizontal e vertical dos círculos.
POKE
São necessários mais alguns s:
110 POKE V+I*2,150+X*11
120 POKE V+I*2+1,130+Y*10
V+0
, V+2
, V+4
, Etc ... são os locais horizontais de cada sprite, enquanto V+1
, V+3
, V+5
... são verticais. As cores do sprite começam no registro V+39
:
130 POKE V+39+I,C
Os ponteiros de dados do sprite começam em 2040
e, como os dados começam em 832
, obtemos 832/64
= 13
, então:
140 POKE 2040+I,13
150 NEXT I
Para ativar os sprites, defino bits 0-4
do registro V+21
. Também mudei o fundo para branco, para podermos ver o círculo azul.
160 POKE 53281,1
170 POKE V+21,31
É isso aí!
V+23
para altura dupla e V+29
largura dupla. (bit # x para sprite # x).
Tamanho: 876 bytes (12 linhas, linha com 72 caracteres e final de linha)
\documentclass{standalone}\usepackage{tikz}\def\W{3.762bp}\def\R{71.682
bp}\def\D{12.9041bp}\usetikzlibrary{calc,hobby}\def\Y{-71.7013bp}\def\X
{169.5538bp}\begin{document}\tikz[use Hobby shortcut,every path/.style=
{line width=\W,double distance=\D, white}]{\def\Z{coordinate}\path(0,0)
\Z(A)++(\X,0)\Z(C)++(\X,0)\Z(E)($(A)!.5!(C)$)++(0,\Y)\Z(B)++(\X,0)\Z(D)
;\def~#1#2{\definecolor{#1}{cmyk}{#2}} ~A{1,.25,0,0}~B{0,.342,.91,0}~C{
0,0,0,1}~D{1,0,.91,.06}~E{0,.94,.65,0}\def~#1#2#3#4{\draw[save Hobby p%
ath={#1},double=#1,overlay](#1)+([closed] 225:\R)..+([#2]315:\R)..+([#3
]45:\R)..+([#4]135:\R); \path let\n!={\R+\D/2}in(#1)+(-\n!,0)+(\n!,0)+(
0,-\n!)+(0,\n!);}\def\0#1{\draw[double=#1,restore and use Hobby path={%
#1}{disjoint,invert soft blanks}];}~A{}{blank=soft}{}~B{}{}{blank=soft}
~C{}{blank=soft}{}\0B\0A~E{blank=soft}{}{}~D{}{}{}\0C\0E}\end{document}
Tamanho: 817 bytes em uma linha e com duas otimizações:
tikz
de classe standalone
, veja o comentário do Assistente de Trigo.soft=blank
podem ser reduzidos pela definição de um estilo b
.\documentclass[tikz]{standalone}\def\W{3.762bp}\def\R{71.682bp}\def\D{12.9041bp}\usetikzlibrary{calc,hobby}\def\Y{-71.7013bp}\def\X{169.5538bp}\begin{document}\tikz[use Hobby shortcut,every path/.style={line width=\W,double distance=\D,white},b/.style={blank=soft}]{\def\Z{coordinate}\path(0,0)\Z(A)++(\X,0)\Z(C)++(\X,0)\Z(E)($(A)!.5!(C)$)++(0,\Y)\Z(B)++(\X,0)\Z(D);\def~#1#2{\definecolor{#1}{cmyk}{#2}} ~A{1,.25,0,0}~B{0,.342,.91,0}~C{0,0,0,1}~D{1,0,.91,.06}~E{0,.94,.65,0}\def~#1#2#3#4{\draw[save Hobby path={#1},double=#1,overlay](#1)+([closed]225:\R)..+([#2]315:\R)..+([#3]45:\R)..+([#4]135:\R); \path let\n!={\R+\D/2}in(#1)+(-\n!,0)+(\n!,0)+(0,-\n!)+(0,\n!);}\def\0#1{\draw[double=#1,restore and use Hobby path={#1}{disjoint,invert soft blanks}];}~A{}b{}~B{}{}b~C{}b{}\0B\0A~E b{}{}~D{}{}{}\0C\0E}\end{document}
A seguinte versão mais longa é provavelmente mais fácil de entender.
A sobreposição dos anéis é tratada desenhando os anéis com segmentos em branco primeiro. Em um estágio posterior, os anéis são desenhados novamente, mas desta vez os segmentos em branco são preenchidos e os outros segmentos já desenhados dos anéis permanecem intocados. Portanto, o recorte não é usado.
O anel com as margens brancas é desenhado por um círculo com uma linha dupla. A área entre as linhas é preenchida com a cor do anel e as linhas duplas mais finas formam a margem branca externa e interna.
As cores e dimensões são retiradas da descrição da página em PDF da página 5 do documento oficial (consulte a resposta de Peter Tayler).
\nofiles % .aux file is not needed
\documentclass[tikz]{standalone}
\usetikzlibrary{calc}
\usetikzlibrary{hobby}
\newcommand*{\xshift}{169.5538bp}
\newcommand*{\yshift}{-71.7013bp}
\newcommand*{\radius}{71.6821bp}
\newcommand*{\whitelinewidth}{3.762bp}
\newcommand*{\colorlinewidth}{12.9041bp}
\definecolor{color@A}{cmyk}{1, .25, 0, 0}
\definecolor{color@B}{cmyk}{0, .342, .91, 0}
\definecolor{color@C}{cmyk}{0, 0, 0, 1}
\definecolor{color@D}{cmyk}{1, 0, .91, .06}
\definecolor{color@E}{cmyk}{0, .94, .65, 0}
\begin{document}
\begin{tikzpicture}[
use Hobby shortcut,
every path/.style = {
line width = \whitelinewidth,
double distance = \colorlinewidth,
white,
},
]
% define center coordinates for the five rings
\path
(0,0) coordinate (center@A)
++(\xshift, 0) coordinate (center@C)
++(\xshift, 0) coordinate (center@E)
($(center@A)!.5!(center@C)$) ++(0, \yshift) coordinate (center@B)
++(\xshift, 0) coordinate (center@D)
;
% \drawring draws the first part of the ring with blank parts
\newcommand*{\drawring}[4]{%
\draw[
save Hobby path = {path@#1},
double = {color@#1},
overlay,
]
(center@#1)
+([closed] 225:\radius) .. +([#2] 315:\radius) ..
+([#3] 45:\radius) .. +([#4] 135:\radius)
;
}
% \finishring draws the blank parts of the rings
\newcommand*{\finishring}[1]{%
\draw[
double = {color@#1},
restore and use Hobby path = {path@#1}{
disjoint,
invert soft blanks
},
];
}
\drawring{A}{}{blank=soft}{}
\drawring{B}{}{}{blank=soft}
\drawring{C}{}{blank=soft}{}
\finishring{B}
\finishring{A}
\drawring{E}{blank=soft}{}{}
\drawring{D}{}{}{}
\finishring{C}
\finishring{E}
% set calculated bounding box
\useasboundingbox
let \n{r} = {\radius + \colorlinewidth/2}
in
(center@A) +(-\n{r}, \n{r}) % upper left corner
(center@B -| center@E) +(\n{r}, -\n{r}) % lower right corner
;
\end{tikzpicture}
\end{document}
\documentclass[tikz]{standalone}
graças a esta dica .
b
para evitar o tempo de blank=soft
uso quatro vezes.
C ++ 1024 bytes
Atualizada: agora com antialiasing. O código foi um pouco descodificado enquanto ainda cabia (exatamente) 1K.
Não usa nenhuma função de biblioteca, exceto as funções ostream, para gravar o arquivo de saída.
#include <fstream>
namespace {
typedef double d;
int w=512;
d a=1./6,g=1./w,h=1./72,j=h+g,k=h-g,r=5./36;
struct p{d x,y;}ps[]={{5*a,a},{4*a,2*a},{3*a,a},{2*a,2*a},{a,a}};
struct c{unsigned char r,g,b;}cs[]={{237,51,78},{28,139,60},{0,0,0},{251,177,50},{8,133,194}};
d abs(d x) {return x<0?-x:x;}
d sqrt(d x) {
d e=1e-6,y=1;
for(;abs(y*y-x)>e;y=.5*(y+x/y));
return y;
}
d dist(p c,p z) {
d u=z.x-c.x,v=z.y-c.y;
return abs(r-sqrt(u*u+v*v));
}
c lerp(c a,c b,d t) {
auto l=[=](d a,d b){return a+(b-a)*t;};
return {l(a.r,b.r),l(a.g,b.g),l(a.b,b.b)};
}
d smoothstep(d z) {
z=(z-j)/(k-j);
z=z<0?0:z>1?1:z;
return z*z*(3-2*z);
}
c color(p z) {
c o{255,255,255};
for(int i=0,j;i<5;++i){
j=z.y<.25?i:4-i;
o=lerp(o,cs[j],smoothstep(dist(ps[j],z)));
}
return o;
}
}
int main() {
std::ofstream o("r.ppm",std::ofstream::binary);
o<<"P6 "<<w<<" "<<w/2<<" 255\n";
for(int y=0;y<w/2;++y)
for(int x=0;x<w;++x)
o.write((char*)&color(p{x*g,y*g}),3);;
}
Produz um arquivo .ppm:
Usando estatísticas CRAN-R.
l=c(1,9);plot(3:7,c(6,4,6,4,6),col=c(4,7,1,3,2),cex=10,ylim=l,xlim=l)
Sinto que estou um pouco atrasado para a festa, mas talvez eu possa compensar isso com a primeira submissão do GLSL neste site. Ele deve ser usado como sombreador de fragmento para uma primitiva de preenchimento de tela e espera a resolução da viewport noiResolution
uniforme.
Cores e posições são "emprestadas" da apresentação de Peter Taylor . Eu tive que encurtar alguns nomes de variáveis para ficar abaixo de 1024 caracteres, mas espero que ainda seja legível.
Veja em Shadertoy (se o seu navegador suportar WebGL).
uniform vec3 iResolution;
float circle(vec2 pos, float r) {
return clamp(r - distance(gl_FragCoord.xy, pos), 0., 1.);
}
float ring(vec2 pos, float r, float d) {
return circle(pos, r + d) * (1. - circle(pos, r - d));
}
void paint(vec3 color, float a) {
gl_FragColor.rgb = mix(gl_FragColor.rgb, color, a);
}
void main() {
struct r_t {
vec2 pos;
vec3 col;
} rs[5];
rs[0] = r_t(vec2( 82, 146), vec3(.04, .56, .85));
rs[1] = r_t(vec2(167, 82), vec3(.98, .66, .12));
rs[2] = r_t(vec2(252, 146), vec3(.14, .12, .13));
rs[3] = r_t(vec2(337, 82), vec3(.00, .62, .35));
rs[4] = r_t(vec2(422, 146), vec3(.93, .13, .29));
float s = min(iResolution.x / 504., iResolution.y / 228.);
vec2 b = (iResolution.xy - vec2(504, 228) * s) * .5;
bool rev = gl_FragCoord.y > iResolution.y * .5;
gl_FragColor.rgb = vec3(1);
for (int i = 0; i < 5; ++i) {
r_t r = rev ? rs[4 - i] : rs[i];
paint(vec3(1), ring(r.pos * s + b, 72. * s, 11. * s));
paint(r.col, ring(r.pos * s + b, 72. * s, 6. * s));
}
}
Substituí minha resposta original por uma que se baseia em regiões e suas interseções. O tamanho do código é 973 bytes, sem uso deolfo.
As regiões 1-5 são os anéis. Os anéis têm um raio interno de 2,5 unidades; o raio externo é de 3 unidades. A proporção da razão interna para a externa e a lógica geral da abordagem podem ser encontradas aqui .
i = Implicit Region;
R1 = i[6.25 <= (x + 6.4)^2 + y^2 <= 9 , {x, y}];
R2 = i[6.25 <= x^2 + y^2 <= 9 , {x, y}];
R3 = i[6.25 <= (x - 6.4)^2 + y^2 <= 9 , {x, y}];
R4 = i[6.25 <= (x + 3.2)^2 + (y + 3)^2 <= 9 , {x, y}];
R5 = i[6.25 <= (x - 3.2)^2 + (y + 3)^2 <= 9 , {x, y}];
Se traçarmos esses anéis imediatamente, eles não se entrelaçam. Observe que o anel amarelo está no topo dos anéis azul e preto; o anel verde fica no topo dos anéis preto e vermelho.
Show[{RegionPlot[R1, PlotStyle -> Blue, BoundaryStyle -> Blue],
RegionPlot[R2, PlotStyle -> Black, BoundaryStyle -> Black],
RegionPlot[R3, PlotStyle -> Red, BoundaryStyle -> Red],
RegionPlot[R4, PlotStyle -> Yellow, BoundaryStyle -> Yellow],
RegionPlot[R5, PlotStyle -> Green, BoundaryStyle -> Green]
}, PlotRange -> All, PerformanceGoal -> "Quality",
ImageSize -> Large, AspectRatio -> 1/2,
Frame -> False]
As regiões 6, 8, 10 e 12 são retângulos que servem para especificar em qual interseção de dois anéis focar.
As regiões 7, 9, 11 e 13 são as "sobreposições de anel", onde o anel na parte inferior deve estar na parte superior.
R6 = Rectangle[{-5, -1}, {-2, 1}];
R7 = RegionIntersection[R1, R4, R6];
R8 = Rectangle[{2, -1}, {4, 1}];
R9 = RegionIntersection[R2, R5, R8];
R10 = Rectangle[{-2, -3}, {2, -2}];
R11 = RegionIntersection[R2, R4, R10];
R12 = Rectangle[{5, -3}, {7, -2}];
R13 = RegionIntersection[R3, R5, R12];
Show[{RegionPlot[R1, PlotStyle -> Blue, BoundaryStyle -> Blue],
RegionPlot[R2, PlotStyle -> Black, BoundaryStyle -> Black],
RegionPlot[R3, PlotStyle -> Red, BoundaryStyle -> Red],
RegionPlot[R4, PlotStyle -> Yellow, BoundaryStyle -> Yellow],
RegionPlot[R5, PlotStyle -> Green, BoundaryStyle -> Green],
RegionPlot[R7, PlotStyle -> Blue, BoundaryStyle -> Blue],
RegionPlot[R9, PlotStyle -> Black, BoundaryStyle -> Black],
RegionPlot[R11, PlotStyle -> Black, BoundaryStyle -> Black],
RegionPlot[R13, PlotStyle -> Red, BoundaryStyle -> Red]},
PlotRange -> All, PerformanceGoal -> "Quality",
ImageSize -> Large, AspectRatio -> 1/2,
Frame -> False]
A seguir, destacamos as regiões de interseção nas quais as cores foram "invertidas". Isso foi realizado alterando as BoundaryStyle
regiões 7, 9, 11 e 13 para White
.
Dado um elemento html, essa função criará os anéis como objetos 3D e renderizará uma imagem estática para o elemento. Funciona em navegadores compatíveis com WebGL. FIDDLE
function Logo(l){
var s, c, r;
s = new THREE.Scene();
c = new THREE.PerspectiveCamera(45, 4/3, 1, 500);
c.position.set(75,0,300);
c.lookAt(new THREE.Vector3(0,0,0));
var rings = [
new THREE.Mesh(ring(), mat(0x0885c2)),
new THREE.Mesh(ring(), mat(0xfbb132)),
new THREE.Mesh(ring(), mat(0x000000)),
new THREE.Mesh(ring(), mat(0x1c8b3c)),
new THREE.Mesh(ring(), mat(0xed334e))
];
for(var i = 0; i < rings.length; i++){
s.add(rings[i]);
rings[i].position.set(i*55-125,-(i%2)*50,0);
rings[i].rotation.set(0,(i%2*2-1)*.18,0,'xyz');
}
r = new THREE.WebGLRenderer();
r.setSize(400, 300);
l.appendChild(r.domElement);
r.render(s, c);
}
function ring(){ return new THREE.TorusGeometry(50, 8, 16, 32); }
function mat(color){ return new THREE.MeshBasicMaterial({color: color}); }
Foi tão curto que o site se recusou a enviá-lo até eu adicionar essa descrição. O logotipo representa os Jogos Olímpicos.
$ $ $
$ $
Não é pequeno por nenhum trecho da imaginação, mas mantido o mais conciso e legível possível e ainda abaixo de 1k.
#include <SFML/Graphics.hpp>
using namespace sf;
int main() {
CircleShape circles[5];
Color backcolor(255,255,255);
Color colors[5] = {
Color(0x0b,0x8e,0xd8),
Color(0xf9,0xa9,0x1f),
Color(0x23,0x1f,0x20),
Color(0x00,0x9e,0x59),
Color(0xee,0x20,0x49),
};
for (int i = 0; i < 5; i++) {
circles[i] = CircleShape(144, 60);
circles[i].setPosition(15+160*i, 46+160*(i&1));
circles[i].setFillColor(Color::Transparent);
circles[i].setOutlineColor(colors[i]);
circles[i].setOutlineThickness(-16);
}
RenderWindow window(VideoMode(960, 540), L"Olympic Logo", Style::Close);
while (window.isOpen()) {
Event event;
while (window.pollEvent(event))
if (event.type == Event::Closed)
window.close();
window.clear(backcolor);
for (int i = 0; i < 5; i++)
window.draw(circles[i]);
window.display();
}
return 0;
}
Editar: cores atualizadas com base no envio SVG de @Peter Taylor.
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);
fez uma solução baseada em uma edição Java Swing GUI UltraGolfed (696 charas)
import java.awt.Color;import java.awt.Graphics;import javax.swing.JFrame;import javax.swing.JPanel;class A extends JFrame{public A(){JPanel j=new JPanel(){protected void paintComponent(Graphics g){;((java.awt.Graphics2D)g).setStroke(new java.awt.BasicStroke(3));g.setColor(new Color(0xb,0x8e,0xd8));g.drawOval(10, 10, 80, 80);g.setColor(new Color(0xf9,0xa9,0x1f));g.drawOval(50,40,80,80);g.setColor(new Color(0x23,0x1f,0x20));g.drawOval(90, 10, 80, 80);g.setColor(new Color(0,0x9e,0x59));g.drawOval(130,40,80,80);g.setColor(new Color(0xee,0x20,0x49));g.drawOval(170, 10, 80, 80);}};j.setBounds(0,0,600,400);setSize(600,400);add(j);}public static void main(String[]a){new A().setVisible(true);}}
Semi-comprimido: 971
import java.awt.Color;
import java.awt.Graphics;
import javax.swing.JFrame;
import javax.swing.JPanel;
class A extends JFrame
{
public A()
{
JPanel j = new JPanel(){
protected void paintComponent(Graphics g)
{;
((java.awt.Graphics2D)g).setStroke(new java.awt.BasicStroke(3));
g.setColor(new Color(0xb,0x8e,0xd8));
g.drawOval(10, 10, 80, 80);
g.setColor(new Color(0xf9,0xa9,0x1f));
g.drawOval(50,40,80,80);
g.setColor(new Color(0x23,0x1f,0x20));
g.drawOval(90, 10, 80, 80);
g.setColor(new Color(0,0x9e,0x59));
g.drawOval(130,40,80,80);
g.setColor(new Color(0xee,0x20,0x49));
g.drawOval(170, 10, 80, 80);}};
j.setBounds(0,0,600,400);
setSize(600,400);
add(j);
}
public static void main(String[]a)
{
new A().setVisible(true);
}
}
Cada anel é constituído por um círculo interno / externo e preenchido por inundação.
Tinha que encontrar as interseções manualmente e preenchê-las individualmente (para que você ainda possa ver algumas das linhas entre elas).
1 INK 0: PAPER 15: CLS: LET r=50
2 FOR x=1 TO 3
3 CIRCLE x*100,100,r: CIRCLE x*100,100,r-10
4 IF x<3 THEN CIRCLE (x*100)+50,150,r: CIRCLE (x*100)+50,150,r-10
5 NEXT x
6 INK 0: FILL 165,130: FILL 195,145: FILL 200,55: FILL 215,145: FILL 245,105
7 INK 9: FILL 100,55: FILL 130,130: FILL 145,105
8 INK 10: FILL 270,135: FILL 295,145: FILL 300,55
9 INK 12: FILL 205,145: FILL 215,120: FILL 250,195: FILL 255,105: FILL 280,120
10 INK 14: FILL 105,145: FILL 110,125: FILL 150,195: FILL 155,105: FILL 190,130