{"id":68708,"date":"2021-11-07T00:10:01","date_gmt":"2021-11-07T04:10:01","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68708"},"modified":"2021-11-07T00:10:01","modified_gmt":"2021-11-07T04:10:01","slug":"project-10-sonic-story-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-4\/","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><p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/project-10-sketch-copy-1.js\">project 10 sketch copy<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nvar windowOpen = true;\nvar pane;\nvar bird;\nvar windowNoise;\nvar alarm;\nvar framee = 0;\nvar cx;\nvar cy;\nvar secRadius;\nvar minRadius;\nvar hrRadius;\nvar cDiam;\n\n\nfunction preload() {\n    alarm=loadSound(\"http:\/\/localhost:8000\/clock-ticking.wav\");\n    pane=loadSound(\"http:\/\/localhost:8000\/star.wav\");\n    windowNoise=loadSound(\"http:\/\/localhost:8000\/creaking.wav\");\n    bird=loadSound(\"http:\/\/localhost:8000\/bird.wav\");\n}\n\nfunction setup() {\n    createCanvas(480, 480);\n    useSound();\n    frameRate(1);\n}\n\nfunction soundSetup() {\n    alarm.setVolume(0.2);\n    pane.setVolume(0.2);\n    windowNoise.setVolume(0.3);\n    bird.setVolume(0.2);\n}\n\nfunction draw() {\n    background(225,207,166);\n    drawScene();\n    \n    if (framee&gt;7 & framee<=10) {\n        drawBird();\n        bird.play();\n    }\n\n    if (framee&gt;1 & framee <=2) {\n        alarm.play();\n    }\n    \n    push();\n    translate(354, 315);\n    scale(0.15);\n    drawAlarm();\n    \n    if (framee&gt;1 & framee <=2) {\n        pane.play();\n    }\n\n    noStroke();\n    fill(255);\n    drawPane();\n    pop();\n\n    \/\/when window noises occur\n    drawWindow();\n    if (framee&gt;6 & framee<=12){\n        windowOpen=false;\n    }\n    if (framee==7){\n        windowNoise.play();\n    }\n    if (framee&gt;11){\n        windowOpen=true;\n    }\n    if (framee==14){\n        windowNoise.play;\n    }\n\n    framee++;\n    if (framee&gt;=22){\n        framee=0;\n    }\n  \n}\n\nfunction drawAlarm() {\n  \n    \/\/this alarm clock is from the p5js ref website\n    var radius = min(width, height) \/ 2;\n    secRadius=radius*0.71;\n    minRadius=radius*0.6;\n    hrRadius=radius*0.5;\n    cDiam=radius*1.7;\n  \n    cx=width\/2;\n    cy=height\/2;\n  \n    noStroke();\n    fill(0);\n    ellipse(cx, cy, cDiam+25, cDiam+25);\n    fill(220);\n    ellipse(cx, cy, cDiam, cDiam);\n  \n    var s=map(second(), 0, 60, 0, TWO_PI)-HALF_PI;\n    var m=map(minute()+norm(second(), 0, 60), 0, 60, 0, TWO_PI)-HALF_PI;\n    var h=map(hour()+norm(minute(), 0, 60), 0, 24, 0, TWO_PI*2)-HALF_PI;\n  \n    stroke(0);\n    strokeWeight(1);\n    line(cx, cy, cx+cos(s)*secRadius, cy+sin(s)*secRadius);\n    strokeWeight(2);\n    line(cx, cy, cx+cos(m)*minRadius, cy+sin(m)*minRadius);\n    strokeWeight(4);\n    line(cx, cy, cx+cos(h)*hrRadius, cy+sin(h)*hrRadius);\n  \n    strokeWeight(2);\n    beginShape(POINTS);\n    for (var i=0; i&lt;360; i+=6){\n         var angle=radians(i);\n         var x=cx+cos(angle)*secRadius;\n         var y=cy+sin(angle)*secRadius;\n         vertex(x, y);\n  }\n  \n  endShape();\n}\n\nfunction drawScene() {\n    \/\/window\n    noStroke();\n    fill(51,0,25);\n    square(25, 25, 300);\n    fill(153,204,255);\n    square(50, 50, 250);\n    \n    \/\/table\n    fill(181,137,34);\n    rect(330,390,150,50);\n    \n    \/\/alarm clock stand\n    fill(0);\n    triangle(370,390,410,390,390,370);\n  \n    \/\/cloud\n    fill(255);\n    ellipse(100, 100, 70, 60);\n    ellipse(125, 125, 70, 50);\n    ellipse(140, 110, 60, 55); \n    ellipse(160, 115, 60, 50); \n\n}\n\nfunction drawPane() {\n    var paneX = [50, 61, 83, 69, 71, 50, 29, 31, 17, 39];\n    var paneY = [18, 37, 43, 60, 82, 73, 82, 60, 43, 37];\n    var nPoints = paneX.length;\n\n}\n\nfunction drawBird() {\n    fill(153,0,0);\n    circle(227,175,20);\n    rect(226,168,20,7);\n    rect(226,175,20,7);    \n}\n\nfunction drawWindow() {\n    stroke(51,0,25);\n    strokeWeight(10);\n    noFill();\n    if (windowOpen == true) {\n        line(175, 30, 175, 320);\n        line(30, 175, 320, 175);\n  }\n    \n    if (windowOpen == false) {\n        line(175, 30, 175, 320);\n        line(30, 175, 170, 175);\n        line(210, 80, 320, 40);\n        line(210, 80, 210, 360);\n        line(210, 360, 320, 320);\n        line(210, 220, 320, 180);\n  }\n\n}\n\n<\/code><\/pre><\/p>\n\n\n\n<p>The fours sounds I used were the clock ticking, the alarm ringing, the window opening and the birds chirping. I wanted to create a scene of how my mornings go, as I&rsquo;m always awaken by an alarm clock and hear a lot of birds outside my window. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>project 10 sketch copy var windowOpen = true; var pane; var bird; var windowNoise; var alarm; var framee = 0; var cx; var cy; var secRadius; var minRadius; var hrRadius; var cDiam; function preload() { alarm=loadSound(&#8220;http:\/\/localhost:8000\/clock-ticking.wav&#8221;); pane=loadSound(&#8220;http:\/\/localhost:8000\/star.wav&#8221;); windowNoise=loadSound(&#8220;http:\/\/localhost:8000\/creaking.wav&#8221;); bird=loadSound(&#8220;http:\/\/localhost:8000\/bird.wav&#8221;); } function setup() { createCanvas(480, 480); useSound(); frameRate(1); } function soundSetup() { alarm.setVolume(0.2); pane.setVolume(0.2); windowNoise.setVolume(0.3); bird.setVolume(0.2); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10: Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":651,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[113,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68708"}],"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\/651"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68708"}],"version-history":[{"count":11,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68708\/revisions"}],"predecessor-version":[{"id":68736,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68708\/revisions\/68736"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68708"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68708"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68708"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}