Category: SectionB

//Jenny Wang
//Section B
//jiayiw3@andrew.cmu.edu
//Project 09

var img;

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

function setup() {
    createCanvas(480, 480);
    imageMode(CENTER);
    noStroke();
    background("orange");
    frameRate(50);
}

function heart(x, y, size) {
  beginShape();
  vertex(x, y);
  bezierVertex(x - size / 2, y - size / 2, x - size, y + size / 3, x, y + size);
  bezierVertex(x + size, y + size / 3, x + size / 2, y - size / 2, x, y);
  endShape(CLOSE);
}

function draw() {
    
    //area radius for random pixels
    var xPosition = random(-5,5);
    var yPosition = random(-5,5);

    //set area for mouse
    var x = map(mouseX,0,width,0,1200); 
    var y = map(mouseY,0,height,0,1500); 

    //get the size of the pixel
    var pixelSize;

    //get the color of the pixel
    var pixC = img.get(x,y);
    

    //set to paint with mouse
    if(mouseIsPressed){
        push();
        translate(mouseX,mouseY);
        fill(pixC);

        //set heart shaped brush with different sizes
        if(keyIsPressed){
            pixelSize = random(4,8);
        }
        else{
            pixelSize = random(10,22);
        }
        heart(xPosition,yPosition,pixelSize);
        pop();
    }
}
    

var img; //the code takes a sec to load, but it does load don't worry!

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

function setup() {
    createCanvas(480, 400);
    background(200);
    strokeWeight(0)
}

function draw() {
	fill(255);
	background(200)
	image(img, 0, 0, width, height);
	fill(255, 35, 10); //red
	rect(0, 0, width, height);

	for(var y = 0; y < 500; y += 100){ //initally the background was just bright red, but I wanted more of a pattern...
		for(var x = 0; x < 600; x += 200){ //... so I decided to reuse some code that made flowers that I used in week 5 w/ a change in color etc
            
			drawFlower(x, y);
		}
	}

	for(var y = -50; y < 500; y += 100){
		for(var x = 100; x < 600; x += 200){
			drawFlower(x, y);
		}
	}

    for(var col = 500; col < 600; col += 40){
        strokeWeight(2)
        stroke(110, 94, 66);
        fill(186, 156, 95);
        rect(col, 350, 40, 50);
    }
	for(var i = 0; i <= width/5; i++){ //use of 5 basically made the scale of the pixels 5x bigger
		for(var j = 0; j <= height/5; j++){
			c = img.get(i*5, j*5);
			if(c[0] > 110 & c[1] > 110 && c[2] > 110){
				strokeWeight(0);
				fill(140, 255, 251); //cyan blue of face
				rect(i*5, j*5, 5, 5);
			}
		}
	}
}

function drawFlower(x, y) { //code to make flowers
	push();
	translate(x, y); 
	strokeWeight(8);
	stroke(184, 176, 79); //green stem color
	line(-25, 35, -40, 50);
	line(-40, 50, -45, 60);
	line(-45, 60, -55, 20);
	line(-55, 20, -55, 0);
	line(-45, 60, -55, 90);

	strokeWeight(0);
	fill(184, 176, 79); //same green
	ellipse(-55, 0, 20, 30);

	push();
	rotate(radians(30));
	fill(209, 187, 96); //underside of stem color
    rect(-10, 0, 15, 45);
    pop();

    fill(255, 209, 25); //main flower yellow color
    rect(-15, -35, 30, 50); //base of the flowers
    rect(-35, -5, 40, 20);
    rect(5, -5, 30, 30); 
    rect(-15, 15, 20, 20);

    push();
    rotate(radians(45));
    rect(-14, 6, 15, 30);
    rect(-32, -4, 30, 15);
    rect(-5, -35, 15, 30);
    pop();

    strokeWeight(1);
    stroke(245, 183, 15); //darker yellow thin line flower color
    line(0, 0, -3, -25);
    line(0, 0, 7, -25);
    line(0, 0, -8, -25);
    line(0, 0, 12, -25);
    line(0, 0, -30, 1);
    line(0, 0, -30, -2);
    line(0, 0, -25, 15);
    line(0, 0, -20, 20);
    line(0, 0, 27, 15);
    line(0, 0, 25, 20);
    line(0, 0, 30, 5);
    line(0, 0, 30, 0);

    stroke(250, 231, 180); //flower light cream color
    strokeWeight(2);
    line(0, 0, 3, -25);
    line(0, 0, -30, 5);
    line(0, 0, 30, 10);

    strokeWeight(1);
    stroke(242, 223, 145); //lines connecting seeds color
    line(0, 0, 10, -10);
    line(0, 0, 9, -5);
    line(0, 0, 13, -13);
    line(0, 0, 15, -18);
    line(0, 0, 10, -15);

    strokeWeight(0);
    fill(69, 43, 31); //seed color
    ellipse(10, -10, 3, 3);
    ellipse(9, -5, 3, 3);
    ellipse(13, -13, 3, 3);
    ellipse(15, -18, 3, 3);
    ellipse(10, -15, 3, 3);
    pop();
}

// Zoe Lin (ID: youlin)
// Section B

//please give it a couple seconds to load!
//press the mouse to invert the colors!
var density = '@Ñ#W$0985321!?=+-;:,._ ';
var r, g, b;
var img;

function preload() {
  img = loadImage("https://i.imgur.com/GBXXDnf.png"); //load image
}

function setup() {
  createCanvas(350, 450);
  //frameRate(10);
  textAlign(CENTER, CENTER); //ensures ascii text aligns with pixels
  noStroke();
}

function draw() {
  img.loadPixels(); //loads each individual pixel of img
  background(0);

  //var denShuffle = shuffle(density);
  var newWidth = width/img.width;
  var newHeight = height/img.height;
  for (var i = 0; i < img.width; i++) {
    for (var j = 0; j < img.height; j++) {
      var index = (i+j*img.width) * 4; //sets index to match image pixel
      r = img.pixels[index]; g = img.pixels[index+1]; b = img.pixels[index+2];
      var average = (r+g+b) / 3; //finds average rgb index
      textSize(newWidth);
      fill(255);

      //maps index of letter to image pixels
      var letterdex = floor(map(average,0,255,density.length,0));
      //draws ascii letters
      text(density.charAt(letterdex), i*newWidth, j*newHeight);
      
    }
  }  
}

//note: mousePressed also takes a few seconds to load!
function mousePressed() { //inverts colors when mouse is pressed
  density = density.split('').reverse().join(''); //reverses density string
}

//Sam Rauch, section B, srauch@andrew.cmu.edu, project 09 
//this code makes a "glass door" picture of me with colored ellipses, like you're looking
//at me through one of those textured glass doors. It samples the image
//color at each pixel location (though it skips every other y row to help it run a bit faster)
//and draws a circle there. The circle size is tied to mouseY, so when the mouse is higher up, 
//the circles are larger and the image is lower-fidelity, but it gets higher fidelity as the
//user moves the mouse down the image. 

var samImg;
var uploadImg;

var dotArray = [];

var first = 0;

function preload(){
    uploadImage = "https://i.imgur.com/nTNXyHg.jpg";
}

function setup() {
    createCanvas(400, 533);
    background(220);
    samImg = loadImage(uploadImage);
    frameRate(1);
}

function draw() {
    
    background(50);
    image(samImg, 0, 0);
    
    if (first == 0){ // define all the dot objects; run once at start of draw

        for (var y = 0; y < 533; y+=2){ //fill array with dots all over canvas
            for (var x = 0; x < 400; x++){
                var clr = samImg.get(x, y);
                dotArray.push(makeDot(x, y, 20, clr))
            }
        }
        first ++;
    }

    var sizeTicker = map(mouseY, 0, height, 45, 3); //set dot size to move with mouseY

    shuffle(dotArray, true);
    for(var i = 0; i < dotArray.length; i++){ //draw dots in array
        dotArray[i].size = sizeTicker;
        dotArray[i].drawDot();
    }
}

//dot object and draw function
function makeDot(xpos,ypos,siz,clr){
    var dot = {x: xpos, y:ypos, size:siz,
            color:clr,
            drawDot: drawDotFunction}
    return dot;
}

function drawDotFunction(){
    stroke(this.color);
    //print(this.color)
    strokeWeight(this.size);
    point(this.x, this.y);
}