## Jai Sawkar – Project 11: Generative Landscape

``````//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.

## Fanjie Mike Jin – Project 10 – Sonic Sketch

``````// 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;

var imageUrl = "https://i.imgur.com/DcInSlj.jpg";
//preloads the different types of sound
//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.

## Mihika Bansal – Project 10 – Sonic 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;

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