{"id":68672,"date":"2021-11-06T22:33:32","date_gmt":"2021-11-07T02:33:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68672"},"modified":"2021-11-06T22:33:32","modified_gmt":"2021-11-07T02:33:32","slug":"project-10-sonic-story-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-10-sonic-story-3\/","title":{"rendered":"Project 10: Sonic Story"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div> <a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"700\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-19.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"700\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Julianna Bolivar\n\/\/jbolivar@andrew.cmu.edu\n\/\/Section D\n\/\/Sonic Story\n\nvar walkImage = [];  \/\/stores chick images \nvar walkHen = []; \/\/stores hen images\nvar cornImg;\nvar angleCorn = 0;\nvar wheatImg;\nvar angleWheat = 0;\nvar snowImg = 0;\nvar snowY = 0;\n\nvar chirpingSound;\nvar cluckingSound;\nvar popSound;\nvar windSound;\n\nfunction preload() {\n    \n    var filenames = []; \/\/chick images\n    filenames[0] = \"https:\/\/i.imgur.com\/Tfx9TC4.png\";\n    filenames[1] = \"https:\/\/i.imgur.com\/QahosbW.png\";\n    for (var i = 0; i &lt; filenames.length; i++) {\n        walkImage[i] = loadImage(filenames[i]); \n    }\n\n    var fileHen = []; \/\/hen images\n    fileHen[0] = \"https:\/\/i.imgur.com\/7p6gBTy.png\";\n    fileHen[1] = \"https:\/\/i.imgur.com\/CnvJ23d.png\";\n    for (var i = 0; i &lt; fileHen.length; i++) {\n        walkHen[i] = loadImage(fileHen[i]);\n    } \n    \/\/icon images\n    cornImg = loadImage(\"https:\/\/i.imgur.com\/5qLGEX6.png\");\n    wheatImg = loadImage(\"https:\/\/i.imgur.com\/FjHLXeq.png\");\n    snowImg = loadImage(\"https:\/\/i.imgur.com\/MnUy5ko.png\");\n\n    chirpingSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/chirping.wav\");\n    cluckingSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/clucking.wav\");\n    popSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/pop-1.wav\");\n    windSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/wind-1.wav\");\n\n}\n\nfunction makeCharacter(cx, cy, cdx, cdy) {\n    var c = {x: cx, y: cy, dx: cdx, dy: cdy,\n             walkingRight: true, \n             imageNum: 0,\n             stepFunction: stepCharacter,\n             drawFunction: drawCharacter\n         }\n    return c;\n} \n\nfunction makeHen(hx, hy, hdx, hdy) {\n    var h = {x: hx, y: hy, dx: hdx, dy: hdy,\n             walkingRight: true, \n             imageNum: 0,\n             stepFunction: stepHen,\n             drawFunction: drawHen\n         }\n    return h;\n}\n\nfunction stepCharacter(){\n    this.imageNum++;\n    if (this.imageNum &gt; 1){\n        this.imageNum = 0;\n    }\n    \n    if (this.imageNum&gt;=walkImage.length){\n        this.imageNum = 0;\n    }\n    \n    if (this.y &gt;= 650){\n        this.y = 100;\n    }\n\n    if (this.x &gt;= 550){ \/\/start at right to flip\n        this.walkingRight = !this.walkingRight;\n        this.x = 50;\n    }\n    this.x += this.dx; \/\/walk\n} \n\nfunction stepHen(){\n    this.imageNum++;\n    if (this.imageNum &gt; 1){\n        this.imageNum = 0;\n    }\n    \n    if (this.imageNum&gt;=walkHen.length){\n        this.imageNum = 0;\n    }\n    \n    if (this.y &gt;= 650){\n        this.y = 100;\n    }\n\n    if (this.x &gt;= 550){ \/\/start at right to flip\n        this.walkingRight = !this.walkingRight;\n        this.x = 50;\n    }\n    this.x += this.dx; \/\/walk\n}\n\nfunction drawCharacter(){ \/\/chicks\n    if (this.walkingRight == true){\n        image(walkImage[this.imageNum], this.x, this.y);\n    }\n    else {\n        push();\n        translate(600, 0);\n        scale(-1,1); \/\/look at canvas from behind\n        image(walkImage[this.imageNum], this.x, this.y);\n        pop();\n    } \n} \n\nfunction drawHen(){ \/\/hen\n    if (this.walkingRight == true){\n        image(walkHen[this.imageNum], this.x, this.y);\n    }\n    else {\n        push();\n        translate(600, 0);\n        scale(-1,1); \/\/look at canvas from behind\n        image(walkHen[this.imageNum], this.x, this.y);\n        pop();\n    } \n}\n\nvar character = [];\nvar hen = [];\n\n\nfunction setup() {\n    createCanvas(600,700);\n    frameRate(5);\n    imageMode(CENTER);\n    createDiv(\"p5.dom.js library is loaded.\");\n    useSound();\n    for (var i = 50; i &lt;=450; i += 200){ \/\/chicks\n        character.push(makeCharacter(10, i, 5, 1)); \n    }\n    for (var i = 50; i &lt;=450; i += 200){ \/\/hen\n        hen.push(makeHen(10, i, 5, 1));\n    }\n}\n\n\nfunction soundSetup() { \/\/ setup for audio generation\n    chirpingSound.setVolume(0.3);\n    cluckingSound.setVolume(0.5);\n    popSound.setVolume(0.5);\n    windSound.setVolume(0.5);\n}\n\n\nfunction draw() {\n    background(135,206,235);\n    \/\/grass\n    noStroke();\n    fill(46,139,87);\n    rect(0, 510, 600, 200);\n\n    push();\n    translate(200, 500);\n    scale(0.2);\n    for (var i = 0; i &lt; 2; i++){ \/\/call functions chicks\n        character[i].stepFunction();\n        character[i].drawFunction();\n    }\n    pop();\n    \n    if (frameCount &gt;= 30){\n    push(); \/\/hens to right\n    translate(300, 500);\n    scale(0.2);\n    for (var i = 0; i &lt; 1; i++){ \/\/call functions hen\n        hen[i].stepFunction();\n        hen[i].drawFunction();\n    }\n    pop();\n}\n    \n    if (frameCount &gt;= 50 & frameCount < 90){ \/\/call corn\n    push(); \n    translate(300, 300);\n    scale(0.2);\n    rotate(radians(angleCorn)); \/\/rotate corn\n    angleCorn += 20;\n    image(cornImg, 0, 0);\n    }\n    pop();\n\n    if (frameCount &gt;= 90 & frameCount < 130){\n    push(); \n    translate(300, 300);\n    scale(0.2);\n    rotate(radians(angleWheat)); \/\/rotate wheat\n    angleWheat += 20;\n    image(wheatImg, 0, 0); \/\/3 wheats\n    image(wheatImg, 300, 0);\n    image(wheatImg, 600, 0);\n    }\n    pop();\n\n    if (frameCount &gt;= 130 & frameCount < 200){\n    push(); \n    translate(10, 100);\n    scale(0.1);\n    for (var i = random(-10,10); i &lt; 2000; i+=50){ \/\/snow falls\n    image(snowImg, i*10, snowY); \n    snowY += 5;\n    }\n    pop();\n    }\n\n    text(\"p5.js 15104 fall 2021\", 10, 15);\n    \n    if (frameCount &gt;= 1 & frameCount < 30){\n        chirpingSound.play();\n    }\n    if (frameCount == 33){\n        chirpingSound.stop();   \n    }\n\n    if (frameCount &gt;= 30 & frameCount < 35){\n        cluckingSound.play();\n    }\n\n    if (frameCount &gt;= 50 & frameCount < 52){\n        popSound.play();\n    }\n    if (frameCount == 52){\n        popSound.stop();\n    }\n\n    if (frameCount &gt;= 90 & frameCount < 92){\n        popSound.play();\n    }\n    if (frameCount == 92){\n        popSound.stop();\n    }\n\n    if (frameCount &gt;= 130 & frameCount < 160){\n        windSound.play();\n    }\n    if (frameCount == 160){\n        windSound.stop();\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p>\n\n\n\n<p>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. <\/p>\n\n\n\n<p>In Spanish it goes;<br>Los pollitos dicen p&iacute;o, p&iacute;o, p&iacute;o<br>Cuando tienen hambre, cuando tienen fr&iacute;o<br>La gallina busca el ma&iacute;z y el trigo<br>Les da la comida, y les presta abrigo<br>Bajo sus dos alas, acurrucaditos<br>Duermen los pollitos hasta el otro d&iacute;a<\/p>\n\n\n\n<p>English Translation;<br>The chicks say <meta charset=\"utf-8\">p&iacute;o, p&iacute;o, p&iacute;o<br>When they&rsquo;re hungry, and when they&rsquo;re cold<br>The hen looks for corn and wheat <br>She gives them food and warmth<br>Under her wings, the chicks are comfy<br>And to the next day, the chicks are asleep<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>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&iacute;o, p&iacute;o, p&iacute;oCuando tienen hambre, cuando &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/06\/project-10-sonic-story-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10: Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":640,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68672"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/640"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68672"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68672\/revisions"}],"predecessor-version":[{"id":68679,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68672\/revisions\/68679"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68672"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68672"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68672"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}