{"id":68826,"date":"2021-11-07T22:34:36","date_gmt":"2021-11-08T03:34:36","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68826"},"modified":"2021-11-07T22:34:36","modified_gmt":"2021-11-08T03:34:36","slug":"sonic-story","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/sonic-story\/","title":{"rendered":"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\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketchwp-1.js\" data-width=\"400\" data-height=\"200\">sketch<\/a>\n\n\n\n<p>Fishies! For this week&rsquo;s project, I wade an infinite animation of a fish eating a fish eating a fish eating a&hellip; the colors are randomly generated and there are two pitches playing the jaws theme, and chomping and background underwater sounds from freesounds.org. Enjoy!!<\/p><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"200\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nfunction setup() {\n    createCanvas(400, 200);\n    useSound();\n    frameRate(4);\n    background('lightblue');\n    chooseColor1();\n    chooseColor2();\n}\n\n\nfunction soundSetup() {\n    osc = new p5.Oscillator();\n    osc.amp(1);\n    osc.setType('sine');\n    osc.start();\n}\n\nfunction preload() {\n    chomp = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/Chomp.wav\");\n    bg = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/bg.wav\");\n    bg.setVolume(0.75);\n    chomp.setVolume(0.5);\n}\n\nvar r;\nvar g;\nvar d;\nvar col1;\nvar col2;\n\nfunction chooseColor1(){\n    r = random(100,255);\n    g = 140;\n    b = random(100,255);\n    col1 = color(r,g,b);\n}\n\nfunction chooseColor2(){\n    r = random(100,255);\n    g = 140;\n    b = random(100,255);\n    col2 = color(r,g,b);\n}\n\nfunction drawFish1(x, y, s, c, mouthClosed, lookingFord) {\n    push();\n    translate(x, y);\n    scale(s);\n    strokeCap(SQUARE)\n    strokeWeight(1);\n\n    var fil = color(red(c)+20, green(c)+20, blue(c)+20);\n\n    if (mouthClosed == true) {\n        \/\/top half of fish (colored w\/ c)\n        \/\/fill\n        stroke(fil);\n        fill(fil);\n        triangle(-17, -5, -12,-2, -17, -1);\n        rect(-17, -1, 7, 3);\n        rect(-16, 2, 3, 1);\n        rect(-6,-5, 16, 5);\n        line(-6, -2, -10,-2);\n        line(-6, -3, -8,-3);\n        line(10, -2, 17, -2);\n        line(10, -3, 14, -3);\n\n        \/\/outline\n        stroke(c);\n        line(-17, 2, -17, -6);\n        point(-16,-6);\n        point(-15,-5);\n        point(-14,-4);\n        point(-13,-3);\n        point(-12,-2);\n        point(-11,-2);\n        point(-10,-3);\n        point(-9,-3);\n        point(-8,-4);\n        point(-7,-4);\n        line(-6,-5, -2, -5);\n\n        \/\/fin\n        stroke(fil);\n        rect(-1, -8, 4, 4);\n        triangle(-1, -7,-3, -5, -1, -5);\n        line(3, -6, 5, -6);\n\n        stroke(c);\n        point(-4, -6);\n        point(-3, -7);\n        line(-2, -8, 3, -8);\n        point(3, -7);\n        point(4, -7);\n        point(5, -6);\n\n        line(2,-5, 10, -5);\n        point(11,-4);\n        point(12,-4);\n        point(14,-3);\n        point(15,-3);\n        line(16,-2, 18, -2);\n\n        \/\/bottom half of fish\n        \/\/finn fill\n        stroke(240);\n        fill(240);\n        rect(-5, 4, 4, 2);\n\n        stroke(220);\n        point(-16, 4);\n        point(-15, 4);\n        line(-14, 3, -10, 3);\n        line(-10, 4, -6, 4);\n        line(-6, 5, 0, 5);\n\n        \/\/fin\n        stroke(220)\n        point(-6,5);\n        point(-7,5);\n        point(-7, 6);\n        line(-6, 7, -2, 7);\n        line(-2, 6, 10, 6)\n\n        stroke(240);\n        line(11, 5, 0, 5);\n        line(12, 5, 0, 5);\n        line(13, 4, -5, 4);\n        line(14, 3, -10, 3);\n        line(15, 2, -10, 2);\n        line(16, 1, -10, 1);\n        line(17, 0, -10, 0);\n        line(18, -1, -10, -1);\n\n        \/\/gills\n        stroke(204,194,194);\n        point(0,2);\n        point(1,1);\n        point(2,2);\n        point(3,1);\n        point(4,2);\n        point(5,1);\n        point(6,2);\n\n        stroke(220);\n        point(10, 5);\n        point(11, 5);\n        point(12, 4);\n        point(13, 3);\n        point(14, 2);\n        point(15, 1);\n        point(16, 0);\n        point(17, -1);\n\n\n\n        \/\/eye\n        fill(255);\n        stroke(255);\n        rect(9, -1, 4, 2);\n        rect(10, -2, 2, 4);\n        stroke(0);\n        \/\/if (lookingFord) {\n            point(11,0);\n        \/\/} else if (!lookingFord) {\n        \/\/    point(10, -1);\n        \/\/}\n\n        pop();\n    } else {\n        \/\/top half of fish (colored w\/ c)\n        stroke(fil);\n        fill(fil);\n        triangle(-17, -5, -12,-2, -17, -1);\n        rect(-17, -1, 7, 3);\n        rect(-16, 2, 3, 1);\n        rect(-6,-5, 16, 5);\n        line(-6, -2, -10,-2);\n        line(-6, -3, -8,-3);\n        line(10, -2, 17, -2);\n        line(10, -3, 14, -3);\n\n        stroke(c);\n        line(-17, 2, -17, -6);\n        point(-16,-6);\n        point(-15,-5);\n        point(-14,-4);\n        point(-13,-3);\n        point(-12,-2);\n        point(-11,-2);\n        point(-10,-3);\n        point(-9,-3);\n        point(-8,-4);\n        point(-7,-4);\n        line(-6,-5, -2, -5);\n\n        \/\/fin\n        stroke(fil);\n        rect(-1, -8, 4, 4);\n        triangle(-1, -7,-3, -5, -1, -5);\n        line(3, -6, 5, -6);\n\n        stroke(c);\n        point(-4, -6);\n        point(-3, -7);\n        line(-2, -8, 3, -8);\n        point(3, -7);\n        point(4, -7);\n        point(5, -6);\n\n        line(2,-5, 10, -5);\n        point(11,-4);\n        point(12,-4);\n        point(14,-3);\n        point(15,-3);\n        line(16,-2, 18, -2);\n\n        \/\/bottom half of fish\n        \/\/finn fill\n        stroke(240);\n        fill(240);\n        rect(-5, 4, 4, 2);\n\n        stroke(220);\n        point(-16, 4);\n        point(-15, 4);\n        line(-14, 3, -10, 3);\n        line(-10, 4, -6, 4);\n        line(-6, 5, 0, 5);\n\n        \/\/fin\n        stroke(220)\n        point(-6,5);\n        point(-7,5);\n        point(-7, 6);\n        line(-6, 7, -2, 7);\n        line(-2, 6, 10, 6)\n\n        stroke(240);\n        line(11, 5, 0, 5);\n        line(13, 5, 0, 5);\n        line(16, 4, -5, 4);\n        line(17, 3, -10, 3);\n        line(14, 2, -10, 2);\n        line(13, 1, -10, 1);\n        line(12, 0, -10, 0);\n        line(18, -1, -10, -1);\n\n        stroke(204,194,194);\n        point(0,2);\n        point(1,1);\n        point(2,2);\n        point(3,1);\n        point(4,2);\n        point(5,1);\n        point(6,2);\n\n        stroke(220);\n        point(10, 5);\n        point(11, 5);\n        point(12, 5);\n        point(13, 4);\n        point(14, 4);\n        point(15, 4);\n        point(16, 3);\n        point(17, 3);\n\n        \/\/eye\n        fill(255);\n        stroke(255);\n        rect(9, -1, 4, 2);\n        rect(10, -2, 2, 4);\n        stroke(0);\n        point(11,0);\n\n        pop();\n    }\n}\n\nfunction drawFish2(x, y, s, c, mouthClosed, lookignFord) {\n    push();\n    translate(x, y);\n    scale(s);\n    strokeCap(SQUARE)\n    strokeWeight(1);\n\n    var fil = color(red(c)+20, green(c)+20, blue(c)+20);\n\n    if (mouthClosed == true) {\n        \/\/top half of fish (colored w\/ c)\n        stroke(fil);\n        fill(fil);\n        triangle(-15, -5, -12,-2, -15, -1);\n        rect(-15, -1, 7, 3);\n        rect(-14, 2, 3, 1);\n        rect(-6,-5, 16, 5);\n        line(-6, -2, -8,-2);\n        line(-6, -3, -6,-3);\n        line(10, -2, 17, -2);\n        line(10, -3, 14, -3);\n\n        stroke(c);\n        line(-15, 2, -15, -4);\n        \/\/point(-16,-6);\n        point(-15,-5);\n        point(-14,-4);\n        point(-13,-3);\n        point(-12,-2);\n        point(-11,-2);\n        point(-10,-3);\n        point(-9,-3);\n        point(-8,-4);\n        point(-7,-4);\n        line(-6,-5, -2, -5);\n\n        \/\/fin\n        stroke(fil);\n        rect(-1, -8, 4, 4);\n        triangle(-1, -7,-3, -5, -1, -5);\n        line(3, -6, 5, -6);\n\n        stroke(c);\n        point(-4, -6);\n        point(-3, -7);\n        line(-2, -8, 3, -8);\n        point(3, -7);\n        point(4, -7);\n        point(5, -6);\n\n        line(2,-5, 10, -5);\n        point(11,-4);\n        point(12,-4);\n        point(14,-3);\n        point(15,-3);\n        line(16,-2, 18, -2);\n\n        \/\/bottom half of fish\n        \/\/finn fill\n        stroke(240);\n        fill(240);\n        rect(-5, 4, 4, 2);\n\n        stroke(220);\n        point(-16, 4);\n        point(-15, 4);\n        line(-14, 3, -10, 3);\n        line(-10, 4, -6, 4);\n        line(-6, 5, 0, 5);\n\n        \/\/fin\n        stroke(220)\n        point(-6,5);\n        point(-7,5);\n        point(-7, 6);\n        line(-6, 7, -2, 7);\n        line(-2, 6, 10, 6)\n\n        stroke(240);\n        line(11, 5, 0, 5);\n        line(12, 5, 0, 5);\n        line(13, 4, -5, 4);\n        line(14, 3, -10, 3);\n        line(15, 2, -10, 2);\n        line(16, 1, -10, 1);\n        line(17, 0, -10, 0);\n        line(18, -1, -10, -1);\n\n        stroke(204,194,194);\n        point(0,2);\n        point(1,1);\n        point(2,2);\n        point(3,1);\n        point(4,2);\n        point(5,1);\n        point(6,2);\n\n        stroke(220);\n        point(10, 5);\n        point(11, 5);\n        point(12, 4);\n        point(13, 3);\n        point(14, 2);\n        point(15, 1);\n        point(16, 0);\n        point(17, -1);\n\n\n\n        \/\/eye\n        fill(255);\n        stroke(255);\n        rect(9, -1, 4, 2);\n        rect(10, -2, 2, 4);\n        stroke(0);\n        \/\/if (lookingFord) {\n            point(11,0);\n        \/\/} else if (!lookingFord) {\n        \/\/    point(10, -1);\n        \/\/}\n\n        pop();\n    } else {\n        \/\/top half of fish (colored w\/ c)\n        stroke(fil);\n        fill(fil);\n        triangle(-17, -5, -12,-2, -17, -1);\n        rect(-17, -1, 7, 3);\n        rect(-16, 2, 3, 1);\n        rect(-6,-5, 16, 5);\n        line(-6, -2, -10,-2);\n        line(-6, -3, -8,-3);\n        line(10, -2, 17, -2);\n        line(10, -3, 14, -3);\n\n        stroke(c);\n        line(-17, 2, -17, -6);\n        point(-16,-6);\n        point(-15,-5);\n        point(-14,-4);\n        point(-13,-3);\n        point(-12,-2);\n        point(-11,-2);\n        point(-10,-3);\n        point(-9,-3);\n        point(-8,-4);\n        point(-7,-4);\n        line(-6,-5, -2, -5);\n\n        \/\/fin\n        stroke(fil);\n        rect(-1, -8, 4, 4);\n        triangle(-1, -7,-3, -5, -1, -5);\n        line(3, -6, 5, -6);\n\n        stroke(c);\n        point(-4, -6);\n        point(-3, -7);\n        line(-2, -8, 3, -8);\n        point(3, -7);\n        point(4, -7);\n        point(5, -6);\n\n        line(2,-5, 10, -5);\n        point(11,-4);\n        point(12,-4);\n        point(14,-3);\n        point(15,-3);\n        line(16,-2, 18, -2);\n\n        \/\/bottom half of fish\n        \/\/finn fill\n        stroke(240);\n        fill(240);\n        rect(-5, 4, 4, 2);\n\n        stroke(220);\n        point(-16, 4);\n        point(-15, 4);\n        line(-14, 3, -10, 3);\n        line(-10, 4, -6, 4);\n        line(-6, 5, 0, 5);\n\n        \/\/fin\n        stroke(220)\n        point(-6,5);\n        point(-7,5);\n        point(-7, 6);\n        line(-6, 7, -2, 7);\n        line(-2, 6, 10, 6)\n\n        stroke(240);\n        line(11, 5, 0, 5);\n        line(13, 5, 0, 5);\n        line(16, 4, -5, 4);\n        line(17, 3, -10, 3);\n        line(14, 2, -10, 2);\n        line(13, 1, -10, 1);\n        line(12, 0, -10, 0);\n        line(18, -1, -10, -1);\n\n        stroke(204,194,194);\n        point(0,2);\n        point(1,1);\n        point(2,2);\n        point(3,1);\n        point(4,2);\n        point(5,1);\n        point(6,2);\n\n        stroke(220);\n        point(10, 5);\n        point(11, 5);\n        point(12, 5);\n        point(13, 4);\n        point(14, 4);\n        point(15, 4);\n        point(16, 3);\n        point(17, 3);\n\n        \/\/eye\n        fill(255);\n        stroke(255);\n        rect(9, -1, 4, 2);\n        rect(10, -2, 2, 4);\n        stroke(0);\n        point(11,0);\n\n        pop();\n    }\n}\n\nvar count = 0;\nvar mouthClosed;\nvar lookingFord;\n\nfunction draw() {\n    background('lightblue');\n\n    if (count%32==0) {\n        count = 0;\n        col1 = col2;\n        chooseColor2();\n        osc.start();\n        bg.play();\n        bg.loop();\n    }\n\n    if (count &gt; 8) {\n        mouthClosed = true;\n        osc.stop();\n        \/\/lookignFord = false;\n    } else {\n        mouthClosed = false;\n        \/\/lookignFord = true;\n    }\n\n    if (count &lt;= 8) {\n        if (count%2==0) {\n            drawFish1(width\/2, height\/2, 3, col1, true);\n            osc.freq(midiToFreq(52));\n        } else if ((count+1)%2==0) {\n            osc.freq(midiToFreq(53));\n            drawFish2(width\/2, height\/2, 3, col1, true);\n        }\n    }\n\n    var bigFishX = map(count, 0, 12, -200, 200);\n    var bigFishS = map(count, 12, 24, 10, 3);\n\n    if (count == 5) {\n        chomp.play();\n    }\n\n    if (count &lt;= 12) {\n        if (count%2==0) {\n            drawFish1(bigFishX, height\/2, 10, col2, mouthClosed);\n        } else if ((count+1)%2==0) {\n            drawFish2(bigFishX, height\/2, 10, col2, mouthClosed);\n        }\n    } if (count &gt; 12 & count <= 24) {\n        if (count%2==0) {\n            drawFish1(width\/2, height\/2, bigFishS, col2, mouthClosed);\n        } else if ((count+1)%2==0) {\n            drawFish2(width\/2, height\/2, bigFishS, col2, mouthClosed);\n        }\n    } if (count &gt; 24) {\n        if (count%2==0) {\n            drawFish1(width\/2, height\/2, 3, col2, mouthClosed);\n        } else if ((count+1)%2==0) {\n            drawFish2(width\/2, height\/2, 3, col2, mouthClosed);\n        }\n    }\n\n    count += 1;\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch Fishies! For this week&rsquo;s project, I wade an infinite animation of a fish eating a fish eating a fish eating a&hellip; the colors are randomly generated and there are two pitches playing the jaws theme, and chomping and background underwater sounds from freesounds.org. Enjoy!! function setup() { createCanvas(400, 200); useSound(); frameRate(4); background(&#8216;lightblue&#8217;); chooseColor1(); chooseColor2(); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/sonic-story\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":657,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68826"}],"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\/657"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68826"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68826\/revisions"}],"predecessor-version":[{"id":68834,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68826\/revisions\/68834"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68826"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68826"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68826"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}