xxxxxxxxxx
193
//use esc to empty canvas
//click buttons to select a shape,color or width of pen
//shape:1.line 2.circle 3.square 4.eraser 5.rainbow 6.raindrop
//ATTENTION:no cancle or redo!
var penwidth = 1; //default
var pen = 1; //defalut:line
var r = 0,
g = 0,
b = 0; //color default:black
function drawRaindrop(penwidth,x,y)
{
strokeWeight(penwidth);
stroke(r,g,b);
fill(r,g,b);
ellipse(x,y,3 * penwidth,3 * penwidth);
triangle(x-1.5*penwidth,y,x+1.5*penwidth,y,x,y-3 * penwidth);
}
function drawRainbow(penwidth, px, py, x, y) {
strokeWeight(penwidth);
stroke(255, 0, 0);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(255, 128, 0);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(255, 255, 0);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(0, 255, 0);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(0, 255, 255);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(0, 64, 128);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
stroke(128, 0, 128);
line(px, py, x, y);
py = py + penwidth;
y = y + penwidth;
}
function setup() {
createCanvas(600, 600);
background(255);
}
function draw() {
fill(0);
stroke(0);
strokeWeight(1);
textSize(20);
//area to select shapes
noFill();
rect(0, 20, 20, 20);
rect(0, 40, 20, 20);
rect(0, 60, 20, 20);
rect(0, 80, 20, 20);
rect(0, 100, 20, 20);
rect(0, 120, 20, 20);
fill(255, 0, 0); //red
rect(0, 200, 20, 20);
fill(255, 128, 0); //orange
rect(0, 220, 20, 20);
fill(255, 255, 0); //yellow
rect(0, 240, 20, 20);
fill(0, 255, 0); //green
rect(0, 260, 20, 20);
fill(0, 255, 255); //blue
rect(0, 280, 20, 20);
fill(0, 64, 128); //indigo
rect(0, 300, 20, 20);
fill(128, 0, 128); //purple
rect(0, 320, 20, 20);
fill(0); //purple
rect(0, 340, 20, 20);
noFill();
rect(0, 530, 20, 20);
rect(0, 550, 20, 20);
rect(0, 570, 20, 20);
stroke(r,g,b);
fill(r,g,b);
//shapes
line(4, 24, 16, 36);
ellipse(10, 50, 16, 12);
rect(3, 64, 14, 12);
fill(228, 160, 140);
stroke(0);
ellipse(10, 90, 12, 12);
//TO DO//
//RAIN
drawRainbow(2, 4, 105, 16, 105);
drawRaindrop(2,10,132);
strokeWeight(1);
//eara to select penwidth
fill(0);
stroke(0);
ellipse(10, 540, 5, 5);
ellipse(10, 560, 7.5, 7.5);
ellipse(10, 580, 10, 10);
if (mouseIsPressed) {
var px = pmouseX,
py = pmouseY,
x = mouseX,
y = mouseY;
if (x < 20) {
if (y > 530 && y < 550) penwidth = 1;
else if (y > 550 && y < 570) penwidth = 3;
else if (y > 570 && y < 590) penwidth = 5;
else if (y > 20 && y < 40) pen = 1;
else if (y > 40 && y < 60) pen = 2;
else if (y > 60 && y < 80) pen = 3;
else if (y > 80 && y < 100) pen = 4;
else if (y > 100 && y < 120) pen = 5;
else if (y > 120 && y< 140) pen = 6;
//select color
else if (y > 200 && y < 220) {
r = 255;
g = 0;
b = 0; //red
} else if (y > 220 && y < 240) {
r = 255;
g = 128;
b = 0; //orange
} else if (y > 240 && y < 260) {
r = 255;
g = 255;
b = 0; //yellow
} else if (y > 260 && y < 280) {
r = 0;
g = 255;
b = 0; //green
} else if (y > 280 && y < 300) {
r = 0;
g = 255;
b = 255; //blue
} else if (y > 300 && y < 320) {
r = 0;
g = 64;
b = 128;
} //indigo
else if (y > 320 && y < 340) {
r = 128;
g = 0;
b = 128;
} //purple
else if (y > 340 && y < 360) {
r = 0;
g = 0;
b = 0;
} //BLACK
} else {//paint
if (pen == 1) {
strokeWeight(penwidth);
stroke(r, g, b);
line(px, py, x, y);
} else if (pen == 2) {
strokeWeight(penwidth);
stroke(r, g, b);
fill(r, g, b)
ellipse(x, y, 3 * penwidth, 3 * penwidth);
} else if (pen == 3) {
strokeWeight(penwidth);
stroke(r, g, b);
fill(r, g, b)
rect(x, y, 3 * penwidth, 3 * penwidth);
} else if (pen == 4) {
noStroke();
fill(255);
ellipse(x, y, 3 * penwidth, 3 * penwidth);
} else if (pen == 5)
drawRainbow(penwidth, px, py, x, y);
else if (pen == 6)
drawRaindrop(penwidth,x,y);
}
}
//use esc to empty canvas
if (keyIsPressed)
if (keyCode == ESCAPE) {
background(255);
}
}