[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"sanity-CWg4mSZfBJgtq1EezLLrqjSnV9IDHJmA9gzYuizT0gc":3,"sanity-5IOG6wjI287npDec74dbW-gS-LKWBUyhilWaBD0Pm_I":253},{"data":4,"sourceMap":-1},{"latestPodcast":5,"latestReleases":14,"post":39,"recent":228},[6],{"_id":7,"publishedAt":8,"slug":9,"sponsored":12,"title":13},"5c7f0882-e1a7-4d0e-9e06-86cce9c3613a","2026-07-02T07:40:00.000Z",{"_type":10,"current":11},"slug","ai-coding-chaos-into-a-repeatable-playbook",null,"How do you turn AI coding chaos into a repeatable playbook?",[15,21,27,33],{"_id":16,"publishedAt":17,"slug":18,"title":20},"eb5b66eb-9410-4329-83bb-22bbff39402a","2026-04-28T13:00:00.000Z",{"_type":10,"current":19},"turn-scattered-knowledge-into-trusted-intelligence","Turning scattered knowledge into trusted intelligence: Stack Internal 2026.3",{"_id":22,"publishedAt":23,"slug":24,"title":26},"369c2401-b62e-4a37-8ff8-bf603023ecad","2026-03-02T15:03:00.988Z",{"_type":10,"current":25},"what-s-new-at-stack-overflow-march-2026","What’s new at Stack Overflow: March 2026",{"_id":28,"publishedAt":29,"slug":30,"title":32},"5e9053a4-07ea-447c-91ea-29e0b6228537","2026-02-02T15:00:00.000Z",{"_type":10,"current":31},"what-s-new-at-stack-overflow-february-2026","What’s new at Stack Overflow: February 2026",{"_id":34,"publishedAt":35,"slug":36,"title":38},"a1b538eb-a8a6-46d0-80a1-ac70ec9bb935","2026-01-05T10:00:00.000-05:00",{"_type":10,"current":37},"what-s-new-at-stack-overflow-january-2026","What’s new at Stack Overflow: January 2026",{"_createdAt":40,"_id":41,"_rev":42,"_type":43,"_updatedAt":44,"author":45,"body":62,"comments":191,"dateUrl":192,"excerpt":193,"image":194,"legacyBody":197,"product":12,"publishedAt":200,"slug":201,"sponsored":12,"tags":203,"title":227,"visible":191},"2023-05-25T09:39:18Z","wp-post-18016","dgl3SCUzppW3U2LvCoSsMu","blogPost","2023-07-13T14:55:57Z",[46],{"_createdAt":47,"_id":48,"_rev":49,"_type":50,"_updatedAt":51,"avatar":52,"bio":57,"employee":58,"name":59,"slug":60},"2023-05-23T16:27:18Z","wp-author-cap-17633","07ZbrKPSUrjrV4wQ6fDpaa","blogAuthor","2023-06-20T15:05:10Z",{"_type":53,"asset":54},"image",{"_ref":55,"_type":56},"image-b650e8ac1685f03c7cd39f61125dbe6d0ec4724e-300x400-jpg","reference","Jiwon Shin is a Curriculum Developer at Codecademy focusing on web development content. She is also an adjunct professor at New York University where she teaches web development and creative coding.","none","Jiwon Shin",{"current":61},"jiwon-shin",[63,108,112,120,131,142,153,172],{"_key":64,"_type":65,"children":66,"markDefs":99,"style":107},"ddf01a912df4","block",[67,72,77,81,86,90,95],{"_key":68,"_type":69,"marks":70,"text":71},"ddf01a912df40","span",[],"In our last session, we will learn how to create audio visualizations with the ",{"_key":73,"_type":69,"marks":74,"text":76},"ddf01a912df41",[75],"ce387edd3da9","p5.sound.js library",{"_key":78,"_type":69,"marks":79,"text":80},"ddf01a912df42",[],". We will start by learning how to upload and play a sound file in the ",{"_key":82,"_type":69,"marks":83,"text":85},"ddf01a912df43",[84],"8c8af2a6f69d","p5.js web editor",{"_key":87,"_type":69,"marks":88,"text":89},"ddf01a912df44",[],". We will first talk about what amplitude is and how we can program a p5.js sketch to react to the amplitude of a sound file. We also talk about how to analyze sound with ",{"_key":91,"_type":69,"marks":92,"text":94},"ddf01a912df45",[93],"c3cde0ab109e","Fast Fourier Transform",{"_key":96,"_type":69,"marks":97,"text":98},"ddf01a912df46",[]," (FFT) and we can use the amplitude values along the frequency spectrum to create an audio visualization.",[100,103,105],{"_key":75,"_type":101,"href":102,"reference":12},"link","https:\u002F\u002Fp5js.org\u002Freference\u002F#\u002Flibraries\u002Fp5.sound",{"_key":84,"_type":101,"href":104,"reference":12},"https:\u002F\u002Fwww.codecademy.com\u002Fcourses\u002Flearn-p5js\u002Fexternal_resources\u002Fp5js-web-editor",{"_key":93,"_type":101,"href":106,"reference":12},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFast_Fourier_transform","normal",{"_key":109,"_type":110,"markDefs":12,"url":111},"fae12c8f49fa","embed","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fp8nCYCfxOhw",{"_key":113,"_type":65,"children":114,"markDefs":119,"style":107},"7461ba14d37c",[115],{"_key":116,"_type":69,"marks":117,"text":118},"7461ba14d37c0",[],"Here are some Stack Overflow questions related to the work we did in this session:",[],{"_key":121,"_type":65,"children":122,"markDefs":128,"style":107},"7ae4c1c40e30",[123],{"_key":124,"_type":69,"marks":125,"text":127},"7ae4c1c40e300",[126],"13d7ce588682","How to get frequency value in JavaScript?",[129],{"_key":126,"_type":101,"href":130,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F50376861\u002Fhow-to-get-frequency-value-in-javascript\u002F50421601#50421601",{"_key":132,"_type":65,"children":133,"markDefs":139,"style":107},"82618d506eb7",[134],{"_key":135,"_type":69,"marks":136,"text":138},"82618d506eb70",[137],"b186e8069f6c","Creating a Sound Wave using P5.js",[140],{"_key":137,"_type":101,"href":141,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F55943459\u002Fcreating-a-sound-wave-using-p5-js\u002F55944178#55944178",{"_key":143,"_type":65,"children":144,"markDefs":150,"style":107},"e46fdef8e76a",[145],{"_key":146,"_type":69,"marks":147,"text":149},"e46fdef8e76a0",[148],"fd6a307ca89b","( p5.js ) FFT report lower frequencies “too loud” and higher frequencies “mute”?",[151],{"_key":148,"_type":101,"href":152,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F33181958\u002Fp5-js-fft-report-lower-frequencies-too-loud-and-higher-frequencies-mute",{"_key":154,"_type":65,"children":155,"markDefs":169,"style":107},"d8b6e3109c0d",[156,160,165],{"_key":157,"_type":69,"marks":158,"text":159},"d8b6e3109c0d0",[],"If you enjoyed this lesson, you can catch up on ",{"_key":161,"_type":69,"marks":162,"text":164},"d8b6e3109c0d1",[163],"d1fda191e1d6","the rest of the series",{"_key":166,"_type":69,"marks":167,"text":168},"d8b6e3109c0d2",[]," on YouTube.",[170],{"_key":163,"_type":101,"href":171,"reference":12},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=vR06jWwfQ3I&list=PLFzsFUO-y0HBN4XSfV9JosFZixuTPX0HC",{"_key":173,"_type":65,"children":174,"markDefs":188,"style":107},"6ddea1d3e0e6",[175,179,184],{"_key":176,"_type":69,"marks":177,"text":178},"6ddea1d3e0e60",[],"Finally, if you want even more Creative Coding with p5.js content, you can sign up for the interactive course this series was based on ",{"_key":180,"_type":69,"marks":181,"text":183},"6ddea1d3e0e61",[182],"0cc1dc8ab633","here",{"_key":185,"_type":69,"marks":186,"text":187},"6ddea1d3e0e62",[],". This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!",[189],{"_key":182,"_type":101,"href":190,"reference":12},"https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Flearn-p5js?utm_source=stack_overflow&utm_medium=partners&utm_content=cclive_creative_so_8",true,"2021\u002F05\u002F08","",{"_type":53,"asset":195},{"_ref":196,"_type":56},"image-a743776940b4b4a76ba838bdcf211688bcc56ca1-2400x1240-png",{"code":198,"language":199},"\u003C!-- wp:paragraph -->\n\u003Cp>In our last session, we will learn how to create audio visualizations with the \u003Ca href=\"https:\u002F\u002Fp5js.org\u002Freference\u002F#\u002Flibraries\u002Fp5.sound\">p5.sound.js library\u003C\u002Fa>. We will start by learning how to upload and play a sound file in the \u003Ca href=\"https:\u002F\u002Fwww.codecademy.com\u002Fcourses\u002Flearn-p5js\u002Fexternal_resources\u002Fp5js-web-editor\">p5.js web editor\u003C\u002Fa>. We will first talk about what amplitude is and how we can program a p5.js sketch to react to the amplitude of a sound file. We also talk about how to analyze sound with \u003Ca href=\"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFast_Fourier_transform\">Fast Fourier Transform\u003C\u002Fa> (FFT) and we can use the amplitude values along the frequency spectrum to create an audio visualization.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Ciframe width=\"560\" height=\"315\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002Fp8nCYCfxOhw\" title=\"YouTube video player\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen>\u003C\u002Fiframe>\n\u003C!-- \u002Fwp:html -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Here are some Stack Overflow questions related to the work we did in this session:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F50376861\u002Fhow-to-get-frequency-value-in-javascript\u002F50421601#50421601\">How to get frequency value in JavaScript?\u003C\u002Fa>\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F55943459\u002Fcreating-a-sound-wave-using-p5-js\u002F55944178#55944178\">Creating a Sound Wave using P5.js\u003C\u002Fa>\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F33181958\u002Fp5-js-fft-report-lower-frequencies-too-loud-and-higher-frequencies-mute\">( p5.js ) FFT report lower frequencies “too loud” and higher frequencies “mute”?\u003C\u002Fa>\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>If you enjoyed this lesson, you can catch up on \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=vR06jWwfQ3I&list=PLFzsFUO-y0HBN4XSfV9JosFZixuTPX0HC\">the rest of the series\u003C\u002Fa> on YouTube.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Finally, if you want even more Creative Coding with p5.js content, you can sign up for the interactive course this series was based on \u003Ca href=\"https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Flearn-p5js?utm_source=stack_overflow&utm_medium=partners&utm_content=cclive_creative_so_8\">here\u003C\u002Fa>. This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->","html","2021-05-08T14:00:00.000Z",{"current":202},"level-up-creative-coding-with-p5-js-part-8",[204,212,217,222],{"_createdAt":205,"_id":206,"_rev":207,"_type":208,"_updatedAt":205,"slug":209,"title":211},"2023-05-23T16:43:21Z","wp-tagcat-code-for-a-living","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":210},"code-for-a-living","Code for a Living",{"_createdAt":205,"_id":213,"_rev":207,"_type":208,"_updatedAt":205,"slug":214,"title":216},"wp-tagcat-creative-coding",{"current":215},"creative-coding","creative coding",{"_createdAt":205,"_id":218,"_rev":207,"_type":208,"_updatedAt":205,"slug":219,"title":221},"wp-tagcat-level-up",{"current":220},"level-up","level up",{"_createdAt":205,"_id":223,"_rev":207,"_type":208,"_updatedAt":205,"slug":224,"title":226},"wp-tagcat-p5-js",{"current":225},"p5-js","p5.js","Level Up: Creative Coding with p5.js - part 8",[229,235,241,247],{"_id":230,"publishedAt":231,"slug":232,"sponsored":12,"title":234},"28e560af-f0aa-4d46-bd90-f435ad604aa7","2026-06-26T14:00:27.102Z",{"_type":10,"current":233},"paging-charity-how-can-engineering-leaders-avoid-becoming-bond-villains","Paging Charity! How can engineering leaders avoid becoming Bond villains?",{"_id":236,"publishedAt":237,"slug":238,"sponsored":12,"title":240},"4b22c2a3-3779-4966-93eb-5230391dbdce","2026-06-23T14:08:58.595Z",{"_type":10,"current":239},"your-ai-shipped-a-backend-that-boots-that-is-the-whole-problem","Your AI shipped a backend that boots. That is the whole problem.",{"_id":242,"publishedAt":243,"slug":244,"sponsored":12,"title":246},"5cf362e1-fe7b-45af-b69c-914731c6a052","2026-06-23T14:00:00.000Z",{"_type":10,"current":245},"the-2026-developer-survey-is-now-open-for-human-developers-only","The 2026 Developer Survey is now open (for human developers only)!",{"_id":248,"publishedAt":249,"slug":250,"sponsored":12,"title":252},"30b995f7-7cb9-4dd8-bf71-d0685940a32b","2026-06-19T14:00:00.000Z",{"_type":10,"current":251},"dispatches-from-o-reilly-from-capabilities-to-responsibilities","Dispatches from O'Reilly: From capabilities to responsibilities",{"data":254,"sourceMap":-1},{"count":255,"lastTimestamp":12},0]