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

//Shruti Prasanth
//Project 9- Portrait
//Section C

function preload() {
    var portrait="https://i.imgur.com/CDcRoOA.jpeg"; // image by Aliena85
    photo=loadImage(portrait);    //image variable
}

function setup() {
  createCanvas(300,400);
  background(0);
  photo.resize(300,400);    //resizing the image to fit the canvas
  photo.loadPixels();
  frameRate(10000000000000000000000*100000000000000000);
}

function draw() {
  var x=random(width);
  var y=random(height);
  var pixelx=constrain(floor(x),0,width);
  var pixely=constrain(floor(y),0,height);
  var pixelcolor=photo.get(pixelx,pixely);    //calling each pixel color
  noStroke();
  fill(pixelcolor);    //colors of the squares that appear

  square(x,y,random(0,5));    // squares that form the image


}

let img;


function preload() {
    img = loadImage("https://i.imgur.com/CPxq6MI.jpg");
}


function setup() {
    createCanvas(480, 480);
    background(110, 16, 0);
    img.resize(width, height);
    img.loadPixels();
    imageMode(CENTER);
    //image(img, 240, 240);
    frameRate(1000);
}

function draw() {
    let x = floor(random(img.width)); //x position of pixels
    let y = floor(random(img.height)) //y position of pixels
    let shapePixel = img.get(x, y); //get pixels from photo
    let textPixel = img.get(mouseX, mouseY); //get pixel from mouse location
    //randomly generated pixels that fill up the page
    let shapeR = random(15);
    noStroke();
    fill(shapePixel);
    circle(x, y, shapeR);


    //draw star shapes when mouse is pressed
    if (mouseIsPressed) { 
        fill(textPixel);
        textSize(random(5, 40));
        text('★', mouseX, mouseY); //star shape follows mouse
    }
}

//erases when double click
function doubleClicked() {
    fill(110, 16, 0);
    circle(mouseX, mouseY, 70);
}

let foto;

function preload() {
  foto = loadImage('https://i.imgur.com/3x32MS3.jpg?1'); //load image
  tak = ["dickson"] //establish text
  print(tak) 
}

function setup() {
  createCanvas(480, 480);
  imageMode(CENTER); 
  noStroke();
  background(240);
  foto.loadPixels();
}

function draw() {
  let x = floor(random(foto.width)); //randomizing where text pops up
  let y = floor(random(foto.height));
  let pic = foto.get(x, y); 
  fill(pic, 128); //setting color to match the photo
  textSize(mouseX/30) //adjustable text size
  text(tak,x,y)

}

function mousePressed() {
    filter(GRAY) //click to turn photo black and white
}

//Annie Kim
//anniekim@andrew.cmu.edu
//Section B
//anniekim-09-Project

var img;
//words describing pic
var words = ["annie", "jean", "flag", "selfie", "snapchat", "blue", "red", "tan", "brown"]


function preload() {
	var selfie = "https://i.imgur.com/AB85yVlb.jpg";
	img = loadImage(selfie);
}							

function setup() {
	createCanvas(480, 480);
	background(0);
	img.loadPixels();
	frameRate(1000);

}

function draw() {
	//resizing selfie
	img.resize(480, 480);
	var x = random(width);
	var y = random(height);
	//getting exact pixel color to fill in words later
	var pixelx = constrain(floor(x), 0, width);
	var pixely = constrain(floor(y), 0, height);
	var pixelcolor = img.get(pixelx, pixely);

	noStroke();
	fill(pixelcolor);
	textSize(random(8, 18));
	textFont('Helvetica');
	text(words[Math.floor(random(0, 9))], x, y);
	
}

var portrait;

function preload() {
    portrait = loadImage("https://i.imgur.com/rlroaMx.jpg");
}

function setup() {
    createCanvas(480, 320);
    background(255);
    portrait.loadPixels();
    portrait.resize(width, height);
    frameRate(30);
}

function draw() {
    //image(portrait, 0, 0, width, height);
    var x = random(width);
    var y = random(height);
    var porX = constrain(floor(x), 0, width);
    var porY = constrain(floor(y), 0, height);
    var colr = portrait.get(porX, porY);
    stroke(255);
    fill(colr);
    rect(x, y, random(10, 25), random(10, 25));
}

let img;
let smallPoint, largePoint;
 var angle = 0


function preload() {
  img = loadImage("https://i.imgur.com/43WGeu8.jpg");
}

function setup() {

  createCanvas(500,500);
  imageMode(CENTER);
  noStroke();
  background(255);
  img.loadPixels();
  
}

function draw() {
  //retrive the image pixels in different sections to be able to assign specific 
  //pixel sizes for each section
  let x = floor(random(img.width));
  let y = floor(random(img.height/4));
  let y1 = floor(random(img.height/2));
  let y2 = floor(random(img.height/4*3));
  let y3 = floor(random(img.height));
  let pix = img.get(x, y);
  let pix1 = img.get(x, y1);
  let pix2 = img.get(x, y2);
  let pix3 = img.get(x, y3);
  //pixels are drawn where the mouse location is 
  let pixM = img.get(mouseX,mouseY);

//when the mouse is pressed, make the rectangles horizontally oriented,
//sizes change according to mouseY value
if (mouseIsPressed){
  fill(pix3);
  rectMode(CENTER)
  	rect(x,y3, 50, mouseY/50);
  fill(pix2)
  	rect(x,y2, 25,mouseY/100)
  fill(pix1)
	rect(x,y1, 10, mouseY/150)
  fill(pix)
	rect(x,y, 5, mouseY/200)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
//naturally, rectangles are vertical. They are larger at the top of the canvas
//and towards the bottom, get smaller in size to get fading away/gradient effect.
//get larger proportionally (across different sections) as mouseX increases
 else{
  fill(pix);
  rectMode(CENTER)
  	rect(x,y, mouseX/50, 50);
  fill(pix1)
  	rect(x,y1, mouseX/100,25)
  fill(pix2)
	rect(x,y2, mouseX/150,10)
  fill(pix3)
	rect(x,y3, mouseX/200,5)
  fill(pixM)
	rect(mouseX,mouseY,5,10)
}
}
//when the mouse is clicked, the colors invert
function mousePressed(){
	filter(INVERT)

}