Eh!

Wissen Sie, das Problem bei uns Kanadiern ist, dass wir manchmal nach einem langen Tag der Elchjagd und Dammreparatur den Weg zurück zu unseren Hütten vergessen! Wäre es nicht großartig, wenn unser handlicher Laptop (der immer an unserer Seite ist) eine Möglichkeit hätte, uns nach Hause zu bringen? Nun, es ist schon lange gesagt worden, dass ein Kompass, der auf Ihrem Computer angezeigt wird, am hellsten ist, wenn er nach Norden zeigt. Ich würde das gerne testen, aber ich brauche ein kompaktes Programm, das ich auf meiner nächsten Reise mitnehmen kann, da meine Festplatte bereits mit Ahornsirup-Rezepten gefüllt ist (und diese NICHT gehen können). Ihre Aufgabe ist es also, mir ein Programm zu entwerfen, das beim Ausführen ein Bild der folgenden Kompassrose speichert oder anzeigt:

Die Buchstaben können eine andere Schriftart haben. Denken Sie daran, am wenigsten ist am besten, also gewinnt die niedrigste Byteanzahl!

Spezifikationen

Farben

• Hellviolett: # 9999FF
• Grau: # E5E5E5

Längen und Winkel

• Winkel a= 45 °
• Winkel b= 90 °
• Länge c= 250 Einheiten
• Länge d= 200 Einheiten
• Länge e= 40 Einheiten
• Länge f= 45 Einheiten

Klarstellungen

• Der Text kann in einer beliebigen geeigneten Schriftart vorliegen, wobei dies bedeutet, dass er für den durchschnittlichen, gebildeten Menschen lesbar ist.
• Der Text muss an der nächsten Stelle 3 Einheiten von den Spitzen entfernt sein, darf die Rose nicht berühren und muss aufrecht sein
• Wenn eine Linie von der Mitte der Rose durch den Endpunkt der Spitze und darüber hinaus gezogen wird, sollte sie die Mitte des Textes mit einer Genauigkeit von +/- 2 Einheiten kreuzen (der Text muss entlang einer Achse zentriert sein) a. wo aerstreckt sich von der Mitte der Seite, bis zum Ende der Spitze und darüber hinaus)
• Jedes Zeichen muss mindestens 15 mal 15 Einheiten groß sein und ein x / y- oder y / x-Verhältnis von nicht mehr als 2: 1 haben (keine Dehnung - Lesbarkeit).
• Der dunkle Kreis, der durch die längeren Spitzen und den Text verläuft, der der Mitte des Referenzbilds am nächsten liegt, darf nicht gezeichnet werden.
• Das Bild muss quadratisch und mindestens 400 x 400 Pixel groß sein
• Ein komprimiertes Bild in der Quelle ist nicht zulässig
• Eine Einheit muss mindestens 1 Pixel groß sein

HTML + CSS, 487 + 189 = 676

Die Kompassrose wird aus CSS-Rändern unter Verwendung der Dreieckstechnik und einiger grundlegender Transformationen konstruiert . Die Buchstaben haben nur feste Positionen, so dass es ziemlich lang wurde: /

Das Snippet unten ist so verkleinert, dass alles passt. Sie können die JSFiddle hier überprüfen . Ich bin mir auch nicht sicher, wie gut die Buchstaben in verschiedenen Browsern (mit verschiedenen Schriftarten, Standardstilen usw.) ausgerichtet sind.

html{transform:scale(0.2)}body{margin:5em}hr{margin:0;float:left;border:250px solid transparent;border-right:58px solid #E5E5E5;border-bottom:58px solid #9999FF}a{position:fixed;width:616px;font-size:4em}#a{transform:rotate(90deg)}#b{transform:rotate(270deg)}#c{transform:rotate(180deg)}#d{transform:rotate(45deg)scale(.8)}#n{top:20px;left:365px}#e{top:356px;left:700px}#s{top:700px;left:370px}#w{top:356px;left:10px}#N{top:150px;left:550px}#E{top:560px;left:550px}#S{top:560px;left:140px}#W{top:150px;left:140px}

<a id=n>N</a><a id=e>E</a><a id=s>S</a><a id=w>W</a><a id=N>NE</a><a id=E>SE</a><a id=S>SW</a><a id=W>NW</a><a id=d><hr><hr id=a><hr id=b><hr id=c></a><a><hr><hr id=a><hr id=b><hr id=c></a>

Verarbeitung 2 - 636

Eine schnelle Lösung, bei der nur alle Dreiecke mithilfe der Verarbeitungsdreieckmethode gezeichnet und die Buchstaben an den Spitzen platziert werden.

int s,h,m,b,n,t;void setup(){s=400;h=s/2;b=125;t=71;n=32;m=28;size(s,s);noStroke();fill(229);t(h-t,h-t,h-m,h);t(h-t,h+t,h,h+m);t(h+t,h-t,h,h-m);t(h+t,h+t,h+m,h);fill(#9999FF);t(h-t,h-t,h,h-m);t(h-t,h+t,h-m,h);t(h+t,h-t,h+m,h);t(h+t,h+t,h,h+m);t(h-b,h,h-n,h-n);t(h+b,h,h+n,h+n);t(h,h-b,h+n,h-n);t(h,h+b,h-n,h+n);fill(229);t(h-b,h,h-n,h+n);t(h+b,h,h+n,h-n);t(h,h-b,h-n,h-n);t(h,h+b,h+n,h+n);fill(color(0));text("NW",h-t-14,h-t-2);text("NE",h+t+2,h-t-2);text("SW",h-t-14,h+t+10);text("SE",h+t,h+t+10);text("N",h-5,h-b-5);text("S",h-5,h+b+12);text("E",h+b+2,h+5);text("W",h-b-14,h+5);}void t(int a,int b,int c,int d){triangle(h,h,a,b,c,d);}

Sie können erhalten die Verarbeitung hier

PHP, 628 Bytes

Der Einfachheit halber wurden einige Zeilenumbrüche hinzugefügt.

$c=$z.create;$h=$c($w=250,$w);$i=$c(530,533);$a=$z.colorallocate;$a($h,$f=255,$f,$f);$a($i,$f,$f,$f);$a($h,229,229,229);$a($h,153,153,$f);
$p=$z.filledpolygon;$p($h,$o=[0,64,0,0,141,141,],3,2);$p($h,[64,0]+$o,3,1);$p($h,$o=[0,$w,0,0,57,57],3,1);$p($h,[$w,0]+$o,3,2);
$c=$z.copy;$r=$z.rotate;$c($i,$h,263,267,0,0,$w,$w);$c($i,$r($h,90,0),263,17,0,0,$w,$w);$c($i,$r($h,180,0),13,17,0,0,$w,$w);$c($i,$r($h,270,0),13,267,0,0,$w,$w);
$s=$z.string;$s($i,5,259,0,N,3);$s($i,5,259,518,S,3);$s($i,5,0,259,W,3);$s($i,5,518,259,E,3);$s($i,5,106,108,NW,3);$s($i,5,406,108,NE,3);$s($i,5,406,410,SE,3);$s($i,5,106,410,SW,3);
imagepng($i,"n.png");

Laufen Sie mit -r. Erstellt eine Datei n.pngmit dem Bild. Einheit ist 2 Pixel.

Ich muss zugeben, dass ich durch Versuch und Irrtum die Koordinaten für die Winde gefunden habe, und sie sind wahrscheinlich ein bisschen daneben. Werde die Berechnungen bald machen; aber ich verspreche: sie werden die Byteanzahl nicht ändern.
Hatte jetzt meinen Spaß daran, meine Trignonometrie auszuheben und damit zu kämpfen imagecopy... was für eine Sissy!

zum Golfen: nicht viele Tricks; aber diese wenigen haben viel gespart:

• Das Zuweisen von Funktionsnamen und zwei der Werte zu Variablen hatte wahrscheinlich den größten Einfluss.
  Ich habe nicht einmal gezählt, bevor ich die Funktionsnamen ersetzt habe.
• Die Magie mit dem Array- +Operator ergab 42 Bytes.
• Das Schreiben einer Datei anstelle des Sendens des Bildes an den Browser sparte 27 Bytes.
• Das Verschieben von Zuweisungen zur ersten Verwendung der Variablen ergab einige weitere.

Nervenzusammenbruch

// create images and allocate colors
$c=imagecreate;
$h=$c($w=250,$w);   // helper image - just as large as needed or imagecopy will screw up 
$i=$c(530,533);     // main image

$a=imagecolorallocate;
$a($h,$f=255,$f,$f);    // white is 0
$a($i,$f,$f,$f);    // must be assigned to both images
$a($h,229,229,229); // grey is 1
$a($h,153,153,$f);  // purple is 2

// draw the south-east quadrant
$p=imagefilledpolygon;
// small triangle purple first
$p($h,$o=[
// point 3: 0.8*e *2
    0,64,
// point 1: center
    0,0,
// point 2: a=45 degrees, d=200 units
    141,141,// d/sqrt(2)=141.421356
],3,2);
// small triangle grey
$p($h,[64,0]+$o,3,1);

// large triangles
$p($h,$o=[
    0,$w,
    0,0,
    57,57   // e*sqrt(2)=56.5685424949
],3,1);

$p($h,[$w,0]+$o,3,2);

// create rose
$c=imagecopy;
$r=imagerotate;
$c($i,$h,263,267,0,0,$w,$w);            // copy quadrant to main image (SE)
$c($i,$r($h,90,0),263,17,0,0,$w,$w);    // rotate quadrant and copy again (NE)
$c($i,$r($h,180,0),13,17,0,0,$w,$w);    // rotate and copy again (NW)
$c($i,$r($h,270,0),13,267,0,0,$w,$w);// rotate and copy a last time (SW)

// add circle
#imageellipse($i,263,267,500,500,2);    // grey is now 2: imagecopy shuffled colors

// add names
$s=imagestring;
$s($i,5,259,  0,N,3);   // 5 is actually the largest internal font PHP provides
$s($i,5,259,518,S,3);   // unassigned colors are black
$s($i,5,  0,259,W,3);
$s($i,5,518,259,E,3);

$s($i,5,106,108,NW,3);
$s($i,5,406,108,NE,3);
$s($i,5,406,410,SE,3);
$s($i,5,106,410,SW,3);

// output
#header("Content-Type:image/png");
#imagepng($i);
imagepng($i,"n.png");

R 877 850 813

Ich vermute, es gibt viel Platz zum Golfen, aber ich wollte etwas auf die Beine stellen, um zu sehen, ob ich es geschafft habe, die Regeln einzuhalten.

Bearbeiten: Einige Aufräumarbeiten rund um die Polygonerstellung verloren, einige Umrisse entfernt

a=45;b=90;c=125;e=40;h=c(0,0,b,a,a,0,a,b)*pi/180;i=c(0,c,c,100,e,a,(2*a^2)^.5,a);x=i*sin(h);y=i*cos(h);q=x[6:7];r=x[7:8];s=x[2:3];t=x[c(5,5)];u=y[6:7];v=y[7:8];w=y[2:3];z=y[c(5,5)];m=(s-t);n=(w-z);o=(q-r);p=(u-v);i=((q*v-u*r)*m-o*(s*z-w*t))/(o*n-p*m);x=c(x,i)[c(1,2,5,1,3,5,5,4,10,5,4,9)];y=c(y,rev(i))[c(1,2,5,1,3,5,5,4,10,5,4,9)];png("1.png",400,400);par(mar=rep(0,4));a=c(-200:200);plot(a,a,type="n");for(b in 0:3){for(i in(0:3)*3+1){a=c(1,1,1,-1,-1,-1,-1,1);polygon(x[(i):(i+3)]*a[b*2+1],y[(i):(i+3)]*a[b*2+2],border=NA,col=c("#9999FF","#E5E5E5")[(i%%6%/%4+b%%2)%%2+1]);}};for(i in 1:4){a=c("N","NE","E","SE","S","SW","W","NW");b=a[i*2-1];c=a[i*2];o=c(1,1,-1,-1,1);n=o[i+1];m=o[i];e=c(5,2)[i%%2+1];text((x[e]+(11*abs(i%%2-1)))*m,(y[e]+(12*i%%2))*n,b,cex=1.8);text((x[8]+10)*m,(y[8]+12)*n,c,cex=1.8)};dev.off()

Dies erzeugt das folgende PNG-Bild

Eine kleine Erklärung dessen, was ich tue

a=45;
b=90;
c=125;
e=40;
h=c(0,0,b,a,a,0,a,b)*pi/180;            # angles to known vertices in one quadrant
i=c(0,c,c,100,e,a,(2*a^2)^.5,a);        # distances to known vertices
x=i*sin(h);                             # calculate x ordinates
y=i*cos(h);                             # calculate y ordinates
q=x[6:7];                               #-----------------------
r=x[7:8];                               #
s=x[2:3];                               # Get the lines required 
t=x[c(5,5)];                            # to determine the vertex
u=y[6:7];                               # for the minor pointers
v=y[7:8];                               #
w=y[2:3];                               # 
z=y[c(5,5)];                            #------------------------ 
m=(s-t);                                # Intersect them
n=(w-z);                                # to give coordinate.
o=(q-r);                                # Just calculate the x's
p=(u-v);                                # as they can be reversed
i=((q*v-u*r)*m-o*(s*z-w*t))/(o*n-p*m);  #------------------------
x=c(x,i)[c(1,2,5,1,3,5,5,4,10,5,4,9)];      # X Triangle groups
y=c(y,rev(i))[c(1,2,5,1,3,5,5,4,10,5,4,9)]; # Y Triangle groups
png("1.png",400,400);                   # Set output to png
par(mar=rep(0,4));                      # Make margins 0
a=c(-200:200);
plot(a,a,type="n");                     # Start plot
for(b in 0:3){for(i in(0:3)*3+1){       # draw polygons, alternating colors and drawing all quadrants
a=c(1,1,1,-1,-1,-1,-1,1);
polygon(x[(i):(i+3)]*a[b*2+1],y[(i):(i+3)]*a[b*2+2],border=NA,col=c("#9999FF","#E5E5E5")[(i%%6%/%4+b%%2)%%2+1]);
}};
for(i in 1:4){                          # Add text to compass points for each quadrant
a=c("N","NE","E","SE","S","SW","W","NW");b=a[i*2-1];c=a[i*2];
o=c(1,1,-1,-1,1);n=o[i+1];m=o[i];
e=c(5,2)[i%%2+1];
text((x[e]+(11*abs(i%%2-1)))*m,(y[e]+(12*i%%2))*n,b,cex=1.8);
text((x[8]+10)*m,(y[8]+12)*n,c,cex=1.8)
};
dev.off()                               # Close PNG

Mathematica, 347 Bytes

p=q={{0,0},{0,125},40{1/Sqrt[2],1/Sqrt[2]}};q[[3,1]]*=-1;m=5p[[3]]/2;s=u={{0,0},m,{32,0}};u[[3]]={0,32};r={{0,1},{-1,0}};t=Polygon[#]&;z=MatrixPower[r,#]&;a[v_]:=Table[t[z[n].#&/@v],{n,4}];i=Table[Text[#[[j]],z[j].#2],{j,4}]&;G=RGBColor["#E5E5E5"];Graphics[{i[{E,S,W,N},{0,130}],i[{NE,SE,SW,NW},1.06m],G,a[u],RGBColor["#9999FF"],a[s],a[p],G,a[q]}]

Pregolfed:

p = q = {{0, 0}, {0, 125}, 40 {1/Sqrt[2], 1/Sqrt[2]}}; (*defining points*)
q[[3, 1]] *= -1;                                       (*for triangles*)
m = 5 p[[3]]/2;
s = u = {{0, 0}, m, {32, 0}};
u[[3]] = {0, 32};
r = {{0, 1}, {-1, 0}};                                 (*-pi/2 rotation matrix*)

t = Polygon[#] &;
z = MatrixPower[r, #] &;
a[v_] := Table[t[z[n].# & /@ v], {n, 4}];              (*rotate the sets of points*)
                                                       (*four times*)

i = Table[Text[#[[j]], z[j].#2], {j, 4}] &;
G = RGBColor["#E5E5E5"];                               (*need to use this twice*)
                                                       (*so triangles overlap*)
                                                       (*properly so define a variable*)

Graphics[{i[{E, S, W, N}, {0, 130}], 
  i[{NE, SE, SW, NW}, 1.06 m], G, a[u], RGBColor["#9999FF"], a[s], 
  a[p], G, a[q]}]

Nund E(Basis des natürlichen Protokolls) sind beide in Mathematica integriert, aber wenn Text E in eine Kleinbuchstabenschrift umgewandelt wird, die Sie im Bild sehen, sagt das Problem nicht ganz, dass wir nur eine Schriftart für den gesamten Text verwenden können. Wenn dies erforderlich ist, ersetzen Sie Edurch "E"und ich erhalte zwei Bytes.

Sqrt[2]in Mathematica kann in zwei Zeichen stilisiert werden. Wenn wir also jeweils Sqrt[2]zwei Zeichen zählen, beträgt meine neue Byteanzahl 339 anstelle von 349.

Das Bild unten wird erzeugt.