Short drawing programme

Processing - 93 · 0.9 = 83.7

With next to no overhead for drawing, but a very verbose syntax, in Processing the best score is probably reached without any nice features and only one bonus:

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

Score: 93 · 0.9 = 83.7 (Newlines are for readability only and are not counted in the score.)

However, it's much more fun with all the bonuses in place:

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

Score: 221 · 0.8 · 0.7 · 0.9 = 111.4

It's used like this:

• Click and drag the mouse to draw a straight line.

• While clicked, drag the mouse off the left side of the window and release the mouse button to clear the screen.

• Holding down any key will cycle through the red, green and blue values of the drawing colour and through different stroke thicknesses. Since the cycling periods are different, practically all combinations can be reached (with a bit of trying).

Edit:

Since freehand drawing gives the 0.7 bonus as well, here is yet another solution:

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

Score: 188 · 0.8 · 0.7 · 0.9 = 94.8

It's used like this:

• Click and drag to draw freehand lines.

• Hold the tab key to change the colour and stroke thickness. This can also be done while drawing (see picture).

• Hit any key but tab and then tab to clear the screen.

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

Not as short as I thought it would be, but I like the result.

Features:

• Click-and-drag drawing mode. (0.7)
• Seven colors (black + rainbow).
• Variable brush width (slider control). (0.8)
• Clear all function. (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 compliant browsers (e.g. 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()}})

Cross-Browser version (fixes for 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})

Fixes:

• FireFox - event.offset[X|Y] are undefined.
• Safari - event.which and event.buttons are not meaningfully defined on mousemove.
• Internet Explorer - works with both of the above fixes, although using e.buttons would have been sufficient.

Python 2.7 - 339 197 324 * (0.7 * 0.8 * 0.9) = 163

Edit: I discovered pygame can draw lines with variable width so here is an update.

An experiment in using the PyGame modules.

A simple paint program that draws lines from the MOUSEDOWN event (value 5) to the MOUSEUP event (value 6). It uses the pygame.gfxdraw.line() function. Pressing the TAB key will cycle through 8 colours. Pressing the BACKSPACE key will clear the display to a carefully crafted paper white colour. The ENTER key will cycle the brush size through 0-7 pixels in width.

I am new at code-golf so I may have missed some methods of reducing the code size.

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

Sample picture 1:

Sample picture 2: