Eh!

Anda tahu, masalah dengan kita orang Kanada adalah bahwa kadang-kadang, setelah seharian berburu rusa dan memperbaiki bendungan, kita lupa jalan kembali ke kabin kita! Bukankah lebih bagus jika laptop kita yang praktis (yang selalu ada di pihak kita), punya cara untuk mengantar kita pulang? Yah, sudah lama dikatakan bahwa, jika Anda menampilkan kompas di komputer Anda, itu akan menjadi yang paling terang ketika menunjuk Utara. Saya ingin menguji ini, tetapi saya membutuhkan program yang ringkas untuk dibawa pada perjalanan saya berikutnya, karena hard drive saya sudah diisi dengan resep sirup maple (dan itu TIDAK BISA pergi). Jadi, tugas Anda adalah merancang saya sebuah program yang, ketika dijalankan, menyimpan atau menampilkan gambar mawar kompas berikut:

Huruf-huruf mungkin dalam font yang berbeda. Ingat, paling tidak adalah yang terbaik, jadi jumlah byte terendah menang!

Spesifikasi

Warna

• Ungu muda: # 9999FF
• Gray: #on

Panjang dan Sudut

• Sudut a= 45 °
• Sudut b= 90 °
• Panjang c= 250 unit
• Panjang d= 200 unit
• Panjang e= 40 unit
• Panjang f= 45 unit

Klarifikasi

• Teks mungkin dalam font apa saja yang sesuai , di mana sesuai menunjukkan bahwa itu dapat dibaca oleh rata-rata, manusia yang berpendidikan.
• Teks harus berjarak 3 unit dari paku pada titik terdekatnya, tidak boleh menyentuh mawar, dan harus tegak
• Jika sebuah garis ditarik dari pusat mawar, melalui titik ujung lonjakan dan seterusnya, garis tersebut harus melewati pusat teks dengan ketelitian +/- 2 unit (teks harus dipusatkan di sepanjang sumbu a, di mana amemanjang dari tengah halaman, melalui ujung lonjakan, dan seterusnya)
• Setiap karakter harus minimal 15 unit dengan 15 unit, dan memiliki rasio x / y atau y / x tidak lebih dari 2: 1 (tanpa peregangan - keterbacaan)
• Lingkaran redup yang melewati paku yang lebih panjang dan teks yang paling dekat ke tengah pada gambar referensi tidak boleh digambar.
• Gambar harus persegi, dan setidaknya 400px kali 400px
• Gambar yang dikompresi di dalam sumber tidak diizinkan
• Satu unit harus minimal 1 piksel

HTML + CSS, 487 + 189 = 676

Kompas mawar dibangun dari batas CSS menggunakan teknik segitiga dan beberapa transformasi dasar. Surat-surat itu hanya diberi posisi tetap, sehingga ternyata cukup lama: /

Cuplikan di bawah diperkecil sehingga semuanya pas. Anda dapat memeriksa JSFiddle di sini . Juga, saya tidak yakin seberapa baik huruf-huruf akan berbaris di browser yang berbeda (dengan font yang berbeda, gaya default, dll.).

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>

Memproses 2 - 636

Solusi cepat yang hanya menggambar semua segitiga menggunakan metode pemrosesan segitiga dan kemudian menempatkan huruf di ujungnya.

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

Anda dapat memproses di sini

PHP, 628 byte

menambahkan beberapa linebreak untuk kenyamanan.

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

Jalankan dengan -r. Membuat file n.pngdengan gambar; unit adalah 2 piksel.

Saya harus mengakui bahwa saya menemukan coords untuk angin oleh trial & error, dan mereka mungkin agak mati. Akan segera melakukan perhitungan; tapi saya berjanji: mereka tidak akan mengubah jumlah byte.
Bersenang-senang untuk sekarang menggali trignonometri saya dan berjuang dengan imagecopy... sungguh banci!

bermain golf: tidak banyak trik; tetapi beberapa ini menghemat banyak:

• Menetapkan nama fungsi dan dua nilai ke variabel mungkin memiliki dampak terbesar.
  Saya bahkan tidak menghitung sebelum saya mengganti nama fungsi.
• Keajaiban dengan +operator array memberikan 42 byte.
• Menulis file alih-alih mengirim gambar ke browser menyimpan 27 byte.
• Memindahkan penugasan ke penggunaan variabel pertama memberi beberapa hal lagi.

kerusakan

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

Saya kira ada banyak ruang untuk bermain golf, tetapi saya ingin mendapatkan sesuatu untuk mengetahui apakah saya berhasil mematuhi peraturan.

Sunting: Kehilangan beberapa pembersihan di sekitar kreasi poligon, memperoleh beberapa garis besar penghapusan

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

Ini menghasilkan gambar png berikut

Sedikit penjelasan tentang apa yang saya lakukan

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

Ndan E(dasar log natural) keduanya built-in di Mathematica tetapi sebagai teks E akan bergaya ke font huruf kecil yang Anda lihat dalam gambar tetapi masalahnya tidak cukup mengatakan kita hanya dapat menggunakan satu font untuk semua teks. Jika itu persyaratan maka ganti Edengan "E"dan saya mendapatkan dua byte.

Sqrt[2]di Mathematica dapat diubah menjadi dua karakter, jadi jika kita menghitung masing Sqrt[2]- masing sebagai dua karakter maka jumlah byte baru saya adalah 339, bukan 349.

Gambar di bawah ini diproduksi.