Acaba de invitar a un estudiante de artes liberales a su casa y le está diciendo

"Sabes, soy un gran programador y puedo hacer x e y y z ..."

Él / ella rápidamente se aburre y te pregunta:

"Si realmente eres un gran programador, ¿puedes hacer un programa que me permita dibujar? Solo necesito dibujar líneas en la pantalla usando el mouse y seleccionando diferentes colores de cualquier manera".

Su código puede importar bibliotecas estándar. Su código puede requerir que los colores se seleccionen a través del teclado.

Este es el código de golf ; el código más corto gana.

Viñetas

• Las líneas se dibujan moviendo el mouse mientras presiona el botón izquierdo.

• El Algoritmo de línea de Bresenham no es necesario, cualquier algoritmo incorporado hará el truco

• Si el usuario puede cambiar el grosor de la línea de cualquier manera, obtienes un bono * 0.8 pero no es obligatorio.

• Supongo que debería ser mejor implementar el dibujo lineal nosotros mismos, pero si lo desea, puede importar una biblioteca para eso solo dígalo en la descripción del código.

• El mínimo es de 5 colores diferentes (rojo, verde, azul, blanco, negro). Si haces que cambien al azar, obtienes una penalización de * 1.2. Puede cambiarlos de la forma que desee (tanto los botones como las pulsaciones de teclas están bien).

• Dibujarlos presionando el mouse entre los puntos o a mano alzada sería lo mejor (es decir, como lo hace en la pintura) y le da una bonificación de * 0.7, pero cualquier otro método está bien: (ejemplo) haga clic en dos puntos y dibuje una línea entre esos puntos ?

• El lienzo de dibujo debe ser 600x400.

• Cambiar el color debería cambiar el color solo de las líneas que se dibujarán en el futuro.

• Implementar un comando "Borrar todo" no es obligatorio, pero si lo implementa obtendrá * 0.9 de bonificación.

HTML + jQuery + CSS - 507 x (0.7 x 0.8 x 0.9) = 255.528

No tan corto como pensé que sería, pero me gusta el resultado.

caracteristicas:

• Haga clic y arrastre el modo de dibujo. ( 0.7 )
• Siete colores (negro + arcoiris).
• Ancho de pincel variable (control deslizante). ( 0.8 )
• Borrar todas las funciones. ( 0.9 )

Demostración en vivo: 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

Navegadores compatibles con W3C (por ejemplo, Chrome) - 388 bytes

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ón de navegador cruzado (correcciones para Firefox, Safari, IE) - 446 bytes

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

Arreglos:

• FireFox: event.offset[X|Y]no están definidos.
• Safari, event.whichy event.buttonsno están definidos de manera significativa mousemove.
• Internet Explorer: funciona con las dos soluciones anteriores, aunque el uso e.buttonshubiera sido suficiente.

Procesamiento - 93 · 0.9 = 83.7

Con casi nada de gastos generales para dibujar, pero una sintaxis muy detallada, en Procesamiento, la mejor puntuación probablemente se alcanza sin ninguna característica agradable y solo una bonificación:

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

Puntuación: 93 · 0.9 = 83.7 (Las líneas nuevas son solo para legibilidad y no se cuentan en la puntuación).

Sin embargo, es mucho más divertido con todas las bonificaciones en su lugar:

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

Puntuación: 221 · 0.8 · 0.7 · 0.9 = 111.4

Se usa así:

• Haga clic y arrastre el mouse para dibujar una línea recta.

• Mientras hace clic, arrastre el mouse del lado izquierdo de la ventana y suelte el botón del mouse para borrar la pantalla.

• Si mantiene presionada cualquier tecla, pasará por los valores rojo, verde y azul del color del dibujo y a través de diferentes grosores de trazo. Dado que los períodos de ciclismo son diferentes, se pueden alcanzar prácticamente todas las combinaciones (con un poco de esfuerzo).

Editar:

Dado que el dibujo a mano alzada también proporciona la bonificación 0.7, aquí hay otra solución:

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

Puntuación: 188 · 0.8 · 0.7 · 0.9 = 94.8

Se usa así:

• Haga clic y arrastre para dibujar líneas a mano alzada.

• Mantenga presionada la tecla de tabulación para cambiar el color y el grosor del trazo. Esto también se puede hacer durante el dibujo (ver imagen).

• Presione cualquier tecla que no sea la pestaña y luego la pestaña para borrar la pantalla.

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

Editar: descubrí que pygame puede dibujar líneas con ancho variable, así que aquí hay una actualización.

Un experimento en el uso de los módulos PyGame.

Un programa de pintura simple que dibuja líneas desde el evento MOUSEDOWN (valor 5) hasta el evento MOUSEUP (valor 6). Utiliza la función pygame.gfxdraw.line (). Al presionar la tecla TAB se recorrerán 8 colores. Al presionar la tecla RETROCESO se borrará la pantalla a un color blanco de papel cuidadosamente diseñado. La tecla ENTER alternará el tamaño del pincel a través de 0-7 píxeles de ancho.

Soy nuevo en code-golf, por lo que es posible que haya perdido algunos métodos para reducir el tamaño del código.

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

Imagen de muestra 1:

Imagen de muestra 2:

C # 519 x 0.7 x 0.8 x 0.9 = 261.6 Usando el método DrawLine.

Golfizado:

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

Legible:

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

Al mantener presionado r , g o b en su teclado, cambia el color de la siguiente línea al incrementar una matriz de sbytes en el índice correspondiente. Comenzará en 0 nuevamente cuando se desborde. Entonces esto nos da muchos colores. Lo mismo ocurre con el grosor de la línea que aumenta al mantener t . Al presionar c se borra el formulario.

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}

Para usarlo:

• El botón izquierdo del mouse se comporta como solicitudes de preguntas
• El color inicial es rojo. El mouse derecho muestra un cuadro de diálogo que permite al usuario elegir el color que se usará la próxima vez. Siempre presione el botón OK, de lo contrario el color no estará definido. Podría arreglar esto, pero consumiría bytes
• Para ajustar el grosor de la línea que se usará la próxima vez, puede girar la rueda del mouse: Arriba = más grueso, Abajo = más delgado
• Para borrar la imagen, presione el botón central del mouse

Una prueba simple:

DarkBASIC Pro - 318 x 0.7 x 0.9 = 200.34

Lo más interesante aquí es usar algo de lógica bit a bit en el código de escaneo actual del teclado para cambiar el color. Utilizo dos bits diferentes del código de escaneo para cada canal, por lo que es posible casi cualquier color de 6 bits.

• Mantenga presionada cualquier tecla en su teclado para usar un color (en mi teclado americano: Blanco = F5, Negro = sin tecla, Rojo = 2, Verde = - (menos), Azul = b)
• Haga clic derecho para borrar

Aquí hay un EXE compilado: Descargar

#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 sin bonificaciones

Mi primer lenguaje de programación y, en general, nunca más lo uso :)

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

Con todos los bonos: 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()