Category: SectionD

LO: Societal Impact of Digital Art

For this week’s blog, I read the article “How Artists Can Bridge the Digital Divide and Reimagine Humanity” by Agnes Chavez. The article talks about how art, technology, and science can become tools to increase digital literacy. Chavez categorized the digital divide into “first-level” and “second-level” and stated that solving the problem on both levels is essential. The “first-level” is having affordable access to information and devices; the “second-level” gives people the necessary knowledge to become digital content producers. The PASEO festival is an example that describes how art and technology can support learning and create a positive attitude towards digital media, which bridges the divide on the “second-level.” Later, the author also discussed creating shareable digital resources and implementing the STEMarts model to support access to digital content. The article outlined multiple methods to bridge the digital divide and highlighted the importance of digital technology in connecting people and communities across economic sectors, which I found inspiring.

Chavez, A., “how artists can bridge the digital divide and reimagine humanity”. “How Artists Can Bridge the Digital Divide and Reimagine Humanity”. Available at: https://www.arts.gov/impact/media-arts/arts-technology-scan/essays/how-artists-can-bridge-digital-divide-and-reimagine-humanity [Accessed November 12, 2021].

Women in AI: LO-11

https://ars.electronica.art/aeblog/en/2020/04/10/women-in-media-arts-ai/

I started off this week reading about women in media arts. The first video included on Gender Shades, I did not, sadly, get surprised by the context. What did surprise me however, was how the computer system was so wrong on identifying females of darker color; one as a person at all, and secondly, not even being able to identify their genders correctly. The digital world needs to grow to be neutral and inclusive, and if in testing there is a gap between recognizing people of gender and race, there is a problem. The computation itself is biased, but not by the machine by the programmers. I feel that sometimes testing can be overlooked when it seems to be working fine on individuals, but this is a flaw we see commonly not just in AI but in Women’s healthcare.

For the Women reclaiming AI videos I found the idea of the voice speaking system, that was similar to Alexa to be particularly interesting. I wonder where that could go if those types of questions could be asked by younger girls. Questions about womanhood that could be answered when they need help or clarification, I think, could be pretty revolutionary. I have never tried to ask my Alexa any of those types of questions, but I wonder how current AI on the market would answer. I never really considered how AI might be biased with speaking technology, but I could imagine that if anything, it probably holds the most bias.

 In the European Platform video I also thought it was interesting to consider how AI is imagined with blue, which is a very masculine color and how women can find themselves in that space. Something that I ran across recently when concerning women in coding was hearing about Margaret Hamilton and getting men on the moon. I feel that there is a lot of gender bias in her story and people refused to listen to her and asked her why she was even at NASA, when her programming helped get the astronauts home. She was very overlooked for her astounding work and I don’t think many people ever come across her name.

Landscape: Tulip Fields

I worked too hard on this project. I ended up drawing all of the images in my code on procreate, so I do not have many sketches except for some resizing issues.

Math on Bottom side
Trying to figure out tulip configuration

The code was easier to figure out than I thought, but because I decided to use so many elements it got repetitive fast, there are a few things I could have tried i think in ways of getting my stuff to show up more randomly, but because of the way I wrote my code I found that setting that up farther would have not been worth the time for the effect.

Drawing took a few days, but I really like my images.

a cat
very many tulips(color added with code)

Some of the math I had to do really made me think and I can’t quite decide if using images made this take longer or shorter to code.

sketchfile

var szex = 550; // x size for some images
var szey = 365; //y size for some images
var szex2 = 367.2; //x size for smaller img
var szey2 = 240; //y size for smaller img
var tulip = [];
var offset = 0;
var skys = [];
var mountains = [];
var airballoons = [];
var trees = [];
var windmillBottoms = [];
var birds = [];
var electric = [];
var bunnys = [];
var fullWind = [];
var treeLines = [];
var cats = [];



function preload() {
    flowerImg = loadImage("https://i.imgur.com/VSMWH0A.png");
    tree1Img = loadImage("https://i.imgur.com/s66n2RJ.png");
    mountainsImg = loadImage("https://i.imgur.com/FCSY9xA.png");
    birdImg = loadImage("https://i.imgur.com/2zN4jIk.png");
    windmillBottomImg = loadImage("https://i.imgur.com/xGOhbMn.png");
    electricWindmillImg = loadImage("https://i.imgur.com/0R2RKsz.png");
    airballoonImg = loadImage("https://i.imgur.com/HPmyDXQ.png");
    bunnyImg = loadImage("https://i.imgur.com/tOtLTev.png");
    fullWindmillImg = loadImage("https://i.imgur.com/EUCzk9P.png");
    treeLineImg = loadImage("https://i.imgur.com/ipeIQSL.png");
    catImg = loadImage("https://i.imgur.com/d9pAL7i.png");
    skyImg = loadImage("https://i.imgur.com/AykCYLx.png");
}



function tulips(tx) {
    var p = {x: tx, 
        right: tulipsRight,
        display: tulipsDisplay};
    return p;
}

function tulipsRight() {
    return this.x + 900;
}

function tulipsDisplay(tx) {
    flower2Img.resize(flower2Img.width - 100, flower2Img.height);
   image(flower2Img, this.x, 190, 900, 105);//left
}


function bird(bx) {
    var b = {x: bx, 
        right: birdRight,
        display: birdDisplay};
    return b;
}

function birdRight() {
    return this.x + szex2 + width * 9;
}

function birdDisplay(tx) {
   image(birdImg, this.x + 200, 0, 165.4, 100); //move faster across the screen
}



function airballoon(ax) {
    var a = {x: ax, 
        right: airballoonRight,
        display: airballoonDisplay};
    return a;
}

function airballoonRight() {
    return this.x + szex2 + width * 1.5;
}

function airballoonDisplay(tx) {
   image(airballoonImg, this.x, 110, szex2, szey2);
}



function sky(sx) {
    var s = {x: sx, 
        right: skyRight,
        display: skyDisplay};
    return s;
}

function skyRight() {
    return this.x + 500;
}

function skyDisplay(tx) {
   image(skyImg, this.x, 0, 500, 300);
}


function mountain(mx) {
    var  m = {x: mx, 
        right: mountainRight,
        display: mountainDisplay};
    return m;
}

function mountainRight() {
    return this.x + 827 + width * 5;
}

function mountainDisplay(tx) {
   image(mountainsImg, this.x - 20, -85, 827, 500);
}


function tree(tx) {
    var  t = {x: tx, 
        right: treeRight,
        display: treeDisplay};
    return t;
}

function treeRight() {
    return this.x + szex + width * 1.5;
}

function treeDisplay(tx) {
   image(tree1Img, this.x, 20, szex, szey);
}


function treeLine(tx) {
    var  t = {x: tx, 
        right: treeLineRight,
        display: treeLineDisplay};
    return t;
}

function treeLineRight() {
    return this.x + szex + width * 1.7;
}

function treeLineDisplay(tx) {
   image(treeLineImg, thisx, 25, szex, szey); //with mountains or without
}
   

function windmillBottom(wx) {
    var  w = {x: wx, 
        right: windmillBottomRight,
        display: windmillBottomDisplay};
    return w;
}

function windmillBottomRight() {
    return this.x + szex2 + width * 2.2;
}

function windmillBottomDisplay(tx) {
   image(windmillBottomImg, this.x + 150, 87, szex2, szey2);//dont show with mountain
}


function windmill(wx) {
    var  w = {x: wx, 
        right: windmillRight,
        display: windmillDisplay};
    return w;
}

function windmillRight() {
    return this.x + 248 + width * 3.2;
}

function windmillDisplay(tx) {
   image(fullwindmillImg, this.x + 20, 100, 248, 150);
}
 

function electricwindmill(wx) {
    var  w = {x: wx, 
        right: electricwindmillRight,
        display: electricwindmillDisplay};
    return w;
}

function electricwindmillRight() {
    return this.x + szex + width * 10.2;
}

function electricwindmillDisplay(tx) {
   image(electricWindmillImg, this.x , 5, szex, szey); //dont show with other windmills
}
    

function bunny(bx) {
    var  b = {x: bx, 
        right: bunnyRight,
        display: bunnyDisplay};
    return b;
}

function bunnyRight() {
    return this.x + szex2 + width * 7.3;
}

function bunnyDisplay(tx) {
   image(bunnyImg, this.x, 130, szex2, szey2);
}


function cat(cx) {
    var  c = {x: cx, 
        right: catRight,
        display: catDisplay};
    return c;
}

function catRight() {
    return this.x + width * 5.5;
}

function catDisplay(tx) {
   image(catImg, this.x + 200, 160, 206.75, 125);
}





function setup() {
    createCanvas(480, 280);
    var sk = sky(1);
    skys.push(sk);
    var tul = tulips(1);
    tulip.push(tul);
    var ar = airballoon(1);
    airballoons.push(ar);
    var mount = mountain(1);
    mountains.push(mount);
    var bunn = bunny(1);
    bunnys.push(bunn);
    var kitten = cat(1);
    cats.push(kitten);
    var bid = bird(1);
    birds.push(bid);
    var tr = tree(1);
    trees.push(tr);
    var tre = treeLine(1);
    treeLines.push(tre);
    var wmb = windmillBottom(1);
    windmillBottoms.push(wmb);
    var fw = windmill(1);
    fullWind.push(fw);
    var ew = electricwindmill(1);
    electric.push(ew);
}




function draw() {
    noStroke();
    //SKY
    for (var i = 0; i < skys.length; i++) {
        var s = skys[i];
        image(skyImg, s.x - offset, 0, 500, 400);//left
    }
    // clean up statement
    if (skys.length > 0 & skys[0].right() < offset) {
        skys.shift();
    }
    // make a new sky
    var lastSky = skys[skys.length-1];
    if (lastSky.right() - offset < width) {
        var s = sky(lastSky.right()); 
        skys.push(s);
}


//MOUNTAIN
     for (var i = 0; i < mountains.length; i++) {
        var m = mountains[i];
        image(mountainsImg, m.x - offset, -78, 827, 500);
    }
    // make a new mountain
    var lastMountain = mountains[mountains.length-1];
    if (lastMountain.right() - offset < width) {
        var m = mountain(lastMountain.right()); 
        mountains.push(m);
}


//TREE
for (var i = 0; i < trees.length; i++) {
        var tr = trees[i];
        image(tree1Img, tr.x - offset, 23, szex, szey);
    }
    // clean up statement
    if (trees.length > 0 & trees[0].right() < offset) {
        trees.shift();
    }
    // make a new tree 
    var lastTree = trees[trees.length-1];
    if (lastTree.right() - offset < width) {
        var tr = tree(lastTree.right()); 
        trees.push(tr);
}
   
   //TREELINE
for (var i = 0; i < treeLines.length; i++) {
        var tre = treeLines[i];
        image(treeLineImg, tre.x - offset, 25, szex, szey); //with mountains or without
    }
    // clean up statement
    if (treeLines.length > 0 & treeLines[0].right() < offset) {
        treeLines.shift();
    }
    // make a new treeline
    var lastTreeLine = treeLines[treeLines.length-1];
    if (lastTreeLine.right() - offset < width) {
        var tre = treeLine(lastTreeLine.right()); 
        treeLines.push(tre);
} 



//WINDMILLBOTTOM
    for (var i = 0; i < windmillBottoms.length; i++) {
        var wnd = windmillBottoms[i];
        image(windmillBottomImg, wnd.x - offset, 87, szex2, szey2);
    }
    // clean up statement
    if (windmillBottoms.length > 0 & windmillBottoms[0].right() < offset) {
        windmillBottoms.shift();
    }
    // make a new windmill
    var lastwindmillBottom = windmillBottoms[windmillBottoms.length-1];
    if (lastwindmillBottom.right() - offset < width) {
        var wnd = windmillBottom(lastwindmillBottom.right()); 
        windmillBottoms.push(wnd);
}
    


//ELECTRIC WINDMILL
for (var i = 0; i < electric.length; i++) {
        var ew = electric[i];
        image(electricWindmillImg, ew.x - offset, 5, szex, szey); //dont show with other windmills
    }
    // clean up statement
    if (electric.length > 0 & electric[0].right() < offset) {
        electric.shift();
    }
    // make a new windmill
    var lastElectricWindmill = electric[electric.length-1];
    if (lastElectricWindmill.right() - offset < width) {
        var ew = electricwindmill(lastElectricWindmill.right()); 
        electric.push(ew);
}
    

//WINDMILL
for (var i = 0; i < fullWind.length; i++) {
        var full = fullWind[i];
         image(fullWindmillImg, full.x - offset, 100, 248, 150); //can be anytime show up
    }
    // clean up statement
    if (fullWind.length > 0 & fullWind[0].right() < offset) {
        fullWind.shift();
    }
    // make a new windmill
    var lastWindmill = fullWind[fullWind.length-1];
    if (lastWindmill.right() - offset < width) {
        var full = windmill(lastWindmill.right()); 
        fullWind.push(full);
}



//AIRBALLOONS
    for (var i = 0; i < airballoons.length; i++) {
        var air = airballoons[i];
        image(airballoonImg, air.x - offset, 110 - offset/10, szex2, szey2);
    }
    // clean up statement
    if (airballoons.length > 0 & airballoons[0].right() < offset) {
        airballoons.shift();
    }
    // make a new balloom
    var lastAirballoon = airballoons[airballoons.length-1];
    if (lastAirballoon.right() - offset < width) {
        var air = airballoon(lastAirballoon.right()); 
        airballoons.push(air);
}

//background for tulips
for(var i = 0 ; i < width; i ++){
    fill(253, 218 - offset / 75, 42);
    rect(0, 195, 480, 100);
}
//slight change every time offset increases so slight won't notice till big change




//TULIPS
    for (var i = 0; i < tulip.length; i++) {
        var t = tulip[i];
        image(flowerImg, t.x - offset, 190, 900, 105);//left
    }

    // clean up statement
    if (tulip.length > 0 & tulip[0].right() < offset) {
        tulip.shift();
    }

    // make a new tulip
    var lastTulip = tulip[tulip.length-1];
    if (lastTulip.right() - offset < width) {
        var t = tulips(lastTulip.right()); 
        tulip.push(t);
}





//BIRD ??NEEDS FIX
 for (var i = 0; i < birds.length; i++) {
        var bids = birds[i];//need to change spawn pnt
        image(birdImg, bids.x - (offset + offset), 0, 165.4, 100); //move faster across the screen
    }
    // clean up statement
    if (birds.length > 0 & birds[0].right() < offset) {
        birds.shift();
    }
    // make a new bird //make less often
    var lastBird = birds[birds.length-1];
    if (lastBird.right() - (offset + offset) < width) {
        var bids = bird(lastBird.right()); 
        birds.push(bids);
}





    //BUNNY
 for (var i = 0; i < bunnys.length; i++) {
        var buns = bunnys[i];
        image(bunnyImg, buns.x - offset, 130, szex2, szey2);
    }
    // clean up statement
    if (bunnys.length > 0 & bunnys[0].right() < offset) {
        bunnys.shift();
    }
    // make a new rabbit //make less often
    var lastBunny = bunnys[bunnys.length-1];
    if (lastBunny.right() - offset < width) {
        var buns = bunny(lastBunny.right()); 
        bunnys.push(buns);
}




    //CAT
 for (var i = 0; i < cats.length; i++) {
        var kittens = cats[i];
        image(catImg, kittens.x - offset , 160, 206.75, 125);
    }
    // clean up statement
    if (cats.length > 0 & cats[0].right() < offset) {
        cats.shift();
    }
    // make a new cat //make less often
    var lastCat = cats[cats.length-1];
    if (lastCat.right() - offset < width) {
        var kittens = cat(lastCat.right()); 
        cats.push(kittens);
}



    offset ++;
}

Project 10: Sonic Story

For this project, I made 2 fish who are lovers that swim randomly around an aquarium looking for each other. When they meet, they fall in love again and the supportive crab in the corner claps for them and a love song plays.

sketchDownload

//Catherine Liu
//jianingl@andrew.cmu.edu
//Section D
//project 10

//two fishes swimming around tank (bump sound when they hit the sides)
//when they bump into each other they fall in love (song plays)
//crab clapping for them (clapping sound)
//house bubbles turn into hearts (bubbling sound)

// use http://localhost:8000/ to run html

//variables for pink fish
var x1 = 50;
var y1 = 50;
var dx1 = 50;
var dy1 = 20;

//variables for green fish
var x2 = 300;
var y2 = 300;
var dx2 = 40;
var dy2 = 30;

var meet = false; //checks to see if fish meet
var crabClaw = 1; //keeps track of frame for crab claw clapping
var songCount = 0; //counter for song played
var bubbleArrayX = []; //x value for each bubble
var bubbleArrayY = []; //y value for each bubble
var heartArrayX = []; //x value for each heart
var heartArrayY = []; //y value for each heart

//sound variables 
var bump;
var bubbles;
var heart;
var clap;

function preload() {
    bump = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bump.mp3");
    bubbles = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/bubble-4.wav");
    heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/lovesong.mp3");
    clap = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/clap.wav");
}

function setup() {
    noStroke();
    createCanvas(600, 400);
    useSound();
    frameRate(10);

    //sets up bubble and heart arrays
    for (i = 170; i > 50 ; i-=15) {
        bubbleArrayX.push(400 + random(-10,10));
        bubbleArrayY.push(i);
        heartArrayX.push(400 + random(-10,10));
        heartArrayY.push(i);
    }

}

function soundSetup() { 
    bump.setVolume(0.2);
    bubbles.setVolume(0.2);
    clap.setVolume(0.1);
    heart.setVolume(0.3)

}

function draw() {
    background(65,105,225);
    fill(255,250,205);
    rect(0,height-50,width,height);


    drawCrab();
    drawHouse();

    //if fish meet, play song and stop bump sounds
    if (meet == true) {
        bump.stop();
        playSong();
    }

    //if fish have not met, keep moving them
    if (meet == false) {
        x1 += dx1;
        y1 += dy1;
    }
    fill(255,182,193) //pink fish
    drawFish(x1,y1,dx1);
    dx1 += random(-5,5);
    dy1 += random(-5,5);
    if (x1 < 40) {
        bump.play();
        dx1 = -dx1;
    }
    if (x1 > width - 40) {
        bump.play();
        dx1 = -dx1;
    }
    if (y1 < 40) {
        bump.play();
        dy1 = -dy1;
    }
    if (y1 > height - 75) {
        bump.play();
        dy1 = -dy1;
    }

   if (meet == false) {
        x2 += dx2;
        y2 += dy2;
    }
    fill(173,255,47) //green fish
    drawFish(x2,y2,dx2);
    dx2 += random(-5,5);
    dy2 += random(-5,5);
    if (x2 < 40) {
        bump.play();
        dx2 = -dx2;
    }
    if (x2 > width - 40) {
        bump.play();
        dx2 = -dx2;
    }
    if (y2 < 40) {
        bump.play();
        dy2 = -dy2;
    }
    if (y2 > height - 75) {
        bump.play();
        dy2 = -dy2;
    }

    meetUp(25); //checks if fish have met
}

function drawFish(x, y, dx) {
    ellipse(x, y, 60, 40); //fish body

    //checks which direction fish is facing to draw tail
    if (dx > 0) {
        if (meet == true) { //if fish met, draw smile
            push();
            fill(0);
            circle(x+20,y,10);
            pop();

            push();
            noFill();
            stroke(2);
            arc(x+10, y+7, 10, 10, 0, PI);
            pop();
        } else { //no smile
            push();
            fill(0);
            circle(x+20,y,10);
            pop();
        }
        triangle(x-30, y, x-50, y-10, x-50, y+10); //fish tail

    } if (dx < 0) {
        if (meet == true) { //if fish met, draw smile
            push();
            fill(0);
            circle(x-20,y,10);
            pop();

            push();
            noFill();
            stroke(2);
            arc(x-10, y+7, 10, 10, 0, -PI);
            pop();
        } else { //no smile
            push();
            fill(0);
            circle(x-20,y,10);
            pop();
        }
        triangle(x+30, y, x+50, y-10, x+50, y+10); //fish tail
    }

}

//checks if fish have "met" by checking distance between them <= 0 and draws heart
function meetUp(size) {
    if (dist(x1, y1, x2, y2) <= 40) {
        //draws heart
        fill("red")
        var xPos = x1;
        if ((y1-70) < 10) {
            var yPos = y1 + 70;
        } else {
            var yPos = y1 - 70;
        }
        beginShape();
        vertex(xPos, yPos);
        bezierVertex(xPos - size / 2, yPos - size / 2, xPos - size, yPos + size / 3, xPos, yPos + size);
        bezierVertex(xPos + size, yPos + size / 3, xPos + size / 2, yPos - size / 2, xPos, yPos);
        endShape();

        meet = true; //change variable to true to show fish have met
    }
}

function drawCrab() {
    fill("orange");
    ellipse(100, height-80,80,50);
    circle(60,height-100,20);
    circle(140,height-100,20);
    arc(60,height-130, 50, 50, -(radians(30)), -HALF_PI);
    arc(150,height-130, 50, 50, -(radians(30)), -HALF_PI);
    push();
    noFill();
    strokeWeight(10);
    stroke("orange");
    arc(120, height-35, 80, 80, PI + QUARTER_PI, TWO_PI);
    arc(80, height-35, 80, 80, PI, PI + HALF_PI);
    pop();
    fill(0);
    circle(120,height-90, 8);
    circle(100,height-90, 8);

    //if fish have met, crab claps by drawing circles on top of arcs
    if (meet == true) {
        arc(100, height-80, 20, 20, 0, -PI);

        //alternating variable so crab claws open and close with every frame
        if (crabClaw == 1) {
            clap.play();
            fill("orange");
            circle(60, height-130,50,50);
            circle(150,height-130,50,50);
            crabClaw += 1;
        } else if (crabClaw == 2) {
            crabClaw = 1;
        }

    }

}

function drawHouse() {
    fill(160,82,45); //brown
    rect(width-200, height-170, 120,120);
    triangle(width-220,height-170,width-140,height-250,width-60,height-170);
    rect(width-200,height-230,20,80);
    fill(173,216,230); //light blue
    rect(width-160, height-110,40,60);
    fill(0); //black
    circle(width-155,height-70,5);
    fill(173,216,230); //light blue
    rect(width-180,height-150,20,20);
    rect(width-120,height-150,20,20);

    fill(224,255,255); //light cyan
    bubbles.play();

    //moving bubbles up the canvas by adding random dx and dy
    for (i = 0; i < bubbleArrayX.length; i++) {
        var randomDx = (random(-5,5));
        var randomDy = (random(-10,0));

        if (meet == false) { //if fish have not met, house bubbles
            bubbleArrayX[i] += randomDx;
            bubbleArrayY[i] += randomDy;
            //reset x and y position if bubble leaves canvas
            if (bubbleArrayY[i] <= 0) {
                bubbleArrayX[i] = 400 + random(-10,10);
                bubbleArrayY[i] = 150;
            }
            circle(bubbleArrayX[i], bubbleArrayY[i], 5)

        } else if (meet == true) { //if fish have met, house bubbles hearts
            heartArrayX[i] += randomDx;
            heartArrayY[i] += randomDy;
            var size = 10;
            fill("pink")
            beginShape();
            vertex(heartArrayX[i], heartArrayY[i]);
            bezierVertex(heartArrayX[i] - size / 2, heartArrayY[i] - size / 2, heartArrayX[i] - size, heartArrayY[i] + size / 3, heartArrayX[i], heartArrayY[i] + size);
            bezierVertex(heartArrayX[i] + size, heartArrayY[i] + size / 3, heartArrayX[i] + size / 2, heartArrayY[i] - size / 2, heartArrayX[i], heartArrayY[i]);
            endShape();
            //reset x and y position if heart leaves canvas
            if (heartArrayY[i] <= 0) {
                heartArrayX[i] = 400 + random(-10,10);
                heartArrayY[i] = 150;
            }
        }
    } 

}

//plays love song after fish meet
function playSong() {
    //only want song to play once so use counter
    if (songCount == 0) {
        heart.play();
        songCount += 1;
    } else {
        //do nothing
    }
}

Project 10: Animation

sketch

// gnmarino
// gia marino
// class section D

// the story is suppose to be up to your own interruptation.
// the main point is someone is trying to reach love and they can't so 
// a friend has to help them out. The concept is about how sometimes
// you need a friend's help even if it's a little thing

var rope; // rope swinging noise
var heart; // heart's voice
var char1; // 1st character's voice
var walking; // 2nd character's walking
var counter = 0; // counts the frames
var animationImages = []; // holds images for animation

function preload() {
    rope = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Rope-Sound.wav");
    heart = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/Heart.wav");
    char1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/character1noise.wav");
    walking = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/walking.wav")

    var imageNames = [];
    imageNames[0] = "https://i.imgur.com/ZP19uwT.jpg";
    imageNames[1] = "https://i.imgur.com/4Bl2ivM.jpg"
    imageNames[2] = "https://i.imgur.com/VaO2Qof.jpg"
    imageNames[3] = "https://i.imgur.com/tpxAt2V.jpg"
    imageNames[4] = "https://i.imgur.com/nkNrX5Y.jpg"
    imageNames[5] = "https://i.imgur.com/HEE2XA5.jpg"
    imageNames[6] = "https://i.imgur.com/7vkRyqN.jpg"
    imageNames[7] = "https://i.imgur.com/FOvHPju.jpg"
    imageNames[8] = "https://i.imgur.com/22f630s.jpg"
    imageNames[9] = "https://i.imgur.com/7bbhlOa.jpg"
    imageNames[10] = "https://i.imgur.com/Ke1o6Gb.jpg"
    imageNames[11] = "https://i.imgur.com/hnSXa9y.jpg"
    imageNames[12] = "https://i.imgur.com/HPLomd1.jpg"
    imageNames[13] = "https://i.imgur.com/ifo5g3u.jpg"
    imageNames[14] = "https://i.imgur.com/cedp6AC.jpg"
    imageNames[15] = "https://i.imgur.com/6XxqZ1u.jpg"
    imageNames[16] = "https://i.imgur.com/rhEs6bx.jpg"
    imageNames[17] = "https://i.imgur.com/o5VujYT.jpg"
    imageNames[18] = "https://i.imgur.com/9nXwcuh.jpg"
    imageNames[19] = "https://i.imgur.com/07qlded.jpg"
    imageNames[20] = "https://i.imgur.com/wH2NFj7.jpg"
    imageNames[21] = "https://i.imgur.com/qB6Ayi0.jpg"
    imageNames[22] = "https://i.imgur.com/AM8eMi3.jpg"
    imageNames[23] = "https://i.imgur.com/uOzyybS.jpg"
    imageNames[24] = "https://i.imgur.com/vnEhu5u.jpg"
    imageNames[25] = "https://i.imgur.com/SEA3Z8z.jpg"

    for (var i = 0; i < imageNames.length; i++){
        animationImages[i] = loadImage(imageNames[i]);
    }
}

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

function soundSetup() { // setup for audio generation
    rope.setVolume(0.5);
    heart.setVolume(0.5);
    char1.setVolume(0.5);
    walking.setVolume(0.5);
}

function draw() {

    // displays an image every frame
    image(animationImages[counter], 0, 0, 400, 500);

    // all the if statements state what frame each noise will play
    if (counter == 1 || counter == 11 || counter == 24) {
        char1.play();
    }
    if ( counter == 4 || counter == 25) {
        heart.play();
    }
    if (counter == 6) {
        rope.play();
    }
    if (counter == 13 || counter == 15) {
        walking.play();
    }

    counter ++

    // ends animation
    if (counter == animationImages.length+1) {
        background(0);
        noLoop();
    }
}

For my project this week I wanted to story to be interrupted however you wanted. So the actual story is quite simple but you could get many different means out of the animation. My four sounds were the heart’s voice, the rope moving, character 1’s voice, and character 2’s footsteps.

Project 10: Sonic Story

sketch

//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D

// Storyline: a mouse comes out of its hole, sees some cheese,
// then goes over to nibble on it. It sees the shadow of a cat,
// then scurries back to its hole.

var xPos; //x position of the mouse
var yPos; //y position of the mouse 
var timer=0; //for animation timing purposes
var yPosCat; //y position for cat shadow

function preload() {
    squeak = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/squeak.wav");
    aha = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/aha.wav");
    nibble = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/nibble.mp3");
    scream = loadSound("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/scream.wav");
}

function soundSetup() {
    squeak.setVolume(0.5);
    aha.setVolume(0.5);
    nibble.setVolume(0.5);
    scream.setVolume(0.5);
}

function setup() {
    createCanvas(600,400);
    frameRate(4); //speed of story
    xPos=(width/2)+180;
    yPos=(height/2)+78;
    yPosCat=600;
    rectMode(CENTER);
    noStroke();
    useSound();
}

function setting() {
    //wall
    background(240); //light gray
    fill(156,56,72); //red
    rect(width/2,25,width,100);

    //mouse hole
    fill(131,122,117); //lighter grayish brown for the hole wall
    rect((width/2)+90,(height/2)+50, 110,200, 80,80);
    fill(96,91,86); //grayish brown for the hole
    rect((width/2)+100,(height/2)+50, 100,200, 80,80);

    //floor
    fill(107,58,15); //brown
    rect(width/2,400,width,200);
}

function cheese() {
    fill(242,205,96); //yellow
    quad(100,350, 200,310, 200,235, 100,250);
    fill(242,232,99); //lighter yellow
    quad(100,350, 60,320, 60,240, 100,250);
    fill(228,186,62); //darker yellow
    triangle(60,240, 100,250, 200,235);

    //holes
    fill(242,205,96); //yellow
    ellipse(70,300,10,30);
    ellipse(90,280,15,40);
    ellipse(80,320,10,20);
    ellipse(75,260,10,20);
}

function mousey(x,y) {
    stroke(170); //gray
    noFill();
    strokeWeight(5);
    curve(x+35,y,x+35,y,x+70,y,x+100,y-50);
    noStroke();
    fill(170); //gray
    rect(x,y, 70,40, 0,80,80,0);
    arc(x-35,y+20, 70,80, PI,0);
    fill(150); //darker gray
    ellipse(x-40,y+20,20,12);
    ellipse(x+15,y+20,20,12);
    ellipse(x-30,y-20,40);
    fill(216,130,157); //pink
    ellipse(x-30,y-20,30);
    ellipse(x-70,y+15,10,10);
    fill(0); //black
    ellipse(x-50,y,10,10);
}

function catShadow(x,y) {
    fill(50,50,50, 80);
    ellipse(x,y,400,200);
    ellipse(x,y+200,200,400);
    triangle(x+50,y-100, x+200,y-25, x+150,y-150);
    triangle(x-50,y-100, x-200,y-25, x-150,y-150);
}

function draw() {
    setting();
    cheese();
    mousey(xPos,yPos);

    //to conceal mouse entering hole
    fill(240); //light gray
    rect((width/2)+200,(height/2)+50, 100,100);
    fill(107,58,15); //brown
    rect(width/2+225,400, 150,200);

    //mouse movement
    if (xPos>260) {
        xPos-=10;
    }

    //cat shadow
    catShadow(width/2,yPosCat);
    if (yPosCat>(height/2) & timer>23) {
        yPosCat-=20;
    }

    if (timer>32) {
        setting();
        cheese();
        push();
        translate(width,0);
        scale(-1,1);
        mousey(xPos+90,yPos);
        pop();
        fill(240); //light gray
        rect((width/2)+225,(height/2)+50, 150,100);
        fill(107,58,15); //brown
        rect(width/2+225,400, 150,200);
        catShadow(width/2, yPosCat);
        if (xPos>30) {
            xPos-=20;
        }
    }

    //sound
    if (timer==0) {
        aha.play();
    }
    if (timer==16 || timer==10) {
        aha.stop();
        squeak.play();
    }
    if (timer==19) {
        nibble.play();
    }
    if (timer==33) {
        scream.play();
    }

    timer+=1;
}

When thinking of a story I could use for this assignment, I thought back to children’s stories and cartoons. Some notable cartoons came to mind, like Tom and Jerry and Looney Tune’s Tweety Bird, and based off of these I decided to do a cat and mouse theme. The basic story I decided on using was: “a mouse comes out of its hole, sees some cheese, then goes over to nibble on it. It sees the shadow of a cat, then scurries back to its hole.” To facilitate this story, I used an aha sound (for when the mouse sees the cheese), a squeak noise (to make the mouse more mousey), a nibble noise (for when the mouse is eating the cheese), and a scream (for when the mouse sees the cat). I think the story is cute and very readable.

Project 10: Sonic-Story

sketch

// Yash Mittal
// Section D
//I made a basic 1v1 fighting game where two figures are fighting with swords
//The health bar of the two figures is shown at the bottom of the screen 

var count = 0; //variable for tracking frame count

function preload(){
    pimg = loadImage ("https://i.imgur.com/Fn5pkxI.jpg"); //background arena image
    thunderimg = loadImage ("https://i.imgur.com/VAJWvZZ.png"); //thunder image
    countdownThree = loadSound("http://localhost:8000/countdown_three.wav");
    countdownTwo = loadSound("http://localhost:8000/countdown_two.wav");
    countdownOne = loadSound("http://localhost:8000/countdown_one.wav");
    countdownFight = loadSound("http://localhost:8000/countdown_fight.wav");
    thunder = loadSound("http://localhost:8000/thunder_1.wav");
    sword = loadSound("http://localhost:8000/sword_1.wav");
    ouch = loadSound("http://localhost:8000/ouch_1.wav");
}

function soundSetup () {
    countdownThree.setVolume(0.5);
    countdownTwo.setVolume(0.5);
    countdownOne.setVolume(0.5);
    countdownFight.setVolume(0.5);
    thunder.setVolume(0.5);
    sword.setVolume(0.5);
    ouch.setVolume(0.9);
}

function setup () {
    createCanvas (480, 300);
    frameRate (10); 
    pimg.resize (480, 300); //resizing background image to canvas
    thunderimg.resize(480,300);
    useSound();
}

function draw () {

    image(pimg,0,0,width,height); //drawing background

    if (count>0 & count<9) { //countdown
        textSize(100);
        fill(255);
        stroke(255);
        text("3",width/2-40,height/2)
    }

    if (count>1 & count<3) {
        countdownThree.play();
    }

    if (count>=10 & count<19) { //countdown
        text("2",width/2-40,height/2)
    }

    if (count>10 && count < 12) {
        countdownTwo.play();
    }

    if (count>19 & count<28) { //countdown
        text("1",width/2-40,height/2)
    }

    if (count>19 && count<21) {
        countdownOne.play();
    }

    if (count>28 & count <38) { //fight
        text("FIGHT!",width/2-170,height/2)
    }

    if (count>28 && count<30) {
        countdownFight.play();
    }

    if (count>56 & count<=60) { //thunder
        image(thunderimg,45,-55,400,400)
    }

    if (count>56 && count <=58) {
        thunder.play();
    }

    if (count>=43) { //UI bars appear
        leftCharacterUI(0,0)
        rightCharaterUI(0,0)
    }
 
    if (count>=43 & count<=65) { //left player appears
        leftPlayer(160,122)
        swordLeft(0,0)
    }

    if (count>=43 && count<=75) { //right player appears
        rightPlayer(300,122)
        swordRight(0,0)
    }

    if (count>=43 && count<75) { //right player health bar shows up
        push();
        strokeWeight(0);
        fill (0,255,0)
        rect(320,270,70,5)
        pop();
    }

    if (count>=43 & count<105) { //left player health bar shows up 
        push();
        strokeWeight(0);
        fill(255,0,0);
        rect(90,270,70,5);
        pop();
    }

    if (count>=66 & count<=105) { //left player moves  right
        leftPlayer(245,122)
        swordLeft(60,60)
    }

    if (count>=75 && count<=105) { //right player moves right & health decreases
        rightPlayer(380,122)
        swordRight(-57,-57)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>70 && count<76) {
        sword.play();
    }

    if (count>=105 & count<=120) { //right & left player move left
        rightPlayer(280,122)
        swordRight(14,14)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(255,0,0)
        rect(90,270,70,5) //red health bar
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
    }

    if (count>=121 && count<=145) { //right player moves left and hits left player
        rightPlayer(203,122)
        swordRight(69,69)
        leftPlayer(145,122)
        swordLeft(-10,-10)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        fill(255,0,0)
        rect(90,270,30,5) //red health bar decreases
        sword.play();
    }

    if (count>=146 & count<=170) { // players move to bottom floor
        rightPlayer(300,196)
        swordRight(-54,52)
        fill(0,255,0)
        rect(320,270,40,5) //green health bar
        leftPlayer(230,192)
        swordLeft(0,100)
        fill(255,0,0)
        rect(90,270,30,5)
    }

    if (count>=171 && count<=195) { //left player kills right player
        rightPlayer(300,196)
        swordRight(-54,52)
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0)
        rect(90,270,30,5) //red health bar
    }

    if (count>169 && count<171) {
        sword.play();
    }

    if (count>196 & count<198) {
        ouch.play();
    }

    if (count>=196 & count<=270) { //player falls on ground and text appears
        leftPlayer(271,192)
        swordLeft(28,128)
        fill(255,0,0) 
        rect(90,270,30,5) //red health bar
        rightPlayerDead(330,220);
        textSize(13)
        fill(0)
        stroke(0)
        strokeWeight(0.5)
        text("Winner",100,287)
        text("Loser",335,287)
    }

    count++;
}

function leftPlayer(x,y) {

    noStroke();
    fill(232,190,172); //light head fill
    circle(x,y,20); //head of left character

    fill(200,0,0); //body fill
    beginShape(); //main body of left character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(0,0,200); //feet fill
    beginShape(); //lower body of left character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayer(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); //head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x,y+22);
    curveVertex(x-10,y+8);
    curveVertex(x,y+13);
    curveVertex(x+10,y+8);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x,y+20);
    vertex(x-8,y+35);
    vertex(x,y+30);
    vertex(x+8,y+35);
    endShape(CLOSE);
}

function rightPlayerDead(x,y) {

    noStroke();
    fill(68,59,49); //dark head fill
    circle(x,y,20); // head of right character

    fill(255,215,0); //body fill
    beginShape(); //main body of right character
    curveVertex(x-22,y);
    curveVertex(x-8,y+10);
    curveVertex(x-13,y);
    curveVertex(x-8,y-10);
    endShape(CLOSE);

    fill(192,96,168); //feet fill
    beginShape(); //lower body of right character
    vertex(x-20,y);
    vertex(x-35,y-8);
    vertex(x-30,y);
    vertex(x-35,y+8);
    endShape(CLOSE);
}

function swordLeft(x,y) {

    push();
    translate(155,130);
    angleMode(DEGREES);
    rotate(315);
    noStroke();
    fill(0,230,40);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function swordRight(x,y){

    push();
    translate(305,130);
    angleMode(DEGREES);
    rotate(45);
    scale(-1,1);
    noStroke();
    fill(0,250,0);
    rect(x+10,y+9,13,4); //bottom rectangle of sword
    fill(30,50,80);
    rect(x+20,y+5,4,12);//middle rectangle of sword
    fill(125,125,125);
    beginShape();//blade of sword
    vertex(x+24,y+13);
    vertex(x+39,y+13);
    vertex(x+43,y+11);
    vertex(x+39,y+9);
    vertex(x+24,y+9);
    endShape(CLOSE);
    pop();
}

function leftCharacterUI(x,y) {

    push();
    translate(80,250);
    fill(232,190,172);
    circle(x,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

function rightCharaterUI(x,y) {

    push();
    translate(310,250);
    fill(68,59,49);
    circle(x+90,y,30);
    fill(255);
    rect(x+10,y+20,70,20);
    pop();
}

For this project, I wanted to have the the sound of swords colliding with each other, and some environmental sounds like the thunder and the announcer voice at the beginning of the animation.

LO 10: Sonic Story

sketch

// sketch.js template for sound and DOM
//
// This is the 15104 Version 1 template for sound and Dom.
// This template prompts the user to click on the web page
// when it is first loaded.
// The function useSound() must be called in setup() if you
// use sound functions.
// The function soundSetup() is called when it is safe
// to call sound functions, so put sound initialization there.
// (But loadSound() should still be called in preload().)
var img;
var bx = 20;
var by = 400;
var cx = 20;
var cy = 300;
var tx = 20;
var ty = 200;
var mx = 20;
var my = 100;
var bikeTone;
var bikeDynamics;
var carTone;
var carDynamics;
var trainTone;
var trainDynamics;
var motorcycleTone;
var motorcycleDynamics;

function preload() {
    // call loadImage() and loadSound() for all media files here
}


function setup() {
    // you can change the next 2 lines:
    createCanvas(480, 480);
    createDiv("p5.dom.js library is loaded.");
    //======== call the following to use sound =========
    useSound();
}


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    bikeTone = new p5.Oscillator();
    bikeTone.setType('sine');
    bikeTone.freq(440.0);
    bikeTone.amp(0.1);
    bikeTone.start();
    bikeDynamics = new p5.Oscillator();
    bikeDynamics.setType('sine');
    bikeDynamics.disconnect();
    bikeDynamics.start();
    carTone = new p5.Oscillator();
    carTone.setType('sine');
    carTone.freq(261.63);
    carTone.amp(0.1);
    carTone.start();
    carDynamics = new p5.Oscillator();
    carDynamics.setType('sine');
    carDynamics.disconnect();
    carDynamics.start();
    trainTone = new p5.Oscillator();
    trainTone.setType('sine');
    trainTone.freq(164.81);
    trainTone.amp(0.1);
    trainTone.start();
    trainDynamics = new p5.Oscillator();
    trainDynamics.setType('sine');
    trainDynamics.disconnect();
    trainDynamics.start();
    motorcycleTone = new p5.Oscillator();
    motorcycleTone.setType('sine');
    motorcycleTone.freq(110);
    motorcycleTone.amp(0.1);
    motorcycleTone.start();
    motorcycleDynamics = new p5.Oscillator();
    motorcycleDynamics.setType('sine');
    motorcycleDynamics.disconnect();
    motorcycleDynamics.start();
}


function draw() {
    // you can replace any of this with your own code:
    background(255);
    stroke(0);
    makeBike(bx, by);
    bx += .5;
    makeCar(cx, cy);
    cx += 1;
    makeTrain(tx, ty);
    tx += 1.5;
    makeMotorcycle(mx, my);
    mx += 2;
    bikeDynamics.amp(0.5);
    bikeDynamics.freq(.034);
    bikeTone.amp(bikeDynamics);
    carDynamics.amp(1);
    carDynamics.freq(.06);
    carTone.amp(carDynamics);
    trainDynamics.amp(2);
    trainDynamics.freq(.085);
    trainTone.amp(trainDynamics);
    motorcycleDynamics.amp(2);
    motorcycleDynamics.freq(.12);
    motorcycleTone.amp(motorcycleDynamics);
    if (millis() > 4200 + soundStart) {
       motorcycleTone.stop();
       motorcycleDynamics.stop();
    }
    if (millis() > 6000 + soundStart) {
        trainTone.stop();
        trainDynamics.stop();
    }
    if (millis() > 8400 + soundStart) {
        carTone.stop();
        carDynamics.stop();
    }
    if (millis() > 15800 + soundStart) {
        bikeTone.stop();
        bikeDynamics.stop();
    }
}

function makeBike(x, y) {
    circle(x, y, 20);
    circle(x + 40, y, 20);
    line(x, y - 10, x + 40, y - 10);
    line(x, y - 10, x, y - 20);
    line(x + 40, y - 10, x + 40, y - 30);
    line(x + 30, y - 25, x + 50, y - 35);
    line(x - 10, y - 20, x + 10, y - 20);
}

function makeCar (x, y) {
    rect(x - 20, y - 20, 40, 20);
    rect(x - 40, y, 80, 20);
    circle(x - 30, y + 30, 20);
    circle(x + 30, y + 30, 20);
}

 function makeTrain(x, y) {
    rect(x, y, 20, 20);
    rect(x, y + 20, 40, 20);
    line(x, y + 30, x - 10, y + 30);
    rect(x - 40, y + 20, 30, 20);
    line(x - 40, y + 30, x - 50, y + 30);
    rect(x - 80, y + 20, 30, 20);
    circle(x + 5, y + 45, 10);
    circle(x + 35, y + 45, 10);
    circle(x - 15, y + 45, 10);
    circle(x - 35, y + 45, 10);
    circle(x - 55, y + 45, 10);
    circle(x - 75, y + 45, 10);
} 

function makeMotorcycle(x, y) {
    rect(x, y, 40, 20);
    triangle(x, y, x + 40, y, x + 40, y - 15);
    triangle(x - 20, y, x, y + 15, x, y);
    triangle(x + 40, y, x + 60, y, x + 40, y + 15);
    circle(x - 10, y + 20, 20);
    circle(x + 50, y + 20, 20);
}

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

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