Apacigua a tus señores de Google: dibuja el logotipo "G"


136

Escriba un programa o función que tome un número entero positivo N y genere una imagen de píxel N × N del logotipo "G" de Google de acuerdo con esta * construcción:

Construcción del logotipo "G"

Por ejemplo, si N es 400, se debe generar un logotipo de 400 × 400 píxeles, con las dimensiones y colores correctos:

Ejemplo de logotipo "G" 400x400

Debería verse exacto independientemente de cuán grande o pequeño sea N. Por ejemplo, aquí hay N = 13:Ejemplo de logotipo "G" 13x13

Su código no debería necesitar conectarse a internet. Por ejemplo, no está permitido escalar un svg alojado externamente. (Sin embargo, escalar un svg codificado en su código estaría bien).

El anti-aliasing se puede usar o no. Tu decides.

Observe que la barra horizontal de la "G" no se extiende hasta el borde derecho de la imagen. El círculo se curva normalmente hacia adentro en el borde derecho antes de cortarlo.

El código más corto en bytes gana.


* La construcción del logotipo se ha simplificado para este desafío. La construcción correcta se puede ver aquí y aquí .


1
¿Hay un mínimo de N? Es probable que una imagen de 1x1 produzca resultados irreconocibles independientemente de cuán buena sea la solución.
jpmc26

@ jpmc26 N es un número entero positivo, por lo tanto, como mínimo 1. Por supuesto, una imagen de 1x1 no puede ser reconocible, pero "debería tener un aspecto preciso", por ejemplo, una imagen en negro no tendría sentido, incluso a esa escala.
Aficiones de Calvin

44
¿Cuál es el resultado esperado para una imagen 1x1, entonces? ¿Un solo píxel de cualquiera de los colores de la imagen? ¿Una imagen blanca? ¿Qué hay de 2x2? Todavía hay más colores en la imagen que píxeles para ese tamaño. Si alguna imagen es inaceptable a esas escalas, el desafío debe definir qué es y qué no es aceptable, ya que no puede producir una imagen que se acerque a la apariencia correcta, ¿no? (Si fuera mi desafío, los excluiría para que sea simple, pero su decisión. También necesitaría verificar que no excluye las respuestas existentes con las nuevas especificaciones, creo.)
jpmc26

@ jpmc26 No. Las personas pueden usar el sentido común para saber si una imagen de 1x1 u otra imagen pequeña se ve precisa.
Aficiones de Calvin

¿Se nos permite descargar un prefabricado .svgy codificarlo en nuestra solución, o tenemos que hacerlo originalmente?
juniorRubyist

Respuestas:


55

Mathematica, 229 226 225 224 221 206 169 bytes

¡Gracias @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]&

¡Qué desafío tan divertido!

Explicación

...&~Array~4

Iterar de 1 a 4 ...

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

Convierta los códigos hexadecimales de color en RGBColorobjetos, para que puedan aplicarse al gráfico del logotipo de Google. Cambie la paleta de colores al <input>color th.

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

Cree un rectángulo relleno (cuboide 2D), cuyas esquinas diagonales son (0, -1) y (sqrt (24), 1).

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

Genere cuatro cuartos rellenos Annulus, centrados en el origen, con radio interno 3 y radio externo 5. No dibuje más allá ArcCsc@5(donde termina el segmento azul).

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

Cree un gráfico con tamaño N x N, de x = -5 a x = 5 (elimina el relleno).

Salidas

N = 10

ingrese la descripción de la imagen aquí

N = 100

ingrese la descripción de la imagen aquí

N = 200

ingrese la descripción de la imagen aquí

N = 10000 (haga clic en la imagen para obtener una resolución completa)

ingrese la descripción de la imagen aquí


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

Toma "N" como argumento de línea de comando y dibuja directamente en la pantalla.

Sin golf:

#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! */
}

Podrías mantener 0xF48542y 0xFFFFFFen enteros.
Yytsi

¿Qué compilador / enlazador usaste? No funciona con mingw
vsz

@vsz Presumiblemente, el compilador de Visual Studio.
Kroltan

@vsz Puedo compilarlo gcc g.c -lgdi32en mingw.
jingyu9575

2
-1>>8también puede funcionar
Mark K Cowan

33

Python 2, 244 220 bytes

usando la transformación de Martin Rosenau en el plano [-1,1] ^ 2 y golf menor como quitar 0.o paréntesis

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)

Explicación:

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
 )

Salida como PPM binario, uso:

python golf_google.py > google.ppm

Ejemplos

  • 13

13

  • 50

50

  • 100

100

  • 1337

1337

solución 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

Versión beta sin golf antes de la eliminación 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, no estoy seguro si 1forfunciona.
Yytsi

1
@ TuukkaX lo hace.
mbomb007

¿Se puede incluir salida de muestra?
Cyoce

@TuukkaX gracias por la 1forsalida de muestra @Cyoce agregada
Karl Napf

Todos los decimales en su código que están en forma de 0.xpueden reducirse 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 el elemento de lienzo

(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 guardado dibujando en sentido antihorario.
11 bytes guardados en el HTML gracias a Conor O'Brien.
12 bytes guardados usando withbloque gracias a Prinzhorn.
4 bytes guardados con un mejor uso de z=q-y/2.
8 bytes guardados mediante el uso parentNodey backgroundgracias a Alexis Tyler.
32 bytes guardados usando un dibujo más preciso del arco / barra azul, así que ya no necesito borrar una parte de él.
11 bytes guardados configurando lienzo css en lugar de su parentNode gracias a Tejas Kale.
8 bytes guardados usando withy mapcon una sola instrucción, `2d` en lugar de ('2d'), en n/5lugar de .2*ne inicializando el fondo en el prompt(...).
4 bytes guardados reemplazando Math.PI/4por.7854 lo cual parece suficiente precisión gracias a RobAu.


Explicación:

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

Las dimensiones del lienzo se inician con la entrada del usuario y el fondo se establece en blanco. qestá 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 color dibuja la parte del círculo, con algunos ajustes para la última (azul). La barra se dibuja para cada color en el mismo lugar con las mismas dimensiones, por lo que solo se puede ver el último (azul).


2
<canvas id=d></canvas>debería funcionar, y <canvas id=d>podría funcionar.
Conor O'Brien

1
Puede perder otros 5 caracteres reemplazando backgroundColor con background.
Alexis Tyler

1
También use d.parentNode en lugar de d.parentElement
Alexis Tyler

1
¿Por qué está configurando las dimensiones parentNode? Simplemente d.stylefunciona también. Lo que permite(f = d.style).width = f.height = n = prompt() + 'px';
Tejas Kale

1
Podría usar en .785398lugar de Math.PI/4reducir 2 bytes (o más si menos precisión está bien.
RobAu

25

BBC BASIC, 177 bytes

Descargue el intérprete en 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

BBC BASIC utiliza 2 unidades = 1 píxel, por lo que trazamos una G de radio n unidades (= n / 2 píxeles) en el centro n,n.

La idea es trazar una serie de líneas radiales, cambiando el color según corresponda. Se descubrió que había pequeños espacios entre las líneas debido al truncamiento de los números cuando se convertían en píxeles, por lo que los triángulos delgados se trazan en su lugar.

Una vez que se completa el barrido de líneas, el cursor se encuentra en la esquina superior derecha del área azul. Se da una sola coordenada para la esquina diagonalmente opuesta para dibujar un rectángulo para completar la forma.

Sin golf

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.

¡Buen trabajo! Hice el mío en Logo usando un método similar antes de ver tu respuesta. Me tienes vencido por unos 81 bytes.
GuitarPicker

21

HTML / JS, 680 624 bytes

Para obtener 624 bytes, elimine el último ;, esto es necesario para el fragmento a continuación debido a la forma en que importa el HTML. Además, Firefox parece no ser compatible image-rendering: pixelatedy necesita en su -moz-crisp-edgeslugar (gracias @alldayremix !) Lo que hace que la solución de Firefox sea +7 pero funciona en Chrome como se esperaba.

Utiliza JavaScript para solicitar Ny un <style>bloque para posicionar / colorear los elementos. Utiliza elementos HTML básicos, en lugar de aplicar estilos a un lienzo (que, al parecer, ¡fue un enfoque mucho más corto!). Este es un enfoque renovado que utiliza una data:imagen de fondo URI en lugar de solo elementos de color. He mantenido el enfoque anterior a continuación en caso de que este nuevo funcione en menos navegadores.

¡Pensé que esto sería mucho más pequeño de lo que terminó siendo, pero de todos modos fue un ejercicio interesante!

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

Versión previa:

<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! (es broma, agradable ;-))
Dada

En mi navegador, la versión anterior muestra brechas leves entre los colores, y la nueva versión ofrece una transición de degradado entre los colores (Firefox 49.0.1 de 32 bits en Win10 x64)
alldayremix

1
@alldayremix hmmm, parece que Firefox necesita tenerlo en image-rendering: -moz-crisp-edgeslugar de hacerlo pixelated. Agregará una nota a ese efecto. ¡Me gusta mucho el estilo degradado! :)
Dom Hastings

He modificado el encabezado para leer "HTML / JS", ya que usa tanto HTML como Javascript.
Mego

20

Bash con Imagemagick (pero 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

Duplicó la escala para eliminar setlinewidth, reemplazó un factor de escala con dupy fusionó un espacio en la Avariable (no se puede con Cporque $C45se analiza como "la variable C45").

¡Gracias a joojaa por sugerir estas ediciones!

Escala antigua, 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

Toma N como el argumento solitario y sale a o.png.

Postdata sin golf para Old Scale

%!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
Puede hacer esto más corto recortando un carácter de la línea de escala 61.2 dup scale, también puede agregar un espacio en C C=' setrgbcolor 5 5 4 'y recortar 4 espacios. Si diseñó esto a media escala, entonces podría 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])

sin golf

[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 -MImagerbandera) = 457 bytes

Ahorré algunos bytes gracias a Dada al usar newllamadas funcionales y deshacerme de los parens, y usando en poplugar del $ARGV[0]punto y coma final. Ahorré un poco más al poner eso $n=popdonde se usó por primera vez, y al usar la notación de espacio de nombres Perl 4 con en 'lugar 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')

Requiere el módulo Imager , que debe instalarse desde CPAN. Toma un entero como argumento de línea de comando. La imagen no está suavizada, por lo que es un poco fea.

Copie el siguiente código en un archivo g.pl. Necesitamos +7 bytes adicionales para el -MImagerindicador, pero ahorra algunos bytes porque no es necesario use Imager;.

$ perl -MImager g.pl 200

Aquí hay varios tamaños:

N = 10

10px

N = 100

100px

N = 200

200px

El código completamente sin golf es sencillo.

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

Esta publicación tenía anteriormente el código con forma de imagen de salida. Como eso va en contra de las reglas del código de golf, tuve que eliminarlo. Vea el historial de revisiones si desea echar un vistazo. Solía Acme :: gotas para los ojos para crear que, con una forma que he creado a partir de una imagen creada con el propio programa que me convierten en formato ASCII art. El código que ofusqué ya estaba en golf, lo que se puede ver reemplazando el primero evalcon a print.


¡Muy agradable! Solo algunos detalles sobre el golf: en poplugar de $ARGV[0]. $h=($n=pop)/2en lugar de $n=pop;...;$h=$n/2. new Imager::Color"#$_"en lugar de Imager::Color->new("#$_"). (y olvidaste soltar el último punto y coma). Pero una vez más, son solo algunos pequeños detalles, ¡tu código es realmente genial! (¡No podría haberlo hecho! ¡Ni siquiera lo sabía Imager, lo cual es bastante conveniente!)
Dada

@ Dada gracias. En realidad es un código bastante sencillo. Corrijo tanto a las personas sobre el uso de la notación de método en SO que es realmente difícil no hacerlo a propósito. Pero usted está en lo correcto. Esta fue la primera vez que usé Imager. Creo que lo vi en Perl Weekly.
simbabque

@Dada usando Imager'Colorcon el delimitador de espacio de nombres Perl 4 guarda otro byte. :)
simbabque

De hecho, ¡la primera vez que veo un uso para esa sintaxis! Además, -MImageres más corto que use Imager;:)
Dada

1
@Dada, iba a hacer eso de todos modos: P Y poner $n=popen los newargumentos salva a los padres y un punto y coma
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>

La parte de escala es width=<?=$_GET[w]?>

Salida por 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
¿No puedes jugar al golf entre las comillas dobles de los atributos ( ") y el siguiente atributo? Ej. <svg width="333" viewBox="0 0 10 10">-><svg width="333"viewBox="0 0 10 10">
Bojidar Marinov

@BojidarMarinov Sí, es corecct, ahorra algunos bytes. Gracias
Jörg Hülsermann

1
Eliminar espacios entre letras y números en los datos de ruta: 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
Seguro. Además, para su echodeclaración, use una cadena entre comillas dobles para permitir variables en línea y elimine el punto y coma: 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
Creo que la mayoría de las comillas dobles se pueden eliminar de forma segura. Como <rect x=5 y=4 fill=#4285f4 width=4.9 height=2 />(aquí, necesitarás un espacio antes del /, sin embargo).
Arnauld

14

Logo, 258 bytes

... porque me imagino que los logotipos se deben hacer usando Logo . Esto se implementa como una función. Lo desarrollé usando el intérprete de logotipos en línea de Calormen.com

Originalmente intenté dibujar cada segmento y pintarlo para llenarlo, pero resultó ser más grande de lo esperado. Hubo muchos movimientos de retroceso desperdiciados y cosas así. En cambio, decidí hacer un barrido de gráfico polar, ajustando el color según el encabezado. La parte más difícil de las matemáticas fue hacer la geometría de la curva en la parte superior del rectángulo de G. Podrías recortar algunos decimales y tener menos precisión, pero quería que esto tuviera una precisión de aproximadamente 3 dígitos para acomodar los tamaños de pantalla típicos.

Golfed

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

Muestra

g 200 Logotipo de Google, tamaño 200 px

Sin golf

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 el ancho del logotipo (hasta 999) y lo dibuja en un lienzo, píxel por píxel.

Editar : La versión inicial estaba convirtiendo coordenadas cartesianas en coordenadas (x,y)polares (r,a), pero realmente no necesitamos el ángulo. Es más simple (y significativamente más corto) hacer comparaciones xy ydescubrir en qué trimestre estamos.

Editar : guardado 1 byte gracias a 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>

Versión ES6: 258 231 227 225 224 + 34 = 258 bytes

Ancho máximo recomendado para el fragmento: 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>


Miré a través de la parte de JavaScript e inmediatamente pensé: "¿Qué demonios son estos <-y -->operadores?" Supongo que eso es lo que sucede cuando has estado pensando en operadores hipotéticos para un lenguaje hipotético durante 24 horas ...: P
ETHproductions

@ETHproductions También confunden el resaltador de sintaxis de Notepad ++ que se interpreta -->como el inicio (?) De un comentario html si se coloca dentro de las <script>etiquetas en un archivo html.
Arnauld

Lo creas o no, Notepad ++ es correcto (aunque no completamente). Consulte el último elemento en la tabla de compatibilidad ES6 .
ETHproductions

@ETHproductions - Wow. Supongo que hay una buena razón detrás de esta sintaxis, pero no la veo. Gracias por señalar esto.
Arnauld

Para que lo sepas, creo que solo es válido al comienzo de una línea. 123 --> commentarroja un error en la consola de mi navegador (Firefox 49), mientras --> commentque no.
ETHproductions

10

C #, 276 + 21 = 297 bytes

276 bytes para método + 21 bytes para importación 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;};

Basado en el algoritmo de Martin Rosenau. ¡Gracias por hacer la parte difícil de encontrar una manera de construir la imagen!

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


Puede guardar bytes al no incluir la transparencia en el código de color, es decir0xFF...
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>

Utiliza gradientes lineales en lugar de transformaciones. Editar: Guardado 140 bytes gracias a @darrylyeo. Ahorró 20 bytes usando un elemento adicional en lugar de un gradiente. Guardado 24 bytes gracias a @DBS. Guardado 16 bytes gracias a @Hedi. De atrás hacia adelante, las diversas capas son:

  • a El circulo azul
  • b Un rectángulo blanco para ocultar la parte superior de la barra.
  • c El cuarto superior izquierdo rojo / amarillo
  • d El octante rojo arriba a la derecha
  • e El cuarto inferior izquierdo amarillo / verde
  • f El cuarto inferior derecho verde / azul
  • g El círculo blanco interior
  • h La barra azul horizontal

En lugar de ID, debe utilizar nombres de elementos tales como a, b, i, s, etc. Usar *en lugar de divpara el selector CSS.
darrylyeo

Además, use backgroundcomo una abreviatura de background-image.
darrylyeo

@darrylyeo Gracias, eso marcó una gran diferencia en mi puntaje, no me ayudó olvidar incluso eliminar las comillas de mi HTML ...
Neil

Je, no hay problema!
darrylyeo

Creo que podrías salvar algunos personajes aquí y allá usando el compuesto border-radius. Por ejemplo, en c{border-radius:100% 0 0;lugar dec{border-top-left-radius:100%;
DBS

8

Ruby 2.3.1, 376359 bytes

Usando la 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])

Ejemplos

50x50

50x50

250x250

ingrese la descripción de la imagen aquí

500x500

ingrese la descripción de la imagen aquí

1000x1000

ingrese la descripción de la imagen aquí

El archivo toma dos parámetros: el primero es la dimensión y el segundo el nombre del archivo para guardar la salida como.

Sin golf

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 comencé a resolver esto usando oily_png / chunky_png, pero probablemente terminaría siendo demasiado complicado en comparación con RMagick. La función .ellipse de RMagick lo hizo muy fácil y el trabajo principal fue ajustar las formas / tamaños de todo.

Esta es mi primera presentación de Code Golf (primera respuesta SE también) y solo me considero algo intermedio con Ruby. Si tiene algún aporte sobre mejoras / consejos, ¡no dude en compartirlo!


Parece que no puedo editar mi publicación (error 404) pero si tuviera que eliminar la línea requerida de mi solución de golf, eso reduciría 17 bytes y lo reduciría a 359 bytes.
metrópolis

5

Python 2, 378 373 bytes

Realmente quería hacer esto usando turtle. Tuve que desempolvar mi conocimiento de Geometría para esto, calculando ángulos y longitudes que no se proporcionan en la descripción del desafío.

Editar: eliminado up(), ya que al hacerlo elimina la pequeña franja de blanco entre verde y azul y hace que el círculo interno se vea mejor. Esto ralentiza el programa aún más.

Editar: reemplazado 9*ncon 2*npara hacer más rápido. Determiné que aún crearía un 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. Las baratijas usan Python 3, por lo que la entrada debe convertirse a int.
  2. Las baratijas se vuelven realmente lentas nsi se quitan speed(0), lo que agregué solo para la velocidad.
  3. La lentitud del código se debe principalmente al tercer parámetro de circlecrecimiento O(n), ya que determina cuántos lados tiene el polígono inscrito para dibujar el círculo.

Pruébalo en línea

Ungolfed: Pruébalo en línea

Dato curioso: Trinket es un anagrama del Tkinterpaquete de interfaz gráfica de usuario de Python y la base para turtle.


Además, si alguien tiene instalado Python, ¿podrían ejecutarlo con un gran valor npara mí? Si no se ve bien, es posible que necesite poner algunos sqrts allí para ser más exactos. Redondeé a las milésimas.
mbomb007


Son solo los grandes valores los que me preocupan. El lienzo en Trinket tiene un máximo de 400.
mbomb007


@daHugLenny No tengo idea. Puede ser un problema de memoria, ya que 10000 es un valor tan grande.
mbomb007

5

PHP + GD, 529 449 bytes

Esto toma un parámetro de cadena de consulta ny genera una versión PNG del logotipo del tamaño 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);

Sin golf:

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


La mayoría de las constantes de cadena no necesitan comillas. La imagen en color verdadero no necesita imagecolorallocate; simplemente dé 0xRRGGBB como color a las funciones de dibujo. Un poco más de golf y se ha reducido a 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");ejecutado con -r, toma la entrada de la línea de comando y las salidas a g.png.
Tito

Lo siento, mi anterior golf era dos bytes demasiado corto: [$ktiene que ser [+$k. Pero este también debería 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 Gracias. Descubrí después de esta respuesta que no necesitas imagecolorallocate. Actualizaré mi respuesta con tu código. ¿Pero necesita salir al nombre del archivo? ¿No puedes dejar el nombre de archivo imagepngy simplemente enviarlo a stdout?
Kodos Johnson

5

Java, 568 bytes

No es el lenguaje más fuerte para jugar golf, pero aquí está mi intento sincero:

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

Versión sin golf: la idea básica es trabajar en el sistema de coordenadas u, v ∈ [−0.5, 0.5] y calcular la distancia y el ángulo de cada píxel desde el centro de la imagen:

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

}

Mi implementación calcula y dibuja píxeles sin formato. Es posible crear una implementación alternativa que use rutinas gráficas de alto nivel como Graphics2D y Arc2D para hacer el dibujo, especialmente con suavizado.


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

La función ftoma un solo intargumento (el factor de escala) y genera una imagen SVG a escala apropiada.

Pruébelo en línea en Ideone.

Salida de ejemplo:

<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 incorrecto apaciguar a nuestros señores de Google en cualquier lenguaje de programación excepto el propio.


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*

Pruébalo en línea

Emite la imagen en formato ASCII ppm.
Para una versión de arte ASCII que sea más agradable de ver en el navegador, pruebe este código . También ayuda a visualizar el algoritmo.

Explicación:

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, no competidor

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)

Lamentablemente, la unión de línea redonda no es el efecto solicitado, pero está bastante cerca.


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}

Suponiendo que el procesador FreeMarker se ejecute con un nconjunto variable , que representa la entrada.

Explicación de los números mágicos:

Todo se basa en un contenedor de 10x10px, luego escalado n/10.

  • Distancia a la derecha del cuadro horizontal azul [px]: 5 - sqrt (5 ^ 2 - 1 ^ 2) = 0.10102051443 ( Pitágoras )
  • Rotación del arco azul [deg]: 45 - arcSin (1/5) = 33.4630409671 ( seno )

JSFiddle sin golf


Coloque la parte CSS en un elemento de estilo y use Javascript o PHP. reemplazar transform:scale(n)con transform:scale(<?=$_GET[n])?>(PHP). En javascript puede agregar la parte CSS al elemento de estilo
Jörg Hülsermann el

Pensé en JS pero no quería estropear demasiado el código. Sin embargo, los lenguajes de plantillas parecen estar bien, así que fui con FreeMarker y ajusté rápidamente mi respuesta, gracias.
Cedric Reichenbach

La barra azul está demasiado lejos a la derecha en el lado derecho, cree
RobAu

No, puede calcularlo fácilmente imaginando un triángulo rectángulo con longitudes laterales de 0.5, 0.1 yx, donde x denota el ancho de la barra azul, o en consecuencia 0.5-x su distancia a la derecha. x se puede determinar utilizando el teorema de Pitágoras (vea las explicaciones que agregué).
Cedric Reichenbach

El JSFiddle no se muestra correctamente en los dos navegadores que he probado (Win10 x64): con Chrome 54.0.2840.59 m (64 bits), la barra azul se extiende demasiado a la derecha y con Firefox 49.0.1 (32 -bit) hay una pequeña brecha a mitad de camino a través de la 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"
};

Explicación

  • "P3" == mapa de píxeles portátil en texto sin formato
  • show == produce decimales ASCII por temor a la corrupción UTF-8 para "\ xFF \ xFF \ xFF"
  • unlines == separa decimales en líneas
  • m = n-1 para simetría en n == longitud [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 == en UpUpRight
  • 5y-2m> 0 == y> m2 / 5 == debajo de GbarTop
  • 3y-5y> 0 == y <m3 / 5 == arribaGbarBot
  • 2x-m> 0 == x> m / 2 == inRightHalf
  • [234,67,53] == rojo
  • [251,188,5] == amarillo
  • [52,168,83] == verde
  • [66,13,244] == azul
  • [255,255,255] == blanco

1
A menos que lo codifique todo con ASCII de 7 bits (lo que podría hacer ya que el punto de código de caracteres más alto que está usando es 0x7C/ 124/ |) en cuyo caso serían 338 septetos de Haskell . Pero considerando cómo se ha convertido el estándar de 8 bits a un byte en el almacenamiento de datos en las últimas dos décadas, creo que el término "bytes" es lo suficientemente específico sin vencer al caballo muerto.
Slipp D. Thompson

3

SAS - 590 536 521 bytes

Esto utiliza la función de anotación GTL . La entrada se especifica en una variable macro en la primera línea. Para unos pocos bytes adicionales, puede definir todo como una macro. Todavía se cuela debajo de Java y algunas de las respuestas HTML, a pesar de que tiene que definir una plantilla de gráfico nulo solo para poder trazar cualquier cosa.

He dejado los saltos de línea para un mínimo de legibilidad, pero no estoy contando esos hacia el total ya que funciona sin ellos.

%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: eliminó unos pocos bytes más mediante el uso de macro variables, la configuración predeterminada y la elección de operadores.

Edición 2: eliminó los do-endbloques de la if-then-elselógica y de alguna manera todavía funciona, no entiendo completamente cómo. Además, descubrí la euclidfunción!


2

SCSS - 415 bytes

Toma datos como $N: 100px;y <div id="logo"></div>, sin embargo, no estoy seguro de si estos deberían contar en el 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 en JSFiddle


1

Haskell con paquete 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

Ejemplo de uso:

main = writePng "google.png" $ f 1001

Esto probablemente podría mejorarse. La idea es pasar una función generateImageque seleccione el píxel (color realmente) que debe ir en la posición x, y. Para eso usamos una lambda que agrega ncomo parámetro y los convierte a todos en flotantes al mismo tiempo. La #función básicamente verifica si estamos en el ring, la barra o ninguno de los dos. Si es el anillo al que le pasamos la batuta %, si la barra solo devolvemos azul, de lo contrario blanco. %comprueba en qué cuadrante estamos y devuelve el color apropiado si no es azul. El azul es un caso especial ya que debemos asegurarnos de que no se envuelva al rojo, por lo que solo devolvemos el azul si yestá debajo de la "línea de la barra", de lo contrario, devolvemos el blanco. Esa es la descripción general.


0

Processing.py: 244 bytes + 1 byte para el número de dígitos en N

Comencemos con el código. Esto se puede pegar en el entorno de procesamiento y ejecutar (cambiando Npara diferentes tamaños).

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)

Pequeño truco: el círculo que corta una parte del logotipo se dibuja en el tono 205 en escala de grises de Processing, que es el color de fondo predeterminado. Exportar esto a una imagen no se vería igual. Esto ahorra una llamada a background(255).

Explicación

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

Ejemplos

N = 400

N = 400

N = 13 (el tamaño mínimo de procesamiento es 100x100)

ingrese la descripción de la imagen aquí

Nota

Si nos permitimos editar manualmente en múltiples valores para Nlas llamadas explícitas setupy drawno son necesarias y se reduce a 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 sí solo, este no es un programa completo
Kritixi Lithos

Lo suficientemente justo. Eliminé el programa incompleto y lo sustituí por una versión completa.
PidgeyUsedGust
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.