Acalme seus senhores do Google: desenhe o logotipo "G"


136

Escreva um programa ou função que receba um número inteiro positivo N e produza uma imagem de pixel N × N do logotipo "G" do Google, de acordo com esta construção *:

Construção do logotipo "G"

Por exemplo, se N for 400, deve ser gerado um logotipo de 400 × 400 pixels, com dimensões e cores corretas:

Exemplo de logotipo "G" de 400 x 400

Deve parecer preciso, independentemente de quão grande ou pequeno seja o N. por exemplo, aqui é N = 13:Exemplo 13x13 do logotipo "G"

Seu código não precisa se conectar à Internet. Por exemplo, não é permitido dimensionar um svg hospedado externamente. (Escalar um svg codificado no seu código seria bom.)

O anti-aliasing pode ser usado ou não. Você decide.

Observe que a barra horizontal do "G" não se estende até a borda direita da imagem. O círculo se curva normalmente para dentro na borda direita antes de ser cortado.

O código mais curto em bytes vence.


* A construção do logotipo foi simplificada para este desafio. A construção correta pode ser vista aqui e aqui .


1
Existe um N mínimo? Uma imagem 1x1 provavelmente produziria uma saída irreconhecível, independentemente da qualidade da solução.
jpmc26

@ jpmc26 N é um número inteiro positivo, portanto mínimo 1. É claro que uma imagem 1x1 não pode ser reconhecida, mas o significado "Deverá parecer preciso", por exemplo, uma imagem preta não faria sentido, mesmo nessa escala.
Calvin Hobbies

4
Qual é o resultado esperado para uma imagem 1x1, então? Um único pixel de qualquer uma das cores na imagem? Uma imagem branca? Que tal 2x2? Ainda há mais cores na imagem do que pixels para esse tamanho. Se alguma imagem é inaceitável nessas escalas, o desafio deve definir o que é e o que não é aceitável, pois você não pode produzir uma imagem nem mesmo aproximando-se da aparência correta, não deveria? (Se fosse o meu desafio, eu excluí-los para mantê-lo simples, mas sua decisão Você também precisa verificar se você não excluem respostas existentes com as novas especificações, eu acho..)
jpmc26

@ jpmc26 Não. As pessoas podem usar o bom senso para saber se uma imagem pequena 1x1 ou outra parece pequena.
Calvin's Hobbies

É permitido fazer o download de um pré-fabricado .svge codificá-lo em nossa solução, ou temos que fazê-lo originalmente?
juniorRubyist

Respostas:


55

Mathematica, 229 226 225 224 221 206 169 bytes

Obrigado @MartinEnder por 1 byte, @ChipHurst por 37 bytes!

Graphics[{RGBColor@{"#EA4335","#FBBC05","#34A853","#4285F4"}[[#]],{0,-1}~Cuboid~{√24,1},Annulus[0{,},{3,5},{(2#-9)Pi/4,ArcCsc@5}]}&~Array~4,ImageSize->#,PlotRange->5]&

Que desafio divertido!

Explicação

...&~Array~4

Iterar de 1 a 4 ...

RGBColor@{"#EA4335","#FBBC05","#34A853","#4285F4"}[[#]]

Converta os códigos hexadecimais de cores em RGBColorobjetos, para que possam ser aplicados ao gráfico do logotipo do Google. Altere a paleta de cores para a <input>th th color.

{0,-1}~Cuboid~{√24,1}

Crie um retângulo preenchido (cubóide 2D), cujos cantos diagonais são (0, -1) e (sqrt (24), 1).

Annulus[0{,},{3,5},{(2#-9)Pi/4,ArcCsc@5}]}

Gere quatro quartos preenchidos Annulus, centralizados na origem, com raio interno 3 e raio externo 5. Não passe além ArcCsc@5(onde o segmento azul termina).

Graphics[ ... , ImageSize->#,PlotRange->5]

Crie um gráfico com o tamanho N x N, de x = -5 a x = 5 (remove o preenchimento).

Saídas

N = 10

insira a descrição da imagem aqui

N = 100

insira a descrição da imagem aqui

N = 200

insira a descrição da imagem aqui

N = 10000 (clique na imagem para resolução máxima)

insira a descrição da imagem aqui


44

C (Windows), 311 bytes

#include <windows.h>
main(int c,char**v){float x,y,a,b,N=atoi(*++v);HDC d=GetDC(GetDesktopWindow());for(x=0;x<N;x+=1)for(y=0;y<N;y+=1){a=2*x/N-1;b=2*y/N-1;SetPixel(d,x,y,(a>0&&a<.8&&b*b<.04)?0xF48542:(a*a+b*b>1||a*a+b*b<.36)?0xFFFFFF:(a*a<b*b)?((b<0)?3490794:5482548):(a<0)?376059:(b<-.2)?0xFFFFFF:0xF48542);}}

Pega "N" como argumento de linha de comando e desenha diretamente na tela.

Sem golfe:

#include <windows.h>
// atoi() will work fine without any #include file!
// -> don't #include it!

main(int c,char **v)
{
    float x,y,a,b,N=atoi(*++v);

    /* Access the screen for directly drawing! */
    HDC d=GetDC(GetDesktopWindow());

    /* Iterate over the pixels */
    for(x=0;x<N;x+=1)
        for(y=0;y<N;y+=1)
    {
        /* Convert x,y into "relative" coordinates: The image
         * is 2.0x2.0 in size with (0.0,0.0) in the center */
        a=2*x/N-1;
        b=2*y/N-1;

        /* Draw each pixel */
        SetPixel(d,x,y,
            (a>0 && a<.8 && b*b<.04)?0xF48542: /* The bar of the "G" in the middle */
            (a*a+b*b>1 || a*a+b*b<.36)?0xFFFFFF: /* Not on one of the circle segments */
            (a*a<b*b)?((b<0)?0x3543EA:0x53A834): /* Top and bottom segments */
            (a<0)?0x5BCFB: /* Left segment */
            (b<-.2)?0xFFFFFF:0xF48542); /* Right segment: A bit more complicated... */
    }

    /* Note: Under good old Windows 3.x we would require to
     * call "ReleaseDC" here; otherwise the system would
     * "crash" (however the image would have been drawn!)
     * No need for this in modern Windows versions! */
}

Você pode manter 0xF48542e 0xFFFFFFem números inteiros.
21716 Yytsi

Qual compilador / vinculador você usou? Não funciona com mingw
vsz

@vsz Presumivelmente, o compilador do Visual Studio.
Kroltan

@ VSZ eu posso compilá-lo com gcc g.c -lgdi32mingw.
jingyu9575

2
-1>>8também podem funcionar
Mark K Cowan

33

Python 2, 244 220 bytes

usando a transformação de Martin Rosenau no plano [-1,1] ^ 2 e golfe menor, como remover 0.ou suportes

N=input()
R=[2*z/(N-1.)-1for z in range(N)]
B="\xFF"*3,"B\x85\xF4"
print"P6 %d %d 255 "%(N,N)+"".join([B[0<x<.8and.04>y*y],["4\xA8S",B[y>-.2],"\xFB\xBC\x05","\xEAC5"][(x>y)+2*(-x>y)]][.36<x*x+y*y<1]for y in R for x in R)

Explicação:

N=input()
R=[2*z/(N-1.)-1for z in range(N)]
#N*N points on the [-1,1]^2 plane

B="\xFF"*3,"B\x85\xF4"
#white and blue

print"P6 %d %d 255 "%(N,N) + "".join(
#binary PPM header
 [
  B[0<x<.8and.04>y*y],
  #blue rectangle part of the G, or white
  ["4\xA8S",B[y>-.2],"\xFB\xBC\x05","\xEAC5"][(x>y)+2*(-x>y)]
  #[green, [white,blue], yellow, red]-arcs with 4 way selector
 ]
 [.36<x*x+y*y<1]
 #radius checker, outside=0 blue rectangle or white, inside=1 colored arcs
  for y in R for x in R
  #for all points
 )

Saída como PPM binário, uso:

python golf_google.py > google.ppm

Exemplos

  • 13

13

  • 50.

50.

  • 100

100

  • 1337

1337

solução anterior de 244 bytes

N=input()
S="P6 %d %d 255 "%(N,N)
R=range(N)
B=["\xFF"*3,"B\x85\xF4"]
for Y in R:
 for X in R:y=Y-N/2;x=X-N/2;S+=[B[0<x<0.4*N and abs(y)<0.1*N],["4\xA8S",B[y>-0.1*N],"\xFB\xBC\x05","\xEAC5"][(x>y)+2*(-x>y)]][0.3*N<(y**2+x**2)**.5<0.5*N]
print S

Versão beta não destruída antes da eliminação if / else:

N=input()
print"P3 %d %d 255 "%(N,N)
R=range
M=N/2
r="255 0 0 "
g="0 255 0 "
b="0 0 255 "
c="255 255 0 "
w="255 255 255 "
for Y in R(N):
 for X in R(N):
  y=Y-M
  x=X-M
  d=(y**2+x**2)**.5 #radius
  if 0.3*N<d<0.5*N: #inside circle
   if x>y:          #diagonal cut bottom-left to top right
    if -x>y:        #other diagonal cut
     print r
    else:
     if y>-0.1*N:print b #leave some whitespace at blue
     else: print w
   else:
     if -x>y:
      print c
     else:
      print g
  else:
   if 0<x<0.4*N and -0.1*N<y<0.1*N: #the straight part of G
    print b
   else:
    print w

Hmm, não tenho certeza se 1forfunciona.
Yytsi 12/10

1
@TuukkaX Sim .
mbomb007

Você pode incluir amostra de saída?
Cyoce 12/10

@TuukkaX obrigado pela 1forsaída de amostra @Cyoce adicionada
Karl Napf 12/16

Todos os decimais em seu código que estão em forma de 0.xpode ser reduzido a .x:)
Yytsi

27

JavaScript (ES6), 408 ... 321 317 bytes

384 383 371 367 359 327 316 308 304 bytes de JavaScript + 24 13 bytes para o elemento da tela

(f=d.style).width=f.height=(d.width=d.height=n=prompt(f.background='#FFF'))+'px';q=n/2;with(d.getContext`2d`)['#EA4335','#FBBC05','#34A853','#4285F4'].map((c,i)=>beginPath(lineWidth=y=n/5,strokeStyle=fillStyle=c,arc(q,q,z=q-y/2,(j=2*i+1)*(r=-.7854),(j+(i-3?2:1.256))*r,1),stroke(),fillRect(q,z,q*.98,y)))
<canvas id=d>

1 byte salvo ao desenhar no sentido anti-horário.
11 bytes salvos no HTML graças a Conor O'Brien.
12 bytes salvos usando o withbloco graças ao Prinzhorn.
4 bytes salvos com melhor uso de z=q-y/2.
8 bytes salvos usando parentNodee backgroundobrigado a Alexis Tyler.
32 bytes salvos usando um desenho mais preciso do arco / barra azul, para que eu não precise mais apagar parte dele.
11 bytes salvos configurando canvas css em vez de seu parentNode, graças a Tejas Kale.
8 bytes salvos usando withe mapcom uma única instrução, `2d` em vez de ('2d'), em n/5vez de, .2*ne inicializando o plano de fundo no prompt(...).
4 bytes salvos substituindo Math.PI/4por.7854 o que parece precisão suficiente graças ao RobAu.


Explicação:

(f=d.style).width=f.height=(d.width=d.height=n=prompt(f.background='#FFF'))+'px';q=n/2 

As dimensões da tela são iniciadas com a entrada do usuário e o fundo é definido como branco. qé inicializado.

with(d.getContext`2d`)['#EA4335','#FBBC05','#34A853','#4285F4'].map((c,i)=>beginPath(lineWidth=y=n/5,strokeStyle=fillStyle=c,arc(q,q,z=q-y/2,(j=2*i+1)*(r=-.7854),(j+(i-3?2:1.256))*r,1),stroke(),fillRect(q,z,q*.98,y)))

Para cada cor, desenha a parte do círculo, com alguns ajustes para a última (azul). A barra é desenhada para cada cor no mesmo local e com as mesmas dimensões, para que apenas a última (azul) fique visível.


2
<canvas id=d></canvas>deve funcionar e <canvas id=d>pode funcionar.
Conor O'Brien

1
Você pode perder outros 5 caracteres substituindo backgroundColor por background.
Alexis Tyler

1
Também use d.parentNode em vez de d.parentElement #
Alexis Tyler

1
Por que você está definindo as dimensões parentNode. Apenas d.stylefunciona também. O que permite(f = d.style).width = f.height = n = prompt() + 'px';
Tejas Kale

1
Você poderia usar .785398em vez de Math.PI/4raspar 2 bytes (ou mais se menos precisão é ok.
Robau

25

BBC BASIC, 177 bytes

Faça o download do intérprete em http://www.bbcbasic.co.uk/bbcwin/download.html

I.n
V.19;16,234,67,53,275;64272;1468;531;16,43060;83,787;16,34114;7668;n;n;
F.t=1TO8.256S.1/n
a=t*PI/4y=n*SIN(a)x=n*COS(a)V.18;t-1>>1,25,85,x*.6;y*.6;25,85,x;y;
N.PLOT101,0,-n/5

O BBC BASIC usa 2 unidades = 1 pixel, portanto, plotamos um G de nunidades de raio (= n / 2 pixels) no centron,n .

A idéia é traçar uma série de linhas radiais, mudando de cor conforme apropriado. Verificou-se que havia pequenas lacunas entre as linhas devido ao truncamento dos números quando convertidos em pixels, portanto, na verdade, triângulos finos são plotados.

Quando a varredura de linhas estiver concluída, o cursor estará no canto superior direito da área azul. Uma única coordenada para o canto oposto na diagonal é fornecida para desenhar um retângulo para concluir a forma.

Ungolfed

INPUTn
REM reprogram pallette
VDU19;16,&EA,&43,&35,275;16,&FB,&BC,5,531;16,&34,&A8,&53,787;16,&42,&85,&F4
ORIGINn,n               :REM move origin to position n,n on screen.
FORt=1TO8.256STEP1/n    :REM from 1/8 turn to 8.56 turns in small steps
  GCOL0,t-1>>1          :REM set the colours, 0=red, 1=yellow, 2=green, 3=blue
  a=t*PI/4              :REM convert angle from 1/8 turns into radians
  y=n*SIN(a)            :REM find position of outer end of ray
  x=n*COS(a)            :REM plot to coordinates of inner and outer ends of ray
  PLOT85,x*.6,y*.6      :REM PLOT85 actually draws a triangle between the specified point              
  PLOT85,x,y            :REM and the last two points visited.
NEXT                    
PLOT101,0,-n/5          :REM once all is over, cursor is at top right corner of blue rectangle. Draw a rectangle to the bottom left corner as specified.

Bom trabalho! Fiz o meu no Logo usando um método semelhante antes de ver sua resposta. Você me bateu em cerca de 81 bytes.
GuitarPicker

21

HTML / JS, 680 624 bytes

Para obter 624 bytes, remova o último ;, isso é necessário para o snippet abaixo devido à maneira como importa o HTML. Além disso, o Firefox parece não suportar image-rendering: pixelatede precisa -moz-crisp-edges(em vez disso, obrigado @alldayremix !), O que cria uma solução do Firefox +7, mas isso funciona no Chrome conforme o esperado.

Utiliza JavaScript para solicitar Ne um <style>bloco para posicionar / colorir os elementos. Usa elementos HTML básicos, em vez de aplicar estilos a uma tela (que, ao que parece, foi uma abordagem muito mais curta!). Essa é uma abordagem renovada usando uma data:imagem de plano de fundo do URI em vez de apenas elementos coloridos. Eu mantive a abordagem anterior abaixo, caso essa nova funcione em menos navegadores.

Eu pensei que isso seria muito menor do que acabou sendo, mas mesmo assim foi um exercício interessante!

<body id=x onload=x.style.fontSize=prompt()+'px'><u><a></a><b></b><i></i><s><style>u,a,b,i,s{position:relative;display:block}b,i,s{position:absolute}a,u{width:1em;height:1em}a,b{border-radius:50%}a{image-rendering:pixelated;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAACCAIAAAD91JpzAAAAFklEQVQI12N45Wzq1PqF4fceVpMVwQAsHQYJ1N3MAQAAAABJRU5ErkJggg)no-repeat;background-size:100%;transform:rotate(45deg)}b{top:.2em;left:.2em;width:.6em;height:.6em;background:#fff}i{border-top:.4em solid transparent;border-right:.4em solid#fff;top:0;right:0}s{top:.4em;right:.1em;width:.4em;height:.2em;background:#4285f4;

Versão anterior:

<body id=x onload=x.style.fontSize=prompt()+'px'><a b><b l style=padding-left:.5em></b><b y></b><b g></b></a><i style=height:.4em></i><i style="background:#ea4335;border-radius:0 1em 0 0;transform-origin:0%100%;transform:rotate(-45deg)"></i><i b z style=top:.2em;left:.2em;width:.6em;height:.6em></i><i l z style="top:.4em;height:.2em;border-radius:0 2%10%0/0 50%50%0;width:.4em"><style>*{position:relative;background:#fff}a,b,i{display:block;float:left;width:.5em;height:.5em}a{height:1em;width:1em;transform:rotate(45deg);overflow:hidden}i{position:absolute;top:0;left:.5em}[b]{border-radius:50%}[g]{background:#34a853}[l]{background:#4285f4}[y]{background:#fbbc05}[z]{z-index:1


1
Traidor! (Brincadeirinha, uma ótima ;-)) #
Dada

No meu navegador a versão antiga mostra ligeiros lacunas entre as cores, ea nova versão dá uma transição gradiente entre cores (Firefox 49.0.1 32 bits em Win10 x64)
alldayremix

1
@alldayremix hmmm, parece que o Firefox precisa ter em image-rendering: -moz-crisp-edgesvez de pixelated. Irá adicionar uma nota para esse efeito. Eu gosto bastante do estilo gradiente! :)
Dom Hastings

Modifiquei o cabeçalho para ler "HTML / JS", já que você usa HTML e Javascript.
Mego

20

Bash com Imagemagick (mas realmente Postscript), 268 255 249 bytes

C=' setrgbcolor 2.5 2.5 2'
A=' arc stroke '
echo "%!PS
122.4 dup scale
.92 .26 .21$C 45 136$A.98 .74 .02$C 135 226$A.20 .66 .33$C 225 316$A.26 .52 .96$C 315 371$A
4.95 2.5 moveto
2.5 2.5 lineto
stroke"|convert - -crop 612x612+0+180 -scale "$1" o.png

Duplicou a escala para remover setlinewidth, substituiu um fator de escala por dupe mesclou um espaço na Avariável (não é possível com Cporque $C45é analisado como "a variável C45").

Obrigado a joojaa por sugerir essas edições!

Escala antiga, 255 bytes

C=' setrgbcolor 5 5 4'
A=' arc stroke'
echo "%!PS
61.2 61.2 scale
2 setlinewidth
.92 .26 .21$C 45 136$A
.98 .74 .02$C 135 226$A
.20 .66 .33$C 225 316$A
.26 .52 .96$C 315 371$A
9.9 5 moveto
5 5 lineto
stroke"|convert - -crop 612x612+0+180 -scale "$1" o.png

Pega N como argumento único e gera como o.png.

Postscript Ungolfed para Escala Antiga

%!PS
% Scale so default page has width of 10
61.2 61.2 scale
2 setlinewidth
% Red arc
.92 .26 .21 setrgbcolor
5 5 4 45 136 arc
stroke
% Yellow arc
.98 .74 .02 setrgbcolor
5 5 4 135 226 arc
stroke
% Green arc
.20 .66 .33 setrgbcolor
5 5 4 225 316 arc
stroke
% Blue arc
.26 .52 .96 setrgbcolor
5 5 4 315 371 arc
% Blue in-tick
9.9 5 moveto
5 5 lineto
stroke

2
Você pode diminuir isso cortando um caractere da linha de escala 61.2 dup scale. Também é possível adicionar um espaço em C C=' setrgbcolor 5 5 4 'e raspar 4 espaços. Se você projetou isso em meia escala, então você pode omitir2 setlinewidth
joojaa

19

MATLAB, 189 184 bytes

[X,Y]=meshgrid(-5:10/(input("")-1):5);[A,R]=cart2pol(-X,Y);I=round(A*2/pi+3);I(R<3)=1;I(X>0&Y.^2<1)=5;I(R>5)=1;image(I)
colormap([1,1,1;[234,67,53;251,188,5;52,168,83;66,133,244]/255])

destroçado

[X,Y]=meshgrid(-5:10/(input("")-1):5);    % coordinates in 10th of image width
[A,R]=cart2pol(-X,Y);                     % angle and radius
I=round(A*2/pi+3); % map [0-45,45-135,135-225,225-315,315-360] to [1,2,3,4,5]
I(R<3)=1;                                 % clear inner pixels
I(X>0&Y.^2<1)=5;                          % draw horizontal line
I(R>5)=1;                                 % clear outer pixels
image(I)
colormap([1,1,1;[234,67,53;251,188,5;52,168,83;66,133,244]/255])

19

Perl 5, 486 477 476 450 (+7 para -MImagersinalizador) = 457 bytes

Eu salvei alguns bytes graças ao Dada usando newchamadas funcionais e eliminando as parênteses, e usando em popvez do $ARGV[0]ponto e vírgula final. Economizei um pouco mais colocando isso $n=poponde é usado pela primeira vez e usando a notação de espaço para nome Perl 4 em 'vez de ::.

$i=new Imager xsize=>$n=pop,ysize=>$n;$h=$n/2;$s=$n*.6;$f=$n*.4;$c='color';($b,$r,$y,$g,$w)=map{new Imager'Color"#$_"}qw(4285f4 ea4335 fbbc05 34a853 fff);$i->box(filled=>1,$c,$w);$i->arc($c,$$_[0],r=>$h,d1=>$$_[1],d2=>$$_[2])for[$b,315,45],[$r,225,315],[$y,135,225],[$g,45,135];$i->circle($c,$w,r=>$n*.3,filled=>1);$i->box($c,$b,ymin=>$f,ymax=>$s,xmin=>$h,xmax=>$n*.9,filled=>1);$i->polygon($c,$w,x=>[$n,$n,$s],y=>[0,$f,$f]);$i->write(file=>'g.png')

Requer o módulo Imager , que precisa ser instalado a partir do CPAN. Leva um número inteiro como argumento de linha de comando. A imagem não é anti-alias, por isso é um pouco feia.

Copie o código abaixo em um arquivo g.pl. Precisamos de +7 bytes adicionais para o -MImagersinalizador, mas ele salva alguns bytes porque não precisamos use Imager;.

$ perl -MImager g.pl 200

Aqui estão vários tamanhos:

N = 10

10 px

N = 100

100px

N = 200

200px

O código completamente não destruído é direto.

use Imager;
my $n = $ARGV[0];
my $i = Imager->new( xsize => $n, ysize => $n );

my $blue   = Imager::Color->new('#4285f4');
my $red    = Imager::Color->new('#ea4335');
my $yellow = Imager::Color->new('#fbbc05');
my $green  = Imager::Color->new('#34a853');
my $white  = Imager::Color->new('white');

$i->box( filled => 1, color => 'white' );
$i->arc( color => $blue,   r => $n / 2, d1 => 315, d2 => 45 );     # b
$i->arc( color => $red,    r => $n / 2, d1 => 225, d2 => 315 );    # r
$i->arc( color => $yellow, r => $n / 2, d1 => 135, d2 => 225 );    # y
$i->arc( color => $green,  r => $n / 2, d1 => 45,  d2 => 135 );    # g
$i->circle( color => $white, r => $n * .3, filled => 1 );
$i->box(
    color  => $blue,
    ymin   => $n * .4,
    ymax   => $n * .6,
    xmin   => $n / 2,
    xmax   => $n * .9,
    filled => 1
);
$i->polygon( color => $white, x => [ $n, $n, $n * .6 ], y => [ 0, $n * .4, $n * .4 ] );
$i->write( file => 'g.png' );

Este post anteriormente tinha o código em forma de imagem de saída. Como isso é contra as regras do código de golfe, tive que removê-lo. Veja o histórico de revisões se você quiser dar uma olhada. Usei o Acme :: EyeDrops para criar isso, com uma forma que criei a partir de uma imagem criada com o próprio programa que converti para a arte ASCII. O código que ofusquei já estava com o golfe, o que pode ser visto substituindo o primeiro evalpor a print.


Muito agradável! Apenas alguns detalhes sobre o golfe: em popvez de $ARGV[0]. $h=($n=pop)/2em vez de $n=pop;...;$h=$n/2. new Imager::Color"#$_"em vez de Imager::Color->new("#$_"). (e você esqueceu de largar o último ponto e vírgula). Mas, mais uma vez, são apenas alguns pequenos detalhes, seu código é realmente ótimo! (Eu não poderia ter feito isso! Eu nem sabia Imager, o que é bastante conveniente!) #
Dada

@ Dadá obrigado. Na verdade, é um código bastante direto. Eu corrijo as pessoas tanto sobre o uso da notação de método no SO que é realmente difícil não fazer isso de propósito. Mas você está certo. Foi a primeira vez que usei o Imager. Eu acho que vi isso no Perl Weekly.
simbabque

@Dada usando Imager'Colorcom o delimitador de namespace Perl 4 salva outro byte. :)
simbabque 18/10

De fato, pela primeira vez, vejo um uso para essa sintaxe! Além disso, -MImageré mais curto do que use Imager;:)
Dada

1
@Dada eu ia fazer isso de qualquer maneira: P E colocar $n=popnas newargs salva os parênteses e um ponto e vírgula
simbabque

14

PHP + SVG, 300 bytes

<svg width=<?=$_GET["w"]?> viewBox=0,0,10,10><def><path id=c d=M0,5A5,5,0,0,1,5,0V2A3,3,0,0,0,2,5 /></def><?foreach(["fbbc05"=>-45,"ea4335"=>45,"4285f4"=>168.5,"34a853"=>225]as$k=>$v)echo"<use xlink:href=#c fill=#$k transform=rotate($v,5,5) />"?><rect x=5 y=4 fill=#4285f4 width=4.9 height=2 /></svg>

A parte de escala é width=<?=$_GET[w]?>

Saída para o valor 333

<svg width="333" viewBox="0 0 10 10">
<def><path id="c" d="M 0,5 A 5 5 0 0 1 5,0 V 2 A 3,3 0 0 0 2,5"/></def>
<use xlink:href="#c" fill="#fbbc05" transform="rotate(-45,5,5)"/><use xlink:href="#c" fill="#ea4335" transform="rotate(45,5,5)"/><use xlink:href="#c" fill="#4285f4" transform="rotate(168.5,5,5)"/><use xlink:href="#c" fill="#34a853" transform="rotate(225,5,5)"/>
<rect x="5" y="4" fill="#4285f4" width="4.9" height="2"/>
</svg>


1
Você não consegue jogar o espaço entre as aspas duplas dos atributos ( ") e o próximo atributo? Por exemplo <svg width="333" viewBox="0 0 10 10">-><svg width="333"viewBox="0 0 10 10">
Bojidar Marinov 12/10

@BojidarMarinov Sim, é correto e economiza alguns bytes. Obrigado
Jörg Hülsermann

1
Remover espaços entre letras e números em dados caminho: M 0,5 A 5 5 0 0 1 5,0 V 2 A 3,3 0 0 0 2,5=>M0,5A5 5 0 0 1 5,0V2A3,3 0 0 0 2,5
darrylyeo

1
Certo. Além disso, para a sua echodeclaração, use uma string entre aspas para permitir variáveis embutidas e remover o ponto e vírgula: echo'<use xlink:href="#c"fill="#'.$k.'"transform="rotate($v,5,5)"/>';=>echo"<use xlink:href='#c'fill='#$k'transform='rotate($v,5,5)'/>"
darrylyeo

2
Acho que a maioria das aspas duplas pode ser removida com segurança. Como <rect x=5 y=4 fill=#4285f4 width=4.9 height=2 />(Aqui, você vai precisar de um espaço antes do /, no entanto.)
Arnauld

14

Logotipo, 258 bytes

... porque eu acho que os logotipos devem ser feitos usando o Logo . Isso é implementado como uma função. Eu o desenvolvi usando o interpretador de logotipos on-line da Calormen.com

Inicialmente, tentei desenhar cada segmento e preenchê-lo com tinta, mas isso acabou sendo maior do que o esperado. Houve muito movimento desperdiçado no retorno e tal. Em vez disso, decidi fazer uma varredura de gráfico polar, ajustando a cor com base no cabeçalho. A parte mais difícil da matemática foi fazer a geometria da curva no topo do retângulo do G. Você poderia cortar alguns decimais e ter menos precisão, mas eu queria que isso fosse preciso com cerca de três dígitos para acomodar os tamanhos de tela típicos.

Golfe

to g:n
ht
make"a arctan 1/:n
seth 78.46
repeat 326.54/:a[make"h heading
pu fd:n/2 pd
setpc"#4285f4
if:h>135[setpc"#34a853]if:h>225[setpc"#fbbc05]if:h>315[setpc"#ea4335]bk:n*.2 pu bk:n*.3
rt:a]home bk:n*.1
filled"#4285f4[fd:n/5 rt 90 fd:n*.49 rt 90 fd:n/5]end

Amostra

g 200 Logotipo do Google, tamanho 200px

Ungolfed

to g :n ; Draw a G of width/height n

hideturtle ; Hide the turtle, since she's not part of the Google logo

;Determine the proper size of the angle to rotate so that the circle stays smooth within 1 px at this size
make "a arctan 1/:n 

setheading 78.46 ; Point toward the top corner of the upcoming rectangle

repeat 326.54 / :a [ ; Scoot around most of the circle, :a degrees at a time

  make"h heading ; Store heading into a variable for golfing purposes

  ; Position pen at the next stroke
  penup 
  forward :n / 2
  pendown

  ; Set the pen color depending on the heading
  setpencolor "#4285f4
  if :h > 135 [ setpencolor "#34a853]
  if :h > 225 [ setpencolor "#fbbc05]
  if :h > 315 [ setpencolor "#ea4335]

  ; Draw the stroke and return to center
  back :n * .2
  penup
  back :n * .3

  right :a ; Rotate to the next sweep heading
]

; Draw the rectangle
home
back :n * .1
filled "#4285f4 [
  forward :n/5
  right 90
  forward :n * .49 ;This is just begging to be :n / 2 but I couldn't bring myself to do it.  Proper math is more like :n * (sqrt 6) / 5
  right 90 
  forward :n / 5
]

end

12

JavaScript (ES7), 285 258 254 252 251 bytes

Solicita a largura do logotipo (até 999) e o desenha em uma tela, pixel por pixel.

Edit : A versão inicial estava convertendo coordenadas cartesianas em coordenadas (x,y)polares (r,a), mas na verdade não precisamos do ângulo. É mais simples (e significativamente mais curto) fazer apenas comparações entre xe ydescobrir em que trimestre estamos.

Editar : salvou 1 byte graças à ETHproductions.

JS, 251 224 220 218 217 bytes

for(w=x=y=prompt(c=c.getContext`2d`)/2;r=(x*x+y*y)**.5,q=(x<y)+2*(x<-y),c.fillStyle='#'+'4285F434A853EA4335FBBC05FFF'.substr(x>0&r<w&y*y<w*w/25?0:r<w*.6|r>w|!q&y<0?24:q*6,6),x-->-w||y-->-(x=w);)c.fillRect(x+w,y+w,1,1)

HTML, 34 bytes

<canvas id=c width=999 height=999>

Versão ES6: 258 231 227 225 224 + 34 = 258 bytes

Largura máxima recomendada para o trecho: 190.

for(w=x=y=prompt(c=c.getContext`2d`)/2;r=Math.pow(x*x+y*y,.5),q=(x<y)+2*(x<-y),c.fillStyle='#'+'4285F434A853EA4335FBBC05FFF'.substr(x>0&r<w&y*y<w*w/25?0:r<w*.6|r>w|!q&y<0?24:q*6,6),x-->-w||y-->-(x=w);)c.fillRect(x+w,y+w,1,1)
<canvas id=c width=999 height=999>


Examinei a parte do JavaScript e pensei imediatamente: "O que diabos são esses <-e -->operadores?" Eu acho que é o que acontece quando você pensa em operadores hipotéticos para uma linguagem hipotética por 24 horas ...: P
ETHproductions

@ETHproductions Eles também estão confusos com o marcador de sintaxe do Notepad ++, que é interpretado -->como o início (?) De um comentário html, se este for colocado dentro de <script>tags em um arquivo html.
Arnauld #

Acredite ou não, o Notepad ++ está certo (embora não completamente). Confira o último item na tabela de compatibilidade do ES6 .
ETHproductions

@ETHproductions - Uau. Suponho que haja uma boa razão por trás dessa sintaxe, mas falho em vê-la. Obrigado por apontar isso.
Arnauld 13/10

Só para você saber, acredito que seja válido apenas no início de uma linha. 123 --> commentgera um erro no console do meu navegador (Firefox 49), enquanto --> commentnão.
ETHproductions

10

C #, 276 + 21 = 297 bytes

276 bytes para o método + 21 bytes para importação System.Drawing.

using System.Drawing;n=>{var q=new Bitmap(n,n);uint W=0xFFFFFFFF,B=0xFF4285F4;for(int y=0,x=0;x<n;y=++y<n?y:x-x++){float a=2f*x/n-1,b=2f*y/n-1,c=b*b;q.SetPixel(x,y,Color.FromArgb((int)(a>0&&a<.8&&c<.04?B:a*a+c>1||a*a+c<.36?W:a*a<c?b<0?0xFFEA4335:0xFF34A853:a<0?0xFFFBBC05:b<-.2?W:B)));}return q;};

Baseado no algoritmo de Martin Rosenau. Obrigado por fazer a parte mais difícil de criar uma maneira de construir a imagem!

using System.Drawing;             // Import System.Drawing
/*Func<int, Bitmap>*/ n =>
{
    var q = new Bitmap(n, n);     // Create nxn output bitmap
    uint W=0xFFFFFFFF,            // White, color used more than once
         B=0xFF4285F4;            // Blue, color used more than once
    for(int y = 0, x = 0; x < n;  // Loops for(x=0;x<N;x+=1) for(y=0;y<N;y+=1) combined
        y = ++y < n               // Increment y first until it reaches n
            ? y           
            : x - x++)            // Then increment x, resetting y
    {
        float a = 2f * x / n - 1, // Relative coords. Refer to Martin Rosenau's
              b = 2f * y / n - 1, // for what this magic is.
              c = b * b;          // b*b is used more than 3 times

        q.SetPixel(x, y,          // Set pixel (x,y) to the appropriate color
            Color.FromArgb((int)  // Cast uint to int :(
            ( // Here lies magic
                a > 0 && a < .8 && c < .04 
                    ? B
                    : a * a + c > 1 || a * a + c < .36
                        ? W
                        : a * a < c 
                            ? b < 0 
                                ? 0xFFEA4335
                                : 0xFF34A853
                            : a < 0
                                ? 0xFFFBBC05
                                : b < -.2
                                    ? W
                                    : B
            )));
    }
    return q;
};

26: 26

400: 400


Você pode salvar bytes, não incluindo a transparência na ie código de cor0xFF...
TheLethalCoder

8

JS / CSS / HTML (+ JS), 40 0 + 701 644 617 593 + 173 90 97 121 = 914 774 754 730 714 bytes

*{position:absolute}a,h{height:100%;background:#4285F4}a,g{width:100%;border-radius:100%}h{width:30%;height:20%;top:40%}b,c,d,e,f{width:50%;height:50%}b,d,f,h{left:50%}e,f{top:50%}c{border-radius:100% 0 0;background:linear-gradient(45deg,#FBBC05 50%,#EA4335 50%)}d{border-radius:0 100% 0 0;background:linear-gradient(-45deg,transparent 50%,#EA4335 50%)}e{border-radius:0 0 0 100%;background:linear-gradient(-45deg,#34A853 50%,#FBBC05 50%)}f{border-radius:0 0 100%;background:linear-gradient(45deg,#34A853 50%,#4285F4 50%)}b,g{height:40%;background:#FFF}g{width:60%;height:60%;top:20%;left:20%}
<input oninput=with(o.style)height=width=value+"px"><o id=o><a></a><b></b><c></c><d></d><e></e><f></f><g></g><h></h></o>

Usa gradientes lineares em vez de transformações. Editar: salvou 140 bytes graças a @darrylyeo. Economizou 20 bytes usando um elemento extra em vez de um gradiente. Economizou 24 bytes graças ao @DBS. Economizou 16 bytes graças a @Hedi. De trás para frente, as várias camadas são:

  • a O círculo azul
  • b Um retângulo branco para obscurecer a parte acima da barra
  • c O quarto superior esquerdo vermelho / amarelo
  • d O octante vermelho no canto superior direito
  • e O quarto esquerdo inferior amarelo / verde
  • f O quarto inferior direito verde / azul
  • g O círculo branco interno
  • h A barra azul horizontal

Em vez de IDs, você deve usar nomes de elementos tais como a, b, i, s, etc. Use *em vez de divpara o seletor CSS.
darrylyeo

Além disso, use backgroundcomo uma abreviação de background-image.
darrylyeo

@darrylyeo Graças, que é feito uma grande diferença para a minha pontuação, não ajudou me esquecendo até mesmo para remover as aspas do meu HTML ...
Neil

Heh, não tem problema!
darrylyeo

Eu acredito que você pode salvar alguns caracteres aqui e ali usando o composto border-radius. Por exemplo, em c{border-radius:100% 0 0;vez dec{border-top-left-radius:100%;
DBS

8

Ruby 2.3.1, 376 359 bytes

Usando a gema RMagick.

d,f=$*[0].to_i,2.5;g,h,e,c=d-1,d/2,Magick::ImageList.new,Magick::Draw.new;e.new_image(d,d);c.stroke('#EA4335').fill_opacity(0).stroke_width(d*0.2).ellipse(h,h,g/f,g/f,225,315).stroke('#FBBC05').ellipse(h,h,g/f,g/f,135,225).stroke('#34A853').ellipse(h,h,g/f,g/f,45,135).stroke('#4285F4').ellipse(h,h,g/f,g/f,348.5,45).line(h,h,d*0.989,h).draw(e);e.write($*[1])

Exemplos

50x50

50x50

250 x 250

insira a descrição da imagem aqui

500 x 500

insira a descrição da imagem aqui

1000 x 1000

insira a descrição da imagem aqui

O arquivo usa dois parâmetros - o primeiro é a dimensão e o segundo é o nome do arquivo para salvar a saída como.

Ungolfed

require "RMagick"

# Take the user's input for dimension
d = $*[0].to_i

e = Magick::ImageList.new
e.new_image(d, d)

c = Magick::Draw.new

# Start by setting the color to red
c.stroke('#EA4335')

  # set opacity to nothing so that we don't get extra color.
  .fill_opacity(0)

  # set thickness of line.
  .stroke_width(d*0.2)

  # #ellipse creates an ellipse taking
  # x, y of center
  # width, height,
  # arc start, arc end
  .ellipse(d / 2, d / 2, (d - 1) / 2.5, (d - 1) / 2.5, 225, 315)

  # change to yellow and draw its portion
  .stroke('#FBBC05')
  .ellipse(d / 2, d / 2, (d - 1) / 2.5, (d - 1) / 2.5, 135, 225)

  # change to green and draw its portion
  .stroke('#34A853')
  .ellipse(d / 2, d / 2, (d - 1) / 2.5, (d - 1) / 2.5, 45, 135)

  # change to blue and draw its portion
  .stroke('#4285F4')
  .ellipse(d / 2, d / 2, (d-1)/2.5, (d - 1)/2.5, 348.5, 45)

  # creates the chin for the G
  .line(d/2, d/2, d*0.99, d/2)

  # draws to the created canvas
  .draw(e)

# save out the file
# taking the filename as a variable saves a byte over
# "a.png"
e.write($*[1])

Inicialmente, eu comecei a resolver isso usando oily_png / chunky_png, mas isso provavelmente acabaria muito complicado em comparação com o RMagick. A função .ellipse do RMagick tornou isso fácil e o trabalho principal foi o ajuste das formas / tamanhos de tudo.

Esta é minha primeira submissão ao Code Golf (primeira resposta da SE também) e eu me considero apenas um pouco intermediário com Ruby. Se você tem alguma opinião sobre melhorias / dicas, sinta-se à vontade para compartilhar!


Parece que não consigo editar minha postagem (erro 404), mas se eu remover a linha de solicitação da minha solução de golfe, ela cortaria 17 bytes e a reduziria para 359 bytes.
metropolis

5

Python 2, 378 373 bytes

Eu realmente queria fazer isso usando turtle. Eu tive que limpar meu conhecimento de Geometria para isso, calculando ângulos e comprimentos não fornecidos na descrição do desafio.

Edit: removed up(), pois isso remove a pequena lasca de branco entre verde e azul e faz com que o círculo interno pareça melhor. Isso torna o programa ainda mais lento.

Editar: substituído 9*npor 2*npara acelerar. Eu determinei que ainda criaria um círculo suave.

from turtle import*
n=input()
C=circle
F=fill
K=color
q=90
w="white"
t=n*.3
lt(45)
def P(c,x,A):K(c);F(1);fd(x);lt(q);C(x,A,2*n);F(0);goto(0,0);rt(q)
for c in"#EA4335","#FBBC05","#34A853":P(c,n/2,q)
P(w,t,360)
K("#4285F4")
F(1)
fd(n/2)
lt(q)
a=11.537
C(n/2,45+a,2*n)
seth(0)
bk(.489*n)
rt(q)
fd(n/5)
lt(q)
fd(t)
F(0)
bk(t)
K(w)
F(1)
fd(.283*n)
lt(94-2*a)
C(t,a-45,2*n)
F(0)

Notas:

  1. Os bugigangas usam Python 3, portanto, a entrada deve ser convertida para int.
  2. As bugigangas ficam muito lentas nse você remover speed(0), o que adicionei apenas para velocidade.
  3. A lentidão do código deve-se principalmente ao terceiro parâmetro do circlecrescimento O(n), pois determina quantos lados o polígono inscrito para desenhar o círculo possui.

Experimente online

Ungolfed: Experimente online

Curiosidade: Trinket é um anagrama do Tkinterpacote GUI do Python e a base para turtle.


Além disso, se alguém tiver o Python instalado, eles poderão executá-lo com um grande valor npara mim? Se não parecer bom, talvez seja necessário colocar alguns sqrts para ser mais exato. Eu arredondado para os milésimos.
mbomb007


São apenas os grandes valores que me preocupam. A tela do Trinket tem no máximo 400. #
mbomb007 12/12


@daHugLenny Não faço ideia. Pode ser um problema de memória, pois 10000 é um valor tão grande.
mbomb007

5

PHP + GD, 529 449 bytes

Isso pega um parâmetro de string de consulta ne gera uma versão PNG do logotipo do tamanho especificado.

<?php $n=$_GET['n'];$h=$n/2;$c='imagecolorallocate';$a='imagefilledarc';$i=imagecreatetruecolor($n,$n);$m=[$c($i,66,133,244),$c($i,52,168,83),$c($i,251,188,5),$c($i,234,67,53),$c($i,255,255,255)];imagefill($i,0,0,$m[4]);$j=-11.6;foreach([45,135,225,315]as$k=>$e){$a($i,$h,$h,$n,$n,$j,$e,$m[$k],0);$j=$e;}$a($i,$h,$h,$n*.6,$n*.6,0,0,$m[4],0);imagefilledrectangle($i,$h,$h-$n*.1,$h+$h*.98,$h+$h*.2,$m[0]);header('Content-Type:image/png');imagepng($i);

Ungolfed:

<?php

$n = $_GET['n'];$h=$n/2;
$c = 'imagecolorallocate';$a='imagefilledarc';
$i = imagecreatetruecolor($n,$n);

// Create array of colors
$m=[$c($i,66,133,244),$c($i,52,168,83),$c($i,251,188,5),$c($i,234,67,53),$c($i,255,255,255)];

// Fill background with white
imagefill($i, 0, 0, $m[4]);

// Create four arcs
$j=-11.6;
foreach([45,135,225,315]as$k=>$e){
    $a($i, $h, $h, $n, $n, $j, $e, $m[$k], 0);$j=$e;
}

// Hollow out the center and fill with white
$a($i, $h, $h, $n*.6,$n*.6,0,0,$m[4],0);

// create the horizontal bar
imagefilledrectangle($i,$h,$h-$n*.1,$h+$h*.98,$h+$h*.2,$m[0]);

// Output
header('Content-Type: image/png');
imagepng($i);

N = 13:
13x13

N = 200:
200x200


A maioria das constantes de string não precisa de aspas. A imagem em cores verdadeiras não precisa imagecolorallocate; basta atribuir 0xRRGGBB como cor às funções de desenho. Um pouco mais de golfe e o tamanho é de 329 bytes:, imagefill($i=imagecreatetruecolor($n=$argv[1],$n),0,0,($m=[4359668,3450963,0xfbbc05,0xea4335,0xffffff])[4]);for($j=-11.6;$e=[45,135,225,315][$k];$j=$e)($a=imagefilledarc)($i,$h=$n/2,$h,$n,$n,$j,$e,$m[$k++],0);$a($i,$h,$h,$n*.6,$n*.6,0,0,$m[4],0);imagefilledrectangle($i,$h,$h-$n*.1,$h+$h*.98,$h+$h*.2,$m[0]);imagepng($i,"g.png");execute com -r, leve a entrada da linha de comando e faça a saída para g.png.
Titus

Desculpe, meu golfe anterior era dois bytes muito curto: [$ktem que ser [+$k. Mas este também deve funcionar: imagefill($i=imagecreatetruecolor($n=$argv[1],$n),0,0,$w=2**24-1);$j=-11.6;foreach([$b=4359668,3450963,0xfbbc05,0xea4335]as$c)($a=imagefilledarc)($i,$h=$n/2,$h,$n,$n,$j,$j=45+90*$k++,$c,0);$a($i,$h,$h,$p=$n*.6,$p,0,0,$w,0);imagefilledrectangle($i,$h,$n*.4,$n*.99,$p,$b);imagepng($i,"g.png");(291 bytes)
Titus

@Titus Obrigado. Depois desta resposta, descobri que você não precisa imagecolorallocate. Vou atualizar minha resposta com seu código. Mas você precisa enviar para o nome do arquivo? Você não pode simplesmente deixar de fora o nome do arquivo imagepnge apenas enviá-lo para o stdout?
Kodo Johnson

5

Java, 568 bytes

Não é o idioma mais forte para o golfe, mas aqui está minha tentativa sincera:

import java.awt.image.*;class G{public static void main(String[]b)throws Exception{int n=Integer.parseInt(b[0]),x,y,a,c;BufferedImage p=new BufferedImage(n,n,BufferedImage.TYPE_INT_RGB);for(y=0;y<n;y++){for(x=0;x<n;x++){double u=(x+.5)/n-.5,v=.5-(y+.5)/n,r=Math.hypot(u,v);a=(int)(Math.atan2(v,u)*4/Math.PI);c=0xFFFFFF;if(0<u&u<.4&-.1<v&v<.1)c=0x4285F4;else if(r<.3|r>.5);else if(a==0&v<.1)c=0x4285F4;else if(a==1|a==2)c=0xEA4335;else if(a==-1|a==-2)c=0x34A853;else if(a!=0)c=0xFBBC05;p.setRGB(x,y,c);}}javax.imageio.ImageIO.write(p,"png",new java.io.File("G.png"));}}

Uso:

> javac G.java
--> Compiles to G.class
> java G 400
--> Writes G.png in current working directory

Versão sem golfe - a idéia básica é trabalhar no sistema de coordenadas u, v ∈ [-0,5, 0,5] e calcular a distância e o ângulo de cada pixel do centro da imagem:

import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

public class Google {

    public static void main(String[] args) throws IOException {
        int n = Integer.parseInt(args[0]);
        int[] pixels = new int[n * n];

        for (int y = 0; y < n; y++) {
            for (int x = 0; x < n; x++) {
                double u = (x + 0.5) / n - 0.5;
                double v = 0.5 - (y + 0.5) / n;
                double r = Math.hypot(u, v);
                int a = (int)(Math.atan2(v, u) * 4 / Math.PI);
                int c = 0xFFFFFF;
                if (0 < u && u < 0.4 && Math.abs(v) < 0.1)
                    c = 0x4285F4;
                else if (r < 0.3 || r > 0.5)
                    /*empty*/;
                else if (a == 0 && v < 0.1)
                    c = 0x4285F4;
                else if (a == 1 || a == 2)
                    c = 0xEA4335;
                else if (a == -1 || a == -2)
                    c = 0x34A853;
                else if (a != 0)
                    c = 0xFBBC05;
                pixels[y * n + x] = c;
            }
        }

        BufferedImage image = new BufferedImage(n, n, BufferedImage.TYPE_INT_RGB);
        image.setRGB(0, 0, n, n, pixels, 0, n);
        ImageIO.write(image, "png", new File("G.png"));
    }

}

Minha implementação calcula e desenha pixels brutos. É possível criar uma implementação alternativa que use rotinas gráficas de alto nível, como Graphics2D e Arc2D, para fazer o desenho, especialmente com anti-aliasing.


4

Go, 379 bytes

import ."fmt"
func f(a int)(s string){
m:=map[string]float64{"fbbc05":-45,"ea4335":45,"4285f4":168.5,"34a853":225}
for k,v:=range m{s+=Sprintf("<use xlink:href=#c fill=#%v transform=rotate(%v,5,5) />",k,v)}
return Sprintf("<svg width=%v viewBox=0,0,10,10><def><path id=c d=M0,5A5,5,0,0,1,5,0V2A3,3,0,0,0,2,5 /></def>%v<rect x=5 y=4 fill=#4285f4 width=4.9 height=2 /></svg>",a,s)}

A função fusa um único intargumento (o fator de escala) e gera uma imagem SVG dimensionada adequadamente.

Experimente online no Ideone.

Exemplo de saída:

<svg width=333 viewBox=0,0,10,10><def><path id=c d=M0,5A5,5,0,0,1,5,0V2A3,3,0,0,0,2,5 /></def><use xlink:href=#c fill=#34a853 transform=rotate(225,5,5) /><use xlink:href=#c fill=#fbbc05 transform=rotate(-45,5,5) /><use xlink:href=#c fill=#ea4335 transform=rotate(45,5,5) /><use xlink:href=#c fill=#4285f4 transform=rotate(168.5,5,5) /><rect x=5 y=4 fill=#4285f4 width=4.9 height=2 /></svg>

Parece errado apaziguar nossos senhores do Google em qualquer linguagem de programação, exceto a própria.


4

CJam, 141

ri:M.5*:K5/:T;'P3NMSMN255NM2m*[K.5-_]f.-{:X:mh:IK>0{X~0<\zT>|{IT3*<0{X~>X~W*>:Z2+{Z{X0=TW*>}4?}?}?}1?}?}%"^^G_8:nEhB%P9IW@zA"102b256b3/f=:+N*

Experimente online

Produz a imagem no formato ASCII ppm.
Para uma versão de arte ASCII mais agradável de ser visualizada no navegador, tente este código . Também ajuda a visualizar o algoritmo.

Explicação:

ri:M                 read input, convert to int and store in M
.5*:K                multiply by 0.5 and store in K (M/2)
5/:T;                divide by 5 and store in T (M/10) and pop
'P3NMSMN255N         ppm header (N=newline, S=space)
M2m*                 generate all pixel coordinates - pairs of numbers 0..M-1
[K.5-_]              push the center (coordinates K-0.5, K-0.5)
f.-                  subtract the center from every pixel
{…}%                 map (transform) the array of coordinate pairs
  :X                 store the current pair in X
  :mh:I              calculate the hypotenuse of X (distance from the center)
                      and store in I
  K>0                if I>K (outside the big circle), push 0
  {…}                else…
    X~               dump X's coordinates (row, column)
    0<               check if the column is <0
    \zT>|            or the absolute value of the row is >T
    {…}              if true (outside the G bar)…
      IT3*<0         if I<T*3 (inside the small circle) push 0
      {…}            else (between the circles)…
        X~>          dump X and check if row>column (diagonal split)
        X~W*>:Z      also check if row>-column (other diagonal) and store in Z
                      (W=-1)
        2+           if in lower-left half, push Z+2 (2 for left, 3 for bottom)
        {…}          else (upper-right half)…
          Z{…}       if it's in the right quadrant
            X0=      get the row coordinate of X
            TW*>     compare with -T, resulting in 0 (above the bar) or 1
          4          else (top quadrant) push 4
          ?          end if
        ?            end if
      ?              end if
    1                else (inside the G bar) push 1
    ?                end if
  ?                  end if
"^^G … @zA"          push a string containing the 5 colors encoded
102b                 convert from base 102 to a big number
                      (ASCII values of chars are treated as base-102 digits)
256b                 convert to base 256, splitting into 15 bytes
3/                   split into triplets (RGB)
f=                   replace each generated number (0..4)
                      with the corresponding color triplet
:+N*                 join all the triplets, and join everything with newlines

3

JavaScript (ES6) (+ SVG), 293 bytes, não concorrente

document.write(`<svg id=o width=${prompt()} viewbox=0,0,50,50>`);m=`39,11`;`#EA433511,11
#FBBC0511,39
#34A85339,39
#4285F445,25L25,25`.replace(/(.{7})(.{5})(.*)/g,(_,s,t,u)=>m=document.write(`<path stroke=${s} d=M${m}A20,20,0,0,0,${t+u} fill=none stroke-width=10 stroke-linejoin=round />`)||t)

Infelizmente, a junção da linha redonda não é exatamente o efeito solicitado, mas é bem próximo.


3

FreeMarker + HTML / CSS, 46 + 468 = 514 bytes

HTML:

<div><div></div><div></div><span></span></div>

CSS:

div div,div span{position:absolute}div{width:10px;height:10px;box-sizing:border-box;transform-origin:top left;position:relative;transform:scale(${n*.1})}div div{border:2px solid;border-radius:9px;border-color:transparent #4285f4 transparent transparent;transform:rotate(33.4630409671deg);transform-origin:center}div div+div{border-color:#ea4335 transparent #34a853 #fbbc05;transform:none}div span{display:block;top:4px;bottom:4px;left:5px;right:.1px;background:#4285f4}

Supondo que o processador FreeMarker seja executado com uma variável n conjunto de , representando entrada.

Explicação dos números mágicos:

Tudo é baseado em um invólucro de 10x10px e, em seguida, redimensionado n/10.

  • Distância à direita da caixa horizontal azul [px]: 5 - sqrt (5 ^ 2 - 1 ^ 2) = 0,10102051443 ( Pitágoras )
  • Rotação do arco azul [deg]: 45 - arcSin (1/5) = 33.4630409671 ( Seno )

Ungolfed JSFiddle


Coloque a parte CSS em um elemento de estilo e use Javascript ou PHP. substitua transform:scale(n)por transform:scale(<?=$_GET[n])?>(PHP). Em javascript, você pode anexar a parte CSS ao estilo Element
Jörg Hülsermann 13/16

Pensei em JS, mas não queria estragar muito o código. No entanto, os idiomas de modelo parecem bons, então eu fui com o FreeMarker e rapidamente ajustei minha resposta, obrigado.
Cedric Reichenbach

A barra azul é muito longe para a direita no lado direito que pensar
Robau

Não, você pode calculá-lo facilmente imaginando um triângulo retângulo com comprimentos laterais 0,5, 0,1 e x, em que x denota a largura da barra azul ou, consequentemente, 0,5 x sua distância à direita. x pode então ser determinado usando o teorema de Pitágoras (veja as explicações que adicionei).
Cedric Reichenbach

O JSFiddle não é exibido corretamente nos dois navegadores que eu tentei (Win10 x64) - com o Chrome 54.0.2840.59 m (64 bits), a barra azul se estende muito para a direita e com o Firefox 49.0.1 (32 -bit) há uma ligeira folga, a meio da parte curva azul
alldayremix

3

343 octetos de Haskell

roman@zfs:~$ cat ppmG.hs
ppmG n='P':unlines(map show([3,n,n,255]++concat[
 case map signum[m^2-(2*x-m)^2-(2*y-m)^2,
 (10*x-5*m)^2+(10*y-5*m)^2-(3*m)^2,
 m-x-y,x-y,5*y-2*m,3*m-5*y,2*x-m]of
 1:1:1:1:_->[234,67,53]
 1:1:1:_->[251,188,5]
 [1,_,_,_,1,1,1]->[66,133,244]
 1:1:_:1:1:_->[66,133,244]
 1:1:_:_:1:_->[52,168,83]
 _->[255,255,255]|m<-[n-1],y<-[0..m],x<-[0..m]]))
roman@zfs:~$ wc ppmG.hs
 10  14 343 ppmG.hs
roman@zfs:~$ ghc ppmG.hs -e 'putStr$ppmG$42'|ppmtoxpm
ppmtoxpm: (Computing colormap...
ppmtoxpm: ...Done.  5 colors found.)

/* XPM */
static char *noname[] = {
/* width height ncolors chars_per_pixel */
"42 42 6 1",
/* colors */
"  c #4285F4",
". c #EA4335",
"X c #FBBC05",
"o c #34A853",
"O c #FFFFFF",
"+ c None",
/* pixels */
"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OOOOOOOOOOOOOOO............OOOOOOOOOOOOOOO",
"OOOOOOOOOOOO..................OOOOOOOOOOOO",
"OOOOOOOOOO......................OOOOOOOOOO",
"OOOOOOOOO........................OOOOOOOOO",
"OOOOOOOO..........................OOOOOOOO",
"OOOOOOO............................OOOOOOO",
"OOOOOOXX..........................OOOOOOOO",
"OOOOOXXXX........................OOOOOOOOO",
"OOOOXXXXXX.......OOOOOOOO.......OOOOOOOOOO",
"OOOXXXXXXXX....OOOOOOOOOOOO....OOOOOOOOOOO",
"OOOXXXXXXXXX.OOOOOOOOOOOOOOOO.OOOOOOOOOOOO",
"OOXXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OOXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OOXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXOOOOOOOOOOOO                    O",
"OXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOO         O",
"OXXXXXXXXXOOOOOOOOOOOOOOOOOOOOOO         O",
"OOXXXXXXXXXOOOOOOOOOOOOOOOOOOOO         OO",
"OOXXXXXXXXXOOOOOOOOOOOOOOOOOOOO         OO",
"OOXXXXXXXXXXOOOOOOOOOOOOOOOOOO          OO",
"OOOXXXXXXXXooOOOOOOOOOOOOOOOOoo        OOO",
"OOOXXXXXXXoooooOOOOOOOOOOOOooooo       OOO",
"OOOOXXXXXooooooooOOOOOOOOoooooooo     OOOO",
"OOOOOXXXoooooooooooooooooooooooooo   OOOOO",
"OOOOOOXoooooooooooooooooooooooooooo OOOOOO",
"OOOOOOOooooooooooooooooooooooooooooOOOOOOO",
"OOOOOOOOooooooooooooooooooooooooooOOOOOOOO",
"OOOOOOOOOooooooooooooooooooooooooOOOOOOOOO",
"OOOOOOOOOOooooooooooooooooooooooOOOOOOOOOO",
"OOOOOOOOOOOOooooooooooooooooooOOOOOOOOOOOO",
"OOOOOOOOOOOOOOOooooooooooooOOOOOOOOOOOOOOO",
"OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO"
};

Explicação

  • "P3" == pixmap portátil de texto sem formatação
  • show == produz decimais ASCII temendo corrupção UTF-8 por "\ xFF \ xFF \ xFF"
  • unlines == separa decimais em linhas
  • m = n-1 para simetria em n == comprimento [0..m]
  • m²- (2x-m) ²- (2y-m) ²> 0 == (xm / 2) ² + (ym / 2) ² <(m / 2) ² == insideOuterCircle
  • (10x-5m) ² + (10y-5m) ²- (3m) ²> 0 == (xm / 2) ² + (ym / 2) ²> (m3 / 10) ² == outsideInnerCircle
  • mxy> 0 == x + y <m == inUpperLeft
  • xy> 0 == x> y == inUpperRight
  • 5y-2m> 0 == y> m2 / 5 == abaixoGbarTop
  • 3y-5y> 0 == y <m3 / 5 == acimaGbarBot
  • 2x-m> 0 == x> m / 2 == inRightHalf
  • [234,67,53] == vermelho
  • [251,188,5] == amarelo
  • [52.168,83] == verde
  • [66,13,244] == azul
  • [255.255.255] == branco

1
A menos que você codifique tudo com ASCII de 7 bits (o que você pode fazer, já que o ponto de código de caracteres mais alto que você está usando é 0x7C/ 124/ |) . Nesse caso, seriam 338 septetos de Haskell . Mas, considerando como o padrão de 8 bits a um byte se tornou no armazenamento de dados nas últimas duas décadas, acho que o termo “bytes” é suficientemente específico sem vencer o cavalo morto.
Slipp D. Thompson

3

SAS - 590 536 521 bytes

Isso usa o recurso de anotação GTL . A entrada é especificada em uma variável de macro na primeira linha. Por alguns bytes extras, você pode definir a coisa toda como uma macro. Ele ainda se infiltra abaixo do Java e de algumas das respostas em HTML, mesmo que você precise definir um modelo de gráfico nulo apenas para poder plotar qualquer coisa!

Eu deixei a linha entrar para um pouco de legibilidade, mas não estou contando isso para o total, pois funciona sem eles.

%let R=;
%let F=FILLCOLOR;
ods graphics/width=&R height=&R;
proc template;
define statgraph a;
begingraph;
annotate;
endgraph;
end;
data d;
retain FUNCTION "RECTANGLE" DISPLAY "FILL" DRAWSPACE "graphPERCENT";
length &F$8;
_="CX4285F4";
P=100/&R;
HEIGHT=P;
width=P;
do i=1to &R;
x1=i*P;
U=x1-50;
do j=1to &R;
y1=j*P;
V=y1-50;
r=euclid(U,V);
&F="";
if 30<=r<=50then if V>U then if V>-U then &F="CXEA4335";
else &F="CXFBBC05";
else if V<-U then &F="CX34A853";
else if V<10then &F=_;
if &F>'' then output;
end;
end;
x1=65;
y1=50;
width=30;
height=20;
&F=_;
output;
proc sgrender sganno=d template=a;

Editar: eliminou mais alguns bytes através do uso de macrars, configurações padrão e escolha de operadores.

Edit 2: se livrou dos do-endblocos para a if-then-elselógica e de alguma forma ainda funciona - eu não entendo completamente como. Além disso, eu descobri a euclidfunção!


2

SCSS - 415 bytes

Recebe informações como $N: 100px;e <div id="logo"></div>, não tenho certeza se elas devem contar no total ...

$d:$N*.6;$b:$d/3;#logo{width:$d;height:$d;border:$b solid;border-color:#ea4335 transparent #34a853 #fbbc05;border-radius:50%;position:relative;&:before,&:after{content:'';position:absolute;right:-$b;top:50%;border:0 solid transparent}&:before{width:$b*4;height:$d/2;border-width:0 $b $b 0;border-right-color:#4285f4;border-bottom-right-radius:50% 100%}&:after{width:$N/2;margin:-$b/2 0;border-top:$b solid #4285f4}}

Demo no JSFiddle


1

Haskell com pacote JuicyPixels , 306 bytes

import Codec.Picture
p=PixelRGB8
c=fromIntegral
b=p 66 133 244
w=p 255 255 255
(n%x)y|y<=x,x+y<=n=p 234 67 53|y>x,x+y<=n=p 251 188 5|y>x,x+y>n=p 52 168 83|y>=0.4*n=b|1>0=w
(n#x)y|d<=h,d>=0.3*n=n%x$y|x>=h,d<=h,abs(y-h)<=n/10=b|1>0=w where h=n/2;d=sqrt$(x-h)^2+(y-h)^2
f n=generateImage(\x y->c n#c x$c y)n n

Exemplo de uso:

main = writePng "google.png" $ f 1001

Provavelmente isso poderia ser melhorado. A idéia é passar uma função para generateImageselecionar o pixel (cor realmente) que deve ir na posição x, y. Para isso, usamos um lambda que adiciona ncomo parâmetro e os converte em flutuadores ao mesmo tempo. A #função basicamente verifica se estamos no ringue, na barra ou em nenhum dos dois. Se for o anel para o qual passamos o bastão %, se a barra retornarmos azul, caso contrário, branco. %verifica em qual quadrante estamos e retorna a cor apropriada, se não for azul. O azul é um caso especial, pois precisamos garantir que ele não fique envolto em vermelho; portanto, somente retornamos em azul se yestiver abaixo da "linha da barra", caso contrário, retornamos em branco. Essa é a visão geral.


0

Processing.py - 244 bytes + 1 byte para o número de dígitos em N

Vamos começar com o código. Isso pode ser colado no ambiente de processamento e executado (mudando Npara tamanhos diferentes).

N=400
n=N/2
f=fill
a=['#34A853','#FBBC05','#EA4335','#4285F4']
def setup():
 size(N,N);noStroke()
def draw():
 for i in 1,3,5,7: f(a[i/2]);arc(n,n,N,N,i*PI/4+[0,.59][i>6],(i+2)*PI/4)
 f(205);ellipse(n,n,.6*N,.6*N);f(a[3]);rect(n,n-.1*N,.98*n,.2*N)

Trapaça pequena: o círculo que recorta uma parte do logotipo é desenhado na tonalidade em escala de cinza 205 do Processing, que é a cor padrão do plano de fundo. Exportar isso para uma imagem não seria o mesmo. Isso salva uma chamada parabackground(255) .

Explicação

N=400                 # set size
n=N/2                 # precompute center point
f=fill                # 3 usages, saves 3 bytes
a=['#34A853','#FBBC05','#EA4335','#4285F4']
                      # list of colors
def setup():          # called when starting sketch
 size(N,N)            # set size
 noStroke()           # disable stroking
def draw():           # drawing loop
 for i in 1,3,5,7:    # loop over increments of PI/4
  f(a[i/2])           # set fill color using integer
                      # division
  arc(n,n,N,N,i*PI/4+[0,.59][i>6],(i+2)*PI/4)
                      # draw a pizza slice between
                      # two coordinates. The 
                      #     [0,.59][i>6]
                      # accounts for the white part
 f(205)               # set fill color to Processing's
                      # default background
 ellipse(n,n,.6*N,.6*N)
                      # cut out center
 f(a[3])              # set fill to blue
 rect(n,n-.1*N,.98*n,.2*N)
                      # draw the straight part

Exemplos

N = 400

N = 400

N = 13 (o tamanho mínimo do processamento é 100x100)

insira a descrição da imagem aqui

Nota

Se permitirmos editar manualmente vários valores para Nas chamadas explícitas setupe drawnão forem necessárias, o número será reduzido para 213 bytes + 3 bytes por dígito N.

N=200
size(200,200)
n=N/2
f=fill
a=['#34A853','#FBBC05','#EA4335','#4285F4']
noStroke()
for i in 1,3,5,7:f(a[i/2]);arc(n,n,N,N,i*PI/4+[0,.59][i>6],(i+2)*PI/4)
f(205);ellipse(n,n,.6*N,.6*N);f(a[3]);rect(n,n-.1*N,.98*n,.2*N)

Por si só, este não é um programa completo
Vacas charlatão

Justo. Eu removi o programa incompleto e o substitui por uma versão completa.
precisa saber é o seguinte
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.