SectionB – Page 4 – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

LookingOutwards-11

Angela Washko is an artist specialized in games and experiential art. She pushes for conversation and development of feminism and challenges societal norms. Angela does this through her own mediums video games and the world of gamers. She facilitates The Council on Gender Sensitivity and Behavioral Awareness in World of Warcraft, proving that females can be gamers too.

She is currently a tenure-track Assistant Professor of Art at our school, Carnegie Mellon University, and is a core faculty member for the MFA program. Her most popular work is arguably The Game: The Game. However, another interesting project is “Woman as Place”. It is an interactive game where she displays postcards from different regions of the world. It is a straightforward game with a straightforward concept, but the display and unique method of showing off her collection of postcards are enrapturing.

Play the game here.

Project -11

I decided to make a mountain landscape with birds flying over. In the front is a field then there are two mountain ranges with a setting sun behind. The hardest part for me was working with the objects and understanding the example code so that I could apply it for myself.

landscape Download

var mtnDetail = 0.005; // detail in tall mountain 
var mtnSpeed = 0.0001; // speed of mountains
var mtnDetail2 = 0.007; //detail of short mountain
var birds = []

function setup() {
    createCanvas(480, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        birds[i] = makeBird(rx, ry);
    }
    frameRate(15);
}

function draw() {
	background(153, 153, 204);
    sun();
	makeMtns();
    field();
    updateBird();
    removeBird();
    addBird();	
}

function makeMtns() {
    fill(138, 118, 139);
    stroke(133, 114, 137);
    strokeWeight(1);
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * mtnDetail) + (millis() * mtnSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
    //second mountain
    beginShape();
    fill(175, 143, 178);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * mtnDetail2) + (millis() * mtnSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

function field(){
    stroke(118, 139, 121);
    fill(122, 145, 132);
    rect(0, 300, width, 100);
}

function sun(){
    // sun ray inner
    noStroke();
    fill(229, 187, 161, 60);
    ellipse(240, 150, 225, 225);
    //sun ray outer
    fill(229, 187, 161, 60);
    ellipse(240, 150, 300, 300);
    // sun
    stroke(198, 115, 76);
    strokeWeight(1);
    fill(184, 106, 70 );
    ellipse(240, 150, 175, 175);
}
//bird object

function updateBird(){
    for (var i = 0; i < birds.length; i ++){
        birds[i].move();
        birds[i].display();
    }
}

function removeBird(){
    var keepBirds=[];
    for (var i = 0; i < birds.length; i++) {
        if (birds[i].x < width) {
            keepBirds.push(birds[i]);
        }
    }
    birds = keepBirds;
}

function addBird(){
    //little probability
    var newBirdLikelihood = 0.007; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(15, 15));
    }
}

function moveBird(){
    this.x += this.speed;
}

function displayBird(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    //top wing
    triangle(0, 0, 5, 0, -2, -7);
    //bottom wing
    triangle(0, 0, 5, 0, 2, 7);
    pop();
}

function makeBird(birthLocationX, birthLocationY){
    var bird = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveBird,
                display: displayBird};
    return bird;
}

LO -11

For this weeks Looking Outwards focusing on females, I chose to look at Emily Gobeille.
Gobeille is a visual design, motion graphics, and interactions artist. She is from Amsterdam but is based in Brooklyn.
One of her works, titled “Knee Deep,” uses real-time greenscreening and stomp detection to allow kids to play and immerse themselves in a virtual landscape. I really like this project because it allows children to experience art and coding. For me, it is exhibits like these that I loved when I was younger and really got me interested in art. It is really interesting to learn about someone who creates these pieces that I viewed as magic as a kid.

LO 11 – A Focus on Women Practitioners

With works mainly focusing on new media and interaction, Jen Lewin is globally renowned sculptor based in New York. She uses her architectural background and a highly technical medium to fabricate large-scale interactive, public sculptures that encourage community engagement.

“Aqueous“, built in 2017 and exhibited in Georgetown, Burning Man, Hong Kong, Bahrain, Sydney, Los Angeles and Descanso Gardens, is a great representation of Lewin’s motives and purpose. An interactive landscape of meandering pathways of light, “Aqueous” is part of Lewin’s “Have Art Will Travel Program”, which seeks to create dynamic, participatory, public art experiences all around the world. Throughout the day, “Aqueous” reflects the sky, audience and surrounding environment, giving daytime viewers the illusion of swimming in the clouds and nighttime viewers a feeling of the universe’s expansiveness. Additionally, at night, “Aqueous” engages visitors as they walk along its surface, lighting up as they step, dance or play along the pathway.

“Aqueous”, Jen Lewin, 2017
Lights up as visitors walk along its surface

Like “Aqueous”, Lewin’s pieces “exist where art, technology, and communities meet” and strive to create a more personal experience that “brings vibrancy to public spaces”. Her works create connected human experiences that allow for participants to not only interact and enjoy the playfulness of the sculptures but also interact and connect with each other.

“Aqueous”, Jen Lewin, 2017

For additional information on Jen Lewin and her other works, please visit her personal website https://www.jenlewinstudio.com.

Project 11: Landscape

sketch Download

var sushi=["https://i.imgur.com/O6Q4Nml.png", "https://i.imgur.com/oi1loKM.png", "https://i.imgur.com/dGGroAU.png", "https://i.imgur.com/ycZcW4p.png"];

var sushi1;
var sushi2;
var sushi3;
var sushi4;

var plate=[];
var inChopstick=false;
var nSushi=100;
var x=80;
var speed=7;


function preload(){
    sushi1=loadImage(sushi[0]);
    sushi2=loadImage(sushi[1]);
    sushi3=loadImage(sushi[2]);
    sushi4=loadImage(sushi[3]);
}

function setup() {
    createCanvas(480, 360);
    var n = 0;
    for (var i = 0; i < 1000; i++){ //continually creates (1000) plates of sushi 
        plate[i] = makePlate(n);
        n -= 200;
    }
    frameRate(15);
}

function draw() {
    //draws conveyor belt
    background(0, 0, 70);
    noStroke();
    fill(100);
    rect(0, 0, 480, 250);
    fill(90);
    rect(0, 250, 480, 30);

    //draws plate + soysauce
    fill(215);
    ellipse(500, 400, 400, 200);
    ellipse(250, 340, 100, 75);
    fill(51, 25, 0);
    ellipse(250, 345, 80, 60);

    plateShow();

    //draws chopsticks
    fill(102, 51, 0);
    quad(mouseX-50, mouseY-2, mouseX-45, mouseY, mouseX-55, mouseY+200, mouseX-62, mouseY+198);
    quad(mouseX+50, mouseY-2, mouseX+45, mouseY, mouseX+55, mouseY+200, mouseX+62, mouseY+198);
}

function plateGo(){
    this.x+=this.dx;
}

function plateShow(){
    for(var i = 0; i < plate.length; i++){
        plate[i].go();
        plate[i].show();
        plate[i].mP();
    }
}

function makePlate(px){
    var plate={x: px, y:150, w:150, h:100,
    dx: 7, go:plateGo, show:drawPlate,
    sushi: random([sushi1, sushi2, sushi3, sushi4]),
    mP: mousePressed
    }
    return plate;
}

function drawPlate(){
    push();
    fill(215);
    noStroke();
    ellipse(this.x, this.y, this.w, this.h);
    stroke(185);
    noFill();
    ellipse(this.x, this.y, 0.75*this.w, 0.75*this.h);

    if (inChopstick==false){
        if (this.sushi==sushi1){
            image(sushi1, this.x-50, 95);
        }
        if (this.sushi==sushi2){
            image(sushi2, this.x-50, 95);
        }
        if (this.sushi==sushi3){
            image(sushi3, this.x-50, 95);
        }
        if (this.sushi==sushi4){
            image(sushi4, this.x-50, 95);
        } 
    }

    if (inChopstick==true){
        if (this.sushi==sushi1){
            image(sushi1, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi2){
            image(sushi2, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi3){
            image(sushi3, mouseX-50, mouseY-50);
        }
        if (this.sushi==sushi4){
            image(sushi4, mouseX-50, mouseY-50);
        } 
    }
    pop();
}

function mousePressed(){
    if (inChopstick==false){
        if (dist(this.x, this.y, mouseX, mouseY)<=50){
            inChopstick=true;
            print("false");
        }
    }
    if (inChopstick==true){
        if (dist(500, 400, mouseX, mouseY)<=50){
            inChopstick=false;
            print(true);
        }
    }
}

I decided to make a sushi conveyor belt for my generative landscape. The sushi pieces were drawn by me in ProCreate on my iPad.

After I figure out what I was going to do, I created an object for the sushi and plate to move across the screen on the belt. Then I made an array of the plates so they would always regenerate. I made chopsticks the same width apart as the pieces of sushi and then I called mousePressed within the function so you should take the chopsticks and move them over the sushi piece to pick all of them up. When you bring the chopsticks to the corner where the plate is, the sushi regenerates on the plate like you ate it.

Looking Outwards 11: A Focus on Woman Practitioners

Andrea Ackerman is an American artist who specializes in New Media artworks. She graduated from Harvard Medical School and teaches 3D computer modeling at Pratt Institute. She is also a co-director of ISEA2011, an international nonprofit that combines art, technology and science, where she is the associate editor of Uncontainable, the catalog of the electronic art exhibition. The piece I’m going to be looking at is called “Momentum: an experiment in the unexpected” which was showcased in the San Jose Museum of Art. I admire her artwork because she was one of the first to integrated digital technology and art and her piece fabricates a synthetic nature by manipulating human facial features.

Momentum: an experiment in the unexpected - San Jose Museum of Art — Momentum: an experiment in the unexpected

Project-11 Landscape

landscape

var highMountain = [];
var lowMountain = [];
var cabin = [];
var trees = [];
var dogImage = [];
var dog = [];
var noiseParam = 0;
var noiseStep = 0.01;

function preload(){
    var filenames = [];
    filenames[0] = "https://i.imgur.com/KGHR8lv.png";
    filenames[1] = "https://i.imgur.com/KGHR8lv.png";
    filenames[2] = "https://i.imgur.com/unhcm3R.png";
    filenames[3] = "https://i.imgur.com/unhcm3R.png";
    filenames[4] = "https://i.imgur.com/J2pZbow.png";
    filenames[5] = "https://i.imgur.com/J2pZbow.png";
    filenames[6] = "https://i.imgur.com/unhcm3R.png";
    filenames[7] = "https://i.imgur.com/unhcm3R.png";
 
    for (var i = 0; i<filenames.length; i++) {
        dogImage[i] = loadImage(filenames[i]);
    }
}

function setup() {
    createCanvas(480, 240); 
    frameRate(24);
    imageMode(CENTER);
    //mountains
    for (var i = 0; i <= width/4; i++) {
      var value = map(noise(noiseParam), 0, 1, 0, height*1.1);
      highMountain.push(value);
      noiseParam += noiseStep;
    }
    for (var i = 0; i <= width/5; i++) {
      var value = map(noise(noiseParam), 0, 1, 0, height*1.9);
      lowMountain.push(value);
      noiseParam += noiseStep;
    }

    // create an initial collection of cabins 
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        cabin[i] = makeCabin(rx);
        var r = random(width);
        trees[i] = makeTree(r);
    }

    //create three walking characters 
    var d = makeCharacter(400, 200);
    dog.push(d);
    
}

function draw() {
    background(200); 
    //sky as a gradient
    var gradPurple = color(134, 123, 198);
    var gradPink = color(240, 198, 209);
    for (var i = 0; i < height; i++){
      var gradient = map (i, 0, (height/3)*1.5, 0, 1);
      var bgColor = lerpColor(gradPurple, gradPink, gradient);
      stroke(bgColor);
      line(0, i, width, i);
    }
    //snow
    stroke(239, 241, 253);
    strokeWeight(2);
    for (var i = 0; i < 750; i++) {
      point(random(0,width), random(-0, height));
    }

    //sun 
    noStroke();
    fill(242, 226, 233, 90);
    circle(width/2, height/2-40, 60);
    fill(242, 226, 233, 75);
    circle(width/2, height/2-40, 50);
    fill(242, 226, 233, 60);
    circle(width/2, height/2-40, 40);
    fill(242, 226, 233);
    circle(width/2, height/2-40, 30);

    //clouds 
    cloud(45, 80);
    cloud(180, 130);
    cloud(360, 160);
    cloud(445, 70);

    //mountains
    drawHighMountain();
    drawLowMountain();

    //snow on the ground
    fill(239, 241, 253);
    rect(0, 180, width, 60);

    //trees
    updateAndDisplayTrees();
    removeTreesThatHaveSlippedOutOfView();
    addNewTreesWithSomeRandomProbability(); 

    //cabins
    updateAndDisplayCabins();
    removeCabinsThatHaveSlippedOutOfView();
    addNewCabinsWithSomeRandomProbability();

    //walking dog 
    for (var i = 0; i < dog.length; i++) { 
        var d = dog[i];
        d.stepFunction();
        d.drawFunction();
    }

    //fence 
    for (var x = 10; x <= width-10; x+=10) {
      stroke(198, 173, 203);
      strokeWeight(5);
      line(x, height, x, height-25);
    }
    line(0, height-15, width, height-15);

}

function drawHighMountain() {
  highMountain.shift();
  var value = map(noise(noiseParam), 0, 1, 0, height*1.1);
  highMountain.push(value);
  noiseParam += noiseStep;
  push();
  fill(170, 190, 250);
  stroke(170, 190, 250);
  beginShape(); 
  vertex(0, height);
  for (var i = 0; i < width/4; i++) {
    vertex(i*5, highMountain[i]);
    vertex((i+1)*5, highMountain[i+1]);
  }
  vertex(width, height);
  endShape();
  pop();
}
function drawLowMountain() {
  lowMountain.shift();
  var value = map(noise(noiseParam), 0, 1, 0, height*1.9);
  lowMountain.push(value);
  noiseParam += noiseStep;
  push();
  fill(193, 205, 246);
  stroke(193, 205, 246);
  beginShape(); 
  vertex(0, height);
  for (var i = 0; i < width/5; i++) {
    vertex(i*5, lowMountain[i]);
    vertex((i+1)*5, lowMountain[i+1]);
  }
  vertex(width, height);
  endShape();
  pop();
}

//cabins 
function makeCabin(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 70,
                speed: -5.0,
                nFloors: round(random(2,8)),
                move: cabinMove,
                display: cabinDisplay}
    return bldg;
}
// method to update position of cabin every frame
function cabinMove() {
    this.x += this.speed;
}
// draw the cabin and some windows
function cabinDisplay() {
    var floorHeight = 8;
    var cHeight = this.nFloors * floorHeight; 
    
    noStroke();
    fill(95, 124, 213);
    push();
    translate(this.x, height - 40);
    //chimmney 
    rect(this.breadth-10, -cHeight - 20, 10, 15);
    //roof
    stroke(239, 241, 253);
    triangle(-7,-cHeight,this.breadth/2,-cHeight-20,this.breadth+7,-cHeight);
    //home
    stroke(95, 124, 213); 
    rect(0, -cHeight, this.breadth, cHeight);

    fill(239, 241, 253);
    noStroke();
    circle(this.breadth/2, -cHeight - 10, 10); 
    rect(this.breadth-10, -cHeight - 20, 10, 5);
    //windows
    fill(148, 178, 249);
    stroke(95, 124, 213);
    for (var i = 0; i < this.nFloors-1; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}
function updateAndDisplayCabins(){
    // Update the cabin's positions, and display them.
    for (var i = 0; i < cabin.length; i++){
        cabin[i].move();
        cabin[i].display();
    }
}
function removeCabinsThatHaveSlippedOutOfView(){
  var cabinToKeep = [];
  for (var i = 0; i < cabin.length; i++){
    if (cabin[i].x + cabin[i].breadth > 0) {
        cabinToKeep.push(cabin[i]);
    }
  }
  cabin = cabinToKeep; // remember the surviving cabin
}
function addNewCabinsWithSomeRandomProbability() {
    // With a very tiny probability, add a new cabin to the end.
    var newCabinLikelihood = 0.01; 
    if (random(0,1) < newCabinLikelihood) {
        cabin.push(makeCabin(width));
    }
}

// dog walking character
function makeCharacter(cx, cy) {
    c = {x: cx, y: cy,
         imageNumber: 0,
         stepFunction: characterStep,
         drawFunction: characterDraw
        }
    return c;
}
function characterStep() {
    this.imageNumber++;
    if (this.imageNumber == 8) {
        this.imageNumber = 0;
    }
}
function characterDraw() {
    image(dogImage[this.imageNumber], this.x, this.y);
}

// trees 
function makeTree(birthLocationX) {
    var t = {x: birthLocationX,
                breadth: round(random(20,30)),
                speed: -5.0,
                treeHeight: round(random(30,70)),
                move: treeMove,
                display: treeDisplay}
    return t;
}
function treeMove() {
    this.x += this.speed;
}
function treeDisplay() {
    push();
    translate(this.x, height - 60);
    noStroke(); 
    fill(153, 139, 196);
    rect(-2, 0, 6, 8);
    fill(242, 198, 210); 
    triangle(0, 0, 0, -this.treeHeight, -this.breadth/2, 0);
    fill(223, 186, 209); 
    triangle(0, 0, 0, -this.treeHeight, this.breadth/2, 0);
    stroke(225);
    line(0, 0, 0, -this.treeHeight);
    pop();
}
function updateAndDisplayTrees(){
    for (var i = 0; i < trees.length; i++){
        trees[i].move();
        trees[i].display();
    }
}
function removeTreesThatHaveSlippedOutOfView(){
    var treesToKeep = [];
    for (var i = 0; i < trees.length; i++){
        if (trees[i].x + trees[i].breadth > 0) {
            treesToKeep.push(trees[i]);
        }
    }
    trees = treesToKeep;
}
function addNewTreesWithSomeRandomProbability() {
    var newTreeLikelihood = 0.07; 
    if (random(0,1) < newTreeLikelihood) {
        trees.push(makeTree(width));
    }
}

function cloud(x, y) {
	fill(239, 241, 253, 50);
	arc(x, y, 60, 40, PI + TWO_PI, TWO_PI);
	arc(x + 30, y, 90, 90, PI + TWO_PI, TWO_PI);
	arc(x + 25, y, 40, 70, PI + TWO_PI, TWO_PI);
	arc(x + 50, y, 70, 40, PI + TWO_PI, TWO_PI);
}

For this project, I wanted to created a snowy landscape. I started by drawing two layers of mountains and then added the cabins, the trees, and the running dog. I feel like the cool tone color palette contrasts really well with the dog. The sun and clouds looked pretty plain so I played with the opacity of the shapes to create some visual interest. The hardest part was figuring out how to do the gradient, but I’m happy with the way that it turned out and the way it looks with the snow! I didn’t want to overcrowd the piece too much so the last thing I added was a fence.

Looking Outwards – 11

Mouna Andras studied film, digital media, and storytelling. She met up with Melissa Mongiat in Montreal, where they decided to start working on projects together due to their complementary backgrounds. Together, they co-founded Daily Tous Les Joures, which aims to create collective experiences for public spaces. In other words, they use physical spaces to create something meaningful for the public people.

One project, in particular, is called Musical Swings. Musical Swings are swings that start playing musical pieces when people interact, even transforming when people swing in synochrony. Whle this was meant to be a one-off project, the artists ended up building the swings in a multitude of public areas. This is because they saw the people’s positive reactions and interactions with the project. I admire their project because it invites people to use their imagination again and feel enchanted when they interact with the piece. Being able to garner those reactions from people who consume their art is definitely not an easy feat.

LO-11 Women Practitioners

Making of the Tree of Changes

Yael Braha is a large-scale dynamic display designer. Braha combines traditional and non-traditional art to creates pieces that combine fine arts and digital fabrication. Braha studied Graphic Design at the European Institute of Design in Rome. After immigrating to the US, she got a Masters of Fine Arts in Cinema at San Francisco State University. Her work has been displayed all across the world for 20 years and is currently based out of Canada.

Braha and her team created Tree of Changes, using 3d-modeling, custom machine learning programs, and fabrication, for the Yerba Buena Center for the Arts for the 2015 Market Street Prototyping Festival. This piece is an interactive sculpture that creates light patterns based on the viewers voice. I admire how this piece speaks to people of all ages because it highlights how Braha’s artistic sensibilities show up in her work. Braha notes her work is inspired by her roots as the daughter of refugees which taught her to value knowledge over belongings. With this piece she not only creates universal interest but also provides them with insight on how cutting-edge technology is being used to create art today. I also admire the aesthetic of the piece in contrast with the night sky.

Project 10: Sonic Story

peachsketch

//There are two characters, red and blue, fighting each other video
//game style. The announcer starts the match, and they fight, 
//exchanging rapid punches and hits. Neither one does much damage.
//Suddenly, blue passes gas. The gas is deadly, and red dies.
//Blue wins, match is over.

var count = 0;

function preload() {
    fight = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fight.wav")
    punch = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/punch.wav")
    kick = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/kick.wav")
    fart = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/fart.wav")
    victory = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2020/11/victory.wav")

}


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


function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    //osc = new p5.TriOsc();
    kick.setVolume(0.4);
    punch.setVolume(0.4);
    fight.setVolume(0.5);
    fart.setVolume(0.9);
    victory.setVolume(0.5);
}


function draw() {

    background(0);
    fill(100)
    rect (0,225, 400, 75);
    fill(0,255,0)
    rect(20,20, 100,10)
    rect(280,20, 100,10)
    textSize(50)
    fill(255)
    
    text("FIGHT!", 120, 100);
    //fighters are sizing each other up
    if (count < 2) {
        fight.play()
        fightLeft(100,200)
        fightRight(300,200)

    }
    if (count >=2 & count < 20){
        fightLeft(120,200)
        fightRight(320,200)
    }
// red throws first punch
    if (count >= 20 && count < 35){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=20 && count < 25){
        punch.play()
        
    }

    }
    //blue fights back
    if (count >= 35 && count < 50){
        fightLeft(120,200)
        fightRight(320,200)
        fill(240, 220, 170)
        ellipse(160,230,20,15)
        if (count>=35 && count< 38){
            kick.play()
        }
    }
    //red punches again
    if (count >= 50 && count < 65){
        fightLeft(100,200)
        fightRight(300,200)
        fill(240, 220, 170)
        ellipse(260,230,20,15)
        if (count >=50 && count < 55){
        punch.play()
        }
    }
    //blue releases gas
    if (count >= 65 && count < 80){
        fightLeft(120,200)
        fightRight(320,200)

        if(count>70 && count< 78){
                fartblue(60,230)
        }
        if (count > 70 && count<72){
            fart.play()
        }
    }
if (count>=80 && count<90){
        fightLeft(120,200)
        fightRight(320,200)
}
    
//red dies from fart, blue wins
if(count>=90 && count<120){
    fightLeft(120,200)
    deadRight(320,200)
    if (count>95 && count <98){
    victory.play()
    }
    textSize(20)
    fill(255)
    text("WINNER", 50, 150);
    fill(255,0,0)
    rect(280,20, 100,10)
}

//story ends
if (count >= 120){
    fill(0)
    rect(0,0,width,height)
    fill(255)
    text("game over", 90, height/2)

}
    count++
}

//left fight stance
function fightLeft(x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(0,0,255)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
    endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x+2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x+5,y)
line(x, y+11, x+6, y+11)
noStroke()

}
//red fight stance
function fightRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)
fill(255);
ellipse(x, y, 8,12)
fill(0);
ellipse(x-2,y+2,6, 8)
stroke(0)
strokeWeight(3)
line(x,y-5,x-5,y)
line(x, y+11, x-6, y+11)
noStroke()
}

//draw fart cloud
function fartblue(x,y){
    fill(18, 135, 41)
ellipse(x,y,40,25)
}
//red dies
function deadRight (x,y){
fill(240, 220, 170)
ellipse(x, y,30)
fill(255,0,0)
beginShape();
    curveVertex(x,y-10)
    curveVertex(x+5, y+20)
    curveVertex(x+20, y+60)
    curveVertex(x, y+45)
    curveVertex(x-20, y+60)
    curveVertex(x-10, y+20)
    curveVertex(x-5,y-10)
endShape();
rect(x-15, y-10, 30, 4)

stroke(0)
strokeWeight(3)
line(x,y-6,x-6,y+2)
line(x-6, y-6, x, y+2)
noFill()
ellipse(x-3, y+10, 8)
noStroke()

}

For my story, I had trouble manipulating the noise to be used in an interesting way. Because the noises themselves were already distinctive, I wasn’t sure how to improve the way they were used. I had fun writing a silly story inspired by the classic, pixelated video game characters I grew up with.

I used sounds from the timeless Mortal Kombat series, which were available online for free use. I took the classic announcer sayings of “fight!” and “flawless victory.” as well as the punching and attacking noises. I also used a sound from the recommended free sounds website of a simple passing gas noise. I thought that the last noise would be a funny juxtaposition to the otherwise epic sounds.