Author: Mihika Bansal

sketch

//Mihika Bansal 
//mbansal@andrew.cmu.edu 
//Section E 
//Project 9

var bubbles; 
var move = 5; 
var cx = 100; //starting location of clouds
var cy = 100; 
var clouds = []; 
var ripples = []; 
var terrainSpeed = 0.0005; 
var terrainDetail = 0.005; 

function setup() {

    createCanvas(480, 480); 
    frameRate(4); //slowed down for ripples 

    //initial display of clouds  
    for(var i = 0; i < 3; i++){
    	var cX = random(width); 
    	var cY = random(75, 150); 
    	clouds[i] = makeClouds(cX, cY); 

    }

}
   
function draw() {
	background("#F05353");

	//draw sun
	noStroke(); 
	fill("#F7915B");
	ellipse(width / 2, height / 3, 125, 125);  

	var mountain1 = mountains("#E2BE9A", height * 0.20, height * 0.65, 4); //backmost mountain
	var mountain2 = mountains("#EFAD6C", height * 0.37, height * 0.65, 2); // middle ground mountains 
	var mountain3 = mountains("#EF8F30", height * 0.50, height * 0.65, 3); //foreground mountains 


	//draw ocean 
	noStroke(); 
	fill("#006160"); 
	rect(0, height * 0.65, width, height * 0.35); 

	//draw sun reflection 
	noStroke(); 
	fill(250, 103, 71, 100); 
	arc(width / 2, height * 0.65, 125, 125, 0, PI, OPEN);

	//draw ripples that are changing like waves
	noStroke(); 
	fill(171,209,197, 100); 
	for(var i = 0; i < 6; i ++){
		var xR = random(-205, 205); 
		var yR = random(10, 125); 
		var w = random(50, 100); 
		var h = random(5, 10); 

		ellipse(width / 2 + xR, height * 0.65 + yR, w, h);
	}


	update(); 
	removeClouds(); 
	addCloud();   
    
}

function update(){ //update all the clouds 
	for(var i = 0; i < clouds.length; i++){
		clouds[i].move(); 
		clouds[i].display(); 
	}
}

function removeClouds(){ //checks to see where clouds are and changes positions accordingly
	var cloudKeep = []; 
	for(var i = 0; i < clouds.length; i++){
		if(clouds[i].x + 25 > 0){ // cloud is 50 wide, so 25 is point from center
			cloudKeep.push(clouds[i]); 
		}
	}
	clouds = cloudKeep; //keep only clouds still on screen
}

function addCloud(){ //randomly adds clouds at intervals 
	var newCloud = 0.03; 
	if(random(0,1) < newCloud){
		var cloudY = random(75, 150); 
		clouds.push(makeClouds(480, cloudY)); 
	}
}

function cloudMove(){ // move the clouds 
	this.x += this.speed; 
}

function cloudDisplay(){ //draw the clouds 
	fill("#FFD79E"); 
	noStroke(); 
	ellipse(this.x, this.y, 90, 15); 
	ellipse(this.x - 25, this.y - 10, 35, 30);
	ellipse(this.x, this.y - 20, 40, 40);
	ellipse(this.x + 20, this.y - 15, 35, 30);  

}

function makeClouds(cloudLocX, cloudLocY){ //cloud object definition 
	var cloud = { x: cloudLocX,
				y: cloudLocY,
				speed: -5, 
				move: cloudMove, 
				display: cloudDisplay}

	return cloud; 
} 
function mountains(color, min, max, noiseS) {

	noStroke(); 
	fill(color); 
	noiseSeed(noiseS); 

	beginShape(); 
	for(var x = 0; x < width; x++){
		var t = (x * terrainDetail + (millis() * terrainSpeed)); 
		var y = map(noise(t), 0, 1, min, max); 
		vertex(x, y); 
	}
	vertex(width, height); 
	vertex(0, height); 
	endShape(); 


}



  

This project was very fun to do. I was inspired by the mountain terrain that was shown in the deliverable section. I immediately thought to the serene sunset nights that a person could see when they are on a cruise ship. So I worked with this color palette and recreated an ocean scene with ripples in the ocean, a setting sun, and mountain ranges.

sketch

// Mihika Bansal 
// Section E 
// mbansal@andrew.cmu.edu
// Project 10

var h1 = 35; // varying heights
var h2 = 80;  
var h3 = 50; 

var w1 = 10; //varying widths 
var w2 = 15; 
var w3 = 20; 


function preload() {
    // call loadImage() and loadSound() for all media files here
    //mySnd = loadSound("waves.wav"); 
   // mySnd.setVolume(0.5);
}


function setup() {
    // you can change the next 2 lines:
    rectMode(CENTER); 
    createCanvas(480, 400);
   
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    s1 = new p5.Oscillator(); //the 4 tones I will be manipulating
    s1.setType('sine');

    s2 = new p5.Oscillator();
    s2.setType("sine"); 

    s3 = new p5.Oscillator();
    s3.setType("sine"); 
    
    s4 = new p5.Oscillator();
    s4.setType("sine"); 

    //starting all the audio files, so all sounds are playing at the same time
    s1.start();
    s2.start(); 
    s3.start();
    s4.start();

}


function draw() {

    //creating visual elements 
    background(15); 
    noStroke(); 

    h1 = map(mouseY, 0, height, 50, 80); 
    h2 = map(mouseX, 0, height, 100, 200);
    h3 = map(mouseY, 0, height, 80, 120); 

    w1 = map(mouseX, 0, width, 10, 30);
    w2 = map(mouseY, 0, width, 20, 40);
    w3 = map(mouseX, 0, width, 15, 35); 

    fill("#355C7D"); 
    rect(26, 200, w1, h1); 
    rect(185, 200, w1, h1);
    rect(344, 200, w1, h1);


    fill("#F67280"); 
    rect(79, 200, w2, h2);
    rect(238, 200, w2, h2);
    rect(397, 200, w2, h2);

    fill("#C06C84"); 
    rect(132, 200, w3, h3);
    rect(291, 200, w3, h3);
    rect(450, 200, w3, h3);

    if(mouseX > 0 & mouseX < 120){ //determing sound based on the mouse, moving the mouse changes the sound
        freq1 = map(mouseX, 0, width, 0, 200); //lowest frequency is to the left of the screen
        //amp1 = map(mouseY, 0, height, 0, 0.3); 
        s1.freq(freq1); 
        s1.amp(0.5); //when in that section of the screen the audio is louder
        //s1.start(); 
    }
    else{
        s1.amp(0); //when outside of that section of the screen, the audio is softer 
    }
    if(mouseX > 120 & mouseX < 240){
        freq2 = map(mouseX, 0, width, 200, 400); // increeasing frequency
        s2.freq(freq2);
        s2.amp(0.5); // louder sounds
        //s2.start(); 
    }
    else{
        s2.amp(0); //softer sounds 
    }
    if(mouseX > 240 & mouseX < 360){
        freq3 = map(mouseX, 0, width, 400, 600); // increasing the frequency 
        s3.freq(freq3);
        s3.amp(0.5); //louder sound
        //s3.start(); 
    }
    else{
        s3.amp(0); //softer sound  
    }
    if(mouseX > 360 & mouseX < 480){
        freq4 = map(mouseX, 0, width, 600, 800); //final increase in the frequency
        s4.freq(freq4);
        s4.amp(0.5);
        //s4.start(); 
    }
    else{
        s4.amp(0);  
    }

}

With this project, I created a sound piece that depends on the location of the mouse on the page. When the mouse is off of the screen the sound stops, but as long as it is on the page, a frequency will be emitted. The visuals correspond with the sound that is being emitted because I used the map function for both. Move the mouse completely to the left to stop emitting the sound on wordpress.