Category: Uncategorized

William Su – Project 11 – Landscape

sketch

// William Su
// Section E
// wsu1@andrew.cmu.edu
// Project 11

var terrainSpeed1 = 0.0002; 
var terrainDetail1 = 0.0007; 

var terrainSpeed2 = 0.0002; 
var terrainDetail2 = 0.001; 

var terrainSpeed3 = 0.0003; 
var terrainDetail3 = 0.005; 

var c1, c2;

function draw() {
  ellipse(mouseX, mouseY, 30, 30);
}

function setup() {
    createCanvas(480, 480);
    c1 = color(255, 204, 0); //Gradient Sky
    c2 = color(255);
    setGradient(c1, c2);
    frameRate(30);
}

function draw() {
    fill(255, 251, 130);
    ellipse(width/2, height/2 - 40, 40, 40); //Sun
    water3(); //Distant water
    DrawBoat(); //Fixed Boat
    water2(); //Middle Water
    water1(); //Near Water
}

function setGradient(c1, c2) {
  // noprotect
  noFill();
  for (var y = 0; y < height; y++) {
    var inter = map(y, 0, height, 0, 1);
    var c = lerpColor(c1, c2, inter);
    stroke(c);
    line(0, y, width, y);
  }
}

function water1() {
    noStroke();
    fill(90, 200, 250); 
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail1) + (millis() * terrainSpeed1);
        var y = map(noise(t), 0, 2, 400, 300);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

function water2() {
    noStroke();
    fill(72, 150, 200); 
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail2) + (millis() * terrainSpeed2);
        var y = map(noise(t), 0, 1, 330, 300);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

function water3() {
    noStroke();
    fill(60, 200, 250); 
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetail3) + (millis() * terrainSpeed3);
        var y = map(noise(t), 0, 2, 250, 200);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
}

function DrawBoat() { //Boat
    push();
    fill(150,75,0); 
    rect(width/2,height/2,5,60);
    pop();

    noStroke();
    push();
    fill(250);
    triangle(width/2 - 30, height/2 + 50, width/2 + 2, 220, width/2 + 30, height/2 + 50);
    pop();

    push();
    fill(140);
    arc(width/2, height/2 + 60, 100, 80, 0, PI, CHORD);
    pop();
}

I decided to make a generative landscape of the ocean. I made 3 wave “layers” and had a fixed object in the horizon.

Sarah Kang-Looking Outwards-11

Liminoid Garden, by Filipa Valente and Heidi Duckler Dance Theatre, 2014

Filipa Valente is both a practicing architect and experiential designer with experience in major firms and studios. After completing her architectural studies at the Bartlett School of Architecture in London, she went on to obtain her Masters in Media Art and Architecture at SciArc in Los Angeles.

Valente’s project “Liminoid Garden”, in collaboration with the Heidi Duckler Dance Theatre, was an interactive machine assemblage between the city, its users, and the environment. I was particularly drawn to this project because of how the installation was able to respond to real-time environmental data from the city, engaging the audience by promoting awareness. Another cool factor is the interaction between the dancers and the installation and the resulting data visualizations.

Liminoid Garden* @ SKYLINE 2014 Festival DTLA from Filipa Valente on Vimeo.

Sarah Kang-Project 11 – Landscape

landscape

//sarah kang
//section c
//sarahk1@andrew.cmu.edu
//project-11-landscape

var m1Speed = .001
var m1Detail = .005
var m2Speed = .002
var m2Detail = .01
var m3Detail = .005

var firework = [];
var firework2 = [];

function setup() {
  createCanvas(480, 480);
    //initial set of pink fireworks
    for (i = 0; i < 12; i++) {
        var fireworkX = random(width);
        var fireworkY = random(0, 240);
        firework[i] = makeFirework(fireworkX, fireworkY);
    }

        //initial set of orange fireworks
    for (i = 0; i < 8; i++) {
        var firework2X = random(width);
        var firework2Y = random(0, 240);
        firework2[i] = makeFirework2(firework2X, firework2Y);
    }

    frameRate(20);
}


function draw() {
 background(0);

 fireworks();
 fireworks2();

 m1();
 m2();

 noStroke();
 fill(94, 94, 115);
 rect(0, 400, 480, 80);

 m3();

}

function m1() {
  //back mountain range 
  stroke(20, 21, 54);
  beginShape();
  for(var x = 0; x < width; x++) {
    var t = (x * m1Detail) + (millis() * m1Speed);
    var y = map(noise(t), 0, 1, 200, 340);
    line(x, y, x, 400);
  }
  endShape();
}

function m2() {
  //front mountain range
  stroke(28, 29, 82);
  beginShape();
  for(var x = 0; x < width; x++) {
    var t = (x * m2Detail) + (millis() * m2Speed);
    var y = map(noise(t), 0, 1, 240, 380);
    line(x, y, x, 400);
  }
  endShape();
}

function m3() {
  //mountain range shadow
  stroke(34, 34, 43);
  beginShape();
  for(var x = 0; x < width; x++) {
    var t = (x * m3Detail) + (millis() * m2Speed);
    var y = map(noise(t), 0, 1, 400, 480);
    line(x, y, x, 400);
  }
  endShape();
}

function drawFirework() {
    noStroke();
    fill(255, 230, 238);
    push();
    translate(this.x2, this.y2);

    for (let i = 0; i < 12; i ++) {
    ellipse(0, 20, 3, 25);
    rotate(PI / 5);
    }

    pop();
}

function makeFirework(xlocation, ylocation) {
  var makeFire = {x2: xlocation, 
                y2: ylocation, 
                fireworkX: random(0, width), 
                fireworkY: random(0, 240),
                speed: -2.0,
                move: moveFirework,
                draw: drawFirework}
  return makeFire;
}

function moveFirework() {
    this.x2 += this.speed;
    if (this.x2 <= -20) {
        this.x2 += 500;
    }
}

function fireworks() {
    //pink fireworks
    for(i = 0; i < firework.length; i++) {
        firework[i].move();
        firework[i].draw();
    }
}

function drawFirework2() {
    noStroke();
    fill(255, 176, 97);
    push();
    translate(this.x2, this.y2);

    for (let i = 0; i < 12; i ++) {
    ellipse(0, 30, 3, 40);
    rotate(PI / 5);
    }

    pop();
}

function makeFirework2(xlocation, ylocation) {
    var makeFire2 = {x2: xlocation, 
                y2: ylocation, 
                firework2X: random(0, width), 
                firework2Y: random(0, 240),
                speed: -2.0, 
                move: moveFirework2,
                draw: drawFirework2}
    return makeFire2;
}

function moveFirework2() {
    this.x2 += this.speed;
    if (this.x2 <= -20) {
        this.x2 += 500;
    }
}

function fireworks2() {
    //orange fireworks
    for(i = 0; i < firework2.length; i++) {
        firework2[i].move();
        firework2[i].draw();
    }
}

For this project, I wanted to make a nighttime landscape and incorporate a colorful fireworks show.

Sammie Kim – Project 11 – Landscape

sketch

//Sammie Kim
//Section D
//sammiek@andrew.cmu.edu
//Project 11

var xPos = 100;
var yPos = 50;
var size = 70;
var backgroundPic;
var clouds = [];

function preload() {
    //background gradient photo
    var backgroundURL = "https://i.imgur.com/EMQBV3U.jpg"
    backgroundPic = loadImage(backgroundURL);
}

function setup() {
    createCanvas(480, 480);
    frameRate(10);
    //initial clouds first appears anywhere across the canvas
    for (var i = 0; i < 1; i++) {
        var startX = random(0, width/3);
        clouds[i] = createClouds(startX);
    }
}

function draw() {
    background(0);
    image(backgroundPic, 0, 0);
    noStroke();
    //call the functions below
    sun();
    mountain();
    darkOcean();
    ocean();
    //show clouds
    addNewClouds();
    updateClouds();
    removeClouds();
}

function sun() {
    fill('#f29849');
    circle(xPos, yPos, size);
    xPos = xPos + 0.5;
    if (xPos > width + size/2){
        xPos = 0;
    }
}

function updateClouds() {
    //constantly calling the clouds
    for (var x = 0; x < clouds.length; x++){
        clouds[x].move();
        clouds[x].draw();
    }
}

function removeClouds() {
    //create an array for keeping clouds on screen
    //if x location is greater than 0, then push x values into the cloud array
    var cloudsOnScreen = [];
    for (var i = 0; i < clouds.length; i++) {
        if (clouds[i].x > 0) {
            cloudsOnScreen.push(clouds[i]);
        }
    }
    clouds = cloudsOnScreen;
}

function addNewClouds() {
    var probability = 0.004;
    //a new cloud is drawn at the width when it is greater than a certain probability
    if (random(0, 1) < probability) {
        clouds.push(createClouds(width));
    }
}

function moveClouds() {
    //making clouds move to the left
    this.x -= this.speed;
}

function makeClouds() {
    //drawing the cloud with ellipses overlapping one another
    noStroke();
    fill('#7297a6');
    ellipse(this.x - 10, this.y, this.width, this.height);
    ellipse(this.x + 30, this.y, this.width, this.height);
    ellipse(this.x, this.y + 5, this.width, this.height);
    ellipse(this.x - 30, this.y + 5, this.width, this.height);
}

function createClouds(cloudX) {
    //creating object for cloud's characteristics
    var cloud = {x: cloudX,
              y: random(25, 75),
              width: 50,
              height: 50,
              speed: 0.7,
              move: moveClouds,
              draw: makeClouds}
  return cloud;
}

function ocean() {
    var oceanSpeed = 0.0003; //speed of terrain
    var oceanDetail = 0.001; //smoothness
    fill('#50abbf');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, height/2, height);
        vertex(x, y);
  }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function mountain() {
    var oceanSpeed = 0.0004; //speed of terrain
    var oceanDetail = 0.007; //smoothness
    fill('#6C671F');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, 0, height);
        vertex(x, y);
    }
  vertex(width, height);
  vertex(0,  height);
  endShape();
}

function darkOcean() {
    var oceanSpeed = 0.0004; //speed of terrain
    var oceanDetail = 0.001; //smoothness
    fill('#254f6a');
    beginShape();
    for (var x = 0; x < width; x++) {
        var t = (x * oceanDetail) + (millis() * oceanSpeed);
        var y = map(noise(t), 0, 1, height/3, height);
        vertex(x, y);
      }
    vertex(width, height);
    vertex(0, height);
    endShape();
}

This project was challenging as I had to keep in mind about the different objects that are shown on canvas and making them move. Imagining a space with ocean and mountain, I wanted to bring out a happy, peaceful mood through the overall warm colors. Overlapping the ocean terrains, I attempted to make an image of waves flowing past. The biggest challenge for me was creating the clouds to appear in the sky using objects. It was difficult having to think about multiple factors and constraints all at once, so I did it in a step by step manner—creating the cloud shape first with function, then calling it inside the object, and finally using other functions to add more properties.

Monica Chang – Project 11 – Generative Landscape

sketch

//Monica Chang
//mjchang@andrew.cmu.edu
//Section D
//Project 11 - Generative Landscapes

//LANDSCAPE DESCRIPTION:
// SURPRISE! THERE IS HIDDEN LAVA BEHIND THE FIRST TERRAIN!

var tethered = [];
var terrainSpeed = 0.0008;// speed of orange terrain and middle terrain
var terrainSpeedThree = 0.0007; // speed of very back mountain
var terrainDetail = 0.008;
var terrainDetailTwo = 0.001;
var terrainDetailThree = 0.02; //smoothness of the terrains

function setup() {
    createCanvas(480, 480);
    frameRate(20);
    //initial lava
    for (i = 0; i < 30; i++) {
        var tx = random(width);
        var ty = random(300, height);
        tethered[i] = makeTethered(tx, ty);
    }
}

function draw() {
    //lavendar background
    background(236, 225, 250);

    //arranging the landscape elements(three terrains, lava spots)
    renderTerrainTwo(); // middle, low-opacity mountain
    renderTerrainThree(); // third mountain in the very back
 
    updateAndDisplayTethered(); //hidden lava behind the front terrain

    renderTerrainOne(); // first terrain int he very front

}



function displayTethered() {
    //drawing the "tethered" lava
    noStroke(); //no outline
    fill(255, 11, 5); //red tethered coat color
    push();
    translate(this.x0, this.y0); //locate lava body at x0, y0
    ellipse(5, 5, 10, 5); //tethered lava body
    pop();
}

function makeTethered(birthLocationX, birthLocationY) {
    var theTethered = {x0: birthLocationX, 
                y0: birthLocationY, 
                tx: random(0, width), 
                ty: random(300, height),
                speed: -3.0,
                move: moveTethered,
                display: displayTethered}
    return theTethered;
}

function moveTethered() {
    this.x0 += this.speed; //speed of lava moving
    if (this.x0 <= -10) { //new lava appears at the right as they disappear to the left
        this.x0 += width + 10;
    }
}

function updateAndDisplayTethered() {
    for(i = 0; i < tethered.length; i++) {
        tethered[i].move();
        tethered[i].display();
    }
}


function renderTerrainThree(){
    // drawing the terrain in the back
    noStroke();
    fill(51, 16, 84); 
    beginShape(); 
    for (i = 0; i < width; i++) {
        var t = (i * terrainDetailThree) + (millis() * terrainSpeedThree);
        //terrains y coordinate
        var y = map(noise(t), 0, 1.5, height / 8, height);
        //keep drawing terrain
        vertex(i, y);
    }
    //terrain constraints
    vertex(width, height);
    vertex(0, height);
    endShape();
}

function renderTerrainTwo() {
    // drawing terrain number two(in the middle)
    noStroke();
    fill(71, 11, 6, 200); //low-opacity color of maroon
    beginShape();
    for(var a = 0; a < width; a++){
        var b = (a * terrainDetail) + (millis() * terrainSpeed);
        var c = map(noise(b), 0, 1, 0, height / 4);
        vertex(a, c);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);

}


function renderTerrainOne() {
    //drawing the terrain in the very front
    noStroke();
    fill(235, 64, 52);
    beginShape();
    for(var x = 0; x < width; x++){
        var t = (x * terrainDetailTwo) + (millis() * terrainSpeed);
        var y = map(noise(t), 0, 1, 0.55, height + 100);
        vertex(x, y);
    }
    vertex(width, height);
    vertex(0, height);
    endShape(CLOSE);
  
}

I was originally inspired by the horror film, ‘Us’, which was released this year and wanted to illustrate the “Tethered”. However, they ended up looking more like lava due to the color so I ended up creating a landscape with holes of lava. This project was really fun and helpful in making me understand objects better.

my sketch!

Mihika Bansal – Project 11 – Landscape

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 of the concept

Claire Lee – Project 10 – Sonic Sketch

project10

/* 
Claire Lee
15-104 Section B
seoyounl@andrew.cmu.edu
Project-10
*/

// I'm using one of my grace days for this project!

var bearUrls = [
    "https://i.imgur.com/BOQ7Bt9.jpg", 
    "https://i.imgur.com/uhBjJf4.jpg",
    "https://i.imgur.com/UK6rJXn.jpg",
    "https://i.imgur.com/UsOhg2L.jpg" ]

var bearBrown;
var bearPolar;
var bearBlack;
var bearPanda;

var bearBrownSound;
var bearPolarSound;
var bearBlackSound;
var bearPandaSound;
//setting the global variables

function preload() {
    bearBrown  = loadImage(bearUrls[0]);
    bearPolar = loadImage(bearUrls[1]);
    bearBlack = loadImage(bearUrls[2]);
    bearPanda = loadImage(bearUrls[3]);
    //loading the images

    bearBrownSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bark.wav");
    bearPolarSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/meow.wav");
    bearBlackSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hi.wav");
    bearPandaSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/moo.wav");
    //loading the sounds
}


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

function soundSetup() { // setup for audio generation
    bearBrownSound.setVolume(1);
    bearPolarSound.setVolume(1);
    bearBlackSound.setVolume(1);
    bearPandaSound.setVolume(1);
}


function draw() {
    image(bearBrown, 0, 0, width/4, height);
    image(bearPolar, width/4, 0, width/4, height);
    image(bearBlack, width/2, 0, width/4, height);
    image(bearPanda, 3*width/4, 0, width/4, height);
    //divides canvas into quarters and sets different image for each
}

function mousePressed() {
    if (mouseX > 0 & mouseX < (width/4)) {
        bearBrownSound.play();
    } else {
        bearBrownSound.pause();
    }
    // brown bear sound

    if (mouseX > (width/4) & mouseX < (width/2)) {
        bearPolarSound.play();
    } else {
        bearPolarSound.pause();
    }
    // polar bear sound

    if (mouseX > (width/2) & mouseX < (3*width/4)) {
        bearBlackSound.play();
    } else {
        bearBlackSound.pause();
    }
    // black bear sound

    if (mouseX > (3*width/4) & mouseX < width) {
        bearPandaSound.play();
    } else {
        bearPandaSound.pause();
    }
    //panda bear sound
}

I decided to do bears (with the addition of some unexpected sounds) because I wanted to make a group of cute characters with some unity. I had a lot of fun making the visuals for this project, and it was really interesting to learn how to manipulate sound files and work on a local server.

Sammie Kim— Looking Outwards—11

Angela Washko is a digital artist who creates experimental games and entertainment that often revolves around feminist themes. One project that really stood out to me is called The Game, which won the Impact Award at Indiecade. As a feminist video game, this project presents an “exploration of consent and the politics, tactics and practices of the male pick-up artist and seduction community.” The format resembles a dating simulator, where players experience several seduction techniques deriving from instructional books and seduction coaches (pickup artists. The pickup gurus attempt to seduce the player, where six prominent coaches try to gain the player’s attention at a bar—an opportunity for players to explore the complex social behavior and psychology behind dating, as well as experience being a femme-presenting individual exploring this difficult and risky path. I found this game to provoke a reflective process step by step, as it allows us to virtually explore and manipulate, while simultaneously complicit in the frequent dehumanizing behavior. This game is unique as it’s composed entirely of scenarios moving on, providing a digital narrative that satirizes this convoluted system of power and desire in the world of contemporary sex and dating.

Exhibition of The Game at The Museum of Moving Image
People playing through The Game in the museum
A dialogue scene captured in The Game

Link to the artist’s website:  https://angelawashko.com/section/437138-The-Game-The-Game.html

Katrina Hu – Project 10 – Sonic Sketch

sketch_project10

/*Katrina Hu
15104-C
kfh@andrew.cmu.edu
Project10_SonicSketch*/

var eyeSize1 = 10;
var mouthWidth1 = 30;
var eyeSize2 = 10;
var mouthWidth2 = 30;
var eyeSize3 = 10;
var mouthWidth3 = 30;
var eyeSize4 = 10;
var mouthWidth4 = 30;

var evilLaugh;
var womanLaugh;
var maniacalLaugh;
var childLaugh;

function preload() {
    evilLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/evillaugh.wav");
    evilLaugh.setVolume(0.5);

    womanLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/womanlaugh.wav");
    womanLaugh.setVolume(0.5);

    maniacalLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/maniacallaugh.wav");
    maniacalLaugh.setVolume(0.5);

    childLaugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/childlaugh.wav");
    childLaugh.setVolume(0.5);
}


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


function soundSetup() { 

}


function draw() {
    noStroke();
    //blue background
    fill(204, 224, 255);
    rect(0, 0, 120, 120);
    fill(74, 143, 255);
    ellipse(60, 60, 100, 100);
    fill(0);
    ellipse(40, 40, eyeSize1);
    ellipse(80, 40, eyeSize1);
    fill(255, 255, 255);
    ellipse(40, 38, eyeSize1 / 3);
    ellipse(80, 38, eyeSize1 / 3);
    fill(189, 100, 87);
    arc(60, 60, mouthWidth1, 30, 0, PI, CHORD);
    //yellow background
    fill(255, 252, 204);
    rect(120, 0, 120, 120);
    fill(255, 246, 82);
    ellipse(180, 60, 100, 100);
    fill(0);
    ellipse(160, 40, eyeSize2);
    ellipse(200, 40, eyeSize2);
    fill(255, 255, 255);
    ellipse(160, 38, eyeSize2 / 3);
    ellipse(200, 38, eyeSize2 / 3);
    fill(189, 100, 87);
    arc(180, 60, mouthWidth2, 30, 0, PI, CHORD);
    //pink background
    fill(255, 204, 204);
    rect(240, 0, 120, 120);
    fill(255, 90, 82);
    ellipse(300, 60, 100, 100);
    fill(0);
    ellipse(280, 40, eyeSize3);
    ellipse(320, 40, eyeSize3);
    fill(255, 255, 255);
    ellipse(280, 38, eyeSize3 / 3);
    ellipse(320, 38, eyeSize3 / 3);
    fill(189, 100, 87);
    arc(300, 60, mouthWidth3, 30, 0, PI, CHORD);
    //green background
    fill(222, 255, 214);
    rect(360, 0, 120, 120);
    fill(138, 255, 138);
    ellipse(420, 60, 100, 100);
    fill(0);
    ellipse(400, 40, eyeSize4);
    ellipse(440, 40, eyeSize4);
    fill(255, 255, 255);
    ellipse(400, 38, eyeSize4 / 3);
    ellipse(440, 38, eyeSize4 / 3);
    fill(189, 100, 87);
    arc(420, 60, mouthWidth4, 30, 0, PI, CHORD);
}

function mousePressed() {
    //play sound if pressed in blue box
    if(mouseX <= 120) {
        eyeSize1 = random(8, 15);
        mouthWidth1 = random(40, 55);
        evilLaugh.play();
    }
    //play sound if pressed in yellow box
    if(mouseX > 120 & mouseX <= 240) {
        eyeSize2 = random(8, 15);
        mouthWidth2 = random(40, 55);
        womanLaugh.play();
    }
    //play sound if pressed in pink box
    if(mouseX > 240 & mouseX <= 360) {
        eyeSize3 = random(8, 15);
        mouthWidth3 = random(40, 55);
        maniacalLaugh.play();
    }
    //play sound if pressed in green box
    if(mouseX > 360 & mouseX <= 480) {
        eyeSize4 = random(8, 15);
        mouthWidth4 = random(40, 55);
        childLaugh.play();
    }

}

The sounds play when you click on the various 4 faces. Each face has a different laugh, and the facial features change as you click on them as well.

Alec Albright – Project 10 – Sonic Sketch

I am using one of my grace days on this assignment

sketch

// Alec Albright
// aalbrigh@andrew.cmu.edu
// Section B
// Project 10

var margin = 150;
var radius = 30;
var r = 0;
var g = 0;
var b = 0;
var rotation = 0;
var sine; // sine oscillator
var sineAmp; // sine amplitude
var sineFreq; // sine frequency
var sawtooth; // sawtooth oscillator
var sawtoothAmp; // sawtooth amplitude
var sawtoothFreq; // sawtooth frequency
var square; // square oscillator
var squareAmp; // square amplitude
var squareFreq; // square frequency

function setup(){
    createCanvas(640, 480);
    angleMode(DEGREES);
    useSound();
}

function soundSetup() { // setup for audio generation
    // making sine
    sine = new p5.Oscillator();
    sine.setType("sine");
    sine.start();

    // making sawtooth
    sawtooth = new p5.Oscillator();
    sawtooth.setType("sawtooth");
    sawtooth.start();

    // making square wave
    square = new p5.Oscillator();
    square.setType("square");
    square.freq(440);
    square.start();
}

function draw(){
    background("white");
    fill(r, g, b);

    // mapping angle of rotation to mouseY
    // as mouse moves up and down, shapes rotate
    rotation = map(mouseY, 0, height, 0, 360);

    // drawing hexagons with specified margin and rotation
    // center
    push();
    translate(width / 2, height / 2);
    rotate(rotation);
    hexagon(0, 0, radius);
    pop();
    // circle around center hexagon
    for(let i = 0; i < nvertex; i +=1){
        // finding exactly where the hexagon at hand is located
        // sin tells us where the y coordinate is
        var centerY = sin(angle) * margin;
        // cos tells us where the x coordinate is
        var centerX = cos(angle) * margin;
        // now draw the vertex at hand
        // setting up rotation for each individual hexagon
        push();
        translate(width / 2 + centerX, height / 2 + centerY);
        rotate(rotation);
        hexagon(centerX, centerY, radius);
        pop();
        // add the next portion of the angle
        angle = angle + (360 / 6)
    }
    
    // scaling mouseX to use the whole screen for size
    // as mouse moves right, shapes get bigger
    radius = map(mouseX, 0, width, 20, 70);
    
    // as mouse moves right, more red, more sine/less sawtooth
    r = map(mouseX, 0, width, 0, 255);
    // amplitude form 0 to 1
    sineAmp = map(mouseX, 0, width, 0, 1);
    sine.amp(sineAmp);
    // amplitude from .8 to 0 (bigger amplitude on left side)
    sawtoothAmp = map(mouseX, 0, width, .2, 1);
    sawtooth.amp(1 - sawtoothAmp);

    // as mouse moves down, more blue 
    b = map(mouseY, 0, height, 0, 255);
    // as mouse moves left, more green
    g = 255 - map(mouseX, 0, width, 0, 255);

    // frequency changes depending on whether we're in top half or bottom half
    if (mouseY <= height / 2) {
        // sine goes from 440 to 1760 Hz (2 octaves) if we're in the top half
        sineFreq = constrain(map(mouseY, 0, height / 2, 440, 1760), 440, 1760);
        sine.freq(sineFreq);

        // sawtooth frequency stabilizes at minumum value
        sawtooth.freq(110);
    } else {
        // sawtooth goes from 110 to 440 Hz (2 octaves) if we're in the bottom half
        sawtoothFreq = constrain(map(mouseY, height / 2, height, 110, 440), 110, 440);
        sawtooth.freq(sawtoothFreq);
     
        // sine frequency stabilizes at maximum value
        sine.freq(1760);
    }

    // if mouse is pressed, square wave can be changed
    if (mouseIsPressed) {
        // frequency mapped to the average of mouseX and mouseY, can go from 110 to 440 Hz 
        squareFreq = constrain(map((mouseX + mouseY) / 2, 0, 640, 110, 440), 110, 440);
        square.freq(squareFreq);

        // amplitude mapped to the distance from the center of x axis
        squareAmp = constrain(map(mouseX - (width / 2), -320, 320, 0, .8), 0, .8);
        square.amp(squareAmp);
    }

    // margin depends on mouseX, keeping same distance throughout
    margin = map(mouseX, 0, width, 50, 150);
}

// 6 vertices, as a hexagon has
var nvertex = 6;
// angle we're working at (when we get to TWO_PI, we're done)
var angle = 0;

function hexagon(x, y, radius){
    // draw a hexagon at (x, y) using beginShape()
    beginShape();
    // find each vertex's specific location
    for(let i = 0; i < nvertex; i += 1){
        // finding exactly where the vertex at hand is located
        // sin tells us where the y coordinate is
        var vertexY = y + sin(angle) * radius;
        // cos tells us where the x coordinate is
        var vertexX = x + cos(angle) * radius;
        // now draw the vertex at hand
        vertex(vertexX, vertexY)
        // add the next portion of the angle
        angle += (360 / 6)
    }
    // connect beginning and end points
    endShape(CLOSE)
}

For this assignment, I added sonic features to my Project 3 – Dynamic Drawing. I added a sine wave oscillator, a sawtooth wave oscillator, and a square wave oscillator. The mappings for the amplitude and frequency of these oscillators are as follows:

  1. As the mouse moves from left to right, the sine wave amplitude increases and the sawtooth wave amplitude decreases.
  2. As the mouse moves from top to bottom on the top half of the screen, the sine wave frequency gets higher (scaling up to two octaves).
  3. As the mouse moves from top to bottom on the bottom half of the screen, the sawtooth wave frequency gets higher (scaling up to two octaves).
  4. As the average of mouseX and mouseY increases, so does the frequency of the square wave.
  5. The closer to the middle of the x-axis the mouse is, the louder the square wave becomes.

Note: the square wave can only be adjusted if the mouse is pressed!!

This process was very interesting in testing harmonic balances in my dynamic drawing, as manifested by these mappings. I certainly see a lot more dimensionality in my drawing now because of the added sound layers!