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

// set global variables
 var imgLinks = [
 "https://i.imgur.com/vGhpX7m.jpg", //1
 "https://i.imgur.com/bNtGvLH.jpg", //2
 "https://i.imgur.com/cWHfsai.jpg", //3
 "https://i.imgur.com/hnFyXIy.jpg", //4
 "https://i.imgur.com/06xo9FF.jpg", //5
 "https://i.imgur.com/FJbeTn2.jpg", //6
 "https://i.imgur.com/HZduFcW.jpg", //7
 "https://i.imgur.com/fU2goSM.jpg", //8
 "https://i.imgur.com/i4BVpfk.jpg", //9
 "https://i.imgur.com/dvCAEzm.jpg", //10
 "https://i.imgur.com/t7FzJVW.jpg", //11
 "https://i.imgur.com/MVcrDnK.jpg", //12
 "https://i.imgur.com/QUBppYU.jpg", //13
 "https://i.imgur.com/IPIsgqD.jpg", //14
 "https://i.imgur.com/Inkq9Nc.jpg", //15
 "https://i.imgur.com/FJotQ09.jpg"]; //16

gridRows = 4;
gridCols = 4;
sqSize = 100;

images = [];
puzzles = [];
ids = [];
shuffledIds = [];

clickedImgs = [];
numClicks = 0;

// preload image links into images array
function preload() {
	for (var i=0; i < 16; i++) {
	    images[i] = loadImage(imgLinks[i]);
	}
}

function setup() {
    createCanvas(500, 500);
    background(145, 168, 209);

    // write instructions text ontop and bottom
    fill(255);
    text('complete the puzzle to see the image :)', 150, 35);
    text('click 2 pictures to switch their location!', 150, 475);

    push();

    // write instructions text on left and right
    translate(250, 250);
    rotate(radians(90));
    text('2020 in review', -35, 225);

    rotate(radians(180));
    text('2020 in review', -35, 225);
    pop();


    // create a set of shuffled ids:
    for (var i = 0; i < 16; i++) {
    	ids[i] = i;
    }
    shuffledIds = shuffle(ids);

    // make 16 objects with object properties
    for (var i = 0; i < gridRows; i++) {
    	for (var j = 0; j < gridCols; j++) {
    		puzzles[j+i*4] = makePuzzle(50+j*100, 50+i*100, shuffledIds[j+i*4], j+i*4);
    	}
    }
}

function draw() {
	// draw the grid of shuffled images
	for (var i = 0; i < gridRows; i++) {
    	for (var j = 0; j < gridCols; j++) {
    		puzzles[j+i*4].display();
    	}
    }
}

// create an object that holds the images' properties
function makePuzzle(xlocation, ylocation, idNum, idNum2) {
	var makeImg = { x1: xlocation, 
	                y1: ylocation,
	                shuffId: idNum,
	                origId: idNum2,
	                display: makeImage }
	return makeImg;
}

// function that creates the image
function makeImage() {
	image(images[this.shuffId], this.x1, this.y1, 100, 100);
}

// if mouse is clicked on two images, switch them
function mouseClicked() {
	for (var i = 0; i < 16; i++) {
		if (mouseX > puzzles[i].x1 & mouseX < puzzles[i].x1+100 && // boundaries of any image i
			mouseY > puzzles[i].y1 && mouseY < puzzles[i].y1+100) {
			clickedImgs.push(puzzles[i].origId); // push original Id value of clicked image into clickedImgs array
		    numClicks += 1;
		}
	}
	// if 2 images are clicked, swap, and reset clicknum to 0
	if (numClicks == 2) {
		swapImages();
		numClicks = 0;
	}
}

// function that swaps the two images
function swapImages() {
	// store the x and y values in a temporary variable
	var tempX = puzzles[clickedImgs[0]].x1;
	var tempY = puzzles[clickedImgs[0]].y1

	// switch the x and y values
	puzzles[clickedImgs[0]].x1 = puzzles[clickedImgs[1]].x1;
	puzzles[clickedImgs[0]].y1 = puzzles[clickedImgs[1]].y1;

	puzzles[clickedImgs[1]].x1 = tempX;
	puzzles[clickedImgs[1]].y1 = tempY;

	// clear the clickedImgs array
	clickedImgs.pop();
	clickedImgs.pop();
}

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

// set global variables
var landSpeed = 0.001;
var landFlow = 0.005;

var firefly = [];

var fWidth = 50;
var fLeft = 27 - fWidth;

// load in images for background
function preload() {
	feet = loadImage('https://i.imgur.com/VLK5brn.png');
	fruit = loadImage('https://i.imgur.com/NNwEjtA.png');
	cloud = loadImage('https://i.imgur.com/m6zIO0u.png');
}

function setup() {
    createCanvas(400, 480);
	background(29, 51, 81);
    imageMode(CENTER);

    // create fireflies at random locations on canvas
    for (var i = 0; i < 7; i++) {
    	var xLocation = random(20, 380);
    	var yLocation = random(0, 360);
    	firefly[i] = makeFireflies(xLocation, yLocation);
    }
}

function draw() {
	background(29, 51, 81);

	image(cloud, width/2, height/2-65, width-20, height-20); // background cloud image

	// blue water
	fill(147, 169, 209);
	noStroke();
	rect(0, 200, 400, 200);

    // call upon functions to draw land, foreground, and update fireflies
	land();
	createForeground();
	updateFirefly();
}

// draws front foreground porch, feet, and fruit dish
function createForeground() {
	fill(188, 158, 130);
	strokeWeight(1);
	stroke(124, 87, 61);

	// create porch base
	rect(0, 360, 400, 120);
	rect(0, 350, 400, 10);
	rect(0, 0, 30, 355);
	rect(370, 0, 30, 355);

	// insert self-drawn images of feet laying on porch and fruit
	image(feet, 100, 405, 150, 150);
	image(fruit, 300, 410, 125, 125);
}

// draws undulating sand landscape
function land() {
	fill(249, 228, 183);
	stroke(255);
	strokeWeight(8);

	beginShape();
	vertex(0, height);

	// undulating line of sandscape
	for (var x = 0; x < width; x++) {
		var a = (x*landFlow) + (millis()*landSpeed);
		var y = map(noise(a), 0, 1, height*12/20, height*11/20);
		vertex (x, y);
	}

	vertex(width, height);
	endShape();
}

// draws fireflies
function drawFirefly() {
	fill(255, 245, 0, 100);
	noStroke();
	push();

	translate(this.x1, this.y1); // allows fireflies to move depending on function
	scale(this.fireflySize); // allows fireflies to be scalable depending on make function
	ellipse(50, 50, 10, 10);
	ellipse(50, 50, 5, 5);

	pop();
}

// summons fireflies at given location with variables
function makeFireflies(xlocation, ylocation) {
	var makeFirefly = {x1: xlocation,
					   y1: ylocation,
					   fireflySize: random(0.25, 2),
					   speed: -1,
					   move: moveFirefly,
					   draw: drawFirefly}
	return makeFirefly;
}

// makes fireflies move across the page
function moveFirefly() {
	this.x1 += this.speed;
	if (this.x1 <= fLeft) {
		this.x1 += width - fLeft;
	}
}

// updates the array of fireflies
function updateFirefly() {
	for (i = 0; i < firefly.length; i++) {
		firefly[i].move();
		firefly[i].draw();
	}
}

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

// call global variables
var bgPhoto;

var cupcake;
var cupcakeX = 280;
var cupcakeY = 360;

var pointedHand;
var pointedHandX = 230;
var pointedHandY = 450;

var grabbingHand;
var grabbingHandX = 280;
var grabbingHandY = 450;

var tvScreen;
var musicNotes;
var mouth;

var count = 0;

var meow;
var tvTurnOn;
var eat;
var musicPlay;

function preload() {
    // load images
    bgPhoto = loadImage('https://i.imgur.com/SJVApbw.jpg');
    cupcake = loadImage('https://i.imgur.com/muqUIC2.png');
    pointedHand = loadImage('https://i.imgur.com/3HCNg3e.png');
    grabbingHand = loadImage('https://i.imgur.com/375PW9c.png');
    musicNotes = loadImage('https://i.imgur.com/FVRrvrB.png');
    tvScreen = loadImage('https://i.imgur.com/7mrIDoW.png');

    meow = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/catmeow.wav");
    tvTurnOn = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/tvsound.wav");
    eat = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/eating.wav");
    musicPlay = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/music1.wav");

}

function setup() {
    // you can change the next 2 lines:
    createCanvas(400, 400);
    frameRate(4);
    imageMode(CENTER);
    useSound();
}

function soundSetup() { // setup for audio generation
    meow.setVolume(1);
    tvTurnOn.setVolume(1);
    eat.setVolume(1);
    musicPlay.setVolume(1);
}

function draw() {
    count++; // add 1 frame for each time draw function runs

    image(bgPhoto, width/2, height/2, width, height); // set up background photo

    // have a hand come and take the cupcake on the table
    if (count >= 0 & count < 100) {
        image(cupcake, cupcakeX, cupcakeY, 40, 40); // place cupcake in scene
        image(grabbingHand, grabbingHandX, grabbingHandY, 100, 100); // place hand outside of scene, ready to grab
    }
    if (count > 30 & count < 45) { // bring hand into frame
        grabbingHandY -= 5;
    }
    if (count > 45 & count < 100) { // have hand take cupcake
        cupcakeY += 5;
        grabbingHandY += 5;
    }

    // eating sound from the person eating the cupcake
    if (count == 100) {
        eat.play();
    }

    // have both cats meow with mouths open
    catMouth();
    if (count >= 0 & count < 125) { // have mouths regular
        mouth = true;
    }
    if (count > 125 &  count < 155) { // have mouths open with meow sound
        mouth = false;
    }
    if (count == 126) {
        meow.play();
    }
    if (count > 155) { // mouths return back to normal after meow
        mouth = true;
    }

    // have hand come and touch remote to turn tv off
    tvOn();
    if (count >= 0 & count < 155) { // keep screen on
        screen = true;
    }
    if (count > 165 & count < 172) { // screen turns off as hand moves away
        screen = false;
        pointedHandY += 7;
    }
    if (count == 166) {
        tvTurnOn.play();
    }

    image(pointedHand, pointedHandX, pointedHandY, 100, 100);
    if (count > 140 & count < 155) { // hand comes to click remote
        pointedHandY -= 5;
    }

    // have hand come and touch remote again to play music on record player
    if (count > 165 & count < 173) { // hand comes to push button
        pointedHandX = 236;
        pointedHandY -= 5;
    }
    if (count > 185 & count < 213) { // hand moves away
        pointedHandY += 5;
    }
    if (count > 174) { // show music notes and play music
        image(musicNotes, 80, 70, 50, 50);
    }
    if (count == 175) {
        musicPlay.play();
    }
}

function tvOn() {
    if (screen == true) { // tv shows pink screen with flower when on
        image(tvScreen, 205, 145, 135, 90);
    }
    if (screen == false) { // tv is black when off
        fill(0);
        rectMode(CENTER);
        rect(205, 145, 134, 80, 8);
    }
}

function catMouth() {
    strokeWeight(.5);
    stroke(0);
    noFill();

    if (mouth == true) { // mouth closed when sitting
        line(220, 307, 225, 307); // white cat
        line(81, 276, 84, 276); // orange cat

    } else if (mouth == false) { // mouth open when meowing
        ellipse(223, 307, 5, 5); // white cat
        ellipse(83, 276, 3, 3); // orange cat

        // sound marks for white cat
        strokeWeight(1);
        stroke(255, 255, 0);
        line(260, 280, 270, 265);
        line(250, 280, 250, 265);
        line(240, 283, 230, 268);

        // sound marks for orange cat
        line(60, 238, 60, 251);
        line(50, 251, 45, 238);
        line(43, 253, 30, 240);
    }
}

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

// Susie Kim
// susiek@andrew.cmu.edu
// Section A, 15-104
// Assignment 7

// set global variables
var angle = 0;

function setup() {
    createCanvas(480, 480);
    frameRate(15);
}

function draw() {
	background(247, 202, 201); // sets background to pink tone

    // create grid of flowers, starting at 40, 40. results in a 5x5 grid of flowers.
	for(var x = 40; x <= 480; x+= 100) {
		for(var y = 40; y <= 480; y+= 100) {
			push();
			translate(x, y);

			// have flowers rotate depending on mouse X pos
			rotate(radians(angle));
	        angle += mouseX;

	        // call upon flower functions to draw flower outer and center
	        drawHypocycloid();
	        drawAstroid();

	        pop();
		}
	}
}

// draw blue flower exterior
function drawHypocycloid() {
	// set local variables
	var a = int(map(mouseX, 0, width, 15, 40));
	var b = int(map(mouseY, 0, height, 8, 13));
	
	// set colors and strokes
	fill(145, 168, 209); 
	strokeWeight(2);
	stroke(255);

	beginShape();
   
	// draw hypocycloids, with size increasing for mouse X and number of petals increasing with mouseY 
	for (var i = 0; i < 250; i++) { 
		var subAngle = map(i, 0, 110, 0, TWO_PI);
		var x = a*((b - 1)*cos(subAngle) + cos(subAngle) + cos((b - 1)*subAngle)) / b;
		var y = a*((b - 1)*sin(subAngle) + sin(subAngle) + sin((b - 1)*subAngle)) / b;
		vertex(x,y);
	}
	endShape();
}

// draw yellow center of the flowers
function drawAstroid() {
    // set colors and strokes
	fill(255, 255, 0);
	strokeWeight(.1);
	stroke(255);

	beginShape();

	// draw for each astroid, with size increasing with mouse X position
	for (var i = 0; i < 300; i++) {
		var subAngle = map(mouseX, 0, width, 7, 15); // changes size with X pos
		var x2 = subAngle*pow(cos(i), 5);
		var y2 = subAngle*pow(sin(i), 5);
		vertex(x2, y2);
	}
	endShape();
}