Project 10 – Sonic Story

sketch-beansDownload
//global variables
var frameCount = 0;
var sky;
var cat;
var sofa;
var clock;
var playlist;
var table;
var rain = [];
const numOfRaindrops = 100;

function preload() { 
  //preload images
  sky = loadImage("https://i.imgur.com/6PCHwrN.png");
  cat = loadImage("https://i.imgur.com/qApZuXa.png");
  sofa = loadImage("https://i.imgur.com/sESZJWa.png");
  clock = loadImage("https://i.imgur.com/hbfe35l.png");
  playlist = loadImage("https://i.imgur.com/wKD6EsD.png");
  table = loadImage("https://i.imgur.com/74DxEGR.png");

  //preload sounds
  clockSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clock.wav");
  playlistSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/playlist.wav");
  rainSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/rain-1.wav");
  catSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/cat.wav");
  // clockSound = loadSound("clock.wav");
  // playlistSound = loadSound("playlist.wav");
  // rainSound = loadSound("rain.wav");
  // catSound = loadSound("cat.wav");
}

function setup() {
  createCanvas(480, 400);
  useSound();
  frameRate(20);

  //rain
  rain_color = color(225, 235, 244);
  background_color = color(21, 39, 56);
  for (var i = 0; i < numOfRaindrops; i++) {
    rain[i] = new drawFallingRain();
  }
}

function soundSetup() {
  clockSound.setVolume(0.4);
  playlistSound.setVolume(0.7);
  rainSound.setVolume(0.5);
  catSound.setVolume(0.4);
}

function draw() {

  background(background_color);

  //gradient sky
  image(sky, 0, 0, width, 210);

  //rain
  for (var i = 0; i < rain.length; i ++) {
      rain[i].rainDisplay();
      rain[i].rainDrop();
  }

  //room wall
  fill(109, 115, 147);
  noStroke();
  rect(0, 0, 100, 600);
  rect(400, 0, 100, 600);
  rect(0, 210, 800, 300);
  fill(88, 87, 103);
  rect(-100, 340, 800, 300);

  //window
  fill(109, 115, 147);
  rect(100, 100, 300, 10);
  rect(250, 0, 10, 200);
  fill(71, 72, 90);
  rect(100, 200, 300, 15);
  fill(144);
  rect(100, 200, 300, 5);

  //clock
  image(clock, 385, 30, 90, 140);

  //sofa
  image(sofa, -55, 10, 420, 400);

  //cat
  image(cat, 290, 130, 80, 80);

  //table
  image(table, 340, 250, 150, 150);

  //playlist
  image(playlist, 375, 230, 80, 80)

    if (frameCount % 460 == 0 || frameCount % 460 == 1) {
        rainSound.stop();
        rainSound.play();
    }
    if (frameCount % 340 == 0 || frameCount % 340 == 1) {
        print("Starting playlist")
        playlistSound.stop();
        playlistSound.play();
    }
    if (frameCount % 200 == 0 || frameCount % 200 == 1) {
        catSound.stop();
        catSound.play();
    }
    if (frameCount % 160 == 0 || frameCount % 160 == 1) {
        clockSound.stop();
        clockSound.play();
    }
    frameCount += 1;
}

function drawFallingRain() {
    this.rx = random(0, 400); //width of the canvas
    this.ry = random(0, 400); //height of the canvas
    this.rain_size = random(0, 8);
    this.rain_rate = map(this.rain_size, 0, 10, 8, 10);
    this.rain_range = map(this.rain_size, 0, 10, 7, 18);

    this.rainDisplay = function() {
        var raindrop_size = map(this.rain_size, 0, 20, 0.7, 0.3);
        stroke(rain_color);
        strokeWeight(raindrop_size);
        line(this.rx, this.ry, this.rx, this.ry + this.rain_range);
    }
    this.rainDrop = function() {
        this.ry = this.ry + this.rain_rate;
        var dropsOfRain = map(this.rain_size, 0, 10, 2, 1); //indicates the raindrop rate
        this.rain_rate = dropsOfRain + this.rain_rate;
        if (this.ry >= 300) { //continue raining
            this.ry = random(-100, 0);
            this.rain_rate = map(this.rain_size, 0, 10, 3, 15);
        }
    }
}

For this project, I decided to illustrate a chill scenery of a room with a cat on a rainy night (or in the early morning). The four characters I used were: raining sound, clock ticking, LP playlist, and cat meowing. I found sounds on freesound.org and found some free png images on free sites like Imgur. At first I found it challenging with the instructions of how the sound works in both my server outside of WordPress and on WordPress as blog entry, but I managed to figure it out! This was super fun project to work with.

Project 10: Sonic Story

project 10 sketch copy


var windowOpen = true;
var pane;
var bird;
var windowNoise;
var alarm;
var framee = 0;
var cx;
var cy;
var secRadius;
var minRadius;
var hrRadius;
var cDiam;


function preload() {
    alarm=loadSound("http://localhost:8000/clock-ticking.wav");
    pane=loadSound("http://localhost:8000/star.wav");
    windowNoise=loadSound("http://localhost:8000/creaking.wav");
    bird=loadSound("http://localhost:8000/bird.wav");
}

function setup() {
    createCanvas(480, 480);
    useSound();
    frameRate(1);
}

function soundSetup() {
    alarm.setVolume(0.2);
    pane.setVolume(0.2);
    windowNoise.setVolume(0.3);
    bird.setVolume(0.2);
}

function draw() {
    background(225,207,166);
    drawScene();
    
    if (framee>7 & framee<=10) {
        drawBird();
        bird.play();
    }

    if (framee>1 & framee <=2) {
        alarm.play();
    }
    
    push();
    translate(354, 315);
    scale(0.15);
    drawAlarm();
    
    if (framee>1 & framee <=2) {
        pane.play();
    }

    noStroke();
    fill(255);
    drawPane();
    pop();

    //when window noises occur
    drawWindow();
    if (framee>6 & framee<=12){
        windowOpen=false;
    }
    if (framee==7){
        windowNoise.play();
    }
    if (framee>11){
        windowOpen=true;
    }
    if (framee==14){
        windowNoise.play;
    }

    framee++;
    if (framee>=22){
        framee=0;
    }
  
}

function drawAlarm() {
  
    //this alarm clock is from the p5js ref website
    var radius = min(width, height) / 2;
    secRadius=radius*0.71;
    minRadius=radius*0.6;
    hrRadius=radius*0.5;
    cDiam=radius*1.7;
  
    cx=width/2;
    cy=height/2;
  
    noStroke();
    fill(0);
    ellipse(cx, cy, cDiam+25, cDiam+25);
    fill(220);
    ellipse(cx, cy, cDiam, cDiam);
  
    var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;
    var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;
    var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;
  
    stroke(0);
    strokeWeight(1);
    line(cx, cy, cx+cos(s)*secRadius, cy+sin(s)*secRadius);
    strokeWeight(2);
    line(cx, cy, cx+cos(m)*minRadius, cy+sin(m)*minRadius);
    strokeWeight(4);
    line(cx, cy, cx+cos(h)*hrRadius, cy+sin(h)*hrRadius);
  
    strokeWeight(2);
    beginShape(POINTS);
    for (var i=0; i<360; i+=6){
         var angle=radians(i);
         var x=cx+cos(angle)*secRadius;
         var y=cy+sin(angle)*secRadius;
         vertex(x, y);
  }
  
  endShape();
}

function drawScene() {
    //window
    noStroke();
    fill(51,0,25);
    square(25, 25, 300);
    fill(153,204,255);
    square(50, 50, 250);
    
    //table
    fill(181,137,34);
    rect(330,390,150,50);
    
    //alarm clock stand
    fill(0);
    triangle(370,390,410,390,390,370);
  
    //cloud
    fill(255);
    ellipse(100, 100, 70, 60);
    ellipse(125, 125, 70, 50);
    ellipse(140, 110, 60, 55); 
    ellipse(160, 115, 60, 50); 

}

function drawPane() {
    var paneX = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];
    var paneY = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];
    var nPoints = paneX.length;

}

function drawBird() {
    fill(153,0,0);
    circle(227,175,20);
    rect(226,168,20,7);
    rect(226,175,20,7);    
}

function drawWindow() {
    stroke(51,0,25);
    strokeWeight(10);
    noFill();
    if (windowOpen == true) {
        line(175, 30, 175, 320);
        line(30, 175, 320, 175);
  }
    
    if (windowOpen == false) {
        line(175, 30, 175, 320);
        line(30, 175, 170, 175);
        line(210, 80, 320, 40);
        line(210, 80, 210, 360);
        line(210, 360, 320, 320);
        line(210, 220, 320, 180);
  }

}

The fours sounds I used were the clock ticking, the alarm ringing, the window opening and the birds chirping. I wanted to create a scene of how my mornings go, as I’m always awaken by an alarm clock and hear a lot of birds outside my window.

Project 10

Beginning sketches
sketch
/* Nami Numoto
 * Section A
 * mnumoto@andrew.cmu.edu
 * Project 10
 */

//tried to depict Baymax from Big Hero 6
//interacting with a spider
//and going from being confused to happy :)

var baymax;
var spider;
var question;

function preload() {
    baymax = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/ding.wav");
    spider = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fall.wav");
    question = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/questionmark.wav");
}

function soundSetup() {
    baymax.setVolume();
    spider.setVolume();
    question.setVolume();
}

function setup() {
    createCanvas(400, 400);
    background(225);
    frameRate(1);
    useSound();
}

function baymax() {
    stroke(0);
    strokeWeight(3);
    ellipseMode(CENTER);
    //drop shadow
    fill("grey");
    noStroke();
    ellipse(width / 2, 350, 218, 54);
    //legs
    stroke(0);
    fill("white");
    ellipse(170, 300, 54, 90);
    ellipse(230, 300, 54, 90);
    //arms
    ellipse(145, 212, 68, 162);
    ellipse(255, 212, 68, 162);
    //body
    ellipse(200, 200, 145, 218);
    //face
    ellipse(width / 2, 109, 145, 90);
    //mouth
    line(163, 112, 236, 112);
    //eyes
    fill(0);
    ellipse(163, 112, 9, 18);
    ellipse(236, 112, 9, 18);
}

function smile() {
    arc(width / 2, 112, 73, 20, 0, PI, OPEN);
}

function spider() {
    //spider
    push();
    line(width / 2, 0, width / 2, 180);
    fill(0);
    ellipse(width / 2, 182, 10, 14);
    ellipse(width / 2, 176, 8, 10);
    strokeWeight(1);
    for (i = 0; i <= 3; i++) {
        line(width / 2 + 4, 4 * i + 176, width / 2 + 8, 4 * i + 170);
        line(width / 2 + 8, 4 * i + 170, width / 2 + 12, 4 * i + 176);
        line(width / 2 - 4, 4 * i + 176, width / 2 - 8, 4 * i + 170);
        line(width / 2 - 8, 4 * i + 170, width / 2 - 12, 4 * i + 176);
        }
    pop();
}

function question() {
    text("?", 100, 100);
}

function draw() {
    if (frameCount > 0) {
    baymax();
    }
    if (frameCount >= 7) {
        spider();
        spider.play();
      }
    if (frameCount >= 10) {
        question();
        question.play();
      }
    if (frameCount >= 9) {
        smile();
        baymax.play();
      }
    if (frameCount > 18) {
      frameCount === 1;
      }
}

Project 10: Sonic Story

sketch
//Julianna Bolivar
//jbolivar@andrew.cmu.edu
//Section D
//Sonic Story

var walkImage = [];  //stores chick images 
var walkHen = []; //stores hen images
var cornImg;
var angleCorn = 0;
var wheatImg;
var angleWheat = 0;
var snowImg = 0;
var snowY = 0;

var chirpingSound;
var cluckingSound;
var popSound;
var windSound;

function preload() {
    
    var filenames = []; //chick images
    filenames[0] = "https://i.imgur.com/Tfx9TC4.png";
    filenames[1] = "https://i.imgur.com/QahosbW.png";
    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]); 
    }

    var fileHen = []; //hen images
    fileHen[0] = "https://i.imgur.com/7p6gBTy.png";
    fileHen[1] = "https://i.imgur.com/CnvJ23d.png";
    for (var i = 0; i < fileHen.length; i++) {
        walkHen[i] = loadImage(fileHen[i]);
    } 
    //icon images
    cornImg = loadImage("https://i.imgur.com/5qLGEX6.png");
    wheatImg = loadImage("https://i.imgur.com/FjHLXeq.png");
    snowImg = loadImage("https://i.imgur.com/MnUy5ko.png");

    chirpingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/chirping.wav");
    cluckingSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clucking.wav");
    popSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/pop-1.wav");
    windSound = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/wind-1.wav");

}

function makeCharacter(cx, cy, cdx, cdy) {
    var c = {x: cx, y: cy, dx: cdx, dy: cdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
         }
    return c;
} 

function makeHen(hx, hy, hdx, hdy) {
    var h = {x: hx, y: hy, dx: hdx, dy: hdy,
             walkingRight: true, 
             imageNum: 0,
             stepFunction: stepHen,
             drawFunction: drawHen
         }
    return h;
}

function stepCharacter(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkImage.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
} 

function stepHen(){
    this.imageNum++;
    if (this.imageNum > 1){
        this.imageNum = 0;
    }
    
    if (this.imageNum>=walkHen.length){
        this.imageNum = 0;
    }
    
    if (this.y >= 650){
        this.y = 100;
    }

    if (this.x >= 550){ //start at right to flip
        this.walkingRight = !this.walkingRight;
        this.x = 50;
    }
    this.x += this.dx; //walk
}

function drawCharacter(){ //chicks
    if (this.walkingRight == true){
        image(walkImage[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkImage[this.imageNum], this.x, this.y);
        pop();
    } 
} 

function drawHen(){ //hen
    if (this.walkingRight == true){
        image(walkHen[this.imageNum], this.x, this.y);
    }
    else {
        push();
        translate(600, 0);
        scale(-1,1); //look at canvas from behind
        image(walkHen[this.imageNum], this.x, this.y);
        pop();
    } 
}

var character = [];
var hen = [];


function setup() {
    createCanvas(600,700);
    frameRate(5);
    imageMode(CENTER);
    createDiv("p5.dom.js library is loaded.");
    useSound();
    for (var i = 50; i <=450; i += 200){ //chicks
        character.push(makeCharacter(10, i, 5, 1)); 
    }
    for (var i = 50; i <=450; i += 200){ //hen
        hen.push(makeHen(10, i, 5, 1));
    }
}


function soundSetup() { // setup for audio generation
    chirpingSound.setVolume(0.3);
    cluckingSound.setVolume(0.5);
    popSound.setVolume(0.5);
    windSound.setVolume(0.5);
}


function draw() {
    background(135,206,235);
    //grass
    noStroke();
    fill(46,139,87);
    rect(0, 510, 600, 200);

    push();
    translate(200, 500);
    scale(0.2);
    for (var i = 0; i < 2; i++){ //call functions chicks
        character[i].stepFunction();
        character[i].drawFunction();
    }
    pop();
    
    if (frameCount >= 30){
    push(); //hens to right
    translate(300, 500);
    scale(0.2);
    for (var i = 0; i < 1; i++){ //call functions hen
        hen[i].stepFunction();
        hen[i].drawFunction();
    }
    pop();
}
    
    if (frameCount >= 50 & frameCount < 90){ //call corn
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleCorn)); //rotate corn
    angleCorn += 20;
    image(cornImg, 0, 0);
    }
    pop();

    if (frameCount >= 90 & frameCount < 130){
    push(); 
    translate(300, 300);
    scale(0.2);
    rotate(radians(angleWheat)); //rotate wheat
    angleWheat += 20;
    image(wheatImg, 0, 0); //3 wheats
    image(wheatImg, 300, 0);
    image(wheatImg, 600, 0);
    }
    pop();

    if (frameCount >= 130 & frameCount < 200){
    push(); 
    translate(10, 100);
    scale(0.1);
    for (var i = random(-10,10); i < 2000; i+=50){ //snow falls
    image(snowImg, i*10, snowY); 
    snowY += 5;
    }
    pop();
    }

    text("p5.js 15104 fall 2021", 10, 15);
    
    if (frameCount >= 1 & frameCount < 30){
        chirpingSound.play();
    }
    if (frameCount == 33){
        chirpingSound.stop();   
    }

    if (frameCount >= 30 & frameCount < 35){
        cluckingSound.play();
    }

    if (frameCount >= 50 & frameCount < 52){
        popSound.play();
    }
    if (frameCount == 52){
        popSound.stop();
    }

    if (frameCount >= 90 & frameCount < 92){
        popSound.play();
    }
    if (frameCount == 92){
        popSound.stop();
    }

    if (frameCount >= 130 & frameCount < 160){
        windSound.play();
    }
    if (frameCount == 160){
        windSound.stop();
    }
}

I made the pixel art in Illustrator. My animation is based off of a lullaby in Spanish called Los Pollitos Dicen. My rendition is kind of a silly, abstract version. My mom would sing this to me often when I was a child.

In Spanish it goes;
Los pollitos dicen pío, pío, pío
Cuando tienen hambre, cuando tienen frío
La gallina busca el maíz y el trigo
Les da la comida, y les presta abrigo
Bajo sus dos alas, acurrucaditos
Duermen los pollitos hasta el otro día

English Translation;
The chicks say pío, pío, pío
When they’re hungry, and when they’re cold
The hen looks for corn and wheat
She gives them food and warmth
Under her wings, the chicks are comfy
And to the next day, the chicks are asleep

Project-10: Sonic Story

My Project

//Chuong Truong;
//cbtruong;
//cbtruong@andrew.cmu.edu;
//Section B;

//The Overall Story of this program is that of fall;
//Leaves are falling off of trees, the sun is getting whiter;
//The air is getting frostier;
//And the birds are seen more actively flying;
//I included no custom sound and instead wanted to portray a scene;
//That was described with a song;


//initial empty array that will hold leaf objects;
var leaves = [];
//variables for the sun's green and blue values which change;
var sunG = 238;
var sunB = 82;
//initial empty array for birds;
var birds = [];

//function of the leaf object that allows it to fall;
function leafFall (){
    //stops each leaf from falling off the canvas;
    //if it has not reached that point, it will continue to fall until it does;
    if (this.f == true){
        if (this.y > height-17){
            this.y = height-5;
        }
        else {
            this.y += random(30, 60);
        }
    }
    //if met, this condition causes the leaf to fall;
    //this randomization occurs to allow for the tree and leaves to be more lifelike;
    //as not all leaves fall off immediately;
    else if (floor(random(200)) == 25){
            this.y += random(30);
            this.x += random(-15, 15);
            this.f = true;

        }
    return this.y;
}

//function that draws the leaves;
function drawLeaf(){
    //this switch and case allows for color variance for the leaves;
    //the colors are those of fall;
    switch(this.col){
      case 0: fill(237, 164, 23); break;
      case 1: fill(167, 159, 15); break;
      case 2: fill(233, 134, 4); break;
      case 3: fill(223, 57, 8); break;
      case 4: fill(201, 30, 10); break;
    }
    rectMode(CENTER);
    push();
    translate(this.x, this.y);
    rotate(radians(45));
    rect(0, 0, 15, 15);
    pop();
}

//function that makes leaves;
function leaf(lx, ly, cPreset){
    //the leaf object constructor;
    l = {x: lx, y: ly, orgY: ly, col: cPreset, f: false, 
        drawFunction: drawLeaf, fallFunction: leafFall};
    return l;
}

function makeLeavesOnTrees (x, y){
    //for loops create the leaves on the trees themselves;
    //the leaves' x and y are dependent on the tree's x and y;
    //the first row is 17 and then decreases by 1 as the row gets closer to the tree's x;
    //as the row gets closer, the leaves' initial x and y increase;

    //this variable allows the leaves to center as each row of them becomes less;
    //it is initalized again to allow for the top row to be centered correctly;
    //like it was before the nested for loops below change it;
    var centeringX = 80;

    //the starting number of leaves for each row
    var leavesRowNum = 17;

    //these nested for loops creates the leaves and gives them their inital x and y;
    //the inner loop creates the leaves for each row, giving them the x, y, and colorPreset;
    //the outer loop controls the leaves' y, as it decreases, a new row will not only be drawn;
    //but that row's total number of leaves decreases, and the centering of them is centered;
    //the loops repeat until only 5 leaves are left and they are closest to the tree's x and y;
    for (var j = 120; j > -10; j-= 10){
        for (var i = 0; i < leavesRowNum; i++){
        var l = leaf(x-centeringX + i*10, y-j, floor(random(5)));
        leaves.push(l);
    }
    //the leaves row number decreases to make each row have less leaves;
    leavesRowNum--;
    //the centering is decreased to make sure the row, as it becomes less in number;
    //is centered correctly to the tree's x;
    centeringX -= 5;
    }
}

//this function creates bird objects;
function bird (bx, by){
    //bird object constructor;
    b = {x: bx, y: by, orgY: by, flyFunction: birdFly, drawFunction: drawBird};
    return b;
}

//function that allows the bird to fly;
function birdFly (){
    this.x -= 10;
    if (this.x < 0){
        this.x = width - 20;
    }
    if (this.y > this.orgY + 20 ){
        this.y -= 5;
    }
    else {
        this.y += 5;
    }
}

//this draws the bird;
function drawBird(){
    fill(36, 143, 190);
    circle(this.x, this.y, 20);
    fill(30);
    circle(this.x, this.y, 5);
    fill(131, 67, 51);
    triangle(this.x-15, this.y, this.x - 10, this.y - 2, this.x - 10, this.y+2);
    stroke(0);
    line(this.x - 15, this.y, this.x - 10, this.y);
    fill(16, 123, 170);
    push();
    rectMode(CORNER);
    translate(this.x, this.y);
    rotate(270);
    rect(0+5, 0 - 12, 15, 10);
    rect(0+5, 0 + 4, 15, 10);
    pop();
}


function setup() {
    createCanvas(700, 500);
    frameRate(10);
    useSound();
    frameRate(3);

    //calls the makeLeavesOnTree function to create the leaves pattern;
    //on each tree dependent on the trees' location;
    makeLeavesOnTrees(125, 390);
    makeLeavesOnTrees(350, 390);
    makeLeavesOnTrees(575, 390);

    //calls the bird function and creates the bird objects;
    for (var i = 0; i < 7; i++){
         var bD = bird(random(100, 600), random(70, 120));
         birds.push(bD);
    }
}
//I kept the same sound setup from the assignment because I liked the sounds;
function soundSetup() { 
    osc = new p5.Oscillator();
    osc.amp(0.25);
    osc.setType('sine');
    osc.start();
}


function draw() {
    //this creates the background of a blue sky and  green grass;
    background(154, 211, 222);
    noStroke();
    rectMode(CORNER);
    fill(24, 136, 39);
    rect(0, 475, 700, 5);
    fill(14, 146, 49);
    rect(0, 480, 700, 20);

    //calls the drawTree function to draw trees;
    drawTree(125, 390);
    drawTree(350, 390);
    drawTree(575, 390);
    
    //this for loop updates and draws each leaf in the leaves array;
    for (var i = 0; i < leaves.length; i++){
        var l = leaves[i];
        l.fallFunction();
        l.drawFunction();
    }
    
    //calls the clouds function to make clouds;
    drawClouds(125, 80);
    drawClouds(325, 130);
    drawClouds(525, 105);

    //draws the sun;
    //this if statement allows for the sun to slowly change colors;
    if (!(sunG == 250 & sunB == 193)){
        sunG += 1.2/5;
        sunB += 11.1/5;
    }
    noStroke();
    fill(255, sunG, sunB);
    circle(600, 75, 100);
    print(leaves.length);

    //draws the birds;
    for (var o = 0; o < birds.length; o++){
        var b = birds[o];
        b.flyFunction();
        b.drawFunction();
    }

    //I turned the code from the assignment into a function;
    musicPlayer(pitches, durations);
}

//function that draws the trees without the leaves;
function drawTree (x, y){
    fill(191, 75, 25);
    rectMode(CENTER);
    rect(x, y, 20, 205);
    push();
    translate(x - 40, y - 40);
    rotate(radians(-30));
    rect(0, 0, 10, 150);
    pop();
    push();
    translate(x + 40, y - 40);
    rotate(radians(30));
    rect(0, 0, 10, 150);
    pop();
    push();
    translate(x - 30, y - 70);
    rotate(radians(-30));
    rect(0, 0, 8, 100);
    pop();
    push();
    translate(x + 30, y - 70);
    rotate(radians(30));
    rect(0, 0, 8, 100);
    pop();
    push();
    translate(x - 20, y - 90);
    rotate(radians(-30));
    rect(0, 0, 5, 80);
    pop();
    push();
    translate(x + 20, y - 90);
    rotate(radians(30));
    rect(0, 0, 5, 80);
    pop();
    push();
    translate(x - 5, y - 100);
    rotate(radians(-30));
    rect(0, 0, 3, 60);
    pop();
    push();
    translate(x + 5, y - 100);
    rotate(radians(30));
    rect(0, 0, 3, 60);
    pop();
    rect(x, y - 105, 2, 40);
}

//this function creates the clouds and draws them;
function drawClouds (x, y){
    fill(243, 242, 231);
    ellipse(x, y, 80, 50);
    ellipse(x + 20, y + 10, 80, 40);
    ellipse(x - 40, y + 10, 80, 30);
    ellipse(x - 10, y + 20, 70, 50);
}

//I used the same code from the assignments to make the music;

//arrays for the pitches and durations;
//also count variables for the index and frameCount;
//finally, the boolean rest is added to account for rests in the music;

//I changed the pitches and went with a simple 1 beat per note;
var pitches = [ 64, 64, 62, 64, 64, 62, 0, 62, 64, 66, 65, 67, 65, 0,
  60, 60, 62, 66, 65, 64, 62, 68, 68, 65, 64, 62, 62 ];
var durations = [ 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1];
var indexTracker = 0;
var frameCount = 0;
var rest = false;

//I turned the code that creates the music with different notes and beat durations into a function;
//the function takes a note array and a corresponding note duration array;
function musicPlayer (noteArray, noteDurationArray){

    //code for the piano to play;
    //this sets the frequencies of the oscillator to the MIDI pitches;
    osc.freq(midiToFreq(noteArray[indexTracker]));
    
    //checks for when the note's duration is over and acts accordingly;
    if (frameCount > noteDurationArray[indexTracker]){
        //this checks for whether the tune has been completely played;
        //if it has been, then the program and oscillator ends;
        if (indexTracker + 1 == noteArray.length) {
            //print(frameCount);
            //print(indexTracker);
            osc.stop();
            noLoop();
        }
        //if it has not been completely played, then the next note will play;
        //with the frameCount reset to 0;
        else {
        print(frameCount);
        indexTracker++;
        //after the indexTracker is increased;
        //it checks to see if the new note is a rest;
        //if it is, then it deals according;
        //it also turns on the oscillator after a rest;
        if (noteArray[indexTracker] != 0){
            if (rest == true) {
            osc.start();
            rest = false;
                }
            }
        else if (noteArray[indexTracker] == 0){
            rest = true;
            osc.stop();
            }
        }
        frameCount = 0;
    }
    else {
        frameCount++;
    }
    print(noteArray[indexTracker]);
}

Instead of making 4 sounds, I used the same code from the assignments to make a song that I felt fit what I wanted to show, a scene of Fall. That scene has birds flying, leaves falling, and a sun that becomes whiter and whiter to fit the upcoming Winter.

Sonic Story : frog in the rain

file

//Story:
//There is a frog sitting on the ground who waves at you.
//You can here rain and frogs croaking in the background.
//a rain cloud appears and soon the frog stops waving
//as the rain cloud moves across the screen, thunder strikes and makes the frog blush

var m = 13; // for my measurement ration out of 13
var f = 220; //frog size
var thunder;
var raining;
var frog;

function preload() {
   frog = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/frogs.wav");
   raining = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/rain.wav");
   thunder = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/thunderstorm.wav");
}

function soundSetup() { // setup for audio generation
    frog.setVolume(1.3);
    raining.setVolume(0.7);
    thunder.setVolume(5);
}

function setup() {
    createCanvas(400, 400);
    frameRate(1);
    useSound();
}

function froggie(){
    translate(90,170);
    strokeWeight(5);
    fill(168, 239, 154);
    beginShape(); //measurements are by #/13 because my reference was 13 x 13 roughly
    curveVertex((11.4 / m) * f, (12.4 / m) * f);//1
    curveVertex((11.4 / m) * f, (12.4 / m) * f);//1
    curveVertex((12.5 / m) * f, (9.2 / m) * f);//2
    curveVertex((9.4 / m) * f, (2.5 / m) * f);//4 (skips 3 did not use point)
    curveVertex((8.9 / m) * f, (.5 / m) * f);//5
    curveVertex((8.1 / m) * f, (.1 / m) * f);//6
    curveVertex((7.4 / m) * f, (.5 / m) * f);//7
    curveVertex((6 / m) * f, (.4 / m) * f);//8
    curveVertex((4.6 / m) * f, (.5 / m) * f);//9
    curveVertex((3 / m) * f, (.2 / m) * f);//10
    curveVertex((1.5 / m) * f, (3 / m) * f);//11
    curveVertex((2.3 / m) * f, (5.3 / m) * f);//12
    curveVertex((2 / m) * f, (6.5 / m) * f);//13
    curveVertex((1.9 / m) * f, (7.5 / m) * f);//13.5 (new point)
    curveVertex((2 / m) * f, (9 / m) * f);//14
    curveVertex((2.2 / m) * f, (9.7 / m) * f);//15
    curveVertex((1.4 / m) * f, (10.4 / m) * f);//15.5 (new point)
    curveVertex((.8 / m) * f, (10.8 / m) * f);//16
    curveVertex((.2 / m) * f, (10.5 / m) * f);//17
    curveVertex((.8/ m) * f, (12.4 / m) * f);//18
    curveVertex((6.5/ m) * f, f);//19
    endShape(CLOSE);
    
    noFill(); 
    beginShape();
    curveVertex((3.8 / m) * f,(1.9 / m) * f);
    curveVertex((3.8 / m) * f,(1.9 / m) * f);
     curveVertex((4.2 / m) * f,(1.95 / m) * f);
    curveVertex((5 / m) * f,(1.7 / m) * f);
     curveVertex((5.8 / m)*f,(1.95 / m) * f);
    curveVertex((6.2 / m)*f,(1.9 / m) * f);
    curveVertex((6.2 / m)*f,(1.9 / m) * f);
    endShape();

    beginShape(); // arm on left
    curveVertex((2.3 / m) * f, (9.6 / m) * f);
    curveVertex((2.3 / m) * f, (9.6 / m) * f);
    curveVertex((2.5 / m) * f, (10.7 / m) * f);
    curveVertex((3.3 / m) * f, (11.8 / m) * f);
    curveVertex((3.5 / m) * f, (9.2 / m) * f);
    curveVertex((3.5 / m) * f, (9.2 / m) * f);
    endShape();

    beginShape(); // foot on right
    curveVertex((8 / m) * f, (12.9 / m) * f);
    curveVertex((8 / m) * f, (12.9 / m) * f);
    curveVertex((7.6 / m) * f, (11 / m) * f);
    curveVertex((8.4 / m) * f, (11.4 / m) * f);
    curveVertex((8.8 / m) * f, (10.6 / m) * f);
    curveVertex((9.7 / m) * f, (10.5 / m) * f);
    curveVertex((9.7 / m) * f, (10.5 / m) * f);
    endShape();
}

function arm1() { //wave arm
    strokeWeight(5);
    noFill(); 
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (10.7 / m) * f);
    curveVertex((6.5 / m) * f, (11.8 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm2() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (9.7 / m) * f);
    curveVertex((6.5 / m) * f, (10.5 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm3() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.7 / m) * f, (9 / m) * f);
    curveVertex((6.5 / m) * f, (8.8 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm4() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((6 / m) * f, (7 / m) * f);
    curveVertex((6.5 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm5() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5 / m) * f, (7 / m) * f);
    curveVertex((5.7 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function arm6() { //wave arm
    beginShape(); // arm on left
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((5.5 / m) * f, (9.2 / m) * f);
    curveVertex((7.3 / m) * f, (7 / m) * f);
    curveVertex((8 / m) * f, (7 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    curveVertex((7.2 / m) * f, (9.2 / m) * f);
    endShape();
} 

function eyes1() {
    fill(0);
    ellipse((3 / m) * f, (1.2 / m) * f, 7, 10);
    ellipse((7.7 / m) * f, (1.2 / m) * f, 7, 10);
}

function eyes2() {
    arc((3 / m) * f, (1.2 / m) * f, 7, 10, 0, PI, CHORD);
    arc((7.7 / m) * f, (1.2 / m) * f, 7, 10, 0, PI, CHORD);
}

function eyes3() {
    rect((2.9 / m) * f, (1.1 / m) * f, 4, .05);
    rect((7.6 / m) * f, (1.1 / m) * f, 4, .05);
}

function blush(alpha) {
    push();
    translate(90,180);
    noStroke();
    fill(239, 101, 58, alpha);
    circle((2.5 / m) * f, (2.3 / m) * f, 30);
    circle((8 / m) * f, (2.3 / m) * f, 30);
    pop();
}

function cloud(b) { //b is x movement of cloud
    translate(-90, -180);
    fill(240);
    strokeWeight(0);
    beginShape();
    vertex(-50 + b, 100);
    vertex(-50 + b, 100);
    vertex(-150 + b, 100);
    curveVertex(-170 + b, 90);
    curveVertex(-165 + b, 85);
    curveVertex(-170 + b, 50);
    curveVertex(-75 + b, 80);
    curveVertex(-55 + b, 85);
    curveVertex(-45 + b, 90);
    endShape(CLOSE);
}

function ground(){
    fill(124, 66, 55);
    ellipse(200, 430, 550, 300);
}

function drawEyes(){
    if(frameCount % 4 === 0) { //for eyes //frameCount starts @ 0 
        eyes1();
      }
    if(frameCount % 4 === 1 || frameCount % 4 === 3) {
        eyes2();
      }
    if(frameCount % 4 === 2){
        eyes3();
      }
}

function drawarm() {
    if(frameCount % 1 === 0 & frameCount <= 1 || frameCount >= 16){
        arm1();
      }
    if(frameCount < 3 & frameCount >= 2 || frameCount == 15){
        arm2();
      }
    if(frameCount < 4 & frameCount >= 3 || frameCount == 14){
        arm3();
      }
    if(frameCount == 5 || frameCount == 7 || frameCount == 9 || 
        frameCount == 11 || frameCount == 13) {
        arm4();
      }
    if(frameCount == 4 || frameCount == 12 || frameCount == 8) {  
        arm5();
      }
    if(frameCount == 6 || frameCount == 10) {
        arm6();
      }
}

function rain(b, c, d) { //c is x movement of rain, d is y movement 
    fill(58, 101, 239); 
    constrain(c, -50 + b, -150 + b);
    constrain(d, 100, 400);
    circle(-87.5 + c + b, -145 + d, 5);//need to use noise
}

function draw() {
    background(173, 220, 216);
    ground();
    fill(0);
    if(frameCount > 0){
    text("Froggie in rain", 10, 15);
    froggie();
    drawarm(); 
    drawEyes();
    frog.play();
    raining.play();
    }
    if(frameCount >= 7){
        cloud(-170 + (frameCount * 35));
        for(var i = 0; i <= frameCount; i++){
        rain(-170 + (frameCount * 35), random(-85,40), random(250,600)); 
        }
      }
    if(frameCount >= 18){
        blush(45 * frameCount);//take 5 frames to get to full opac
      }
    if(frameCount >= 17){
      thunder.play();
      }
    if(frameCount > 22){
      frameCount === 1;
      }
}


I ended up using a ton of curves to draw my frog, so I have a ton of sketches showing my progress. I first worked by making my animations and characters and then moving on to sound so I knew my code better and new if things were not working last second it would be the sound files.

the numbers and amount of curves
figuring out my statistics

Project: Sonic Story

luca sonic story

//Luca Cao
//lucacao@andrew.cmu.edu
//Section D

//Story: 
//pan put on stove. Sound 1
//Gas starts. Sound 2
//Steak cooks on pan and sizzle. Sound 3
//eats steak. Sound 4

var pan = {x:200,y:400,d:100,r:73,g:80,b:87,
            hx:200,hy:480,hw:15,hh:70,dy:20};//object pan
var stv = {x:200,y:200,d:150,r:33, g:37, b:41};//object stove
var stk = {x:200,y:200,w:40,h:60,r:220,g:24,b:54,dy:30};//object steak
var metal;
var gas;
var steak;
var eat;

function preload(){
    metal = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/metal.wav");
    gas = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/gas1.wav");
    steak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/steak.wav");
    eat = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/eat.wav");

}

function soundSetup(){
    metal.setVolume(5);
    gas.setVolume(0.5);
    steak.setVolume(1);
    eat.setVolume(2);
}

function setup() {
    createCanvas(400, 400);
    noStroke();
    frameRate(2);
    useSound();
}

function draw() {
    background(255, 243, 176);

    //platform
    push();
    fill(173, 181, 189);
    rect(0,0,400,400);
    fill(108, 117, 125);
    rect(0,320,400,90);
    pop();

    //controls
    push();
    if (pan.y <= 350){
        fill(0,255,0);
        ellipse(300,350,10,10);
        ellipse(350,350,10,10);
    }
    pop();

    //stove
    push();
    fill(stv.r,stv.g,stv.b);
    ellipse(stv.x,stv.y,stv.d,stv.d);

    if (pan.y <= 300){
        stv.r = 200;
        stv.g = 0;
        stv.b = 0;
        gas.play();
    }
    pop();

    //pan
    push();
    rectMode(CENTER);
    fill(pan.r,pan.g,pan.b);
    ellipse(pan.x,pan.y,pan.d,pan.d);
    rect(pan.hx,pan.hy,pan.hw,pan.hh);
    pan.y = pan.y - pan.dy
    pan.hy = pan.hy - pan.dy

    if (pan.y <= 200){
        gas.stop();
        pan.dy = 0; 
    }
        //pan.hy = 280
    
    pop();


    //steak
    if (frameCount >= 15){
        fill(stk.r,stk.g,stk.b);
        ellipse(stk.x,stk.y,stk.w,stk.h);
        steak.play();
        

        if (frameCount >= 20){
            stk.r = 157;
            stk.g = 2;
            stk.b = 8;

            if (frameCount >= 25){
                stk.r = 106;
                stk.g = 4;
                stk.b = 15;

                if (frameCount >= 35){
                    stk.r = 80;
                    stk.g = 6;
                    stk.b = 23;
                    stk.y = stk.y - stk.dy;
                    steak.stop();

                    if (frameCount >= 45){
                        eat.play();
                    }

                    if (frameCount >= 50){
                        eat.stop();
                        background(0);
                        noLoop();
                    }
                }
            }
        }
    }
}

I created the story of cooking a steak. I started by animating all my visual assets and making sure that they appear at the right time. After that, I added sound into my code based on the position of the assets, as well as the frame count. I stored all the values on my characters in object form, which helped me to better manipulate them. During the process, I had difficulties preloading sounds into my code and I later realized that I used the wrong template for my code. I enjoyed making this project because, besides visual interaction, I also get to experiment with sonic interaction and make the outcome more engaging.

Project 09: Computational Portrait

For this project, I wanted to create an interactive portrait. I was inspired by Ryan Alexander’s work and wanted to have the portrait show up based on where you clicked your mouse. I wasn’t able to get that working fully, but I still think the final product is pretty cool as the way the portrait shows up changes based on where you click the mouse. I also added randomness to each pixel width and height to make the portrait more animated.

Final portrait
beginning screen
image showing up

sketchDownload

//Catherine Liu
//jianingl_andrew.cmu.edu
//Section D
//project_09

//image shows up in pixels and spreads out on canvas

var img;
var xStart; //stores mouseX
var yStart; //stores mouseY
var click = true; //checks for mousePressed and removes text
var radianSize = 0; //increases area of expansion
var clickCol = false; //checks color of background

function preload() {
    img = loadImage("https://i.imgur.com/mzVFTDQ.jpg");
}
function setup() {
    img.resize(img.width/2, img.height/2);
    createCanvas(img.width, img.height);
    frameRate(50);
    print (img.width/2);
    print(img.height/2)
}

function draw() {

    //redraws background every mousePressed
    if (clickCol) {
        fill(203, 195, 227);
        rect(0,0,width,height);
        clickCol == false;
    }
    //sets up text that only shows up at beginning
    if(click) {
        background(203, 195, 227)
        push();
        fill(255);
        textAlign(CENTER);
        textSize(20)
        text("Click anywhere to draw image",width/2, height/2)
        pop();
    }
    pixelExpand();
}


function pixelExpand() {
    for (var vert = yStart; vert < radianSize; vert += 3) {
         for (var hor = xStart; hor < radianSize; hor += 3) {
            noStroke();

            //expands right downwards
            var c = img.get(hor, vert); 
            fill(c);
            ellipse(hor, vert, random(5), random(5));

            //expands right upwards
            var c2 = img.get(hor, height-vert); 
            fill(c2);
            ellipse(hor, height-vert, random(5), random(5));

            //expands left upwards
            var c3 = img.get(width-hor, height-vert);
            fill(c3);
            ellipse(width-hor, height-vert, random(5), random(5));

            //expands left downwards
            var c4 = img.get(width-hor, vert);
            fill(c4);
            ellipse(width-hor, vert, random(5), random(5));
        }
    }
    radianSize += 5; //increase expansion size
}

//returns starting point for pixels to show
function mousePressed() {
    radianSize = 0;
    clickCol = true;
    click = false; //text disappears
    xStart = constrain(mouseX, 0, width/4);
    yStart = constrain(mouseY, 0, height/4);
}

LO: 09

For this week’s Looking Outwards, I wanted to talk about Vera Molnar, who is regarded as a pioneer of computer generative art and is one of the first women artists to use computers in her practice. Particularly, I was drawn to her piece “(Dés-)Ordres”. What caught my eye initially were the contrasting colors used in different parts of the image, pulling my eye around. This contrast between order and disorder amongst the different layered squares also creates the impression of movement as if the squares are vibrating against one another. Surprisingly, this image was generated with a computer, where Molnar changed the parameters of her algorithm to randomly disrupt the regularity of the concentric squares.

Molnar was born in Hungary in 1924 and studied art history and aesthetics at the Budapest College of Fine Arts. From as early as 1959, she began experimenting with the concept of algorithms or “machine imaginaire” where an image can be created by following a set of pre-ordained compositional rules. In 1968, she begin using computers and plotters to make her paintings and drawings, creating a variety of algorithms iterating simple geometric shapes and geometrical themes.

Vera Molnar explaining her work