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:
Por ejemplo, si N es 400, se debe generar un logotipo de 400 × 400 píxeles, con las dimensiones y colores correctos:
Debería verse exacto independientemente de cuán grande o pequeño sea N. Por ejemplo, aquí hay N = 13:
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í .
fuente
.svg
y codificarlo en nuestra solución, o tenemos que hacerlo originalmente?Respuestas:
Mathematica,
229226225224221206169 bytes¡Gracias @MartinEnder por 1 byte, @ChipHurst por 37 bytes!
¡Qué desafío tan divertido!
Explicación
Iterar de 1 a 4 ...
Convierta los códigos hexadecimales de color en
RGBColor
objetos, para que puedan aplicarse al gráfico del logotipo de Google. Cambie la paleta de colores al<input>
color th.Cree un rectángulo relleno (cuboide 2D), cuyas esquinas diagonales son (0, -1) y (sqrt (24), 1).
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).Cree un gráfico con tamaño N x N, de x = -5 a x = 5 (elimina el relleno).
Salidas
N = 10
N = 100
N = 200
N = 10000 (haga clic en la imagen para obtener una resolución completa)
fuente
C (Windows), 311 bytes
Toma "N" como argumento de línea de comando y dibuja directamente en la pantalla.
Sin golf:
fuente
0xF48542
y0xFFFFFF
en enteros.gcc g.c -lgdi32
en mingw.-1>>8
también puede funcionarPython 2,
244220 bytesusando la transformación de Martin Rosenau en el plano [-1,1] ^ 2 y golf menor como quitar
0.
o paréntesisExplicación:
Salida como PPM binario, uso:
Ejemplos
solución anterior de 244 bytes
Versión beta sin golf antes de la eliminación if / else:
fuente
1for
funciona.1for
salida de muestra @Cyoce agregada0.x
pueden reducirse a.x
:)JavaScript (ES6),
408 ... 321317 bytes384 383 371 367 359 327 316 308304 bytes de JavaScript +2413 bytes para el elemento de lienzo1 byte guardado dibujando en sentido antihorario.
11 bytes guardados en el HTML gracias a Conor O'Brien.
12 bytes guardados usando
with
bloque gracias a Prinzhorn.4 bytes guardados con un mejor uso de
z=q-y/2
.8 bytes guardados mediante el uso
parentNode
ybackground
gracias 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
with
ymap
con una sola instrucción, `2d` en lugar de('2d')
, enn/5
lugar de.2*n
e inicializando el fondo en elprompt(...)
.4 bytes guardados reemplazando
Math.PI/4
por.7854
lo cual parece suficiente precisión gracias a RobAu.Explicación:
Las dimensiones del lienzo se inician con la entrada del usuario y el fondo se establece en blanco.
q
está inicializadoPara 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).
fuente
<canvas id=d></canvas>
debería funcionar, y<canvas id=d>
podría funcionar.d.style
funciona también. Lo que permite(f = d.style).width = f.height = n = prompt() + 'px';
.785398
lugar deMath.PI/4
reducir 2 bytes (o más si menos precisión está bien.BBC BASIC, 177 bytes
Descargue el intérprete en http://www.bbcbasic.co.uk/bbcwin/download.html
BBC BASIC utiliza 2 unidades = 1 píxel, por lo que trazamos una G de radio
n
unidades (= n / 2 píxeles) en el centron,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
fuente
HTML / JS,
680624 bytesPara 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 compatibleimage-rendering: pixelated
y necesita en su-moz-crisp-edges
lugar (gracias @alldayremix !) Lo que hace que la solución de Firefox sea +7 pero funciona en Chrome como se esperaba.Utiliza JavaScript para solicitar
N
y 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 unadata:
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!
Versión previa:
fuente
image-rendering: -moz-crisp-edges
lugar de hacerlopixelated
. Agregará una nota a ese efecto. ¡Me gusta mucho el estilo degradado! :)Bash con Imagemagick (pero realmente PostScript),
268255249 bytesDuplicó la escala para eliminar
setlinewidth
, reemplazó un factor de escala condup
y fusionó un espacio en laA
variable (no se puede conC
porque$C45
se analiza como "la variableC45
").¡Gracias a joojaa por sugerir estas ediciones!
Escala antigua, 255 bytes
Toma N como el argumento solitario y sale a o.png.
Postdata sin golf para Old Scale
fuente
61.2 dup scale
, también puede agregar un espacio en CC=' setrgbcolor 5 5 4 '
y recortar 4 espacios. Si diseñó esto a media escala, entonces podría omitir2 setlinewidth
MATLAB,
189184 bytessin golf
fuente
Perl 5,
486477476450 (+7 para-MImager
bandera) = 457 bytesAhorré algunos bytes gracias a Dada al usar
new
llamadas funcionales y deshacerme de los parens, y usando enpop
lugar del$ARGV[0]
punto y coma final. Ahorré un poco más al poner eso$n=pop
donde se usó por primera vez, y al usar la notación de espacio de nombres Perl 4 con en'
lugar de::
.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
-MImager
indicador, pero ahorra algunos bytes porque no es necesariouse Imager;
.Aquí hay varios tamaños:
N = 10
N = 100
N = 200
El código completamente sin golf es sencillo.
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
eval
con aprint
.fuente
pop
lugar de$ARGV[0]
.$h=($n=pop)/2
en lugar de$n=pop;...;$h=$n/2
.new Imager::Color"#$_"
en lugar deImager::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íaImager
, lo cual es bastante conveniente!)Imager'Color
con el delimitador de espacio de nombres Perl 4 guarda otro byte. :)-MImager
es más corto queuse Imager;
:)$n=pop
en losnew
argumentos salva a los padres y un punto y comaPHP + SVG, 300 bytes
La parte de escala es
width=<?=$_GET[w]?>
Salida por valor 333
fuente
"
) y el siguiente atributo? Ej.<svg width="333" viewBox="0 0 10 10">
-><svg width="333"viewBox="0 0 10 10">
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
echo
declaració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)'/>"
<rect x=5 y=4 fill=#4285f4 width=4.9 height=2 />
(aquí, necesitarás un espacio antes del/
, sin embargo).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
Muestra
g 200
Sin golf
fuente
JavaScript (ES7),
285258254252251 bytesSolicita 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 comparacionesx
yy
descubrir en qué trimestre estamos.Editar : guardado 1 byte gracias a ETHproductions.
JS,
251224220218217 bytesHTML, 34 bytes
Versión ES6:
258231227225224 + 34 = 258 bytesAncho máximo recomendado para el fragmento: 190.
fuente
<-
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-->
como el inicio (?) De un comentario html si se coloca dentro de las<script>
etiquetas en un archivo html.123 --> comment
arroja un error en la consola de mi navegador (Firefox 49), mientras--> comment
que no.C #, 276 + 21 = 297 bytes
276 bytes para método + 21 bytes para importación System.Drawing.
Basado en el algoritmo de Martin Rosenau. ¡Gracias por hacer la parte difícil de encontrar una manera de construir la imagen!
26:
400:
fuente
0xFF...
JS /CSS / HTML (+ JS),400 +701644617593 +1739097 121 =714 bytes914774754730Utiliza 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 azulb
Un rectángulo blanco para ocultar la parte superior de la barra.c
El cuarto superior izquierdo rojo / amarillod
El octante rojo arriba a la derechae
El cuarto inferior izquierdo amarillo / verdef
El cuarto inferior derecho verde / azulg
El círculo blanco interiorh
La barra azul horizontalfuente
a
,b
,i
,s
, etc. Usar*
en lugar dediv
para el selector CSS.background
como una abreviatura debackground-image
.border-radius
. Por ejemplo, enc{border-radius:100% 0 0;
lugar dec{border-top-left-radius:100%;
Ruby 2.3.1,
376359bytesUsando la gema RMagick.
Ejemplos
50x50
250x250
500x500
1000x1000
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
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!
fuente
Python 2,
378373 bytesRealmente 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*n
con2*n
para hacer más rápido. Determiné que aún crearía un círculo suave.Notas:
n
si se quitanspeed(0)
, lo que agregué solo para la velocidad.circle
crecimientoO(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 delTkinter
paquete de interfaz gráfica de usuario de Python y la base paraturtle
.fuente
n
para mí? Si no se ve bien, es posible que necesite poner algunossqrt
s allí para ser más exactos. Redondeé a las milésimas.PHP + GD,
529449 bytesEsto toma un parámetro de cadena de consulta
n
y genera una versión PNG del logotipo del tamaño especificado.Sin golf:
N = 13:
N = 200:
fuente
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 ag.png
.[$k
tiene 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)imagecolorallocate
. Actualizaré mi respuesta con tu código. ¿Pero necesita salir al nombre del archivo? ¿No puedes dejar el nombre de archivoimagepng
y simplemente enviarlo a stdout?Java, 568 bytes
No es el lenguaje más fuerte para jugar golf, pero aquí está mi intento sincero:
Uso:
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:
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.
fuente
Go, 379 bytes
La función
f
toma un soloint
argumento (el factor de escala) y genera una imagen SVG a escala apropiada.Pruébelo en línea en Ideone.
Salida de ejemplo:
Parece incorrecto apaciguar a nuestros señores de Google en cualquier lenguaje de programación excepto el propio.
fuente
CJam, 141
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:
fuente
JavaScript (ES6) (+ SVG), 293 bytes, no competidor
Lamentablemente, la unión de línea redonda no es el efecto solicitado, pero está bastante cerca.
fuente
FreeMarker + HTML / CSS, 46 + 468 = 514 bytes
HTML:
CSS:
Suponiendo que el procesador FreeMarker se ejecute con un
n
conjunto 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
.JSFiddle sin golf
fuente
transform:scale(n)
contransform:scale(<?=$_GET[n])?>
(PHP). En javascript puede agregar la parte CSS al elemento de estilo343 octetos de Haskell
Explicación
fuente
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.SAS -
590536521 bytesEsto 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.
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-end
bloques de laif-then-else
lógica y de alguna manera todavía funciona, no entiendo completamente cómo. Además, descubrí laeuclid
función!fuente
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 ...Demo en JSFiddle
fuente
Haskell con paquete JuicyPixels , 306 bytes
Ejemplo de uso:
Esto probablemente podría mejorarse. La idea es pasar una función
generateImage
que seleccione el píxel (color realmente) que debe ir en la posición x, y. Para eso usamos una lambda que agregan
como 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 siy
está debajo de la "línea de la barra", de lo contrario, devolvemos el blanco. Esa es la descripción general.fuente
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
N
para diferentes tamaños).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
Ejemplos
N
= 400N
= 13 (el tamaño mínimo de procesamiento es 100x100)Nota
Si nos permitimos editar manualmente en múltiples valores para
N
las llamadas explícitassetup
ydraw
no son necesarias y se reduce a 213 bytes + 3 bytes por dígitoN
.fuente