安抚您的Google霸主:绘制“ G”徽标


136

编写一个程序或函数,该程序或函数采用正整数N,并根据以下*构造输出Google的“ G”徽标的N×N像素图像:

“ G”标志的结构

例如,如果N为400,则应输出400×400像素的徽标,并带有正确的尺寸和颜色:

“ G”徽标400x400示例

无论N的大小如何,它都应该看起来准确。例如,这里是N = 13:“ G”徽标13x13示例

您的代码不需要连接到互联网。例如,不允许缩放外部托管的svg。(不过,缩放在代码中编码的svg会很好。)

是否可以使用抗锯齿。由你决定。

请注意,“ G”的水平条并未一直延伸到图像的右边缘。圆在切掉之前通常在右边缘向内弯曲。

以字节为单位的最短代码获胜。


*徽标的结构已针对此挑战进行了简化。正确的构造可以在这里这里看到。


1
是否有最小N?1x1图像可能会产生无法识别的输出,而不管解决方案的质量如何。
jpmc26 2013年

@ jpmc26 N是一个正整数,因此最小值1。
加尔文的业余爱好

4
那么1x1图像的预期输出是什么?图像中任何一种颜色的单个像素?白色的图像?那2x2呢?对于该尺寸,图像中的颜色仍然多于像素。如果在这些比例下任何图像都不可接受,那么挑战就应该定义什么是可接受和不可接受,因为您甚至无法生成接近正确外观的图像,不是吗?(如果这是我的挑战,我将排除它们以简化操作,但保留您的决定。我认为,您还需要验证您不排除使用新规范的现有答案。)
jpmc26,2013年

@ jpmc26不。人们可以使用常识来判断1x1或其他小图像看起来是否准确。
加尔文的业余爱好

是允许我们下载预制文件.svg并将其编码到我们的解决方案中,还是我们必须先进行制作?
juniorRubyist

Answers:


55

Mathematica,229 226 225 224 221 206 169字节

感谢@MartinEnder提供1个字节,@ ChipHurst提供37个字节!

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

多么有趣的挑战!

说明

...&~Array~4

从1迭代到4 ...

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

将彩色十六进制代码转换为RGBColor对象,以便可以将其应用于Google徽标图形。将调色板更改为<input>th颜色。

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

创建一个填充的矩形(2D长方体),其对角线为(0,-1)和(sqrt(24),1)。

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

生成四个Annulus以原点为中心的实心四分之一秒,内半径为3,外半径为5。不要画过去ArcCsc@5(蓝色线段的终点)。

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

创建一个大小为N x N(从x = -5到x = 5)的图形(删除填充)。

产出

N = 10

在此处输入图片说明

N = 100

在此处输入图片说明

N = 200

在此处输入图片说明

N = 10000(单击图像可获得全分辨率)

在此处输入图片说明


44

C(Windows),311字节

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

以“ N”作为命令行参数,直接在屏幕上绘制。

未打高尔夫球:

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

您可以保留0xF485420xFFFFFF整数。
伊西(Yytsi)

您使用了什么编译器/链接器?与mingw不兼容
vsz

@vsz大概是Visual Studio的编译器。
Kroltan '16

@vsz我可以gcc g.c -lgdi32在mingw上编译它。
jingyu9575

2
-1>>8可能也可以使用
Mark K Cowan

33

Python 2,244220字节

在[-1,1] ^ 2平面上使用Martin Rosenau的变换以及轻微的打高尔夫球,例如取下0.或放置支架

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)

说明:

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
 )

输出为二进制PPM,用法:

python golf_google.py > google.ppm

例子

  • 13

13

  • 50

50

  • 100

100

  • 1337

1337

先前的244字节解决方案

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

消除if / else之前的Ungolfed Beta版本:

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

嗯,不确定是否1for可行。
伊西(Yytsi)


您可以包括样本输出吗?
Cyoce

@TuukkaX感谢1for添加@Cyoce示例输出
Karl Napf

您代码中所有形式为的小数点0.x都可以减少为.x:)
Yytsi

27

JavaScript(ES6),408 ... 321317字节

384383371367367359327316308304的JavaScript字节+ canvas元素的24 13字节

(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个字节。
感谢Conor O'Brien,HTML上节省了11个字节。
借助withPrinzhorn,使用块节省了12个字节。
最好使用节省4个字节z=q-y/2
使用parentNodebackground感谢Alexis Tyler 节省了8个字节。
通过使用更精确的蓝色弧线/条形图节省了32个字节,因此我不再需要擦除其中的一部分。
多亏了Tejas Kale,通过设置canvas css而不是其parentNode节省了11个字节。
8个字节保存使用withmap用一个语句,`2d`代替('2d')n/5而不是.2*n和初始化在后台prompt(...)
保存了4个字节,替换Math.PI/4.7854 感谢RobAu,这看起来足够精确。


说明:

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

画布尺寸通过用户输入初始化,并且背景设置为白色。q被初始化。

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

对于每种颜色,绘制圆形部分,最后一个(蓝色)部分进行一些调整。在同一位置以相同尺寸绘制每种颜色的条,因此仅可见最后一种(蓝色)。


2
<canvas id=d></canvas>应该起作用,并且<canvas id=d>可能起作用。
科纳·奥布莱恩

1
您可以通过将backgroundColor替换为background来损失另外5个字符。
Alexis Tyler

1
还可以使用d.parentNode代替d.parentElement
Alexis Tyler

1
为什么要设置parentNode尺寸。刚刚d.style工作了。允许(f = d.style).width = f.height = n = prompt() + 'px';
Tejas Kale

1
您可以使用.785398而不是Math.PI/4舍弃2个字节(如果可以降低精度,也可以 减少2个字节。)
RobAu

25

BBC BASIC,177字节

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使用2个单位= 1像素,因此我们n在中心绘制G个半径单位(= n / 2像素)n,n

想法是绘制一系列径向线,并根据需要更改颜色。发现由于转换为像素时数字的截断,线之间存在小的间隙,因此实际上绘制了细三角形。

线扫完后,光标将位于蓝色区域的右上角。给出了对角相对角的单个坐标以绘制矩形以完成形状。

不打高尔夫球

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.

干得好!在看到您的答案之前,我使用类似的方法在Logo中进行了挖掘。你让我被打败了约81个字节。
GuitarPicker

21

HTML / JS,680 624字节

要获得624个字节,请删除last ;,这是下面的代码段所必需的,这是由于其导入HTML的方式。另外,Firefox似乎不支持image-rendering: pixelated-moz-crisp-edges而是需要(感谢@alldayremix!),这使Firefox解决方案+7,但这确实可以在Chrome中正常工作。

利用JavaScript进行请求,N并使用<style>块来定位/着色元素。使用基本的HTML元素,而不是在画布上应用样式(这似乎是一种更短的方法!)。这是一种使用data:URI背景图像而不只是彩色元素的改进方法。为了避免这种新方法在更少的浏览器上运行,我将前面的方法保留在下面。

我认为这将比最终的结果小很多,但这仍然是一个有趣的练习!

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

先前版本:

<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
叛徒!(只是在开玩笑,很高兴;
达达(Dada

在我的浏览器上,旧版本显示颜色之间的细微差别,新版本提供颜色之间的渐变过渡(Firefox 49.0.1 32位,在Win10 x64上)
alldayremix

1
@alldayremix hmmm,看起来Firefox需要image-rendering: -moz-crisp-edges代替pixelated。将为此添加注释。我很喜欢渐变风格!:)
Dom Hastings

由于您同时使用HTML和Javascript,因此我已将标头修改为“ HTML / JS”。
Mego

20

Bash with Imagemagick(但实际上是Postscript),268 255 249字节

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

将缩放比例加倍以移除setlinewidth,将一个比例因子替换为dup,然后将一个空格合并到A变量中(不能将其合并,C因为$C45解析为“变量C45”)。

感谢joojaa建议这些修改!

旧比例尺,255个字节

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

N作为唯一参数,并输出到o.png。

旧标准的无纸化后记

%!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
您可以通过从比例线上删去一个字符来缩短该时间,61.2 dup scale也可以在C类中添加一个空格C=' setrgbcolor 5 5 4 '并剃除4个空格。如果您以半比例尺进行设计,则可以忽略2 setlinewidth
joojaa

19

MATLAB,189184字节

[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])

不打高尔夫球

[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为-MImager标志)= 457字节

由于使用了函数new调用并摆脱了括号,并使用pop代替了$ARGV[0]以及最后一个分号,我感谢Dada节省了一些字节。我通过将$n=pop它放在第一次使用的地方,以及通过使用Perl 4名称空间符号'代替来节省了一些::

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

它需要模块Imager,需要从CPAN安装。将一个整数作为命令行参数。图像没有抗锯齿,因此有点难看。

将以下代码复制到文件g.pl中。我们需要为-MImager标志添加额外的+7个字节,但由于不需要,它可以节省一些字节use Imager;

$ perl -MImager g.pl 200

这是各种尺寸:

N = 10

10像素

N = 100

100像素

N = 200

200像素

完全不包含代码的代码很简单。

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

该帖子之前的代码形状类似于输出图像。由于这违反了代码高尔夫球规则,因此我不得不将其删除。如果要查看,请查看修订历史记录。我使用Acme :: EyeDrops来创建它,其形状是我根据程序本身创建的图像创建的,然后将其转换为ASCII艺术。我混淆的代码已经被使用了,可以通过将第eval一个替换为来看到print


非常好!关于高尔夫的一些细节:pop代替$ARGV[0]$h=($n=pop)/2代替$n=pop;...;$h=$n/2new Imager::Color"#$_"代替Imager::Color->new("#$_")。(而您忘记删除最后一个分号)。但是,这只是一些小细节,您的代码确实很棒!(我做不到!我什至都不知道Imager,这很方便!)
Dada

@Dada谢谢。实际上,这是非常简单的代码。对于在SO上使用方法标记的问题,我有很多修正,以至于很难做到不故意。但是你是对的。这是我自己第一次使用Imager。我想我在Perl周刊上看到过它。
simbabque

Imager'Color与Perl 4名称空间定界符一起使用的@Dada 保存另一个字节。:)
simbabque

确实,我第一次看到该语法的用法!此外,-MImager还短于use Imager;:)
Dada

1
@Dada我打算做一个呢:P,并把$n=pop进入newARGS节省了括号和一个分号
simbabque

14

PHP + SVG,300字节

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

缩放部分是 width=<?=$_GET[w]?>

输出值为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
您不能在属性的双引号(")和下一个属性之间打个空格吗?例如<svg width="333" viewBox="0 0 10 10">-><svg width="333"viewBox="0 0 10 10">
Bojidar Marinov

@BojidarMarinov是的,它是corecct,它节省了一些字节。谢谢你
约尔格Hülsermann

1
删除路径数据中字母和数字之间的空格: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
当然。另外,对于您的echo语句,请使用双引号引起来的字符串以允许内联变量并删除分号: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
我认为大多数双引号都可以安全删除。就像<rect x=5 y=4 fill=#4285f4 width=4.9 height=2 />(在这里,您需要在之前/

14

徽标258字节

...因为我认为徽标应该使用Logo制作。这是作为功能实现的。我使用Calormen.com的在线徽标解释器进行了开发

我最初尝试绘制每个片段并用油漆填充它,但结果却比预期的要大。有很多浪费的运动回溯等等。相反,我决定进行极坐标图扫描,根据标题调整颜色。数学上最困难的部分是为G的矩形顶部的曲线进行几何处理。您可以修整一些小数点并降低精度,但我希望此精度可以精确到3位左右,以适应典型的屏幕尺寸。

打高尔夫球

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

样品

g 200 Google徽标,大小200px

不打高尔夫球

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字节

提示徽标的宽度(最大999),并将其绘制在画布中,每像素一个像素。

编辑:最初的版本是将笛卡尔坐标转换(x,y)为极坐标(r,a),但我们实际上并不需要角度。进行比较xy找出我们位于哪个季度更简单(并且明显更短)。

编辑:由于ETHproductions,节省了1个字节。

JS,251个 224 220 218 217字节

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个字节

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

ES6版本:258 231 227 225 224 + 34 = 258字节

建议的摘要最大宽度: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>


我浏览了JavaScript部分,立刻想到:“这些<--->运算符到底是什么?” 我想这就是您在24小时内一直在考虑一种假设语言的假设运算符时发生的事情...:P
ETHproductions

@ETHproductions他们还会混淆Notepad ++语法突出显示器,-->如果将其放在<script>html文件中的标记中,则该解释器将被解释为html注释的开始(?)。
Arnauld

信不信由你,Notepad ++是对的(尽管并不完全正确)。ES6兼容性表中的最后一项。
ETHproductions 16-10-13

@ETHproductions-哇。我想这种语法背后有很好的理由,但是我看不到它。感谢您指出了这一点。
Arnauld

大家知道,我相信这仅在一行的开头有效。123 --> comment在我的浏览器控制台(Firefox 49)中抛出错误,而--> comment没有。
ETHproductions

10

C#,276 + 21 = 297字节

方法为276字节,对于System.Drawing导入为21字节。

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

基于Martin Rosenau的算法。感谢您辛苦提出一种构造图像的方法!

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


您可以通过在颜色代码中不包括透明度来节省字节,即0xFF...
TheLethalCoder

8

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

*{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>

使用线性渐变而不是变换。编辑:由于@darrylyeo,节省了140个字节。通过使用额外的元素而不是渐变节省了20个字节。@DBS节省了24个字节。@Hedi节省了16个字节。从后到前,各个层是:

  • a 蓝色圆圈
  • b 白色矩形遮挡条上方的部分
  • c 红色/黄色左上角
  • d 红色八角形右上角
  • e 黄色/绿色左下角
  • f 绿色/蓝色右下角
  • g 内白圈
  • h 水平的蓝色条

取而代之的ID,你应该使用元素的名称,如abis,等使用*,而不是div对CSS选择器。
darrylyeo '16

另外,请background用作的简写background-image
darrylyeo '16

@darrylyeo谢谢,这对我的得分有很大的帮助,即使忘记删除HTML中的引号也无济于事……
Neil

嘿,没问题!
darrylyeo '16

我相信您可以通过使用此化合物在此处和此处保存一些字符border-radius。例如,c{border-radius:100% 0 0;而不是c{border-top-left-radius:100%;
DBS

8

红宝石2.3.1,376个 359字节

使用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])

例子

50x50

50x50

250x250

在此处输入图片说明

500x500

在此处输入图片说明

1000x1000

在此处输入图片说明

File具有两个参数-第一个是尺寸,第二个是将输出另存为的文件名。

不打高尔夫球

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

我最初开始使用oily_png / chunky_png解决此问题,但与RMagick相比,最终结果可能太复杂了。RMagick的.ellipse函数使此操作变得轻而易举,主要​​工作是围绕调整所有物体的形状/大小。

这是我第一次提交Code Golf(也是第一个SE答案),我只认为自己在Ruby中处于中等水平。如果您对改进/提示有任何意见,请随时分享!


我似乎无法编辑我的帖子(404错误),但是如果要从我的高尔夫解决方案中删除require行,则将减少17个字节并将其减少到359个字节。
大都会

5

Python 2中,378个 373字节

我真的很想使用turtle。为此,我必须舍弃对几何的了解,计算挑战说明中未提供的角度和长度。

编辑:remove up(),因为这样做可以去除绿色和蓝色之间的白色小条,并使内部圆圈看起来更好。这会进一步减慢程序速度。

编辑:更换9*n2*n以做出更加快速。我确定它仍将创建一个平滑的圆。

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)

笔记:

  1. 小饰品使用Python 3,因此必须将输入强制转换为int。
  2. 小饰物去真正的大慢n,如果你删除speed(0),我只加了速度。
  3. 代码的缓慢主要是由于circle增长的第三个参数O(n),因为它确定了用于绘制圆的内接多边形的边数。

在线尝试

取消高尔夫: 在线尝试

有趣的事实: TrinketTkinterPython的GUI包的字谜,是的基础turtle


另外,如果有人安装了Python,那么他们可以n为我带来很大的价值吗?如果看起来不太好,我可能需要在其中添加一些sqrts以便更精确。我四舍五入到千分之一。
mbomb007 '16


这只是我担心的巨大价值。在饰品画布有400一个最大
mbomb007


@daHugLenny不知道。这可能是内存问题,因为10000太大了。
mbomb007 '16

5

PHP + GD,529个 449字节

这将使用查询字符串参数,n并输出指定大小的徽标的PNG版本。

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

取消高尔夫:

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


大多数字符串常量不需要引号。真彩色图像不需要imagecolorallocate; 只需将0xRRGGBB作为绘图功能的颜色即可。打高尔夫球的更多内容,它低至329字节: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");运行,从命令行-r获取输入,然后输出到g.png
泰特斯

抱歉,我之前的高尔夫球比赛太短了两个字节:[$k必须为[+$k。但这也应该工作: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字节)
Titus

@Titus谢谢。回答完之后,我发现您不需要imagecolorallocate。我将用您的代码更新答案。但是,您需要输出到文件名吗?您不能只保留文件名,imagepng而仅将其输出到stdout吗?
科多斯·约翰逊,

5

Java,568个字节

这不是打高尔夫球的最强语言,但这是我的认真尝试:

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

用法:

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

非高尔夫版本-基本思想是在坐标系u,v∈[-0.5,0.5]中工作,并计算每个像素距图像中心的距离和角度:

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

}

我的实现计算并绘制原始像素。可以创建一个使用诸如Graphics2DArc2D之类的高级图形例程进行绘制的替代实现,尤其是在使用抗锯齿的情况下。


4

Go,379个字节

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

该函数f采用单个int参数(比例因子),并输出适当比例缩放的SVG图像。

在Ideone 在线尝试

输出示例:

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

用除自己之外的任何编程语言来安抚我们的Google霸主似乎是错误的。


4

果酱,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*

在线尝试

以ASCII ppm格式输出图像。
对于更易于在浏览器中查看的ASCII版本,请尝试以下代码。它也有助于可视化算法。

说明:

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字节,无竞争

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)

遗憾的是,圆角线连接并没有达到所要求的效果,但是非常接近。


3

FreeMarker + HTML / CSS,46 + 468 = 514字节

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}

假设FreeMarker处理器是用n代表输入的变量集执行的。

魔术数字的解释:

一切都基于10x10px包装器,然后按缩放n/10

  • 蓝色水平框右边的距离[px]:5-sqrt(5 ^ 2-1-2 ^)= 0.10102051443Pythagoras
  • 蓝弧旋转度:45-arcSin(1/5)= 33.4630409671正弦

松散的JSFiddle


将CSS部件放入样式元素中,然后使用Javascript或PHP。替换transform:scale(n)transform:scale(<?=$_GET[n])?>(PHP)。在javascript中,你可以追加CSS部分的风格元素
约尔格Hülsermann

我考虑过JS,但不想破坏太多代码。但是,模板语言似乎还可以,因此我选择了FreeMarker,并迅速调整了答案,谢谢。
Cedric Reichenbach

蓝色条形图在它认为右侧的右侧太远
RobAu

不,您可以通过想象一个边长为0.5、0.1和x的直角三角形来轻松计算它,其中x表示蓝色条的宽度,或者相应地是其到右侧距离的0.5-x。然后可以使用毕达哥拉斯定理确定x(请参阅我添加的说明)。
Cedric Reichenbach

JSFiddle无法在我尝试使用的两种浏览器(Win10 x64)中正确显示-在Chrome 54.0.2840.59 m(64位)中,蓝色条向右延伸得太远,在Firefox 49.0.1中(32)位)在蓝色弯曲部分的中间有一点缝隙
alldayremix

3

Haskell 343个八位位组

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

说明

  • “ P3” == 纯文本便携式像素图
  • show ==产生ASCII小数,担心“ \ xFF \ xFF \ xFF”的UTF-8损坏
  • unlines ==将小数点分成几行
  • m = n-1,用于对称,其中n == length [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 ==以下
  • 3y-5y> 0 == y <m3 / 5 ==以上
  • 2x-m> 0 == x> m / 2 == inRightHalf
  • [234,67,53] ==红色
  • [251,188,5] ==黄色
  • [52,168,83] ==绿色
  • [66,13,244] ==蓝色
  • [255,255,255] ==白色

1
除非你进行编码,与7位ASCII (你可以做以来的最高字符代码点您所用的0x7C/ 124/ |),在这种情况下,这将是哈斯克尔的338个七位。但是考虑到过去二十年来数据存储中标准的8位到1字节已成为怎样的方式,我认为“字节”一词足够具体,不会击败老手。
Slipp D. Thompson

3

SAS - 590个 536 521字节

这将使用GTL注释工具。输入在第一行的宏变量中指定。对于一些额外的字节,您可以将整个对象定义为一个宏。即使您必须定义一个空图模板只是为了能够绘制所有内容,它仍然会潜伏在Java和一些HTML答案下面!

我已经保留了换行符,以提高可读性,但是我没有将那些换行计入总数,因为没有它们就可以工作。

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

编辑:通过使用宏变量,默认设置和选择运算符,减少了一些字节。

编辑2:摆脱do-endif-then-else逻辑的障碍,它仍然可以以某种方式起作用-我不完全了解它是如何做到的。另外,我发现了这个euclid功能!


2

SCSS-415字节

将输入作为$N: 100px;<div id="logo"></div>,但是不确定这些是否应计入总数中...

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

JSFiddle上的演示


1

具有JuicyPixels软件包的Haskell,306个字节

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

用法示例:

main = writePng "google.png" $ f 1001

这可能会得到改善。想法是将一个函数传递给该函数,以generateImage选择应该在位置x,y处移动的像素(实际上是颜色)。为此,我们使用一个lambda n作为参数添加,并将它们同时转换为浮点数。该#功能基本上会检查我们是否在环上,酒吧内,或者两者都不在。如果是圆环%,则将指挥棒传递给;如果是圆环,则仅返回蓝色,否则返回白色。%检查我们位于哪个象限,如果不是蓝色则返回适当的颜色。蓝色是一种特殊情况,因为我们需要确保它不会包裹在红色周围,因此只有y在“条形线”以下时才返回蓝色,否则返回白色。这是一般概述。


0

Processing.py-244个字节+ 1个字节(用于N中的位数)

让我们从代码开始。可以将其粘贴在处理环境中并运行(更改N为不同的大小)。

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)

小作弊:从徽标切出一部分的圆圈在Processing的灰度阴影205中绘制,这是默认的背景颜色。将其导出到图像看起来不一样。这样会保存对的呼叫background(255)

说明

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

例子

N = 400

N = 400

N = 13(处理程序的最小尺寸为100x100)

在此处输入图片说明

注意

如果我们允许我们手动编辑多个值,N以对setupdraw进行显式调用,则该值将降至213字节+每位3字节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)

就其本身而言,这还不是一个完整的课程
牛嘎嘎

很公平。我删除了不完整的程序,并将其替换为完整版本。
PidgeyUsedGust
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.