//Aadya Bhartia
//Section A 

/* The objective of the game is for the user to reach the mask and to
avoid the covid particles! Once you reach the mask you win the game and if you 
bang into a particle you lose. The purpose of the game is to encourage mask wearing 
*/

var mask;//parameter for object creation
var rad = 40; // for size of covid particle 
//person 
var personX;
var personY;
//array to store covid symbols 
var covidX = [];
var covidY = [];
var dx = [];
var dy = [];
//variables to store images 
var covid;
var person;
var maskImg;

function preload(){
    //preloading images 
	covid = loadImage("https://i.imgur.com/uT2allv.png");
    person = loadImage("https://i.imgur.com/uVjRV7S.png");
    maskImg = loadImage("https://i.imgur.com/1olzsvy.png");
}

function setup() {
    createCanvas(500, 500);
    background(220);
    //storing covid particles random x and position as well as speed 
    for(var i = 0; i<15; i++){
    	covidX[i] = random(width);
        covidY[i] = random(height);
        dx[i] = random(-5,5);
        dy[i] = random(-5,5);
    }
    mask = makeMask();
    //text formatting
    frameRate(10); 
    textAlign(CENTER);
    textFont('New Roman');
    textStyle(BOLD);
}

function draw() {
	//constraining mouse within canvas 
    var x = constrain(mouseX, 0, width-10);
	var y = constrain(mouseY, 0, height-10);
	background(220);
    //displaying mask and checking if person has touched maks 
    mask.show();
    mask.check();

	for(var i = 0; i<10; i++){
        fill(0);
    	image(covid, covidX[i], covidY[i], rad, rad);
        covidX[i] += dx[i];
        covidY[i] += dy[i];
        //to bounce covid particles off the sides 
        if(covidX[i] >= (width) || covidX[i] <= 0){
            dx[i] = -1*dx[i];
        }
        if(covidY[i] >= (height) || covidY[i] <= 0){
            dy[i] = -1*dy[i];
        }
        //when person bangs into covid particle 
        if(covidY[i]> y-15  & covidY[i]< y+15 ){
            if(covidX[i]> x-15  && covidX[i]< x+15 ){
                finishGame();
            }
        }
    }
    //person
    fill(255,0,0);
    //displaying mouse as person
    image(person,x, y, 60,100);

}
//displaying mask
function maskDisplay(){
    image(maskImg, this.x, this.y, 60,60);
}

//game won if person reaches the maks 
function achieved(){
    var d = dist(mouseX, mouseY, this.x, this.y);
    if(d<20){
        wonGame();
    }
}

//constructor
function makeMask(){
    var m = {x : random(30, width-30),
             y : random(30, height-30),
             show : maskDisplay, check : achieved}
    return m;
}
//message for when game has been lost 
function finishGame(){
    fill("black");
    textSize(30);
    text("You've been infected, happy recovery!", width/2, height/2);
    noLoop();
}
//message for when game has been won
function wonGame(){
    fill("black");
    textSize(40);
    text("YOU WERE SAVED!!!", width/2, height/2);
    noLoop();
}

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

/* the program shows a river and mountains as well as pagodas, the birds and pagodas along with the 
variation in landscape help the visuals become more interesting and dynamic */

//variables to store colurs
var c1;
var c2;
//storing birds in an array 
var birds = [];
//pagoda in an array
var pagodas = [];
//water speed
var waterSpeed = 0.0001;

function setup() {
    createCanvas(400, 400);
    c1 = color(218, 239, 252);
    c2 = color(240, 198, 196);
    frameRate(15);
    //create an initial collection of birds
    for(var i = 0; i<5; i++){
    	var birdX = random(width);
    	var birdY = random(0, height/3);
    	birds[i] = drawBird(birdX, birdY);
    }
    //create an initial collection of pagodas 
    for(var k = 0; k<2; k++){
    	var pagodaX = random(width);
    	var pagodaY = random(250, 300); 
    	pagodas[k] = drawPagoda(pagodaX, pagodaY);
    }
}

function draw() {
	gradient(c1, c2);
	drawMountain2(); //background mountains 
	drawMountain();//foreground mountains 
	//pagoda update functions 
	pagodaUpdate();
	pagodaAppear();
	pagodaDisappear();
	//water level
	drawWater();
	drawWater2();
	//birds in the sky
	birdUpdate();
	birdAppear();
	birdDisappear();
}

//background gradient from blue to light orange 
function gradient(c1,c2){
	noFill();
	noStroke();
	for(var i = 0; i<height; i++){
		var a = map(i, 0, height, 0, 1);
		var c = lerpColor(c1,c2,a);
		stroke(c);
		line(0, i, width, i);	
	}
}
//function to display water in foreground 
function drawWater(){
	var water1 = 0.001;
	var speedW1 = 0.0003;
	noStroke();
	fill(189, 210, 222);
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*water1 + millis()*speedW1;
		var y = map(noise(x), 0, 1, 260, 300);
		vertex(i, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}
function drawWater2(){
	//function to display second shade water in foreground  
	var water2 = 0.001;
	var speedW2 = 0.0001;
	fill(163, 198, 218);
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*water2 + millis()*speedW2;
		var y = map(noise(x), 0, 1, 290, 350);
		vertex(i, y);
	}
	vertex(width, height);
	vertex(0, height);
	endShape();
}
function drawMountain(){
	var mount1 = 0.014;
	var speedM1 = 0.0008;
	//foreground mountain
	stroke(249, 224, 226); 
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*mount1 + millis()*speedM1;
		var y = map(noise(x), 0,1.5,height/6, height);
		line(i, y, i, height);
	}
	endShape(); 
	//shading for foreground mountain 
	for(var k = width/2; k<4*width/5; k++){
		var z = map(k, width/2,4*width/5,0, 255);
		stroke(246, 188, 192,z);
		line(0, k, width, k);
	}
}
function drawMountain2(){
	var mount2 = 0.009;
	var speedM2 = 0.001;
	//background mountain
	stroke(246, 188, 192); 
	beginShape();
	for(var i = 0; i<width; i++){
		var x = i*mount2 + millis()*speedM2;
		var y = map(noise(x), 0,1.5,20, 2*height/3);
		line(i, y, i, height);
	}
	endShape();
	//shading for background mountain	
	for(var k = width/4; k<2*width/3; k++){
		var z = map(k, width/4,2*width/3,0, 255);
		stroke(249, 224, 226,z);
		line(0, k, width, k);
	}
}

//pagodas
function pagodaMove(){
	//update speed of every pagoda 
	this.x1 -= this.speed; 
}
function pagodaMake(){
	noFill();
	stroke(80);
	strokeWeight(2);
	//making the pagoda 
	line(this.x1, (this.y1+50) , this.x1, (this.y1-40));
	line(this.x1+30, (this.y1+50) , this.x1 +30, (this.y1-40));
	strokeWeight(4);
	line(this.x1, (this.y1-35), this.x1+30, (this.y1-35));
	strokeWeight(6);
	line(this.x1-5, (this.y1-42), this.x1+35, (this.y1-42));
}
function pagodaUpdate(){
	// Update the pagodas's positions, and display them.
	for(var i = 0; i< pagodas.length; i++){
		pagodas[i].shift();
		pagodas[i].display();
	}
}
function pagodaAppear(){
	//with a tiny probablilty adding pagodas 
	if(random(0,1)<0.007){
		var pagodaX = width; 
		var pagodaY = random(250, 300 ); 
		pagodas.push(drawPagoda(pagodaX, pagodaY));
	}
}
function pagodaDisappear(){
	//removing pagodas which have reached the edge 
	var pagodasKeep = [];
	for(var i = 0; i<pagodas.length; i++){
		if(pagodas[i].x1 + pagodas[i].bredth > 0){
			pagodasKeep.push(pagodas[i]);
		}
	}
	pagodas = pagodasKeep;
}
function drawPagoda(pagodaX, pagodaY){
	var pagoda = { x1: pagodaX, y1: pagodaY, 
		speed: 4, bredth: 30,
		shift: pagodaMove, display: pagodaMake}
	return pagoda;	
}

//birds 
function drawBird(birdX, birdY){
	var bird = { x: birdX, y: birdY, 
		velocity: random(4,8), size: random(6,10),
		move: birdMove, show: birdMake}
	return bird;	
}

function birdMove(){
	//update speed of every birds 
	this.x -= this.velocity; 
	this.y -= this.velocity/random(5,10);
}
function birdMake(){
	noFill();
	stroke(80);
	strokeWeight(1);
	arc(this.x, this.y, this.size, this. size/2, PI, TWO_PI);
	arc(this.x+ this.size, this.y, this.size, this. size/2 ,PI, TWO_PI);
}
function birdUpdate(){
	// Update the birds's positions, and display them.
	for(var i = 0; i< birds.length; i++){
		birds[i].move();
		birds[i].show();
	}
}
function birdAppear(){
	//with a tiny probablilty adding birds 
	if(random(0,1)<0.1){
		var birdX = width; 
		var birdY = random(0, height/3 ); 
		birds.push(drawBird(birdX, birdY));
	}
}
function birdDisappear(){
	//removing birds which have reached the edge 
	var birdsKeep = [];
	for(var i = 0; i<birds.length; i++){
		if(birds[i].x + birds[i].size > 0){
			birdsKeep.push(birds[i]);
		}
	}
	birds = birdsKeep;
}

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

/*Through my sonic story I wanted to show a view of a campsite where you hear
the birds in the morning and the the head comes to wake you up and then some 
music and bonfire in the evening followed by a lullaby*/

//varibales for sounds 
var bird;
var wakeUp;
var tent;
var guitar;
var bonfire;
var lullaby;
//to store the images 
var Sceneimage = [];
function preload() {
    // call loadImage() and loadSound() for all media files here
    var filenames = [];
    filenames[0] = "https://i.imgur.com/ITiizfB.png";
    filenames[1] = "https://i.imgur.com/tuuMWhz.png";
    filenames[2] = "https://i.imgur.com/jwZrzv0.png";
    filenames[3] = "https://i.imgur.com/tpb0sAu.png";
    filenames[4] = "https://i.imgur.com/ZFtXPrz.png";
    filenames[5] = "https://i.imgur.com/IsF4NuT.png";
    filenames[6] = "https://i.imgur.com/ttnjMNJ.png";
    filenames[7] = "https://i.imgur.com/V0Lf0an.png";
    filenames[8] = "https://i.imgur.com/vt9fZjI.png";
    filenames[9] = "https://i.imgur.com/pji8Wnc.png";
    //loading images into the array 
    for (var i = 0; i < filenames.length; i++) {
        Sceneimage[i] = loadImage(filenames[i]);
    }
    //load sounds 
    bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/birds-1.wav");
    wakeUp = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/wake-up.wav");
    tent = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/tent.wav");
    guitar = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/guitar-3.wav");
    bonfire = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/bonfire.wav");
    lullaby = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/lullaby.wav");
}

function setup() {
    createCanvas(614, 345);
    frameRate(1);
    useSound();
}
function soundSetup() { // setup for audio generation, chnaging volumes 
    bird.setVolume(0.1);
    wakeUp.setVolume(1);
    guitar.setVolume(0.1);
    lullaby.setVolume(0.2);
}
function draw() {
    //sun rising 
    if(frameCount>=0 & frameCount< 4){
        image(Sceneimage[0], 0,0, 614, 345);
        bird.play();
    }
    //sun up and clouds come in 
    if(frameCount>=4 & frameCount< 8){
        image(Sceneimage[1], 0,0, 614, 345);
        //creating a cloud animation for the different frames 
        if(frameCount== 4){
            image(Sceneimage[9], 0,0, 614, 345);
        }
        if(frameCount== 5){
            image(Sceneimage[9], width/4,0, 614, 345);
        }
        if(frameCount== 6){
            image(Sceneimage[9], width/2,0, 614, 345);
        }
        if(frameCount== 7){
            image(Sceneimage[9], (3*width/4),0, 614, 345);
        }
        bird.play();
    }
    //head comes to wake up 
    if(frameCount>=9 & frameCount< 11){
        image(Sceneimage[2], 0,0, 614, 345);
        wakeUp.play();
    }
    //tent open and girls head pops out 
    if(frameCount>=11 & frameCount< 12){
        image(Sceneimage[3], 0,0, 614, 345);
        tent.play();
    }
    //couple playing the guitar 
    if(frameCount>=12 & frameCount< 17){
        image(Sceneimage[4], 0,0, 614, 345);
        guitar.play();
    }
    //fire lights up
    if(frameCount>=17 & frameCount< 20){
        image(Sceneimage[5], 0,0, 614, 345);
        bonfire.play();
    }
    //fire becomes bigger 
    if(frameCount>=20 & frameCount< 25){
        image(Sceneimage[6], 0,0, 614, 345);
        guitar.play();
        bonfire.play();
    }
    //head comes to say time to go to bed 
    if(frameCount>=25 & frameCount< 28){
        image(Sceneimage[7], 0,0, 614, 345);
        
    }
    //lullaby and stars 
    if(frameCount>=28 & frameCount< 40){
        image(Sceneimage[8], 0,0, 614, 345);
        lullaby.play();
        //creating jittering stars at night 
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));
        star(random(0,width),random(0, height/2));       
    }
}
//star code from class lecture : 14 
function star(a,b){
    var x = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var y = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = x.length;
    fill(255, 255, 0);
    translate(a,b);
    scale(random(0.1,0.5));//scaling the stars at random
    beginShape();
    for (var i = 0; i < nPoints; i++) {
    vertex( (x[i]) + random(-3,3), (y[i]) + random(-3,3) ); //random creates jitter effect
    }
    endShape(CLOSE);
}

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

For this project, I decided to use three different kinds of curves and represent them in different ways in order to create an interesting hierarchy of visuals and different point on the canvas.

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

/*The code aims to use three main types of curves and modify them based on the X and Y position the mouse
Each set of curves are represented in different ways making the code more visually interesting */

var angle = 0;
var numP = 10000;

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

function draw() {
	background(245, 211, 200);
	var midX = width/2;
	var midY = height/2;
	var currentX = constrain(mouseX, 0, midX);
	var currentY = constrain(mouseY, 0, midY);
	noFill();
	translate(midX, midY); //transa;lting origin to centre of canvas 
	var m = map(constrain(mouseX, 0, width), 0, width, 0,width/60);
	push();
	rotate(radians(angle));
	angle +=mouseY/4; // making the set of curves rotate based on mouse position
	drawHypotrochoid1(currentX,currentY); 
	pop();
	drawHypotrochoid2();
	drawRose(m);
}
//Rose rhodonea curve set mapped with rectangles
function drawRose(m){
	fill(2, 58, 80); //dark blue 
	noStroke();
	var roseW = 18;
	for(var i = 0; i < numP/10;i++){ // reducing density of points 
		var roseMap = map(i, 0, numP/10, 0, TWO_PI);
		//The design chnages based on MouseX 
		var n = int(map(mouseX, 0, width, 1, width/15));
		var radius = -m*cos(n*roseMap);
		var x = roseW*radius*cos(roseMap);
		var y = roseW*radius*sin(roseMap);
		rect(x-1,y-1,4,4); // makinf the shape out of smaller rectangles instead of curves 
	}
}
// Hypotrochoid curve set 1
function drawHypotrochoid1(currentX,currentY){
	var a = 5;
	for(var k = 0;k<=PI*2;k+= PI/10){
		for(var i = 0; i<width/40;i++){
			push();
			strokeWeight(2);
			//every alternate stroke uses a different shade of blue 
			if(i%2 == 0){
				stroke(3, 168, 155);
			}
			else{
				stroke(188, 248, 236 );
			}
			rotate(k);
			ellipse(currentX + a*i, currentY + a*i, 2*mouseX/2, 2*mouseY/2);
			pop();
		}
	}
}
// Hypotrochoid curve set 2
function drawHypotrochoid2(){
	stroke(115, 75, 94); //maroon
	noFill();
	strokeWeight(3.5);
	var hypoMapY = map(mouseY, 0 , height, 0, width/4); //curve shape evolves based on Mouse Y 
	//Mouse X controls the size of the curve 
	var a = map(constrain(mouseX,0,width), 0 , width , 0, width/2);
	var b = a/20;
	beginShape();
	for(var i = 0; i<numP; i++){
		var hypoMap = map(i,0,100,0,PI);
		var x = (a - b) * cos(hypoMap)+ hypoMapY* cos(((a-b)/b)*hypoMap);
		var y = (a-b) * sin(hypoMap) - hypoMapY * sin(((a - b)/b)*hypoMap);
		vertex(x,y);
	}
	endShape();
}