Você acabou de convidar um especialista em artes liberais para sua casa e está dizendo a ele

"Sabe, eu sou um ótimo programador e posso fazer x e y e z ..."

Ele rapidamente fica entediado e pergunta:

"Se você é realmente um ótimo programador, pode criar um programa para me deixar desenhar, só preciso desenhar linhas na tela usando o mouse e selecionando cores diferentes de qualquer maneira".

Seu código pode importar bibliotecas padrão. Seu código pode exigir que as cores sejam selecionadas através do teclado.

Isso é código-golfe ; o código mais curto vence.

Tópicos

• As linhas são desenhadas movendo o mouse enquanto pressiona o botão esquerdo.

• O algoritmo de linha de Bresenham não é necessário; qualquer algoritmo embutido fará o truque

• Se o usuário puder alterar a espessura da linha de qualquer forma, você receberá um bônus * 0,8, mas isso não é obrigatório.

• Eu acho que deveria ser melhor implementar o desenho de linha, mas se você quiser, pode importar uma biblioteca para isso, basta dizer na descrição do código.

• O mínimo é de 5 cores diferentes (vermelho, verde, azul, branco, preto). Se você os fizer mudar aleatoriamente, receberá uma penalidade de * 1,2. Você pode alterá-los da maneira que desejar (botões e pressionamentos de teclas estão OK).

• Desenha-los pressionando o mouse entre os pontos ou a mão livre seria o melhor (ou seja, como você faz na pintura) e oferece um bônus de * 0,7, mas qualquer outro método é adequado: (exemplo) clique em dois pontos e desenhe uma linha entre esses pontos ?

• A tela de desenho deve ter 600x400

• Alterar a cor deve mudar a cor apenas das linhas que serão desenhadas no futuro.

• A implementação de um comando "Limpar tudo" não é obrigatória, mas se você implementar, receberá um bônus * 0,9 .

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

Não tão curto quanto pensei que seria, mas gosto do resultado.

Recursos:

• Clique e arraste o modo de desenho. ( 0,7 )
• Sete cores (preto + arco-íris).
• Largura variável do pincel (controle deslizante). ( 0,8 )
• Limpar todas as funções. ( 0,9 )

Demonstração ao 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 compatíveis com W3C (por exemplo, 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()}})

Versão entre navegadores (correções 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})

Conserta:

• FireFox - event.offset[X|Y]são indefinidos.
• Safari - event.whiche event.buttonsnão está definido de forma significativa mousemove.
• Internet Explorer - funciona com as duas correções acima, embora o uso e.buttonstenha sido suficiente.

Processamento - 93 · 0,9 = 83,7

Com quase nenhuma sobrecarga para desenhar, mas uma sintaxe muito detalhada, em Processando, a melhor pontuação é provavelmente alcançada sem nenhum recurso interessante e apenas um bônus:

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

Pontuação: 93 · 0.9 = 83.7 (As novas linhas são apenas de legibilidade e não são contadas na pontuação.)

No entanto, é muito mais divertido com todos os bônus em vigor:

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

Pontuação: 221 · 0.8 · 0.7 · 0.9 = 111.4

É usado assim:

• Clique e arraste o mouse para desenhar uma linha reta.

• Enquanto clicado, arraste o mouse para o lado esquerdo da janela e solte o botão do mouse para limpar a tela.

• Manter qualquer tecla pressionada percorrerá os valores vermelho, verde e azul da cor do desenho e diferentes espessuras de traçado. Como os períodos de ciclismo são diferentes, praticamente todas as combinações podem ser alcançadas (com um pouco de tentativa).

Editar:

Como o desenho à mão livre oferece o bônus de 0,7 também, aqui está outra solução:

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

Pontuação: 188 · 0.8 · 0.7 · 0.9 = 94.8

É usado assim:

• Clique e arraste para desenhar linhas à mão livre.

• Mantenha pressionada a tecla Tab para alterar a cor e a espessura do traçado. Isso também pode ser feito durante o desenho (veja a figura).

• Pressione qualquer tecla, exceto a guia e, em seguida, guia para limpar a tela.

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

Edit: eu descobri pygame pode desenhar linhas com largura variável, então aqui está uma atualização.

Um experimento no uso dos módulos PyGame.

Um programa de pintura simples que desenha linhas do evento MOUSEDOWN (valor 5) para o evento MOUSEUP (valor 6). Ele usa a função pygame.gfxdraw.line (). Pressionar a tecla TAB alterna entre 8 cores. Pressionar a tecla BACKSPACE limpa a tela para uma cor branca de papel cuidadosamente criada. A tecla ENTER alternará o tamanho do pincel de 0 a 7 pixels de largura.

Eu sou novo no code-golf, por isso posso ter perdido alguns métodos para reduzir o tamanho do 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()

Imagem 1 da amostra:

Imagem 2 da amostra:

C # 519 x 0,7 x 0,8 x 0,9 = 261,6 Usando o método DrawLine.

Golfe:

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

Legível:

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

Mantendo r , g ou b sobre o seu teclado que muda a cor da linha seguinte, incrementando um sbyte-matriz no índice correspondente. Ele começará em 0 novamente quando estiver transbordando. Então, isso nos dá muitas cores. O mesmo vale para a espessura da linha que é aumentada mantendo t . Pressionar c limpa o formulário.

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 usá-lo:

• O botão esquerdo do mouse se comporta como solicitações de pergunta
• A cor inicial é vermelha. O mouse direito mostra uma caixa de diálogo que permite ao usuário escolher a cor que será usada na próxima vez. Sempre pressione o botão OK, caso contrário, a cor será indefinida. Eu poderia consertar isso, mas consumiria bytes
• Para ajustar a espessura da linha que será usada na próxima vez, você pode girar a roda do mouse: Para cima = mais grosso, Para baixo = mais fino
• Para limpar a imagem, pressione o botão do meio do mouse

Um teste simples:

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

A coisa mais interessante aqui é usar alguma lógica bit a bit no scancode atual do teclado para mudar a cor. Eu uso dois bits diferentes do scancode para cada canal - para que quase todas as cores de 6 bits sejam possíveis.

• Mantenha pressionada qualquer tecla do teclado para usar uma cor (no meu teclado americano: Branco = F5, Preto = sem tecla, Vermelho = 2, Verde = - (menos), Azul = b)
• Clique com o botão direito para limpar

Aqui está um EXE compilado: 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 sem bônus

Minha primeira linguagem de programação e geralmente nunca mais é usada por mim :)

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

Com todos os bônus: 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()