{"id":68685,"date":"2021-11-07T01:41:50","date_gmt":"2021-11-07T05:41:50","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=68685"},"modified":"2021-11-07T01:47:11","modified_gmt":"2021-11-07T05:47:11","slug":"project-10-sonic-story-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-5\/","title":{"rendered":"Project 10 \u2013 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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"450\" data-height=\"400\" data-fontsize=\"9\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-21.js\">sketch-beans<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/sketch-21.js\" class=\"wp-block-file__button\" download>Download<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"450\" height=\"400\"><\/iframe><pre class=\"language-javascript\" style=\"font-size:9px !important; line-height:13.05px !important\"><code class=\"p5_editor language-javascript\" style=\"font-size:9px !important;\">\/\/global variables\nvar frameCount = 0;\nvar sky;\nvar cat;\nvar sofa;\nvar clock;\nvar playlist;\nvar table;\nvar rain = [];\nconst numOfRaindrops = 100;\n\nfunction preload() { \n  \/\/preload images\n  sky = loadImage(\"https:\/\/i.imgur.com\/6PCHwrN.png\");\n  cat = loadImage(\"https:\/\/i.imgur.com\/qApZuXa.png\");\n  sofa = loadImage(\"https:\/\/i.imgur.com\/sESZJWa.png\");\n  clock = loadImage(\"https:\/\/i.imgur.com\/hbfe35l.png\");\n  playlist = loadImage(\"https:\/\/i.imgur.com\/wKD6EsD.png\");\n  table = loadImage(\"https:\/\/i.imgur.com\/74DxEGR.png\");\n\n  \/\/preload sounds\n  clockSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/clock.wav\");\n  playlistSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/playlist.wav\");\n  rainSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/rain-1.wav\");\n  catSound = loadSound(\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/11\/cat.wav\");\n  \/\/ clockSound = loadSound(\"clock.wav\");\n  \/\/ playlistSound = loadSound(\"playlist.wav\");\n  \/\/ rainSound = loadSound(\"rain.wav\");\n  \/\/ catSound = loadSound(\"cat.wav\");\n}\n\nfunction setup() {\n  createCanvas(480, 400);\n  useSound();\n  frameRate(20);\n\n  \/\/rain\n  rain_color = color(225, 235, 244);\n  background_color = color(21, 39, 56);\n  for (var i = 0; i &lt; numOfRaindrops; i++) {\n    rain[i] = new drawFallingRain();\n  }\n}\n\nfunction soundSetup() {\n  clockSound.setVolume(0.4);\n  playlistSound.setVolume(0.7);\n  rainSound.setVolume(0.5);\n  catSound.setVolume(0.4);\n}\n\nfunction draw() {\n\n  background(background_color);\n\n  \/\/gradient sky\n  image(sky, 0, 0, width, 210);\n\n  \/\/rain\n  for (var i = 0; i &lt; rain.length; i ++) {\n      rain[i].rainDisplay();\n      rain[i].rainDrop();\n  }\n\n  \/\/room wall\n  fill(109, 115, 147);\n  noStroke();\n  rect(0, 0, 100, 600);\n  rect(400, 0, 100, 600);\n  rect(0, 210, 800, 300);\n  fill(88, 87, 103);\n  rect(-100, 340, 800, 300);\n\n  \/\/window\n  fill(109, 115, 147);\n  rect(100, 100, 300, 10);\n  rect(250, 0, 10, 200);\n  fill(71, 72, 90);\n  rect(100, 200, 300, 15);\n  fill(144);\n  rect(100, 200, 300, 5);\n\n  \/\/clock\n  image(clock, 385, 30, 90, 140);\n\n  \/\/sofa\n  image(sofa, -55, 10, 420, 400);\n\n  \/\/cat\n  image(cat, 290, 130, 80, 80);\n\n  \/\/table\n  image(table, 340, 250, 150, 150);\n\n  \/\/playlist\n  image(playlist, 375, 230, 80, 80)\n\n    if (frameCount % 460 == 0 || frameCount % 460 == 1) {\n        rainSound.stop();\n        rainSound.play();\n    }\n    if (frameCount % 340 == 0 || frameCount % 340 == 1) {\n        print(\"Starting playlist\")\n        playlistSound.stop();\n        playlistSound.play();\n    }\n    if (frameCount % 200 == 0 || frameCount % 200 == 1) {\n        catSound.stop();\n        catSound.play();\n    }\n    if (frameCount % 160 == 0 || frameCount % 160 == 1) {\n        clockSound.stop();\n        clockSound.play();\n    }\n    frameCount += 1;\n}\n\nfunction drawFallingRain() {\n    this.rx = random(0, 400); \/\/width of the canvas\n    this.ry = random(0, 400); \/\/height of the canvas\n    this.rain_size = random(0, 8);\n    this.rain_rate = map(this.rain_size, 0, 10, 8, 10);\n    this.rain_range = map(this.rain_size, 0, 10, 7, 18);\n\n    this.rainDisplay = function() {\n        var raindrop_size = map(this.rain_size, 0, 20, 0.7, 0.3);\n        stroke(rain_color);\n        strokeWeight(raindrop_size);\n        line(this.rx, this.ry, this.rx, this.ry + this.rain_range);\n    }\n    this.rainDrop = function() {\n        this.ry = this.ry + this.rain_rate;\n        var dropsOfRain = map(this.rain_size, 0, 10, 2, 1); \/\/indicates the raindrop rate\n        this.rain_rate = dropsOfRain + this.rain_rate;\n        if (this.ry &gt;= 300) { \/\/continue raining\n            this.ry = random(-100, 0);\n            this.rain_rate = map(this.rain_size, 0, 10, 3, 15);\n        }\n    }\n}<\/code><\/pre><\/div>\n\n\n\n<p>For this project, I decided to illustrate a chill scenery of a room with a cat on a rainy night (or in the early morning). The four characters I used were: raining sound, clock ticking, LP playlist, and cat meowing. I found sounds on <a href=\"http:\/\/freesound.org\">freesound.org<\/a> and found some free png images on free sites like Imgur. At first I found it challenging with the instructions of how the sound works in both my server outside of WordPress and on WordPress as blog entry, but I managed to figure it out! This was super fun project to work with.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For this project, I decided to illustrate a chill scenery of a room with a cat on a rainy night (or in the early morning). The four characters I used were: raining sound, clock ticking, LP playlist, and cat meowing. I found sounds on freesound.org and found some free png images on free sites like &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/11\/07\/project-10-sonic-story-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 10 \u2013 Sonic Story&#8221;<\/span><\/a><\/p>\n","protected":false},"author":630,"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\/68685"}],"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\/630"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=68685"}],"version-history":[{"count":22,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68685\/revisions"}],"predecessor-version":[{"id":69149,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/68685\/revisions\/69149"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=68685"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=68685"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=68685"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}