{"id":3092,"date":"2021-02-11T04:45:45","date_gmt":"2021-02-11T04:45:45","guid":{"rendered":"http:\/\/mycours.es\/digitalmedia\/?page_id=3092"},"modified":"2025-03-24T12:57:00","modified_gmt":"2025-03-24T12:57:00","slug":"project-sound-responsive-face","status":"publish","type":"page","link":"https:\/\/mycours.es\/digitalmedia\/project-sound-responsive-face\/","title":{"rendered":"Assignment: Sound Responsive Face"},"content":{"rendered":"<p>Make your face sketch sound-responsive by animating several visual elements in relation to the given sound clip.<\/p>\n<h2><strong>Requirements:<\/strong><\/h2>\n<p>Same as the face<br \/>\n+ Animate at least 5 visual elements<\/p>\n<p><strong>Make a fork of the character so you still have the static one as separate submission.<\/strong><\/p>\n<h2>Deliverables:<\/h2>\n<p>Post it on the openprocessing classroom with a proper title and a thumbnail image.<\/p>\n<h2><strong>Grading criteria<\/strong><\/h2>\n<p>Same as the face<br \/>\n+ the character doesn&#8217;t just quiver but looks like they are singing<br \/>\n+ the character changes the expression with the volume<br \/>\n+ the face doesn&#8217;t &#8220;break&#8221; at high volumes<\/p>\n<h2>Template and setup<\/h2>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/1720958\">Template sketch responding to a prerecorded sample<\/a><\/p>\n<p><a href=\"https:\/\/openprocessing.org\/sketch\/1097846\">Template sketch responding to the microphone (allow the use of the mic)<\/a><\/p>\n<p>This sketch already has a sound file and the audio setup along with a bunch of examples.<br \/>\nFork it (make a copy) with the fork button on the top right<br \/>\nPut your face code in the draw function and think about what parts of it makes sense to animate in response to the sound volume.<\/p>\n<p>Video Explanation below (the video uses a microphone instead of a sound clip but it&#8217;s the same principle).<\/p>\n<p><iframe loading=\"lazy\" title=\"p5: mic and map function\" width=\"840\" height=\"473\" src=\"https:\/\/www.youtube.com\/embed\/jABaHFChghw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe><\/p>\n<p>Make sure the sketch is unmuted &#8211; speaker icon on the top right<\/p>\n<p><a href=\"http:\/\/mycours.es\/digitalmedia\/files\/2022\/12\/Image-2.png\"><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter size-full wp-image-3622\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2022\/12\/Image-2.png\" alt=\"\" width=\"372\" height=\"133\" \/><\/a>Make sure the browser tab is also unmuted and the computer is playing sound from the speakers or headphones<\/p>\n<h2>Optional: using sound on openprocessing<\/h2>\n<p>If you want to make a sound-enabled sketch instead of forking the example above you have to:<\/p>\n<p>1- Upload the sound files as mp3:<br \/>\ncode settings on the right &gt; files &gt; upload an mp3<br \/>\n2- Change loadSound(&#8216;filename.mp3&#8217;); using your file name. You may want to rename your file to something simple before you upload it.<br \/>\n3- Include the p5.sound add on by opening the menu on the right and activating the switch:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"aligncenter wp-image-3096\" src=\"http:\/\/mycours.es\/digitalmedia\/files\/2021\/02\/Image-041.png\" alt=\"\" width=\"300\" height=\"162\" \/><\/p>\n<p>4- All the sound functions are in this section of the manual <a href=\"https:\/\/p5js.org\/reference\/#\/libraries\/p5.sound\">p5.sound<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Make your face sketch sound-responsive by animating several visual elements in relation to the given sound clip. Requirements: Same as the face + Animate at least 5 visual elements Make a fork of the character so you still have the static one as separate submission. Deliverables: Post it on the openprocessing classroom with a proper &hellip; <a href=\"https:\/\/mycours.es\/digitalmedia\/project-sound-responsive-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Assignment: Sound Responsive Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":33,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-3092","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3092","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/comments?post=3092"}],"version-history":[{"count":13,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3092\/revisions"}],"predecessor-version":[{"id":4060,"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/pages\/3092\/revisions\/4060"}],"wp:attachment":[{"href":"https:\/\/mycours.es\/digitalmedia\/wp-json\/wp\/v2\/media?parent=3092"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}