Krótki program do rysowania


13

Właśnie zaprosiłeś do swojego domu na wydział sztuk wyzwolonych i mówisz mu / jej

„Wiesz, jestem świetnym programistą i mogę robić x i yiz…”

Szybko się nudzi i pyta:

„Jeśli naprawdę jesteś świetnym programistą, czy możesz stworzyć program, który pozwala mi rysować, wystarczy narysować linie na ekranie za pomocą myszy i w dowolny sposób wybierać różne kolory”.

Twój kod może importować standardowe biblioteki. Twój kod może wymagać wybrania kolorów za pomocą klawiatury.

To jest ; najkrótszy kod wygrywa.

Punktory

  • Linie rysuje się, przesuwając myszą, jednocześnie naciskając lewy przycisk.

  • Algorytm liniowy Bresenhama nie jest konieczny, wystarczy dowolny wbudowany algorytm

  • Jeśli użytkownik może w jakikolwiek sposób zmienić grubość linii, otrzymasz premię * 0,8, ale nie jest to obowiązkowe.

  • Myślę, że lepiej byłoby sami zaimplementować rysowanie linii, ale jeśli chcesz, możesz zaimportować bibliotekę, po prostu powiedz to w opisie kodu.

  • Minimum to 5 różnych kolorów (czerwony, zielony, niebieski, biały, czarny). Jeśli zmienisz je losowo, otrzymasz karę w wysokości * 1,2. Możesz je zmienić w dowolny sposób (oba przyciski i naciśnięcia klawiszy są w porządku).

  • Narysowanie ich naciśnięciem myszy pomiędzy punktami lub wolną ręką byłoby najlepsze (tj. Jak w malowaniu) i daje premię w wysokości * 0,7, ale każda inna metoda jest w porządku: (przykład) kliknij dwa punkty i narysuj linię między tymi punktami ?

  • Kanwa rysunku musi mieć wymiary 600 x 400

  • Zmiana koloru powinna zmienić tylko kolor linii, które zostaną narysowane w przyszłości.

  • Wdrożenie polecenia „Wyczyść wszystko” nie jest obowiązkowe, ale jeśli je wdrożysz, otrzymasz premię * 0,9 .


2
Jak należy narysować linie? Algorytm liniowy Bresenhama ? Czy linie muszą mieć zmienną grubość? Czy sami musimy wdrożyć rysowanie linii? Proszę podać więcej. Zazwyczaj zakłada się, że nasz kod może „importować biblioteki standardowe”. Ile kolorów musi być do wyboru? Czy 2 jest w porządku? A może losowy wybór koloru przy każdym naciśnięciu przycisku klawiatury?
Justin,

2
Potrzebne są dodatkowe wyjaśnienia: w jaki sposób narysowane są linie? Czy klikasz dwa punkty i rysujesz linię między nimi? Jak duże musi być płótno do rysowania? Ile kolorów musi być obsługiwanych? Czy zmiana koloru może również zmienić kolor każdej innej linii? Itd. To wyzwanie jest obecnie bardzo nieokreślone.
Klamka

@Quincunx W pytaniu zadałem pytanie i powiedz, czy jest teraz w porządku.
Caridorc

2
1. Proszę skondensować pytania i odpowiedzi. Wyeliminuj Pytania i spraw, aby Odpowiedzi same stały się punktorami. Pamiętaj, że czasami komentarze mogą zostać usunięte. Punkt algorytmu Bresenhama nie ma sensu bez przeczytania komentarza. Zakładam, że mówisz, że algorytm Bresenhama nie jest wymagany i że zadziała dowolny algorytm lub funkcja standardowa / biblioteczna. 2. Ostateczna wygrana zależy od tego, w jakim języku łatwo jest wejść do API i uzyskać dostęp do prawego przycisku (zamiast zwykłego lewego przycisku).
Level River St

2
1. „Narysowanie ich naciśnięciem myszy między 2 punktami jest najlepsze, ale jakakolwiek inna metoda jest w porządku”. Co z rysowaniem odręcznym, jak przy użyciu narzędzia do malowania ołówkiem? Sugeruję, aby to wyjaśnić lub całkowicie wyeliminować „każda inna metoda jest w porządku”. 2. Należy lepiej określić metodę zmiany koloru. Na przykład, czy można to zrobić za pomocą klawiatury, obracając kolory drugim przyciskiem myszy, czy też trzeba to zrobić, klikając paletę na ekranie?
Level River St

Odpowiedzi:


9

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

Nie tak krótki, jak się spodziewałem, ale podoba mi się wynik.

Cechy:

  • Tryb rysowania „kliknij i przeciągnij”. ( 0,7 )
  • Siedem kolorów (czarny + tęcza).
  • Zmienna szerokość pędzla (sterowanie suwakiem). ( 0,8 )
  • Wyczyść wszystkie funkcje. ( 0,9 )

Prezentacja na żywo: http://jsfiddle.net/onsLkh8y/9/


HTML - 84 bajty

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

CSS - 35 bajtów

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

jQuery - 388/446 bajtów

Przeglądarki zgodne z W3C (np. Chrome) - 388 bajtów

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

Wersja Cross-Browser (poprawki dla Firefox, Safari, IE) - 446 bajtów

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

Poprawki:

  • FireFox - event.offset[X|Y]są niezdefiniowane.
  • Safari - event.whichi event.buttonsnie są one wyraźnie zdefiniowane w mousemove.
  • Internet Explorer - działa z obiema powyższymi poprawkami, chociaż użycie e.buttonsbyłoby wystarczające.

1
$ (dokument). już w codegolf?
edc65

nie potrzebujesz cytatów, id=a może i innych (od
dłuższego

10

Przetwarzanie - 93 · 0,9 = 83,7

Bez prawie narzutów na rysowanie, ale bardzo szczegółowa składnia, w przetwarzaniu najlepszy wynik prawdopodobnie osiągnięto bez żadnych fajnych funkcji i tylko jednej premii:

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

Wynik: 93 · 0,9 = 83,7 (znaki nowej linii służą wyłącznie do odczytu i nie są uwzględniane w wyniku).

Jednak dzięki wszystkim bonusom jest dużo więcej zabawy:

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

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

Używa się go w następujący sposób:

  • Kliknij i przeciągnij myszą, aby narysować linię prostą.

  • Po kliknięciu przeciągnij mysz poza lewą stronę okna i zwolnij przycisk myszy, aby wyczyścić ekran.

  • Przytrzymanie dowolnego klawisza spowoduje cykliczne przechodzenie między wartościami koloru czerwonego, zielonego i niebieskiego koloru rysunku oraz różnymi grubościami obrysu. Ponieważ okresy jazdy są różne, praktycznie można uzyskać wszystkie kombinacje (przy odrobinie wysiłku).

kolorowe wyjście 1

Edytować:

Ponieważ losowanie daje również bonus 0,7, oto jeszcze jedno rozwiązanie:

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

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

Używa się go w następujący sposób:

  • Kliknij i przeciągnij, aby narysować linie odręczne.

  • Przytrzymaj klawisz Tab, aby zmienić kolor i grubość obrysu. Można to również zrobić podczas rysowania (patrz obrazek).

  • Naciśnij dowolny klawisz oprócz tab, a następnie tab, aby wyczyścić ekran.

kolorowy wydruk 2


Odręczne daje również bonus.
Caridorc

@Caridorc: Ach, świetnie. Zaktualizuję wtedy moją odpowiedź.
Emil,

2
Trudno będzie to pokonać.
primo

if(key>0)jest krótszy niżif(keyPressed)
user41805

9

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

Edycja: Odkryłem, że pygame może rysować linie o zmiennej szerokości, więc oto aktualizacja.

Eksperyment z wykorzystaniem modułów PyGame.

Prosty program do malowania, który rysuje linie od zdarzenia MOUSEDOWN (wartość 5) do zdarzenia MOUSEUP (wartość 6). Wykorzystuje funkcję pygame.gfxdraw.line (). Naciśnięcie klawisza TAB powoduje przełączanie między 8 kolorami. Naciśnięcie klawisza BACKSPACE spowoduje wyczyszczenie wyświetlacza na starannie wykonany biały papier. Klawisz ENTER powoduje zmianę rozmiaru pędzla o szerokości 0–7 pikseli.

Jestem nowym golfistą, więc mogłem przegapić pewne metody zmniejszania rozmiaru kodu.

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

Przykładowe zdjęcie 1:

Okropne zdjęcie samolotu

Przykładowe zdjęcie 2:

Krajobraz


9
Mam teraz na komputerze plik o nazwie ms-paint.py.
primo

1
Ciesz się szybkością i czystym GUI. Jaki miał być MS-Paint. Mam nadzieję, że nie zostanę pozwany przez pewną dużą firmę programistyczną ...
Logic Knight

5

C # 519 x 0,7 x 0,8 x 0,9 = 261,6 Przy użyciu metody DrawLine.

Gra w golfa:

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

Czytelny:

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

Przytrzymując r , g lub b na klawiaturze, zmienia kolor następnego wiersza, zwiększając tablicę sbyte przy odpowiednim indeksie. Zacznie się od 0 po przepełnieniu. To daje nam mnóstwo kolorów. To samo dotyczy grubości linii, która jest zwiększana przez przytrzymanie t . Naciśnięcie c usuwa formularz.


5

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

wprowadź opis zdjęcia tutaj


Czy to może rysować linie od punktu do punktu? Wydaje się, że pozwala tylko na rysowanie z wolnej ręki.
trichoplax

@ githubphagocyte Tak, w tej chwili wolna ręka.
świst

1
@githubphagocyte Dodano opcję linii prostej
świst

najlepsza jak dotąd odpowiedź.
primo

Jednak uwielbiam rysunek.
tomsmeding

4

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}

Tcl / Tk, 267

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

= 134,568

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}

Aby go użyć:

  • Lewy przycisk myszy zachowuje się jak zapytania
  • Początkowy kolor to czerwony. Prawa myszka pokazuje okno dialogowe, które pozwala użytkownikowi wybrać kolor, który zostanie użyty następnym razem. Zawsze naciśnij przycisk OK, w przeciwnym razie kolor będzie niezdefiniowany. Mógłbym to naprawić, ale zużyłoby bajty
  • Aby dostosować grubość linii, która będzie używana następnym razem, możesz obrócić kółko myszy: w górę = grubszy, w dół = cieńszy
  • Aby wyczyścić obraz, naciśnij środkowy przycisk myszy

Prosty test:

wprowadź opis zdjęcia tutaj


2

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

Najciekawszą rzeczą jest tutaj użycie bitowej logiki na bieżącym skancodzie klawiatury do zmiany koloru. Używam dwóch różnych bitów ze scancode dla każdego kanału - więc możliwy jest prawie każdy 6-bitowy kolor.

  • Przytrzymaj dowolny klawisz na klawiaturze, aby użyć koloru (na mojej amerykańskiej klawiaturze: biały = F5, czarny = bez klawisza, czerwony = 2, zielony = - (minus), niebieski = b)
  • Kliknij prawym przyciskiem myszy, aby wyczyścić

Oto skompilowany plik EXE: Pobierz

#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

1

BBC BASIC - 141 brak bonusów

Mój pierwszy język programowania i na ogół już przeze mnie używany :)

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

1

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

Wszystkie bonusy: 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()
Korzystając z naszej strony potwierdzasz, że przeczytałeś(-aś) i rozumiesz nasze zasady używania plików cookie i zasady ochrony prywatności.
Licensed under cc by-sa 3.0 with attribution required.