Anda baru saja mengundang jurusan seni liberal ke rumah Anda dan Anda memberi tahu dia

"Kamu tahu, aku seorang programmer yang hebat dan aku bisa melakukan x dan y dan z ..."

Ia cepat bosan dan bertanya:

"Jika Anda benar-benar seorang programmer yang hebat, dapatkah Anda membuat program untuk membiarkan saya menggambar, saya hanya perlu menggambar garis di layar dengan menggunakan mouse, dan memilih warna yang berbeda dengan cara apa pun".

Kode Anda dapat mengimpor perpustakaan standar. Kode Anda mungkin mengharuskan warna untuk dipilih melalui keyboard.

Ini adalah kode-golf ; kode menang paling pendek.

Poin peluru

• Garis-garis digambar dengan menggerakkan mouse di sekitar sambil menekan tombol kiri.

• Algoritma Line Bresenham tidak diperlukan, algoritma bawaan apa pun akan melakukan trik

• Jika pengguna dapat mengubah ketebalan garis dengan cara apa pun Anda mendapatkan bonus * 0,8 tetapi tidak wajib.

• Saya kira itu akan lebih baik untuk mengimplementasikan gambar-garis sendiri, tetapi jika Anda mau, Anda dapat mengimpor perpustakaan untuk itu hanya mengatakannya dalam deskripsi kode.

• Minimal adalah 5 warna berbeda (merah, hijau, biru, putih, hitam). Jika Anda mengubahnya secara acak, Anda akan mendapat penalti * 1.2. Anda dapat mengubahnya dengan cara apa pun yang Anda inginkan (tombol dan penekanan tombol OK).

• Menggambar mereka menekan mouse di antara titik atau freehand akan menjadi yang terbaik (yaitu seperti yang Anda lakukan di cat) dan memberi Anda bonus * 0,7, tetapi metode lain tidak apa-apa: (misalnya) klik dua titik dan gambar garis di antara titik-titik itu ?

• Kanvas gambar harus berukuran 600x400

• Mengubah warna harus mengubah warna hanya dari garis-garis yang akan digambar di masa depan.

• Menerapkan perintah "Bersihkan Semua" tidak wajib tetapi jika Anda menerapkannya Anda mendapat bonus * 0,9 .

HTML + jQuery + CSS - 507 x (0,7 x 0,8 x 0,9) = 255,528

Tidak sesingkat yang saya kira, tapi saya suka hasilnya.

Fitur:

• Mode menggambar klik dan seret. ( 0.7 )
• Tujuh warna (hitam + pelangi).
• Lebar sikat variabel (kontrol slider). ( 0.8 )
• Hapus semua fungsi. ( 0,9 )

Demo Langsung: http://jsfiddle.net/onsLkh8y/9/

HTML - 84 byte

<input id="r" type="range" min="1" max="9"><canvas id="c" width="600" height="400"/>

CSS - 35 byte

#c{border:1px solid;cursor:pointer}

jQuery - 388/446 byte

Browser yang kompatibel dengan W3C (mis. Chrome) - 388 byte

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
$(c).mousedown(function(e){t.lineWidth=$(r).val();t.beginPath();t.moveTo(e.offsetX,e.offsetY)})
.mousemove(function(e){if(e.which==1){t.lineTo(e.offsetX,e.offsetY);t.stroke()}})

Versi Cross-Browser (perbaikan untuk Firefox, Safari, IE) - 446 byte

var t=c.getContext('2d');$.each('black0red0orange0yellow0green0blue0purple0clear'.split(0),function(k,v){
$(r).before($('<button>'+v+'</button>').click(function(){k>6?t.clearRect(0,0,600,400):t.strokeStyle=v}))})
var d,p=$(c).offset();$(c).mousedown(function(e){d=t.lineWidth=$(r).val();t.beginPath()t.moveTo(e.pageX-p.left,
e.pageY-p.top)}).mousemove(function(e){if(d){t.lineTo(e.pageX-p.left,e.pageY-p.top);t.stroke()}}).mouseup(function(){d=0})

Perbaikan:

• FireFox - event.offset[X|Y]tidak terdefinisi.
• Safari - event.whichdan event.buttonstidak didefinisikan secara berarti mousemove.
• Internet Explorer - berfungsi dengan kedua perbaikan di atas, meskipun menggunakan e.buttonssudah cukup.

Memproses - 93 · 0.9 = 83.7

Dengan hampir tidak ada overhead untuk menggambar, tetapi sintaks yang sangat verbal, dalam Memproses skor terbaik mungkin dicapai tanpa fitur bagus dan hanya satu bonus:

void setup(){
size(600,400);
}
void draw(){
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

Nilai: 93 · 0,9 = 83,7 (Baris baru hanya untuk keterbacaan dan tidak dihitung dalam skor.)

Namun, jauh lebih menyenangkan dengan semua bonus yang ada:

void setup(){
size(600,400);
}
int i,x,y;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(!mousePressed){x=mouseX;y=mouseY;if(x<0)background(0);}
}
void mouseReleased(){
line(x,y,mouseX,mouseY);
}

Nilai: 221 · 0,8 · 0,7 · 0,9 = 111,4

Ini digunakan seperti ini:

• Klik dan seret mouse untuk menggambar garis lurus.

• Saat diklik, seret mouse dari sisi kiri jendela dan lepaskan tombol mouse untuk menghapus layar.

• Menekan tombol apa saja akan menggilir nilai merah, hijau dan biru dari warna gambar dan melalui ketebalan goresan yang berbeda. Karena periode bersepeda berbeda, praktis semua kombinasi dapat dicapai (dengan sedikit mencoba).

Edit:

Karena menggambar dengan tangan sendiri memberikan bonus 0,7 juga, berikut ini adalah solusi lain:

void setup(){
size(600,400);
}
int i;
void draw(){
stroke(7*i%256,5*i%256,i%256);
strokeWeight(i%9);
if(keyPressed)i++;
if(key>9)background(0);
if(mousePressed)line(mouseX,mouseY,pmouseX,pmouseY);
}

Nilai: 188 · 0,8 · 0,7 · 0,9 = 94,8

Ini digunakan seperti ini:

• Klik dan seret untuk menggambar garis bebas-tangan.

• Tahan tombol tab untuk mengubah warna dan ketebalan goresan. Ini juga bisa dilakukan saat menggambar (lihat gambar).

• Tekan sembarang tombol selain tab lalu tab untuk menghapus layar.

Python 2.7 - 339 197 324 * (0,7 * 0,8 * 0,9) = 163

Sunting: Saya menemukan pygame dapat menggambar garis dengan lebar variabel, jadi inilah pembaruannya.

Eksperimen dalam menggunakan modul PyGame.

Program cat sederhana yang menarik garis dari acara MOUSEDOWN (nilai 5) ke acara MOUSEUP (nilai 6). Ini menggunakan fungsi pygame.gfxdraw.line (). Menekan tombol TAB akan menggilir 8 warna. Menekan tombol BACKSPACE akan membersihkan layar menjadi warna putih kertas yang dibuat dengan cermat. Tombol ENTER akan menggilir ukuran kuas melalui lebar 0-7 piksel.

Saya baru di kode-golf jadi saya mungkin telah melewatkan beberapa metode untuk mengurangi ukuran kode.

import pygame as A,pygame.draw as G
P=A.display
D=P.set_mode((600,400))
C=(0,255)
S=[(r,g,b) for r in C for g in C for b in C]
w=n=1
while n:
 e=A.event.wait()
 t=e.type
 if t==12:n=0
 if t==2:
  if e.key==9:n+=1
  if e.key==13:w+=1
  if e.key==8:D.fill(S[7])
 if t==5:p=e.pos
 if t==6:G.line(D,S[n%8],p,e.pos,w%8)
 P.flip()

Contoh gambar 1:

Contoh gambar 2:

C # 519 x 0,7 x 0,8 x 0,9 = 261,6 Menggunakan metode DrawLine.

Golf:

using System;using System.Drawing;using System.Windows.Forms;class f:Form{[STAThread]static void Main(){f F=new f{Width=600,Height=400};Point s=default(Point);sbyte[]c={0,0,0,1};F.MouseDown+=(_,e)=>{s=new Point(e.X,e.Y);};F.MouseUp+=(_,e)=>{F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255,c[0],c[1],c[2]),c[3]),s.X,s.Y,e.X,e.Y);};F.KeyPress+=(a,e)=>{unchecked{switch(e.KeyChar){case'r':c[0]++;break;case'g':c[1]++;break;case'b':c[2]++;break;case't':c[3]++;break;case'c':F.Invalidate();break;}}};F.ShowDialog();}}

Dapat dibaca:

using System;
using System.Drawing;
using System.Windows.Forms;

class f : Form
{
    [STAThread]
    static void Main()
    {
        f F = new f { Width = 600, Height = 400 };
        Point s = default(Point);
        sbyte[] c = { 0, 0, 0, 1 };
        F.MouseDown += (_, e) => { s = new Point(e.X, e.Y); };
        F.MouseUp += (_, e) => { F.CreateGraphics().DrawLine(new Pen(Color.FromArgb(255, c[0], c[1], c[2]), c[3]), s.X, s.Y, e.X, e.Y); };
        F.KeyPress += (a, e) =>
        {
            unchecked
            {
                switch (e.KeyChar)
                {
                    case 'r': c[0]++; break;
                    case 'g': c[1]++; break;
                    case 'b': c[2]++; break;
                    case 't': c[3]++; break;
                    case 'c': F.Invalidate();break;
                }

            }
        };
        F.ShowDialog();
    }
}

Dengan memegang r , g atau b pada keyboard Anda, ia mengubah warna baris berikutnya dengan menambahkan array sbyte pada indeks yang sesuai. Ini akan mulai dari 0 lagi ketika meluap. Jadi ini memberi kita banyak warna. Sama berlaku untuk ketebalan garis yang meningkat dengan memegang t . Menekan c menghapus formulir.

Mathematica - 333 x 0,7 x 0,8 x 0,9 = 168

l = {}; c = Black; s = .01;
ColorSetter@Dynamic@c
Dynamic@s~Slider~{0, .02}
Button["Clear", l = {}]
"/" Checkbox@Dynamic@b
EventHandler[
 Dynamic@Graphics@{White, Rectangle@{600, 400}, l},
 {"MouseDown" :> 
   AppendTo[l, p = {}; {c, Thickness@s, Line@Dynamic@p}], 
  "MouseDragged" :> (p = 
     Append[p, MousePosition@"Graphics"][[If[b, {1, -1}, All]]]),
  "MouseUp" :> (l[[-1, 3]] = Line@p)
  }
 ]

Tcl / Tk, 252

x 0,8 x 0,7 x 0,9

= 127,008

253 x 0,8 x 0,7 x 0,9 = 127.512

254 x 0,8 x 0,7 x 0,9 = 128.016

255 x 0,8 x 0,7 x 0,9 = 128,52

grid [canvas .c -w 600 -he 400]
set c red
incr t
lmap k {1
B1-Motion
3
MouseWheel
2} s {{set L [.c cr l %x %y %x %y -f $c -w $t]}
{.c coo $L "[.c coo $L] %x %y"}
{set c [tk_chooseColor]}
{if $t|%D>0 {incr t [expr %D/120]}}
{.c de all}} {bind . <$k> $s}

grid [canvas .c -w 600 -he 400]
set c red
set t 0
bind .c <1> {set L [.c cr l %x %y %x %y -f $c -w $t]}
bind .c <B1-Motion> {.c coo $L "[.c coo $L] %x %y"}
bind .c <3> {set c [tk_chooseColor]}
bind .c <MouseWheel> {if $t||%D>0 {incr t [expr %D/120]}}
bind .c <2> {.c de all}

Untuk menggunakannya:

• Tombol kiri mouse berlaku sebagai permintaan pertanyaan
• Warna awal adalah merah. Mouse kanan menunjukkan dialog yang memungkinkan pengguna untuk memilih warna yang akan digunakan waktu berikutnya. Selalu tekan tombol OK, jika tidak warna tidak akan ditentukan. Saya bisa memperbaikinya, tetapi akan memakan byte
• Untuk menyesuaikan ketebalan garis yang akan digunakan lain kali, Anda dapat memutar roda mouse: Atas = lebih tebal, Bawah = lebih tipis
• Untuk menghapus gambar, tekan tombol tengah mouse

Tes sederhana:

DarkBASIC Pro - 318 x 0,7 x 0,9 = 200,34

Hal yang paling menarik di sini adalah menggunakan logika bitwise pada scancode keyboard saat ini untuk mengubah warna. Saya menggunakan dua bit berbeda dari scancode untuk setiap saluran - jadi hampir semua warna 6-bit dimungkinkan.

• Tahan tombol apa saja pada keyboard Anda untuk menggunakan warna (pada keyboard Amerika saya: Putih = F5, Hitam = tidak ada tombol, Merah = 2, Hijau = - (minus), Biru = b)
• Klik kanan untuk menghapus

Berikut ini adalah EXE yang dikompilasi: Unduh

#constant a set current bitmap
set display mode 800,400,32
create bitmap 1,800,400
do
s=scancode()
ink rgb((s&&3)*85,((s/4)&&3)*85,((s>>4)&&3)*85),0
m=mousex()
n=mousey()
o=mouseclick()
if o*(d=0) then d=1:x=m:y=n
a 1
if (o=0)*d then d=0:line x,y,m,n
if o=2 then cls
a 0
cls
copy bitmap 1,0
if d then line x,y,m,n
loop

BBC BASIC - 141 tidak ada bonus

Bahasa pemrograman pertama saya dan umumnya tidak pernah digunakan lagi oleh saya :)

SYS "SetWindowPos",@hwnd%,0,0,0,600,400,6:VDU 26
1 MOUSE X,Y,b
IF b=4 THEN GOTO 4
GOTO 1
4 MOUSE x,y,b
IF b=0 THEN LINE X,Y,x,y:GOTO 1
GOTO 4

Python 2.7 - 384 * .8 * .7 = 215.04

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);c.pack();mainloop()

Dengan semua bonus: 462 * .9 * .8 * .7 = 232.848

from Tkinter import*;o=1
a='0f';C=['#'+r+g+b for r in a for g in a for b in a]
def i(a):global o;o+=1
def d(a):global o;o-=1
def I(a):global u;u+=1
def D(a):global u;u-=1
m=Tk();u=0;c=Canvas(width=600,height=400);c.bind("<B1-Motion>",lambda x:c.create_rectangle((x.x,x.y,x.x+o,x.y+o),fill=C[u],outline=C[u]));m.bind("q",i);m.bind("w",d);m.bind("x",D);m.bind("z",I);m.bind("m",lambda _:c.create_rectangle((0,0,602,402),fill=C[7],outline=C[5]));c.pack();mainloop()