Portrait – Painting

var strokeX = 7		//horizontal size of dots
var strokeY = 7		//vertical size of dots
var size = 7		//space between dots
var portrait;		//my image
var painted = [];		//the painted 
var erased = [];		//the erased area
var erasing;		//boolen for whether or not erasing has been activated
var brushSize = 20		//defines what is "near mouse"

function preload(){
	portrait = loadImage("https://i.imgur.com/iJq4Jtv.jpg")		//loading imgur image into variable
}

function paint(){			//draw function for paint object
    fill(portrait.get(this.x,this.y))		//calling the color at the certain image coordinate
		ellipse(this.x,this.y,strokeX,strokeY)		//drawing an ellipse at that coordinate
}

function erase(){
	fill(255,241,175)
		ellipse(this.x,this.y,strokeX,strokeY)
}

function makePaint(px,py){		//constructor for paint object
p = {x:px,y:py,		
	drawfunction:paint
}
return p;
}

function makeErase(ex,ey){		//constructor for erase objecg
e = {x:ex,y:ey,
	drawfunction:erase
}
return e;
}


function setup() {

createCanvas(300, 400);
   background(255,241,175);		//beige
   noStroke();
   ellipseMode(CORNER);		//ellipses defined by "corner"

}


function draw() {

	background(255,241,175)		//beige

	for(i=0;i<painted.length;i++){		//display function for paint object
		painted[i].drawfunction()		//calling the draw function for the array of objects
}


if(mouseIsPressed){
	 for(x=0;x<=width;x+=size){		//for loop to set up dots
		for(y=0;y<=height;y+=size){
			if (nearMouse(x,y) == true){
				if(erasing == false){
					var p = makePaint(x,y)
			        	painted.push(p)
			        brush(mouseX,mouseY)
			    }
			        if(erasing == true){
			        	var e = makeErase(x,y)
			        		painted.push(e)
			        	eraser(mouseX,mouseY)
			    }
			}
		}
	}
}


	fill(128,88,43);	//brown
		rect(0,0,width,20);		//drawing the border
		rect(0,0,20,height);
		rect(0,380,width,20);
		rect(280,0,20,height)

	fill(255);		
		textSize(7);
		text('Press P and Drag to Paint',20,13);		//instructions
		text('Press E and Drag to Erase', 195,13);
		text('Press A to paint abstractly',20,391);
		text('Press R to paint realistically',190,391);
		text('b for smaller brush',120,8);
		text("B for bigger brush", 120,15);
}

function nearMouse(x,y){
	if (dist(x,y,mouseX,mouseY)<brushSize){		//if the mouse is within "brush size" of given x and y coordinates
		return true;
	}
	return false;
}

function brush(x,y){		//drawing the paintbrush
	
	push();
		rectMode(CENTER);
			fill(222,184,142);		//light brown
				rect(x,y+20,15,70);		//the handle
		ellipseMode(CENTER);
			
	if(mouseIsPressed){
		fill(portrait.get(x,y))		//fill with color of image coordinate that it is above
		}else{
			fill(0)		//fill black is not pressing
}
		ellipse(x,y-5,20,12)		//the brush
		triangle(x,y-25,x-10,y-5,x+10,y-5)
	pop();
}

function eraser(x,y){
	
	push();
		rectMode(CENTER);
			fill(245,116,240)		//pink
				rect(x,y,30,40)		//eraser shape
	pop();
}

function keyPressed (){

	if(key=="a"){
		strokeX = random(5,100)		//pick random shape of the dots, and random seperation
		strokeY = random(5,100)
		size = random(0,5)
	}

	if(key=="r"){		//shrink the dots and space between
		strokeX = 2
		strokeY = 2
		size = 2
	}

	if(key == "B"){
		brushSize +=5		//increase the brush size (more dots included in nearmouse function)
	}

	if(key == "b"){			//decrease brush size (less dots included)
		brushSize -=5
	}

	if(key == "p"){
		erasing = false		//not erasing (painting)
	}

	if(key =="e"){
		erasing = true		//erasing (not painting)
	}
}