Category: SectionA

// Susie Kim
// susiek@andrew.cmu.edu
// Section A
// Project 09

// set variables
var img;
var bitMap;
var grid = 19;

// load image
function preload() {
	var imgURL = "https://i.imgur.com/7Vy4Fqz.jpg";
	img = loadImage(imgURL);
}

function setup() {
    createCanvas(480, 380);
    background(255);

    img.resize(480, 380); // resize image to be canvas size
    img.loadPixels(); // load image pixels
}

function draw() {
	background(255);
	drawBits(); // call upon drawBits function
}

function drawBits() {
	noStroke();
	rectMode(CENTER);

	// make grid of rectangles, with each growing bigger or smaller depending on mouse position
	for (x = 0; x < 480; x += grid) {
		for (y = 0; y < 380; y += grid) {

			var dis = dist(mouseX, mouseY, x, y); // measure distance between mouse pos and each square bit
			var bitMap = map(dis, 0, 480, 11+(grid*.05), 3+(grid*.05)); // map width of each rectangle bit dependent on distance

			var bitColor = img.get(x,y); // get color for each rectangle bit
			fill(bitColor); 

			rect(x, y, bitMap+(grid*.35), bitMap+(grid*.35)); // draw grid of rectangles with width adjusting 
		}
	}
}

 function keyPressed() {
	// lock maximum "pixel" size at 23
	if (grid > 23) {
		grid = 23;
	}

	// lock minimum "pixel" size at 15
	if (grid < 15) {
		grid = 15;
	}

	// make "pixels" bigger with each click of up arrow, and smaller with click of down arrow
	if (keyCode === UP_ARROW) { // bigger
		clear();
		grid += 1;
	} else if (keyCode === DOWN_ARROW) { // smaller
		clear();
		grid -= 1
	}
} 

//Aadya Bhartia
//Section A 
//abhartia@andrew.cmu.edu

/*The program begins to create more details with smaller rectangles for the main portrait and bigger 
rectnagles for the background. When the mouse is pressed the rectnagles rotated and scaled and when the mouse 
is moved around the screen words that describe my aunt in the portrait show up */

var port = 20; //global avriable to help determine size of portraitwhich is in focus
var img;
var word = ['artist','ritika','mom','loving','fasion']; //words displayed when mouse is on canvas
function preload(){
	var imgURL = "https://i.imgur.com/vhfzHA1.jpg" ;
	img = loadImage(imgURL);
}

function setup() {
    createCanvas(400, 340);
    background(0);
    img.loadPixels(); //loading pixels from image
    frameRate(1000);
    rectMode(CENTER);
}
function draw() {
	var px = random(width); //x position of rectangles 
	var py = random(height); //y position of rectangles
	var cx = constrain(floor(px), 0, width-1);
	var cy = constrain(floor(py), 0, height-1);
	//colour at current pixel 
	var positionColour = img.get(cx, cy);
	//colour at mouse position 
	var mouseColour = img.get(mouseX, mouseY);
	//varying width of rectangle based on brightness at current pixel 
	var rectL = map(brightness(positionColour),0,200,0,20);
	if(mouseIsPressed){ //when mouse is pressed rectangles becomes twice the size at rotate at 90 degrees 
		push();
		translate(px,py); 
		scale(2);
		rotate(PI/4);
		noStroke();
		fill(positionColour); //setting fill to colour at that pixel
		rect(0,0,rectL,8);
		pop();
	}
	//for the main portrait the rectangles are smaller while for the background they ae bigger
	else{
		if(px > port*4 & px < port*15 && py> port && py < (height- port*2)){ //setting position of the portrait 
			strokeWeight(0.1);//very thin stroke to emphasizse the portrait 
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			fill(positionColour);
			rect(px,py,rectL/2,4); //making rectnagles smaller 
		}
		//for the background 
		else{
			strokeWeight(0.5);
			stroke(220); //setting stroke as a light grey to distinguish between pixels 
			fill(positionColour); //fill based on colour at curent pixel location
			rect(px,py,rectL,8);
		}
	}
	//text is displayed based on mouse position and colour
	fill(mouseColour); //text colour based on pixel colour at current location
	textSize(random(5,15));
	text(random(word), mouseX, mouseY); //sectiong random text from arrray and displayiong at mouse position
}

//Nicholas Wong
//Section A
//nwong1@andrew.cmu.edu
//Assignment 09


var size = 10 //Default size of stroke

function preload()
{
	//A profile picture
	img = loadImage("https://i.imgur.com/1XXSpjL.png")
}

function setup()
{
	createCanvas(480,480);
	img.loadPixels(); //Load pixels

	//Set modes
	imageMode(CENTER);
	rectMode(CENTER);
	textAlign(CENTER);
	angleMode(RADIANS);

	//Set custom framerate
	frameRate(120)

}

function draw()
{
	//Offset canvas to fit my face in the middle
	translate(-100,10)

	//Get random x and y coordinates
	let x = floor(random(width));
	let y = floor(random(height));

	//Get color of coordinates
	let pix = img.get(x,y);

	//Create strokes
	drawStrokes(x,y,pix);

	drawInstructions();
}

function drawStrokes(x,y,pix)
{
	push();
	translate(100,0) //Recenter canvas
	translate(x,y);
	rotate(revolveMouse(x,y));//Rotate strokes around mouse

	//Draw stroke
	stroke(pix, 128);
	strokeWeight(0.25*size + random(0,2)); //Stroke size influenced by mouse scroll
	line(0,-size + random(0,2),0,size+ random(0,2)); //Stroke length based on mouse scroll
	pop();
}

function revolveMouse(x,y)
{
	//Generates angle from mouse position and (x,y) coordinate
	let dx = mouseX - x;
	let dy = mouseY - y;
	let angle = atan2(dy,dx)
	return angle; //Returns angle
}

function mouseWheel(event)
{
	//Check if scrolling up
	if (event.deltaY < 0)
	{
		size++; //Increase size
	}
	else //Scrolling down
	{
		size -= 1; //Decrease size
	}
}

function drawInstructions()
{
	//Text box at bottom of canvas
	push();
	translate(100,10);
	noStroke();
	fill(0)
	rect(width/2,height-50,285,35)
	fill(255)
	textSize(10)
	text('SCROLL MOUSEWHEEL TO CHANGE STROKE SIZE',width/2,height-47)
	pop();
}

// SEAN CHEN
// 15-104 A

var img;
var widthSml = 4; // width parameters
var widthBig = 10;
var lengthSml = 2; // length parameters
var lengthBig = 10;
var mode = 1; // modes keeper

function preload() { // preload image
  img = loadImage('https://i.imgur.com/HNOE05S.png?1');
}

function setup() {
  frameRate(300);
  createCanvas(480, 788);
  imageMode(CENTER);
  background(255);
  img.loadPixels();
  mode = int(random(1, 4)); 
}

function rotAng(x, y) { // calculating rotation angle
    var distX, distY, ang;
    distX = mouseX - x;
    distY = mouseY - y;
    ang = atan(distX/distY);
    if (mode == 1) { // changing line mapping rotation
        return PI - ang; 
    } else if (mode == 2) {
        return PI / 2 - ang;
    } else if (mode == 3) {
        return ang;
    }
}

function border() { // instructions text
    push();
    stroke(0);
    fill(255);
    rectMode(CENTER);
    textAlign(CENTER);
    rect(width/2, 20, 200, 35, 10);
    noStroke();
    fill(0);
    text('double click to change modes!\n*hold for text rendering*', width/2, 17.5);
    rect()
    pop();
}

function draw() {
    let thickness = map(mouseX, 0, width, widthSml, widthBig);
    let len = map(mouseY, 0, height, lengthSml, lengthBig);
    let x = floor(random(img.width));
    let y = floor(random(img.height));
    let pix = img.get(x, y);
    push(); 
    var rot = rotAng(x, y);
    translate(x, y);
    rotate(rot);
    if (mouseIsPressed) { // render in rotated text
        fill(pix, 128);
        textSize(thickness); // size based on mouse
        textAlign(CENTER);
        text('face', 0, 0)    
    } else { // rotate in rotated lines
        rotate(radians(90));
        stroke(pix, 128);
        strokeWeight(thickness); // thickness based on mouse
        line(0, -len, 0, len); // length of line based on mouse
    }
    pop();
    border();
}

function doubleClicked() { // changing mode
    if (mode == 3) {
        mode = 1;
    } else {
        mode++;
    }
}