Sie haben gerade einen Major der Freien Künste zu sich nach Hause eingeladen und Sie sagen es ihm / ihr

"Weißt du, ich bin ein großartiger Programmierer und ich kann x und y und z ..."

S / er langweilt sich schnell und fragt Sie:

"Wenn Sie wirklich ein großartiger Programmierer sind, können Sie ein Programm erstellen, mit dem ich zeichnen kann. Ich muss nur mit der Maus Linien auf dem Bildschirm zeichnen und auf beliebige Weise verschiedene Farben auswählen."

Ihr Code kann Standardbibliotheken importieren. Für Ihren Code müssen die Farben möglicherweise über die Tastatur ausgewählt werden.

Das ist Code-Golf ; kürzester Code gewinnt.

Spiegelstriche

• Die Linien werden durch Bewegen der Maus bei gedrückter linker Taste gezeichnet.

• Bresenhams Linienalgorithmus ist nicht erforderlich, ein eingebauter Algorithmus erledigt den Trick

• Wenn der Benutzer die Strichstärke auf irgendeine Weise ändern kann, erhalten Sie einen * 0,8- Bonus, der jedoch nicht obligatorisch ist.

• Ich denke, es sollte schöner sein, die Strichzeichnung selbst zu implementieren, aber wenn Sie möchten, können Sie eine Bibliothek dafür importieren, indem Sie sie einfach in der Codebeschreibung angeben.

• Das Minimum sind 5 verschiedene Farben (rot, grün, blau, weiß, schwarz). Wenn Sie sie nach dem Zufallsprinzip ändern, erhalten Sie eine Strafe von * 1,2. Sie können sie beliebig ändern (beide Tasten und Tastendrücke sind OK).

• Das Zeichnen mit der Maus zwischen Punkten oder Freihand wäre am besten (wie beim Malen) und ergibt einen Bonus von * 0,7, aber jede andere Methode ist in Ordnung: (Beispiel) Klicken Sie auf zwei Punkte und zeichnen Sie eine Linie zwischen diesen Punkten ?

• Die Zeichenfläche muss 600x400 sein

• Das Ändern der Farbe sollte nur die Farbe der Linien ändern, die in Zukunft gezeichnet werden.

• Die Implementierung eines "Clear All" -Befehls ist nicht obligatorisch, aber wenn Sie dies implementieren, erhalten Sie einen Bonus von * 0,9 .

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

Nicht so kurz, wie ich es mir vorgestellt hatte, aber das Ergebnis gefällt mir.

Eigenschaften:

• Zeichenmodus durch Klicken und Ziehen. ( 0,7 )
• Sieben Farben (Schwarz + Regenbogen).
• Variable Pinselbreite (Schieberegler). ( 0.8 )
• Alle Funktionen löschen. ( 0.9 )

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

HTML - 84 Bytes

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

CSS - 35 Bytes

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

jQuery - 388/446 Bytes

W3C-kompatible Browser (z. B. 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()}})

Cross-Browser-Version (Korrekturen für 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})

Korrekturen:

• Firefox - event.offset[X|Y]sind undefiniert.
• Safari - event.whichund event.buttonssind nicht sinnvoll definiert mousemove.
• Internet Explorer - funktioniert mit beiden oben genannten Korrekturen, obwohl die Verwendung e.buttonsausreichend gewesen wäre.

Verarbeitung - 93 · 0,9 = 83,7

Mit so gut wie keinem Aufwand für das Zeichnen, aber einer sehr ausführlichen Syntax, wird in der Verarbeitung wahrscheinlich die beste Punktzahl ohne nette Funktionen und nur einen Bonus erreicht:

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

Bewertung: 93 · 0,9 = 83,7 (Zeilenumbrüche dienen nur der Lesbarkeit und werden in der Punktzahl nicht berücksichtigt.)

Mit all den vorhandenen Boni macht es jedoch viel mehr Spaß:

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

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

Es wird wie folgt verwendet:

• Klicken und ziehen Sie die Maus, um eine gerade Linie zu zeichnen.

• Ziehen Sie bei gedrückter Maustaste die Maus von der linken Seite des Fensters und lassen Sie die Maustaste los, um den Bildschirm zu löschen.

• Wenn Sie eine beliebige Taste gedrückt halten, werden die roten, grünen und blauen Werte der Zeichenfarbe sowie die verschiedenen Strichstärken durchlaufen. Da die Zykluszeiten unterschiedlich sind, können praktisch alle Kombinationen erreicht werden (mit ein wenig Aufwand).

Bearbeiten:

Da das Freihandzeichnen auch den Bonus von 0,7 gibt, gibt es hier noch eine andere Lösung:

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

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

Es wird wie folgt verwendet:

• Klicken und ziehen Sie, um Freihandlinien zu zeichnen.

• Halten Sie die Tabulatortaste gedrückt, um die Farbe und die Strichstärke zu ändern. Dies kann auch beim Zeichnen geschehen (siehe Bild).

• Drücken Sie eine beliebige Taste außer der Tabulatortaste und dann die Tabulatortaste, um den Bildschirm zu löschen.

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

Bearbeiten: Ich habe festgestellt, dass Pygame Linien mit variabler Breite zeichnen kann. Hier ist ein Update.

Ein Experiment zur Verwendung der PyGame-Module.

Ein einfaches Malprogramm, das Linien vom Ereignis MOUSEDOWN (Wert 5) zum Ereignis MOUSEUP (Wert 6) zeichnet. Es verwendet die Funktion pygame.gfxdraw.line (). Durch Drücken der TAB-Taste werden 8 Farben durchlaufen. Durch Drücken der BACKSPACE-Taste wird die Anzeige auf eine sorgfältig gestaltete papierweiße Farbe zurückgesetzt. Mit der EINGABETASTE wird die Pinselgröße um 0 bis 7 Pixel in der Breite verschoben.

Ich bin neu im Code-Golf, daher habe ich möglicherweise einige Methoden zum Reduzieren der Codegröße verpasst.

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

Beispielbild 1:

Beispielbild 2:

C # 519 x 0,7 x 0,8 x 0,9 = 261,6 Mit der DrawLine-Methode.

Golf gespielt:

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

Lesbar:

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

Wenn Sie r , g oder b auf Ihrer Tastatur gedrückt halten, ändert sich die Farbe der nächsten Zeile, indem Sie ein Byte-Array am entsprechenden Index inkrementieren. Sie beginnt bei Überlauf wieder bei 0. Das gibt uns also viele Farben. Gleiches gilt für die Dicke der Linie, die durch Halten von t erhöht wird . Durch Drücken von c wird das Formular gelöscht.

Mathematica - 333 × 0,7 × 0,8 × 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}

Um es zu benutzen:

• Die linke Maustaste verhält sich wie Fragenanfragen
• Die Ausgangsfarbe ist rot. Die rechte Maustaste zeigt einen Dialog, in dem der Benutzer die Farbe auswählen kann, die beim nächsten Mal verwendet wird. Drücken Sie immer die OK-Taste, sonst wird die Farbe undefiniert. Ich könnte das beheben, aber es würde Bytes verbrauchen
• Um die Dicke der Linie anzupassen, die beim nächsten Mal verwendet wird, können Sie das Mausrad drehen: Nach oben = dicker, Nach unten = dünner
• Um das Bild zu löschen, drücken Sie die mittlere Maustaste

Ein einfacher Test:

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

Das Interessanteste hier ist die Verwendung einer bitweisen Logik für den aktuellen Tastaturscancode, um die Farbe zu ändern. Ich verwende für jeden Kanal zwei verschiedene Bits aus dem Scancode - so ist fast jede 6-Bit-Farbe möglich.

• Halten Sie eine beliebige Taste auf Ihrer Tastatur gedrückt, um eine Farbe zu verwenden (auf meiner amerikanischen Tastatur: Weiß = F5, Schwarz = keine Taste, Rot = 2, Grün = - (Minus), Blau = b)
• Zum Löschen mit der rechten Maustaste klicken

Hier ist eine kompilierte EXE: Download

#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 keine Boni

Meine erste Programmiersprache und im Allgemeinen nie mehr von mir verwendet :)

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

Mit allen Boni: 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()