sketch

//Stefanie Suk
//15-104 D
//ssuk@andrew.cmu.edu
//Project-10-Sonic Sketch

var buttonA;
var buttonB;
var buttonC;
var buttonD;

function preload() {
    buttonA = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/snaredrum-1.wav");
    buttonA.setVolume(1);
    buttonB = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/drumstick-1.wav");
    buttonB.setVolume(1);
    buttonC = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/hitdrum.wav");
    buttonC.setVolume(1);
    buttonD = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lowdrum.wav");
    buttonD.setVolume(1); //loading sound
}

function setup() {
    createCanvas (600, 600);
    useSound();
}



function draw() {
    background(232, 192, 244);
    noStroke();
    fill(90);
    rect(85, 115, 400, 400);
    fill("black");
    rect(100, 100, 400, 400); //base of the beat maker

    fill(100);
    circle (158, 150, 50, 50);
    fill(100);
    circle (248, 150, 50, 50);
    fill(100);
    circle (338, 150, 50, 50);
    fill(100);
    circle (428, 150, 50, 50); //upper circular button of beat maker


    fill("white");
    rect(120, 200, 80, 80);
    fill("yellow");
    rect(120, 290, 80, 80);
    fill("yellow");
    rect(120, 380, 80, 80);
    fill("red");
    rect(210, 200, 80, 80);
    fill("white");
    rect(210, 290, 80, 80);
    fill("white");
    rect(210, 380, 80, 80);
    fill("blue");
    rect(300, 200, 80, 80);
    fill("blue");
    rect(300, 290, 80, 80);
    fill("blue");
    rect(300, 380, 80, 80);
    fill(33, 232, 6);
    rect(390, 200, 80, 80);
    fill(33, 232, 6);
    rect(390, 290, 80, 80);
    fill("white");
    rect(390, 380, 80, 80); //square buttons of the beat maker

}



function mousePressed(){
    if(mouseX < 250 & mouseY < 250){
        buttonA.play();
    }

    if(mouseX < 250 & mouseY > 250){
        buttonC.play();
    }

    if(mouseX > 250 & mouseY < 250){
        buttonB.play();
    }

    if(mouseX > 250 & mouseY > 250){
        buttonD.play(); //creating sound when click on button
    }
}

I wanted to create a beat making machine because I enjoy listening to music with interesting beat. I made the beat making machine create drum sounds when clicked.

!!!!!UPDATE!!!!!

GOT IT TO WORK ON WORDPRESS

sketch

// Kristine Kim
// Section D
// younsook@andrew.cmu.edu
// Project -10-Interactive Sonic Sketch


var vacuumnoise;
var fridgenoise;
var dogbarking;
var outsidenoise;
var keynoise;
//global variables for images
var vacuumpic;
var dogpic;
var keypic;

function preload() {
//load pictures
    var vacuumpicURL = "https://i.imgur.com/qbo0LSB.png[/img]"
    vacuumpic = loadImage(vacuumpicURL);
    var dogpicURL = "https://i.imgur.com/j41YK4G.png[/img]"
    dogpic = loadImage(dogpicURL);
    var keypicURL = "https://i.imgur.com/ozegqNz.png[/img]"
    keypic = loadImage(keypicURL);

//load sounds
    vacuumnoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/vacuum.wav")
    
    fridgenoise =loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fridge.wav")
    
    dogbarking = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dogbarking.wav")
    
    outsidenoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/birdsoutside.wav")
    
    
    keynoise = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/keys.wav")

// //vacuuming noise
//     vacuumnoise = loadSound("vacuum.wav");

//  //sound of fridge opening and closing   
//     fridgenoise =loadSound("fridge.wav");

// //sound of dog barking  
//     dogbarking = loadSound("dogbarking.wav");

// //sound of birds chirping outside    
//     outsidenoise = loadSound("birdsoutside.wav");

// //sound of key dropping on a table    
//     keynoise = loadSound("keys.wav");

}


function setup() {
    createCanvas(500, 400);
    useSound()
}
function soundSetup(){
//controlling the volume
    vacuumnoise.setVolume(1);
    fridgenoise.setVolume(1);
    dogbarking.setVolume(1);
    outsidenoise.setVolume(1);
    keynoise.setVolume(1);

}

function draw() {
    background(255, 247, 135);

//dark brown outline around everything
    stroke(102, 77, 27);
    strokeWeight(5);

//drawing the floor
    fill(199, 154, 58);
    rect(-5,280, 510,400);

//drawing the fridge
    fill(245);
    rect(40,100, 100, 200);
    //fridge shadow
    fill(176, 174, 169);
    rect(40, 170, 100, 10);

    // handle
    fill(0);
    rect(125,120,5,40);
    rect(125,190,5,80);

//drawing the windows
    fill(184, 241, 252);
    rect(170,30,130,100);
    rect(350,30,130,100);

    line(235,30,235,130);
    line(170,80,300,80);
    line(415,30,415,130);
    line(350,80,480,80);

    //table legs
    noStroke();
    fill(102, 77, 27);
    rect(210,240, 12, 70);
    rect(380,240, 12, 70);
    
    fill(71, 54, 20);
    rect(290,190, 12, 100);
    rect(450,190, 12, 100);

//drwing the table   
    fill(102, 77, 27);
    beginShape();
    vertex(280,190);
    vertex(480,190);
    vertex(280,190);
    vertex(200,240);
    vertex(400,240);
    vertex(480,190);
    endShape();

//drawing the vaccum image
    image(vacuumpic, 250, 110, 350,250);

//drawing the dog image
    image(dogpic,5,200,300,200);

//drawing the keys image
    image(keypic,260,195,40,40);
}

function mousePressed(){
//If pressed on keys, play sound and if pressed somewher else, pause the sound
    if (mouseX > 260 & mouseX < 300 && mouseY > 195 && mouseY < 235){
        keynoise.play();
        } else {
            keynoise.pause();
        }
//If pressed on dog, play sound and if pressed somewher else, pause the sound
    if (mouseX > 80 & mouseX < 280 && mouseY > 240 && mouseY < 320){
        dogbarking.play();
        } else {
            dogbarking.pause();
        }
//If pressed on vacuum, play sound and if pressed somewher else, pause the sound
    if (mouseX > 300 & mouseX < 480 && mouseY > 100 && mouseY < 300){
        vacuumnoise.play();
        } else {
            vacuumnoise.pause();
        }
//If pressed on fridge, play sound and if pressed somewher else, pause the sound
    if (mouseX > 40 & mouseX < 140 && mouseY > 100 && mouseY < 300){
        fridgenoise.play();
        } else {
            fridgenoise.pause();
        }
//If pressed on right window, play sound and if pressed somewher else, pause the sound
    if (mouseX > 170 & mouseX < 300 && mouseY > 30 && mouseY < 130){
        outsidenoise.play();
        } else {
            outsidenoise.pause();
        }

}

I wanted to create an environment and a setting for this project so I decided to create a kitchen/ living room. I was reminded of my childhood when I was working on this project because I used to play a lot of games where I was allowed to decorate my room or my house so I had a lot of fun with this one. The only problem that I had was that the sounds were not playing on WordPress but it works perfectly fine on a local server. I’m still having this problem, but I couldn’t figure it out. I have attached a zip file of my sounds so that it can be played on the local server.

//UPDATED SOUND//

sketch

//Zee Salman
//Project 10
// 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().)


function preload() {
    stomach = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/447911__breviceps__growling-stomach-stomach-rumbles-1.wav");
    fart = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/402628__inspectorj__whoopee-cushion-long-a-1.wav");
    laugh = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/259611__stevious42__baby-laugh-1.wav");
    cry = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/386923__gumballworld__baby-newborn-cry2-1.wav");
    stomach.setVolume(5);
}



function setup() {
    createCanvas(500, 500);
   
}


function draw() {
    // you can replace any of this with your own code:
    background(200);
    //baby head
    noStroke();
    fill("brown");
    ellipse(width/2, height/4, 100, 120 );
    //arms
    rect(width/2.75, height/2.2, 140, 100);
    //baby top
    fill("pink");
    ellipse(width/2, height/2, 100, 140);
    ellipse(width/2.5, height/2.25, 50, 60);
    ellipse(width/1.65, height/2.25, 50, 60);
    //chest
    fill("brown");
    triangle(width/2.5,height/2.6, 300, 192, width/2,height/2);
    //baby tummy
    fill("white");
    ellipse(width/2, height/1.9, 70, 90);
    //baby diapers
    fill("gray")
    ellipse(width/2, height/1.63, 100, 90);
     //baby tummy
     fill("pink");
    rect(width/2.5, height/1.95, 100, 40);
    fill("white");
    rect(width/2.32, height/1.98, 69, 30);
    //baby legs
    fill("brown");
    ellipse(width/1.55,height/1.5, 70, 50);
    ellipse(width/2.65,height/1.5, 70, 50);
    fill("pink");
    ellipse(width/2.35,height/1.5, 50, 50);
    ellipse(width/1.7,height/1.5, 50, 50);
    //baby neck
    fill("brown");
    rect(width/2.22, height/4, 50, 90);
    //hair
    fill("black");
    ellipse(width/2, height/5.5, 90, 60);
    //eyes
    fill("black");
    ellipse(width/2.2, height/3.8, 15, 15);
    ellipse(width/1.85, height/3.8, 15, 15);
    //pacifier
    fill("white");
    ellipse(width/2, height/3.2, 30, 20);
    fill("pink");
    ellipse(width/2, height/3.2, 10, 15);
    

    
}
function mousePressed() {
    //click on the baby's bib/ stomach
    if (mouseX < width/2 + 30 &  mouseX > width/2 - 30 && mouseY < height/2 + 40 && mouseY > height/2- 40){
        stomach.play();
        
        }else{
        stomach.pause();
    }
    //click on the baby's neck/pacifier area
    if (mouseX < width/2 + 10  &  mouseX > width/2 - 30 && mouseY < height/2+20 && mouseY > height/4){
        laugh.play();

        }else{
        laugh.pause();
    }
    //click on the baby's diaper
    if (mouseX < width/2 + 10  &  mouseX > width/2 - 30 && mouseY < height/1.5 && mouseY > height/1.7){
        fart.play();
        }else{
        fart.pause();   
    }
    //click on the bab'ys left leg
    if (mouseX < width/1.55 + 10  &  mouseX > width/2.55 - 10 && mouseY < height/1.5+20 && mouseY > height/1.7){
        cry.play();
        }else{
        cry.pause();

    }

}

I wanted to create a sketch that was cohesive but still had different sounds that would be interesting when put together. I was inspired when I was walking past a woman who had two kids, one was crying and one was laughing. Babies make a variety of sounds and these are just a few interesting ones.

For this project I started with my project 7 because it was one of my favorite projects that I have created.  In that project the geometries change as the mouse is moved so I added a pitch that changes as the mouse is moved.  I then added 4 differently sized circles that are centered on the canvas and when you click on each of them they produce a different sound.  The smallest sound, the ding is heard when the smallest circle is clicked, then the dream sound for the second circle, mail sound for the third circle, and the loudest sound, the blare for the outermost circle.  The sounds were taken from freesound.org.

//Taisei Manheim
//Section C
//tmanheim@andrew.cmu.edu
//Assignment-10

function preload() {
    // call loadImage() and loadSound() for all media files here
    ding = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/ding.wav");
    ding.setVolume(1.0);
    dream = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dream.wav");
    dream.setVolume(1.0);
    mail = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mail.wav");
    mail.setVolume(1.0);
    blare = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/blare.wav");
    blare.setVolume(1.0);
}

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

function soundSetup() { // setup for audio generation
    // you can replace any of this with your own audio code:
    osc = new p5.TriOsc();
    osc.freq(500.0);
    osc.amp(0.1);
    osc.start();
}

function draw() {
    //background color determined by mouse
    background(mouseX, mouseY, mouseX - mouseY);
    noFill();

    //ellipse
    stroke(255);
    ellipse(width / 2, height / 2, 600, 600);
    ellipse(width / 2, height / 2, 450, 450);
    ellipse(width / 2, height / 2, 300, 300);
    ellipse(width / 2, height / 2, 150, 150);

    stroke(0);
    drawHypotrochoidCurve()
    drawRanunculoidCurve()

    //background pitch based on mouseX and mouseY values
    osc.freq(mouseX + mouseY / 1.5);
}

function mousePressed() {
    //if click within first circle play ding sound
    var a = dist(mouseX, mouseY, width / 2, height / 2);
    if (a < 75) {
        ding.play();
    }

    //if click within second circle play dream sound
    var b = dist(mouseX, mouseY, width / 2, height / 2);
    if (b > 75 & b < 150) {
        dream.play();
    }

    //if click within third circle play mail sound
    var c = dist(mouseX, mouseY, width / 2, height / 2);
    if (c > 150 & c < 225) {
        mail.play();
    }

    //if click within fourth circle play blare sound
    var d = dist(mouseX, mouseY, width / 2, height / 2);
    if (d > 225 & c < 300) {
        blare.play();
    }
}

function drawHypotrochoidCurve() {
    //http://mathworld.wolfram.com/Hypotrochoid.html

    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes so that as you move away from center image changes
    var a = map(x, 0, width, 0, width / 64); 
    var b = map(y, 0, height, 0, height / 64);
    var h = width / 2;

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = (a - b) * cos(i) + h * cos((a - b) * i);
        var y = (a - b) * sin(i) - h * sin((a - b) * i);
        vertex(x, y);
    }
    endShape();
    pop();
}

function drawRanunculoidCurve() {
    //http://mathworld.wolfram.com/Ranunculoid.html
    
    //mouse only affects image while on canvas
    var x = constrain(mouseX, 0, width); 
    var y = constrain(mouseY, 0, height);

    //changes speed in which it changes
    var a = map(x, 0, width, 0, width / 8); 
    var b = map(y, 0, height, 0, height / 8);

    push();
    translate(width / 2, height / 2); // starts in the center of the canvas
    rotate(mouseX/ mouseY);
    noFill();
    beginShape();
    for(var i = 0; i < 360; i += 1) {
        var x = a * (6 * cos(i) - cos(6 * i));
        var y = a * (6 * sin(i) - sin(6 * i));
        vertex(x, y);
    }
    endShape();
    pop();
}

sketch

//Siwei Xie
//Section B
//sxie1@andrew.cmu.edu
//Project-10-sonic sketch

var img;
var dog;


function preload() {
    //load "pets" image from imgur
    img = loadImage("https://i.imgur.com/iqyeVWW.png");
    
    //load sound tracks
    // dog = loadSound("dog.wav");
    // cat = loadSound("cat.wav");
    // bird = loadSound("bird.wav");
    // fish = loadSound("fish.wav");
    dog = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/dog.wav");
    cat = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/cat.wav");
    bird = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/bird-1.wav");
    fish = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/fish.wav");
}

function setup() {
    createCanvas(466, 350);
}

function draw(){
    background(100);
    
    //scale the image according to canvas size
    image(img, 1, 1, 
        img.width * 0.4, img.height * 0.4);
}

function mousePressed(){
    //play "dog" track when clicking on upper left area
    if(mouseX < 233 & mouseY < 175){
        dog.play();
    }
    //play "cat" track when clicking on upper right area
    if(mouseX > 233 & mouseY < 175){
        cat.play();
    }
    //play "bird" track when clicking on lower left area
    if(mouseX < 233 & mouseY > 175){
        　bird.play();
    }
    //play "fish" track when clicking on lower right area
    if(mouseX > 233 & mouseY > 175){
        fish.play();
    }
}

I used 4 sound tracks for this project and created a “pet zoo.” The tracks contain dog barks, cat meows, fish bubbling and bird singing. You can play different sound tracks by clicking on different section of the image. I had fun creating this project because it enables me to insert sounds into post and make it interesting.

Originally, I was going to do Goku’s Super Saiyan transformation from Dragon Ball Z, since that show involves a lot of yelling and loud sounds. However, I decided to do an image from the movie My Neighbor Totoro. The image I chose was the cover, with the character Satsuki standing at a bus stop in the rain next to Totoro. I was originally going to color their outlines, but decided to base the color scheme off the Studio Ghibli’s logo and use their blue color with white outlines. I was pretty accurate with recreating the cover, although mine was more simplistic since there are only two colors and the background is left out. The only other changes I made were to the sign, where instead of the actual sign from the cover I put a soot sprite, a little acorn sprout, and the mini white Totoro, all from the movie, and on the ground near the sign, where I added little sprouts. I used A LOT of the bezier() element to recreate the image. 

My Sounds

• The rain is a constant sound that isn’t variable in any way
• If the user presses the center of the umbrella, the sound of rain hitting an umbrella appears.
• If the user presses Totoro’s stomach, the sound of him growling/rumbling appears 
• If the user presses Totoro’s leaf, the sound of rain hitting a leaf appears 

sketch

var umbPnt1X = 123;//front middle umbrella point X
var umbPnt1Y = 421;//front middle umbrella point Y
var umbPnt2X = 167;//X point right of umbPnt1
var umbPnt2Y = 422;//Y point right of umbPnt1
var umbPnt3X = 190;//X point right of umbPnt2
var umbPnt3Y = 429;//Y point right of umbPnt2
var umbPnt4X = 169;//X point left of umbPnt3
var umbPnt4Y = 437;//Y point left of umbPnt3
var umbPnt5X = 66;//X point left of umbPnt4
var umbPnt5Y = 435;//Y point left of umbPnt4
var umbPnt6X = 36;//X point left of umbPnt5
var umbPnt6Y = 431;//Y point left of umbPnt5
var umbPnt7X = 65;//X point right of umbPnt6
var umbPnt7Y = 425;//Y point right of umbPnt6

var rain;//will hold rain sound
var umbrellaRain;//will hold rain on umbrella sound
var growl;//will hold growl sound

function preload() {
    //sorry that this goes over the 80 limit. I couldn't separate the links 
    //because there would be a big pink bar meaning there were issues
    rain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/rain-1.wav');//loads sound of rain
    umbrellaRain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/umbrellaRain.wav');//loads rain on umbrella sound
    leafRain = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/leafRain.wav');//loads sound of rain on leaves
    growl = loadSound('https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/growl.wav');//loads sound of growl
}

function setup() {
    createCanvas(430, 600);
    useSound();//calls sound
}

function soundSetup() { // setup for audio generation
    rain.setVolume(0.5);//sets rain volume 
    umbrellaRain.setVolume(0.4);//sets umbrella rain volume
    leafRain.setVolume(0.4);
    growl.setVolume(0.3);//sets growl volume
    rain.loop();//loops rain audio so it keeps replaying
}

function draw() {
    background(100,174,236);//blue
//----------------------------------------------------------------------------
    //__________________________DRAWING__________________________

    //RAIN
    //---rain lines
    push();
    var r = 5;
    var R = 8;
    var n = 10;
    strokeWeight(.35);
    line(r * 5, r * 20, r * 5,r * 30);
    line(r * 15, r * 25, r * 15,r * 35);
    line(r * 20, r * 35, r * 20,r * 45);
    line(r * 25, r * 55, r * 25,r * 65);
    line(r * 30, r * 10, r * 30,r * 20);
    line(r * 45, r * 25, r * 45,r * 35);
    line(r * 45, r * 46, r * 45,r * 58);
    line(r * 50, r * 15, r * 50,r * 25);
    line(r * 55, r * 5, r * 55,r * 15);
    line(r * 60, r * 10, r * 60,r * 20);
    line(r * 60, r * 20, r * 60,r * 30);
    line(r * 65, r * 28, r * 65,r * 41);

    line(R * 5, R * 20, R * 5,R * 30);
    line(R * 15, R * 15, R * 15,R * 23);
    line(R * 20, R * 35, R * 20,R * 45);
    line(R * 30, R * 10, R * 30,R * 20);
    line(R * 45, R * 25, R * 45,R * 35);
    line(R * 50, R * 15, R * 50,R * 25);
    line(R * 55, R * 5, R * 55,R * 15);
    line(R * 60, R * 10, R * 60,R * 20);
    line(R * 60, R * 20, R * 60,R * 30);
    line(R * 65, R * 45, R * 65,R * 55);

    line(n * 1, n * 40, n * 1, n * 50);
    line(n * 3, n * 37, n * 3, n * 42);
    line(n * 3, n * 50, n * 3, n * 60);
    line(n * 2, n * 22, n * 2, n * 30);
    line(n * 7, r * 5, n * 7, r * 15);
    line(n * 7, n * 10, n * 7, n * 20);
    line(n * 9, n * 50, n * 9, n * 55);
    line(n * 10, n * 30, n * 10, n * 37);
    line(n * 18, n * 15, n * 18, n * 22);
    line(n * 17, n * .5, n * 17, n * 5);
    line(n * 37, n * 1, n * 37, n * 7);
    pop();
    
    strokeWeight(.5);
    //SIGN
    stroke('white');
    ellipse(52,324, 68,68);//sign
    line(20,314, 84,314);//top line
    line(20,334, 84,334);//bottom line
    line(48,358.5, 48,409.5);//left side of pole top
    line(56,358.5, 56,404);//right side of pole top
    line(48,430, 48,574);//left side of pole bottom
    line(56,431.5, 56,574);//right side of pole bottom
    bezier(48,574, 51,575, 53,575, 56,574);//bottom of pole
    fill('white');
    
    //---soot sprite
    var sprtSize = 8;//sprite size
    var sprtCrdX = 30;//sprite X coordinate 
    var sprtCrdY = 324;//sprite Y coordinate
    ellipse(sprtCrdX,sprtCrdY, sprtSize,sprtSize);//body
    //~~~spikes
    push();
    strokeWeight(.8);
    line(sprtCrdX - 5.5,sprtCrdY, sprtCrdX + 5.5,sprtCrdY);//horizontal
    line(sprtCrdX - 1,sprtCrdY - 5.5, sprtCrdX + 1,sprtCrdY + 5.5);//1L
    line(sprtCrdX + 1,sprtCrdY - 5.5, sprtCrdX - 1,sprtCrdY + 5.5);//1R
    line(sprtCrdX - 2,sprtCrdY - 5, sprtCrdX + 2,sprtCrdY + 5);//2L
    line(sprtCrdX + 2,sprtCrdY - 5, sprtCrdX - 2,sprtCrdY + 5);//2R
    line(sprtCrdX - 3,sprtCrdY - 4.5, sprtCrdX + 3,sprtCrdY + 4.5);//3L
    line(sprtCrdX + 3,sprtCrdY - 4.5, sprtCrdX - 3,sprtCrdY + 4.5);//3R
    line(sprtCrdX - 4,sprtCrdY - 4, sprtCrdX + 4,sprtCrdY + 4);//4L
    line(sprtCrdX + 4,sprtCrdY - 4, sprtCrdX - 4,sprtCrdY + 4);//4R
    line(sprtCrdX - 5,sprtCrdY - 2, sprtCrdX + 5,sprtCrdY + 2);//5L
    line(sprtCrdX + 5,sprtCrdY - 2, sprtCrdX - 5,sprtCrdY + 2);//5R
    line(sprtCrdX - 4.5,sprtCrdY - 3, sprtCrdX + 4.5,sprtCrdY + 3);//6L
    line(sprtCrdX + 4.5,sprtCrdY - 3, sprtCrdX - 4.5,sprtCrdY + 3);//6R
    line(sprtCrdX - 5.5,sprtCrdY - 1, sprtCrdX + 5.5,sprtCrdY + 1);//7L
    line(sprtCrdX + 5.5,sprtCrdY - 1, sprtCrdX - 5.5,sprtCrdY + 1);//7R
    line(sprtCrdX,sprtCrdY - 5.5, sprtCrdX,sprtCrdY + 5.5);//vertical
    pop();
    //---eyes
    //~~~whites
    push();
    push();
    stroke(100,174,236);//blue
    ellipse(sprtCrdX - 2.1,sprtCrdY, sprtSize / 2.4,sprtSize / 2.4);
    ellipse(sprtCrdX + 2.1,sprtCrdY, sprtSize / 2.4,sprtSize / 2.4);
    pop();
    //~~~pupils
    fill(100,174,236);//blue
    ellipse(sprtCrdX - 2.1,sprtCrdY, sprtSize / 4,sprtSize / 4);
    ellipse(sprtCrdX + 2.1,sprtCrdY, sprtSize / 4,sprtSize / 4);
    pop();

    //---white mini totoro
    ellipse(74,324, 10,12);//body
    ellipse(74,326, 11,10);//bottom
    //~~~ears
    bezier(69.5,322, 70.5,313.5, 71,313.5, 72,320);//left ear
    bezier(78.5,322, 77,313.5, 76.5,313.5, 75.5,320);//right ear
    //---eyes
    push();
    stroke(100,174,236);//blue
    //~~~whites
    ellipse(72,322, 3.5,3.5);//left 
    ellipse(76,322, 3.5,3.5);//right
    //~~~pupils
    fill(100,174,236);//blue
    ellipse(72,322, 1.2,1.2);//left
    ellipse(76,322, 1.2,1.2);//right
    pop();

    //---plants
    var stemX = 52//stem X of sign plant
    var stemY = 320;//stem Y of sign plant
    var leafW = 7;//leaf width of sign plant
    var leafH = 2.5;//leaf height of sign plant
    //~~~on sign
    line(stemX,stemY + 8, stemX,stemY);//stem
    ellipse(stemX + 4,stemY, leafW,leafH);//right leaf
    ellipse(stemX - 4,stemY, leafW,leafH);//left leaf
    //~~~on ground 
    line(stemX - 4,576, stemX - 4,573);//stem (left of pole)
    ellipse(stemX - 6,stemY + 252, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX - 2,stemY + 252, leafW - 3,leafH - .5);//left leaf
    line(stemX + 11,575, stemX + 11,567);//stem (right of pole big)
    ellipse(stemX + 14.5,stemY + 247, leafW - 1,leafH);//right leaf
    ellipse(stemX + 7.5,stemY + 247, leafW - 1,leafH);//left leaf  
    line(stemX + 14,576, stemX + 14,573);//stem (right of pole small 1)
    ellipse(stemX + 16,stemY + 252, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 12,stemY + 252, leafW - 3,leafH - .5);//left leaf
    line(stemX + 16.5,581, stemX + 16.5,579);//stem (right of pole small 2)
    ellipse(stemX + 18.5,stemY + 258, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 14.5,stemY + 258, leafW - 3,leafH - .5);//left leaf
    line(stemX + 24,577, stemX + 24,574);//stem (right of pole small 3)
    ellipse(stemX + 26,stemY + 254, leafW - 3,leafH - .5);//right leaf
    ellipse(stemX + 22,stemY + 254, leafW - 3,leafH - .5);//left leaf
    line(stemX + 29,578, stemX + 29,577.5);//stem (right of pole small 4)
    ellipse(stemX + 30.5,stemY + 256.3, leafW - 4,leafH - .5);//right leaf
    ellipse(stemX + 27.5,stemY + 256.3, leafW - 4,leafH - .5);//left leaf
    line(stemX + 37.5,580, stemX + 37.5,579.5);//stem (right of pole small 5)
    ellipse(stemX + 38.7,stemY + 258.5, leafW - 5,leafH - 1.5);//right leaf
    ellipse(stemX + 36.2,stemY + 258.5, leafW - 5,leafH - 1.5);//left leaf

    noFill();
    //TOTORO
    //---eyes
    stroke(255);//WHITE
    ellipse((width / 2) + 37, (height / 2) + 6, 23,22);//left eyeball
    ellipse((width / 2) + 120, (height / 2) + 6, 23,22);//right eyeball
    ellipse((width / 2) + 37, (height / 2) + 6, 6,6);//left pupil
    ellipse((width / 2) + 120, (height / 2) + 6, 6,6);//right pupil
    push();
    noStroke();
    ellipse((width / 2) + 39, (height / 2) + 6, 1,2);//left eye shine
    ellipse((width / 2) + 122, (height / 2) + 5.5, 1,1);//right eye shine
    pop();
    //---nose
    stroke(255);
    bezier(277,308, 283,309, 292,310, 294,312);//left bottom line
    bezier(311,308, 303,309, 299,310, 294,312);//right bottom line
    bezier(277,308, 289,302, 300,302, 311,308);//top of triangle
    bezier(277,308, 289,298, 300,298, 311,308);//top arc 
    //~~~nostrils
    push();
    fill(100,174,236);
    ellipse(286,309, 4,4);//left
    ellipse(301,309, 4,4);//right
    pop();
    //---whiskers
    //~~~right 
    line(332,321, 395,318);//top
    line(339,326, 392,326);//middle
    line(338,331, 399,338);//bottom
    //~~~left
    line(252,321, 186,319);//top
    line(243,327, 187,330);//middle
    line(250,332, 192,344);//bottom
    //---ears
    //~~~left
    bezier(252,214, 241,245, 243,256, 242,264);//left side top
    bezier(252,214, 258,231, 266,242, 267,257);//right side top
    bezier(242,264, 243,265, 245,266, 248,266);//left side bottom
    bezier(267,257, 266,259, 265,261, 262,264);//right side bottom
    bezier(248,266, 249,269, 249,273, 249,276);//stem left
    bezier(262,264, 261,266, 262,270, 264,271);//stem right
    //~~~right
    bezier(338,214, 330,229, 326,248, 325,258);//left side top
    bezier(338,214, 341,227, 348,254, 345,264);//right side top
    bezier(325,258, 326,260, 328,261, 329,262);//left side bottom
    bezier(345,264, 344,265, 343,265, 342,265);//right side bottom
    bezier(329,262, 329,263, 329,264, 328,267);//stem left
    bezier(342,265, 342,268, 340,275, 342,278);//stem right
    //---head
    bezier(249,276, 223,290, 215,325, 207,353);//left side
    bezier(264,271, 266,271, 268,271, 271,270);//left bit next to ear
    bezier(342,278, 368,292, 368,325, 377,344);//right side
    //---Leaf
    //~~~stem
    bezier(295,265, 300,261, 298,245, 296,240);//right side
    bezier(296,240, 297,238, 298,238, 299,238);//top
    bezier(299,238, 301,246, 302,259, 300,267);//left side
    //~~~base
    bezier(273,272, 278,285, 289,284, 295,280);//left front lump
    bezier(295,280, 302,273, 310,275, 313,278);//middle front lump
    bezier(313,278, 319,281, 326,280, 328,274);//right front lump
    bezier(328,274, 328,270, 328,264, 326,262);//right of right lump
    bezier(326,262, 322,261, 313,263, 308,264);//right front lump top
    bezier(308,264, 306,264, 303,264, 301,264);//small bit right if stem
    bezier(296,263, 286,259, 277,258, 270,266);//back lump
    bezier(265,271, 264,262, 270,267, 273,272);//leftest lump
    line(267,266, 281,265.5);//line detail

    //---body
    //~~~stomach
    strokeWeight(.5);
    bezier(361,372, 327,332, 257,332, 227,372);//top curve
    bezier(227,372, 210,395, 200,434, 198,464);//left top
    bezier(361,372, 380,395, 385,434, 387,465);//right top
    bezier(361,562, 342,589, 250,590, 226,562);//bottom
    bezier(387,465, 391,515, 376,543, 361,562);//right bottom
    bezier(198,464, 194,501, 206,541, 226,562);//left bottom
    //~~~markings (from right to left and top to bottom)
    bezier(231,382, 238,368, 241,367, 247,378);//top 1
    bezier(231,382, 236,377, 241,374, 247,378);//bottom 1
    bezier(259,374, 266,362, 269,362, 278,372);//top 2
    bezier(259,374, 265,370, 270,370, 278,372);//bottom 2
    bezier(295,372, 302,360, 304,360, 315,371);//top 3
    bezier(295,372, 300,368, 309,368, 315,371);//bottom 3
    bezier(331,374, 337,361, 340,366, 349,377);//top 4
    bezier(331,374, 336,370, 343,372, 349,377);//bottom 4
    bezier(211,423, 215,409, 219,408, 221,418);//top 5
    bezier(211,423, 214,419, 216,416, 221,418);//bottom 5
    bezier(240,416, 247,400, 250,398, 257,413);//top 6
    bezier(240,416, 245,410, 252,409, 257,413);//bottom 6
    bezier(278,410, 286,394, 291,394, 297,410);//top 7
    bezier(278,410, 285,404, 290,405, 297,410);//bottom 7
    bezier(321,410, 328,395, 329,397, 341,413);//top 8
    bezier(321,410, 328,405, 334,408, 341,413);//bottom 8
    bezier(358,415, 362,403, 365,403, 372,418);//top 9
    bezier(358,415, 362,410, 366,410, 372,418);//bottom 9
    //~~~arms
    bezier(207,353, 193,373, 188,401, 185,417.5);//left top outer
    bezier(184,428, 179,452, 179,493, 192,503);//left bottom outer
    bezier(377,344, 406,390, 407,440, 410,455);//top right outer
    bezier(410,455, 410,469, 406,498, 394,509);//bottom right outer
    bezier(206,396, 194,425, 190,473, 192,503);//left inner
    bezier(390,403, 396,445, 396,479, 394,509);//right inner
    //~~~legs
    //L
    bezier(192,503, 192,532, 206,566, 226,576.5);//left outer
    bezier(243,580, 249,582, 261,582, 268,581);//left bottom
    //R
    bezier(359,580, 352,581, 338,582, 326,580);//right bottom
    bezier(394,509, 394,537, 390,561, 375,576);//right outer
    //---claws
    //~~~on hands
    bezier(186,495, 183,505, 185,506, 189,500);//left of left
    bezier(190,501, 181,517, 183,517, 192,506);//right of left
    bezier(402,496, 409,508, 408,509, 400,500);//right of right
    bezier(399,502, 406,512, 405,514, 397,505);//middle of right
    bezier(396,507, 398,513, 398,515, 394,510);//bottom of right
    //~~~on feet
    //L
    bezier(229,576.5, 207,578, 210,580, 221,580);//leftest claw of left
    bezier(220,581, 227,576, 234,576, 237,579);//top of middle of left
    bezier(220,581, 226,580, 232,579, 237,579);//top of middle of left
    bezier(243,580, 239,578, 237,579, 235,581);//top of rightest of left
    bezier(243,580, 240,581, 237,582, 235,581);//bottom of rightest
    //R
    bezier(373,576, 378,576, 383,577, 387,581);//top of rightest of right
    bezier(373,576, 371,580, 382,579, 387,581);//bottom of rightest of right
    bezier(365,579, 369,576, 374,578, 381,583);//top of middle of right
    bezier(365,579, 370,580, 374,581, 381,583);//bottom of middle of right
    bezier(359,580, 362,577, 365,579, 370,582.5);//top of leftest of right
    bezier(359,580, 362,581, 365,582, 370,582.5);//bottom of leftest of right
//----------------------------------------------------------------------------
    //SATSUKI
    //---Head
    bezier(110.5,450, 116,456, 127,458, 134,450);//bottom
    bezier(134,450, 134,445, 136,440, 137,439);//right cheek
    line(109,447.5, 109.5,448.5);//left little cheek
    //~~~ears
    bezier(107,447, 101,441, 105,436, 108,442);//left
    line(107,447, 109,447.5);//left lobe
    line(105,441, 108,444);//left line
    bezier(134.5,447, 137,447, 140,443, 137,439);//right
    bezier(135,445, 137,443, 137,441, 136,440);//right line
    //---neck
    line(118,455., 118,457);//left side
    line(125.5,455.5, 125.5,458);//right side
    //---Face
    //~~~blush
    ellipse(113,444, 2,1);//left
    ellipse(132,444, 2,1);//right
    //~~~mouth
    bezier(121,452, 122,450, 124,450, 125,452);//mouth
    line(122.6,453, 123.4,453);//bottom lip
    //~~~nostrils
    point(121, 443);//left
    point(123, 443);//right
    //~~~eyebrows
    bezier(112,434, 114,432, 115,432, 117,434);//left
    bezier(127,434, 129,432, 130,432, 132,434);//right
    //---eyes
    //~~~outline
    //L
    bezier(112,439, 112,435, 116,435, 117,438);//left top
    line(129,442, 130.5,442);//left bottom
    //R
    bezier(127,438, 129,435, 131,435, 132.5,439);//right top
    line(114,442, 115.5,442);//right bottom
    //~~~pupils
    ellipse(114.5,439, 2,3);//left
    ellipse(129.5,439, 2,3);//right
    //---Hair
    //~~~inner
    bezier(137,439, 137,434, 137,426, 132,423);//right inner
    bezier(108,442, 108,438, 107, 434, 109.5,432);//left inner
    //~~~details
    bezier(110.5,431.5, 113,430, 118,429, 121,429);//bang bottom
    bezier(121,429, 123,428, 124,426, 125,424);//bang right
    bezier(123.5,429, 126,426, 126,425, 125,424);//big hair piece left
    bezier(123.5,429, 128,428, 130,423, 129,421);//big hair piece right
    bezier(129,421, 130.5,426, 131,426, 132,423);//small hair piece
    //~~~outer
    bezier(104,440, 99,431, 102,421, 106,418);//outer left
    bezier(138,440, 144,438, 143,421, 136,417);//outer right
    //~~~pony tails
    //L
    bezier(85,440, 87,436, 89,431, 97,429);//left top of left
    bezier(85,440, 87,438, 88,437, 89,435);//left bit of left
    bezier(87.5,438, 85,440, 86,445, 90,450);//left bottom of left
    bezier(90,450, 97,446, 100,442, 100,441);//right bottom of left
    bezier(100,441, 101,437, 100,433, 99.5,434);//right top of left
    //R
    bezier(146,429, 154,431, 157,438, 157,442);//right top of right
    bezier(152,450, 154,448, 155,447, 155,447);//right bottom of right
    bezier(152,450, 151,449, 149,448, 149,448);//left bottom of right bottom
    bezier(142,442, 142,442, 143,443, 145,445);//left bottom of right top
    line(141.5,436, 142,442);//left top of right 
    //~~~hair tie balls
    //R
    ellipse(144.5,428, 4,4);//right front
    ellipse(143.5,426, 4,4);//right back
    //L
    ellipse(99,428, 4,4);//left front
    ellipse(100,424, 4,4);//left back
    ellipse(99,432, 4,4);//left back bottom
    //---Clothes
    //---shirt
    bezier(132.5,485, 132,483, 132,483, 132,481);//right side bottom
    bezier(132,481, 134.5,477, 133,473, 133.5,466.5);//right side top
    //~~~collar
    //L
    bezier(113.5,458, 114,459, 113,463, 115.5,467);//collar left outer
    bezier(117,456, 117,457, 119,460, 122.5,461);//collar left inner
    bezier(117,456, 116,456, 115,458, 113.5,458);//collar left back
    bezier(115.5,467, 119,465, 121,461, 122.5,461);//collar left middle
    //R
    bezier(129,466, 130,464, 131,461, 130,458);//collar right outer
    bezier(126,456, 127,457, 124,460, 122.5,461);//collar right inner
    bezier(126,456, 128,455, 129,458, 130,458);//collar right back
    bezier(129,466, 127,466, 124,463, 122.5,461);//collar right middle
    //M
    ellipse(122,465, 2,2);//button
    //~~~sleeves
    //L
    bezier(107,458, 109,458, 111,459, 113.5,458);//left top of shoulder
    bezier(107,458, 102,461, 103,469, 100,474);//left of left sleeve
    bezier(105,477, 99,472, 98,474, 104,478);//opening of left
    //R
    bezier(130,458, 133,459, 135, 458, 136,459);//right top of shoulder
    bezier(136,459, 140,460, 141,467, 141,468);//right of right sleeve
    bezier(133.5,477, 136,476, 137,475, 140,472);//opening of right
    line(133.5,470, 135,467.5);//crease
    //~~~skirt
    bezier(95.5,513, 98.7,513, 102,492, 111,488);//left side
    bezier(95.5,513, 96,519, 105,515, 114,521);//bottom right
    bezier(114,521, 127,523, 140,520, 147,515);//bottom left
    bezier(147,515, 141,509, 142,494, 133,489);//right side
    bezier(133,489, 133,487, 133,486, 133,485);//right band
    bezier(116,485, 120,486.2, 127,486.4, 133,485);//top
    line(119,489.5, 125,489.5);//bottom band line
    //~~~skirt straps
    //R
    bezier(129,466, 128.5,480, 128.5,471, 129,486);//left of right strap
    bezier(130.5,485, 131,479, 132,469, 131,458);//right of right strap
    //L
    line(112.5,484, 113,472);//left of left strap bottom
    bezier(112.5,465, 113,462, 113,460, 113.5,458);//left of left strap top
    line(115.5,474, 115.5,467);//right of left strap
    //~~~skirt buttons
    ellipse(115,487, 3,3);//left
    ellipse(130,487, 3,3);//right
    //---umbrellas
    //~~~handle
    //pink
    bezier(109,477.5, 107,491, 118,491, 117,476);//outer loop
    bezier(111,476.5, 110,487, 116,487, 114.5,476);//inner loop
    bezier(114.5,476, 115.5,474, 116,474, 117,476);//top of loop
    bezier(109,466, 109,462, 111,462, 111,466);//top of handle
    //black
    bezier(142,456, 142,436, 166,438, 162,456);//outer loop curve
    bezier(141,469, 142,463, 142,459, 142,456);//outer loop line
    bezier(147,456, 147,442, 160,444, 157,456);//inner loop curve
    bezier(146,469, 146,464, 147,461, 147,456);//inner loop line
    bezier(157,456, 157.5,461, 161.5,461, 162,456);//bottom of loop
    bezier(141,469, 143,469.5, 144,469.5, 146,469);//bottom line
    bezier(141,469, 139.5,470, 140,470, 140,472);//left side of rectangle
    bezier(146,469, 147,471, 146,471, 146,472.5);//right side of rectangle
    line(140,472, 143,472);//bottom of rectangle
    //~~~umbrella body
    //R
    bezier(136,532, 137,528, 138,523, 139,519);//bottom part near leg
    bezier(142,503, 145,498, 143,494, 143,492);//middle of right
    bezier(143,490, 150,485, 150,485, 146,481);//top of right
    //L
    bezier(137,492, 137,485, 136,479, 138,479);//left long bit
    line(141,473, 141,472);//left short bit
    //S
    bezier(143,492, 143.5,491, 143.5,491, 143,490);//right of strap
    bezier(137,489, 138.5,490.5, 141,490.5, 143,490);//top of strap
    bezier(137,492, 139.5,493, 141,493, 143,492);//bottom of strap
    //D
    line(145,482, 147.5,485);//detail right diagonal
    line(144,488, 145,483);//detail vertical right
    line(143,487, 143.5,485);//detail  vertical  (small)
    line(141.5,487, 142,481);//detail vertical left
    line(139,488, 139.5,479);//detail vertical (long)
    line(141.5,493, 142,495);//detail bottom right
    line(140,493, 139.5,494);//detail bottom left
    push();
    //~~~stem
    strokeWeight(.5);
    line(110,463, 110,418);//left
    line(110.5,463, 110,418);//right
    pop();
    //~~~arcs
    bezier(umbPnt1X,umbPnt1Y, 137,414, 159,415, umbPnt2X,umbPnt2Y);//arc 1-- 
        //--(right of p1)
    bezier(umbPnt2X,umbPnt2Y, 180,421, 186,425, umbPnt3X,umbPnt3Y);//arc 2 
    bezier(189,428, 183,427, 174,429, umbPnt4X,umbPnt4Y);//arc 3
    bezier(153,433, 157,432, 163,432, umbPnt4X,umbPnt4Y);//arc 4
    bezier(89,433, 84,432, 73,432, umbPnt5X,umbPnt5Y);//arc 5
    bezier(umbPnt5X,umbPnt5Y, 58,430, 47,428, 38.3,430);//arc 6
    bezier(umbPnt6X,umbPnt6Y, 44,425, 55,421, umbPnt7X,umbPnt7Y);//arc 7
    bezier(umbPnt7X,umbPnt7Y, 83,416, 114,416, umbPnt1X,umbPnt1Y);//arc 8-- 
        //--(left of p1)
    //~~~dividing lines
    bezier(81,395.5, 50,401, 36,420, umbPnt6X,umbPnt6Y);//leftest outline
    bezier(88,393, 74,396, 66,412, umbPnt7X,umbPnt7Y);//left line
    bezier(118,391, 124,400, 123,416, umbPnt1X,umbPnt1Y);//middle line
    bezier(145,392, 163,397, 166,413, umbPnt2X,umbPnt2Y);//rightline
    bezier(154,396, 180,403, 187,419, umbPnt3X,umbPnt3Y);//rightest outline
    bezier(118,391, 108,393, 98,393, 88,393);//top left
    bezier(118,391, 128,393, 139,392, 145,392);//top right
    bezier(161,419.3, 167,425, 168,432, umbPnt4X,umbPnt4Y);//underneath right
    bezier(74,421.9, 69,427, 68,431, umbPnt5X,umbPnt5Y);//underneath left
    //---Limbs
    //~~~arms
    //L
    bezier(105,489, 101,483, 102,480, 105,477);//left of left arm
    bezier(105,489, 108,488, 108,487, 109,486);//bottom of left arm
    //R
    bezier(134.5,477, 135,480, 136,482, 136.5,484);//right arm
    //~~~hands
    strokeWeight(.7);
    bezier(105,477, 104,474, 104.5,471, 104.5,469);//left hand left side
    bezier(104.5,469, 107,466, 110,466, 112,466.5);//left hand top
    bezier(109,477.5, 111,476, 112,476, 112,476);//left hand bottom
    //~~~fingers
    //L
    bezier(108,469, 114,468, 111,469, 112,466.5);//top finger left
    bezier(108,471.5, 113,470, 112,472, 112,469);//2nd left
    bezier(109,474, 113,473, 112,473, 112,471);//3rd left
    bezier(112,476, 112.5,475.5, 112.5,475, 112,474);//bottom left
    bezier(112,468, 114,470, 114,471, 112,473);//thumb left
    //R
    bezier(145,472.5, 147,473, 147,478, 146,481);//right side
    bezier(145,472.5, 139,473.5, 139,476, 146,474.5);//top finger right
    bezier(146,475, 140,476, 140,477, 146,477);//2nd right
    bezier(146,477, 141,478.5, 141,479.5, 146,479);//3rd right
    bezier(146,479, 142,481, 142,481, 146,481);//bottom right
    bezier(137,479, 137,475, 138,474, 141,472.5);//thumb right outer
    bezier(137,479, 137,480.5, 142,474, 140,474);//thumb right inner
    //~~~legs
    //L
    bezier(109,547, 108,543, 106,535, 109.5,526);//calf of left leg
    bezier(109.5,526, 110,523, 109.5,522, 108.5,518.5);//left of left leg top
    bezier(118,547, 118,540, 120,528, 119,522);//right of left leg
    bezier(111,526.5, 111,527, 111,527, 113,528.5);//detail left leg
    //R
    bezier(135,548, 136,540, 137,533, 135,527);//calf of right leg
    bezier(135,527, 135,525, 134.5,523, 135.5,520);//left of right leg top
    bezier(127,548, 126.5,540, 124,526, 124.5,522);//left of right leg
    bezier(127,529, 127.5,530, 128,530, 128,531);//detail right leg left
    line(132,530, 133,529);//detail right leg right
    //~~~boots
    //L
    bezier(107,547, 111,548, 114,548, 118,547);//top curve of left
    bezier(108,545, 103.5,544, 105,564, 107,569);//left of left side top
    bezier(107,569, 106,572, 104,575, 106,577);//left of left side bottom
    bezier(106,577, 110,584, 119,580.5, 121,580);//bottom curve of left
    bezier(121,580, 122,576, 121,573, 119,570);//right of right side bottom
    bezier(119,570, 120,559, 123,546, 118,545);//right of left side top
    //R
    bezier(126,547, 127,549, 133,549, 137,547);//top curve of right
    bezier(135,545.5, 142.5,545, 137,563, 137,570);//right of right side top
    bezier(137,570, 138,574, 139,577, 138,580);//right of right side bottom
    bezier(138,580, 134,582, 127,582, 123,580);//bottom curve of right
    bezier(123,580, 122,577, 124,573, 125,569);//left of right side bottom
    bezier(125,569, 125,558, 121,545, 127,546);//right of right side top
}

function mousePressed() {//if mouse is pressed...
    //if the mouse is pressed between these specific areas, then...
    if(dist(mouseX,mouseY, 294,440) < 85){///growl 
        growl.play();//plays growl audio
    }
    if(dist(mouseX,mouseY, 115,406) < 75){///umbrella rain 
        umbrellaRain.play();//plays rain on umbrella audio
    }
    if(dist(mouseX,mouseY, 297,269) < 65){//leaf rain sound
        leafRain.play();//plays rain on leaves audio
    }
}

sketch

//gretchen kupferschmid
//gkupfers@andrew.cmu.edu
//project 10
//section e

var banana;
var lick;
var mouth;
var eyes;


function preload() {
    // call loadImage() and loadSound() for all media files here
    banana = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/banana.wav");
    lick = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/lick.wav");
    mouth = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/mouth.wav");
    eyes = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/eyes.wav");
    
}


function setup() {
    createCanvas(480, 480);
    useSound();
    //======== call the following to use sound =========
   
}
function soundSetup() { // setup for audio generation
    banana.setVolume(0.5); 
    lick.setVolume(0.5); 
    mouth.setVolume(0.5); 
    eyes.setVolume(0.5); 
}



function draw() {
    background(241,198,217);
    
    
    //mouth lips
    noStroke();
    fill(255,0,0);
    beginShape();
    curveVertex(68,359);
    curveVertex(101,319);
    curveVertex(133,304);
    curveVertex(150,312);
    curveVertex(175,302);
    curveVertex(196,329);
    curveVertex(188,360);
    curveVertex(197,416);
    curveVertex(156,431);
    curveVertex(111,404);
    curveVertex(68,359);
    curveVertex(101,319);
    endShape();
    
    
    //mouth black
    fill(0);
    beginShape();
    curveVertex(87,357);
    curveVertex(100,350);
    curveVertex(112,337);
    curveVertex(130,328);
    curveVertex(146,327);
    curveVertex(170,320);
    curveVertex(181,330);
    curveVertex(178,363);
    curveVertex(142,363);
    curveVertex(87,357);
    curveVertex(100,350);
    endShape();
    
    //mouth toungue
    fill(240,110,270);
    noStroke();
    beginShape();
    curveVertex(84,357);
    curveVertex(127,358);
    curveVertex(176,365);
    curveVertex(177,408);
    curveVertex(133,398);
    curveVertex(84,357);
    curveVertex(127,358);
    endShape();
    
    
    
    //mouth teeth
    fill(255);
    beginShape();
    curveVertex(107,341);
    curveVertex(129,328);
    curveVertex(148,327);
    curveVertex(171,320);
    curveVertex(180,327);
    curveVertex(175,340);
    curveVertex(158,343);
    curveVertex(150,340);
    curveVertex(146,342);
    curveVertex(127,341);
    curveVertex(120,345);
    curveVertex(114,340);
    curveVertex(107,341);
    endShape();
    
    //banana
    fill(235,222,176);
    beginShape();
    curveVertex(325,39);
    curveVertex(325,45);
    curveVertex(326,10);
    curveVertex(336,9);
    curveVertex(347,39);
    curveVertex(363,77);
    curveVertex(352,90);
    curveVertex(332,89);
    curveVertex(325,39);
    endShape();
    
    
    //banana peel
    fill(240,201,66);
    beginShape();
    curveVertex(304,166);
    curveVertex(311,149);
    curveVertex(310,102);
    curveVertex(318,80);
    curveVertex(331,86);
    curveVertex(343,92);
    curveVertex(349,86);
    curveVertex(364,80);
    curveVertex(364,64);
    curveVertex(407,89);
    curveVertex(423,115);
    curveVertex(412,117);
    curveVertex(395,108);
    curveVertex(379,104);
    curveVertex(373,96);
    curveVertex(383,132);
    curveVertex(412,189);
    curveVertex(398,194);
    curveVertex(372,181);
    curveVertex(340,134);
    curveVertex(331,104);
    curveVertex(329,113);
    curveVertex(331,134);
    curveVertex(326,161);
    curveVertex(306,167);
    curveVertex(304,166);
    curveVertex(311,149);
    endShape();
    
    //banana dots
    fill(96,57,19);
    ellipse(359,155,6,6);
    ellipse(366,160,4,5);
    ellipse(363,165,3,5.5);
    
    //ice cream cone
    fill(166,124,82);
    triangle(337,437,290,310,384,310);
    
    //ice cream cone shadow
    fill(124,88,53);
    ellipse(337,320,80, 20);
    
    //ice cream
    fill(240,110,170);
    beginShape();
    curveVertex(275,296);
    curveVertex(283,279);
    curveVertex(299.270);
    curveVertex(304,259);
    curveVertex(317,255);
    curveVertex(321,240);
    curveVertex(330,236);
    curveVertex(336,220);
    curveVertex(349,210);
    curveVertex(347,226);
    curveVertex(357,234);
    curveVertex(362,245);
    curveVertex(364,247);
    curveVertex(378,256);
    curveVertex(362,268);
    curveVertex(394,292);
    curveVertex(397,311);
    curveVertex(352,319);
    curveVertex(351,314);
    curveVertex(293,316);
    curveVertex(277,304);
    curveVertex(275,296);
    curveVertex(283,279);
    endShape();
    
    //eye line
    noFill();
    stroke(0);
    strokeWeight(4);
    beginShape();
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    curveVertex(184,124);
    curveVertex(182,128);
    curveVertex(152,145);
    curveVertex(100,147);
    curveVertex(60,132);
    curveVertex(59,129);
    curveVertex(97,102);
    curveVertex(150,99);
    endShape();
    
    //eye interior
    noStroke();
    fill(0,174,239);
    ellipse(126,124,50,50);
    fill(0);
    ellipse(133,119,14,14);
    
    //eyelashes
    strokeWeight(4);
    stroke(0);
    line(65,123,52,108);
    line(75,114,64,95);
    line(94,104,87,86);
    line(108,98,105,82);
    line(129,95,130,77);
    line(150,99,155,81);
    line(163,107,178,88);
    line(178,118,192,102);
 
}

function mousePressed(){
    if(mouseX > 305 & mouseX < 423 && mouseY > 7.2 && mouseY < 195){
        banana.play();
    }
    if (mouseX > 275 & mouseX < 398 && mouseY > 211 && mouseY < 436){
        lick.play();
    }
    if (mouseX > 70 & mouseX < 196 && mouseY > 302 && mouseY < 432){
        mouth.play();
    }
    if (mouseX > 52 & mouseX < 192 && mouseY > 76 && mouseY < 150){
        eyes.play();
    }
}

I wanted to play with icons and the sounds that could possibly go with these when clicked on. I could see myself implementing this into my website later on so that sounds can accompany my illustrations.

For this project, I wanted to create a landscape that responded to the position of your mouse both visually and through sound. When you click your mouse, depending on the mouse’s position, different sounds will play. The four sounds I chose were chirping birds to represent the daytime, insects to represent the night, wind blowing through grass for the field/desert, and water flowing for the river.

//Julia Nishizaki
//Section B
//jnishiza@andrew.cmu.edu
//Project 10

var night; //nighttime sounds
var daytime; //daytime sounds
var field; //sound of fields
var river; //river sounds

function preload() {
    // loads four sounds
    field = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/field.wav");
    night = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/night.wav");
    daytime = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/day.wav");
    river = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/river.wav");
}

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

function soundSetup() { // setup for audio generation
    field.setVolume(0.1); //sets Volume for all four sounds at a quarter the volume
    night.setVolume(0.1);
    daytime.setVolume(0.1);
    river.setVolume(0.1);
}

function draw() {
    background(200);

    noStroke();
    colorMode(HSB, 100); //switches color mode to HSB, easier to manipulate with mouse
    var constMouseX = constrain(mouseX, 0, width); //constrains X direction of mouse within canvas
    var constMouseY = constrain(mouseY, 0, height); //constrains Y direction of mouse within canvas

    //variables for the different colors
    var skyColor = color(55, 55, map(constMouseX, 0, width, 25, 100)); //sky changes color w/ mouse position between light and dark blue
    var mountainColor = color(25, 55, map(constMouseX, 0, width, 0, 85)); //mountains change color w/ mouse between light and dark green
    var desertColor = color(map(constMouseY, 0, height, 10, 25), 67, 75); //field or desert changes color w/ mouse between brown and green
    var riverColor = color(48, 70, map(constMouseY, height, 0, 50, 100)); //river changes color w/ mouse slightly from light to dark blue
    
    //sky
    createSky(skyColor);
    //background mountains
    createMountains(mountainColor);
    //desert or field
    createDesert(desertColor);
    //river
    createRiver(riverColor);
    
}
function mousePressed() {
    if (mouseX < (width / 2)) {
        night.play(0, 1, 2); //plays nighttime sounds
    } else {
        night.pause();
    }
    if (mouseX > (width / 2)) {
        daytime.play(0, 1, 2); //plays daytime sounds
    } else {
        daytime.pause();
    }
    if (mouseY < (height / 2)) {
        field.play(0, 1, 2); //plays field sounds
    } else {
        field.pause();
    }
    if (mouseY > (height / 2)) {
        river.play(0, 1, 2); //plays river sounds
    } else {
        river.pause();
    }
}

function createSky(fillColor) { //function creates the sky
    fill(fillColor);
    rect(0, 0, width, height);
}
function createMountains(fillColor) { //function creates background hills
    var mountainY = height * 2 / 3;
    fill(fillColor);
    ellipse(width / 5, mountainY, width / 2, height / 2);
    ellipse(width * 2 / 3, mountainY, width * 3 / 4, height * 4 / 5);
}
function createDesert(fillColor) { //function creates desert/field
    var desertY = height * 5 / 8;
    fill(fillColor);
    rect(0, desertY, width, desertY);
}
function createRiver(fillColor) { //function creates river
    var riverY = height * 7 / 8;
    fill(fillColor);
    var constRivMouseY = constrain(mouseY, height / 2, height); //river only starts to appear when the mouse is below the halfway mark
    rect(0, map(constRivMouseY, height, height / 2, riverY, height), width, riverY);
}

sketch-152.js

//Crystal Xue
//15104-section B
//luyaox@andrew.cmu.edu
//project-10

//size of the vinyl
var size1 = 300;
//size of the label
var size2 = 100;

function preload(){
    jazz1 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/475409__sandib__bass2.wav");
    jazz2 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/49658__sub-d__more-jazz-guitar.wav");
    jazz3 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/233699__gulyas25__acid-jazz-loop-music-bed.wav");
    jazz4 = loadSound("https://courses.ideate.cmu.edu/15-104/f2019/wp-content/uploads/2019/11/187099__simondsouza__alto-sax-90bpm-cm-4-solo.wav");
    jazz4.setVolumn(0.1);
}


function setup() {
    createCanvas(500, 500);
}

function draw() {
    background(250);
    drawRecord();
}
function drawRecord(){
    fill(0);
    ellipse(width/2, width/2, size1, size1);

    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(105);
        strokeCap(SQUARE);
        strokeWeight(0.4);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 0.8 * PI);
    }

    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(255);
        strokeCap(SQUARE);
        strokeWeight(1);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
    }
    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(105);
        strokeCap(SQUARE);
        strokeWeight(0.4);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, PI, 1.8 * PI);
    }
    for (var i = 0; i < 8; i++) {
        noFill();
        stroke(255);
        strokeCap(SQUARE);
        strokeWeight(1);
        arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI);
    }

    fill(250,50);
    arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 0.8 * PI, PI);
    fill(250,50);
    arc(width/2, width/2, i * 20 + 140, i * 20 + 140, 1.8 * PI, 2 * PI)

    //drawing red label
    fill(255, 0, 0);
    noStroke();
    ellipse(width/2, width/2, size2, size2);

    //drawing controls
    var yc = constrain(mouseY,350, 470);

    fill(100);
    rect(410, 350, 10, 120);
    fill(0);
    rect(400, yc, 30, 15);

    fill(100);
    rect(450, 350, 10, 120);
    fill(0);
    rect(440, yc, 30, 15);

    fill(100);
    ellipse(430, 100, 60, 60);
    fill(0);
    ellipse(430, 100, 40, 40);

    fill(100);
    ellipse(450, 160, 45, 45);
    fill(0);
    ellipse(450, 160, 30, 30);

}

function mousePressed() {
    //setting mousepresed location
    if (dist(mouseX,mouseY, width / 2, height/ 2) <= size1 ) {
        jazz1.play();
        } else {
        jazz1.pause();
        }
    if (dist(mouseX, mouseY, 430, 100) <= 60) {
        jazz2.play();
        } else {
        jazz2.pause();
        }
    if (dist(mouseX, mouseY, 450, 160) <= 45) {
        jazz3.play();
        } else {
        jazz3.pause();
        }
}

function mouseMoved(){
    if (mouseX <= 450 & mouseX >= 410 && mouseY <= 470 && mouseY >= 350) {
        jazz4.play();
        } else {
        jazz4.pause();
        }
}

It is inspired by jazz mixtapes. there are 3 different jazz tracks that can be started and paused by pressing the buttons and the record player. The fouth is controlled by the moving control which is more interesting to play with.

project10

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

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

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

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

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

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

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


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

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


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

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

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

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

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

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