Sketch

//Jai Sawkar
//jsawkar@andrew.cmu.edu
//Section C
//Project 11: Generative Landscape

var objectSpeed = 0.00005; //speed of objects
var mountainDetail = 0.007; //threshold of variance in mountains

var waterDetail = 0.002 //threshold of variance in water

var xMove = 520 //initial point

var spec = []; //snow 


function setup() {
    createCanvas(480, 480); 
    for (var i = 0; i < 100; i++){ //setting up for loop that determines bounds of snow
    	var specX = random(0, width); //determines x 
        var specY = random(0, height/2); //determines y
        spec[i] = makeSpec(specX, specY); //uses i from for loop
    }
    print(spec);
}


function draw() {
    background(249, 233, 161); 

    drawMountains(); //calls mountain object
 
	displaySpec(); //calls the snow

    fill(228, 118, 47);
    noStroke();
	ellipse(width/2, height/2, 95);

	// calls water object
	drawWater();

	


	//calls text
	drawText();
	xMove -= .1 //moves text

	if (xMove < -90) { //makes it so that when text goes off screen, it reappears
		xMove = 480
	}
}

function drawText() {
	//makes text of album
	fill(0)
	textFont('Courier');
	textSize(24);
	textAlign(CENTER); 
	text('K A U A I', xMove, 30)
	textSize(8);
	text('WITH JADEN SMITH AS', xMove, 40)
	text('"THE BOY"', xMove, 50)
	textSize(24);
	text('G A M B I N O', xMove, 70)
}

function drawMountains() { //makes generative mountain
	push();
    beginShape(); 
    fill(90, 57, 27);
    vertex(0,height/2 + 50); //makes height of vertex of mountain
    for (var x = 0; x < width; x++) {
        var t = (x * mountainDetail) + (millis() * objectSpeed); //allows object to be generative based on time
        var y = map(noise(t), 0, 1, 0, height); //remaps values to fit in desired area
        vertex(x, y-15); //final vertex
    }

    vertex(width, height/2 + 50); //final vertex out of for loop
    endShape();
    pop();
}

function makeSpec(specX, specY){ //makes object for snow
    var makeSpec = {x: specX,
                y: specY, //calls y coordinate
                draw: drawSpec} //allows it to be called to draw
    return makeSpec;
}

function drawSpec(){
	fill('WHITE')
	ellipse(this.x, this.y, 3) //makes circles
}

function displaySpec(){
    for(i = 0; i < spec.length; i++){ 
        spec[i].draw(); //allows spec to be displayed
    }
}


function drawWater(){  //makes water
fill(51,107,135,255);
	
push()

  beginShape();
  noStroke();
  fill(170, 210, 241);
  for (var x = 0; x < width; x++) { //makes height of vertex of mountain
      var t = (x * waterDetail) + (millis() * objectSpeed); //allows object to be generative based on time
      var y = map(noise(t), 0,1, height/2 - 20, height/2 + 50); //remaps values to fit in desired area
      vertex(0, 900); //inital vertex
      vertex(1000,900); //final vertex
      vertex(x, y);
  }
  endShape();

pop()

}

This week, I used the Generative Landscape project to create an album cover of one of my favorite artists, Childish Gambino. I began with the initial cover, which is a Hawaiian sunset abstracted into three objects, the sky, the water, and a semi-circle. I first created the water to be generated randomly, followed by adding mountains in the back to create depth. Moreover, I used a javaScript Object to create snow! It was used to juxtapose the calm nature of Kauai with Gambino’s other, more rowdy album, Because the Internet. Lastly, I made the title for the album slide in & out of the landscape.

sketch1

// Fanjie Mike Jin
// Section C
//fjin@andrew.cmu.edu
//Project 10

//set the count for the four melodies
var voiceplaying = 1;
var pianoPlaying = 1;
var jazzPlaying = 1;
var electronicPlaying = 1;

function preload() {
//preloads the images
    var imageUrl = "https://i.imgur.com/DcInSlj.jpg";
    pic = loadImage(imageUrl);
//preloads the different types of sound
    jazz = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/jazz.wav");
    voice = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/voice.wav");
    piano = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/piano.wav");
    electronic = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/electronic.wav");
//set the volume of the music track
    jazz.setVolume(1);
    voice.setVolume(1);
    piano.setVolume(1);
    electronic.setVolume(1);
}

function setup() {
//set up the background image for the music choosing
    createCanvas(400, 400);
    background(0);
    image(pic, 0, 0);
}

function mousePressed(){
// when mouse is pressed at the designated area, the voice melody would be played
    if (mouseX > width / 2 & mouseY > height / 2 && mouseX < width && mouseY < height){
//the music will be turned off once it has been clicked the second time 
        voiceplaying = voiceplaying + 1;
        if (voiceplaying % 2 == 0){
            voice.play();
        } else {
            voice.pause();
        }
    }
    
// when mouse is pressed at the designated area, the electronic melody would be played  
    if (mouseX < width / 2 & mouseY > height / 2 && mouseY < height){
        electronicPlaying = electronicPlaying + 1;
//the music will be turned off once it has been clicked the second time 
        if (electronicPlaying % 2 == 0){
            electronic.play();
        } else {
            electronic.pause();
        }
    }

// when mouse is pressed at the designated area, the piano melody would be played
    if (mouseX > width / 2 & mouseY < height / 2 && mouseX < width){
        pianoPlaying = pianoPlaying + 1;
//the music will be turned off once it has been clicked the second time       
        if (pianoPlaying % 2 == 0){
            piano.play();
        } else {
            piano.pause();
        }
    }

// when mouse is pressed at the designated area, the jazz melody would be played
    if (mouseX < width / 2 & mouseY < height / 2){
        jazzPlaying = jazzPlaying + 1;
//the music will be turned off once it has been clicked the second time 
        if (jazzPlaying % 2 == 0){
            jazz.play();
        } else {
            jazz.pause();
        }
    }
}

In this project, I aim to create an interactive program that plays four different types of music genre. By clicking on the icon, you are able to choose to turn on and off each type of music. The most interesting condition is when you turn on two or three type of music together, when they are playing simultaneously, it creates a surreal and yet fun melody.

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.