Eh!

Sai, il problema con noi canadesi è che a volte, dopo una lunga giornata di caccia alle alci e riparazioni di dighe, ci dimentichiamo di tornare alle nostre cabine! Non sarebbe bello se il nostro pratico laptop (che è sempre al nostro fianco) avesse un modo per indicarci casa? Bene, è stato a lungo detto che, se visualizzi una bussola sul tuo computer, sarà la più luminosa quando puntata verso nord. Mi piacerebbe provarlo, ma ho bisogno di un programma compatto da portare con me nel mio prossimo viaggio, perché il mio disco rigido è già pieno di ricette di sciroppo d'acero (e quelle NON POSSONO andare). Quindi, il tuo compito è progettarmi un programma che, quando eseguito, salvi o mostri un'immagine della seguente rosa dei venti:

Le lettere possono avere un carattere diverso. Ricorda, il minimo è il migliore, quindi vince il conteggio di byte più basso!

specificazioni

Colori

• Viola chiaro: # 9999FF
• Grigio: # E5E5E5

Lunghezze e angoli

• Angolo a= 45 °
• Angolo b= 90 °
• Lunghezza c= 250 unità
• Lunghezza d= 200 unità
• Lunghezza e= 40 unità
• Lunghezza f= 45 unità

chiarimenti

• Il testo può essere in qualsiasi font appropriato , laddove appropriato indica che è leggibile dall'essere umano medio, istruito.
• Il testo deve essere a 3 unità di distanza dalle punte nel punto più vicino, non deve toccare la rosa e deve essere verticale
• Se una linea viene disegnata dal centro della rosa, attraverso il punto finale del picco e oltre, dovrebbe attraversare il centro del testo con una precisione di +/- 2 unità (il testo deve essere centrato lungo un asse a, dove si aestende dal centro della pagina, fino alla fine del picco e oltre)
• Ogni personaggio deve essere di almeno 15 unità per 15 unità e avere un rapporto x / y o y / x non superiore a 2: 1 (nessun allungamento - leggibilità)
• Il cerchio tenue che passa attraverso i picchi più lunghi e il testo più vicino al centro sull'immagine di riferimento non deve essere disegnato.
• L'immagine deve essere quadrata e almeno 400 px per 400 px
• Un'immagine compressa all'interno della sorgente non è consentita
• Un'unità deve essere di almeno 1 pixel

HTML + CSS, 487 + 189 = 676

La rosa dei venti è costruita da bordi CSS usando la tecnica del triangolo e alcune trasformazioni di base. Le lettere hanno solo posizioni fisse, quindi sono risultate piuttosto lunghe: /

Lo snippet di seguito viene ridimensionato in modo che si adatti perfettamente. Puoi controllare JSFiddle qui . Inoltre, non sono sicuro di come le lettere si allineeranno su browser diversi (con caratteri diversi, stili predefiniti, ecc.).

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>

Elaborazione 2-636

Una soluzione rapida che disegna semplicemente tutti i triangoli usando il metodo del triangolo di elaborazione e quindi posiziona le lettere sulle punte.

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

puoi ottenere l'elaborazione qui

PHP, 628 byte

aggiunto alcune interruzioni di riga per comodità.

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

Corri con -r. Crea un filen.png con l'immagine; unità è di 2 pixel.

Devo ammettere di aver trovato le corde dei venti per tentativi ed errori, e probabilmente sono un po 'fuori. Farà presto i calcoli; ma lo prometto: non cambieranno il conteggio dei byte.
Mi sono divertito per ora a scavare la mia trignonometria e lottare conimagecopy ... che femminuccia!

sul golf: non molti trucchi; ma questi pochi hanno risparmiato molto:

• L'assegnazione di nomi di funzioni e due dei valori alle variabili probabilmente ha avuto l'impatto maggiore.
  Non ho nemmeno contato prima di aver sostituito i nomi delle funzioni.
• La magia con l' +operatore dell'array ha dato 42 byte.
• Scrivere un file invece di inviare l'immagine al browser ha salvato 27 byte.
• Spostare le assegnazioni al primo utilizzo delle variabili ne ha dato alcune altre.

abbattersi

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

C'è molto spazio per giocare a golf, sospetto, ma volevo ottenere qualcosa per vedere se sono riuscito a rispettare le regole.

Modifica: ho perso un po 'di pulizia intorno alla creazione del poligono, guadagnato alcuni rimuovendo i contorni

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

Questo produce la seguente immagine png

Un po 'di una spiegazione di quello che sto facendo

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 byte

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

Ne E(base del logaritmo naturale) sono entrambi built-in di Mathematica, ma come testo E viene stilizzato in un minuscolo font che vedi nell'immagine, ma il problema non del tutto dire che possiamo utilizzare un solo tipo di carattere per tutto il testo. Se questo è un requisito, sostituirlo Econ"E" e ottengo due byte.

Sqrt[2]in Mathematica può essere stilizzato in due caratteri, quindi se contiamo ciascuno Sqrt[2]come due caratteri, il mio nuovo conteggio dei byte è 339 anziché 349.

L'immagine qui sotto è prodotta.