[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"sanity-DccTbqa4EdCifTyr3nFnvQqwYQoxPoIyylmBIosAJnE":3,"sanity-xxAg4SGom9iI-jAcgnErTk6UphcPIZD23rlekQt0Jis":293},{"data":4,"sourceMap":-1},{"latestPodcast":5,"latestReleases":14,"post":39,"recent":268},[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":76,"comments":219,"dateUrl":220,"excerpt":221,"image":222,"legacyBody":225,"product":12,"publishedAt":228,"slug":229,"sponsored":12,"tags":231,"title":267,"visible":219},"2023-05-25T09:39:17Z","wp-post-17681","9HpbCsT2tq0xwozQfkgDvL","blogPost","2023-07-13T14:55:55Z",[46,64],{"_createdAt":47,"_id":48,"_rev":49,"_system":50,"_type":53,"_updatedAt":54,"avatar":55,"employee":60,"name":61,"slug":62},"2023-05-23T16:27:18Z","wp-author-213","nRfzWrvFg3DIXOd15U9uv8",{"base":51},{"id":48,"rev":52},"9xJoPFf2DISyAMMJXP7Ct6","blogAuthor","2025-07-29T19:37:47Z",{"_type":56,"asset":57},"image",{"_ref":58,"_type":59},"image-e81c84dcaeb58be1002795a6544b595bd6fc8071-1024x1024-jpg","reference","former","Ben Popper",{"current":63},"benpopper",{"_createdAt":47,"_id":65,"_rev":66,"_type":53,"_updatedAt":67,"avatar":68,"bio":71,"employee":72,"name":73,"slug":74},"wp-author-cap-17633","07ZbrKPSUrjrV4wQ6fDpaa","2023-06-20T15:05:10Z",{"_type":56,"asset":69},{"_ref":70,"_type":59},"image-b650e8ac1685f03c7cd39f61125dbe6d0ec4724e-300x400-jpg","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":75},"jiwon-shin",[77,88,119,123,131,142,153,164,183,201],{"_key":78,"_type":79,"children":80,"markDefs":86,"style":87},"1a04ea92621a","block",[81],{"_key":82,"_type":83,"marks":84,"text":85},"1a04ea92621a0","span",[],"In this session, we will turn our static drawings into animations! We will animate the positions of shapes using the draw() function by incrementing and decrementing values over time.",[],"normal",{"_key":89,"_type":79,"children":90,"markDefs":113,"style":87},"7b7ed3096203",[91,95,100,104,109],{"_key":92,"_type":83,"marks":93,"text":94},"7b7ed30962030",[],"Together, we will work on the ",{"_key":96,"_type":83,"marks":97,"text":99},"7b7ed30962031",[98],"9a9c9a7e78d8","Bouncing Balls",{"_key":101,"_type":83,"marks":102,"text":103},"7b7ed30962032",[]," project on the Codecademy platform. Using ",{"_key":105,"_type":83,"marks":106,"text":108},"7b7ed30962033",[107],"3728087f6e74","p5.js animation",{"_key":110,"_type":83,"marks":111,"text":112},"7b7ed30962034",[]," techniques, arrays and for-loops, we will create an animation of circles bouncing around the canvas. We will also look at how to randomize the position, speed, size, and color of each bouncing ball using arrays.",[114,117],{"_key":98,"_type":115,"href":116,"reference":12},"link","https:\u002F\u002Fwww.codecademy.com\u002Fcourses\u002Flearn-p5js\u002Fprojects\u002Fp5js-bouncing-balls?utm_source=stack_overflow&utm_medium=partners&utm_content=cclive_creative_so_1",{"_key":107,"_type":115,"href":118,"reference":12},"https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Flearn-p5js\u002Fmodules\u002Fp5js-animation",{"_key":120,"_type":121,"markDefs":12,"url":122},"7c499d663ca7","embed","https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FfqkdBC7Ki00",{"_key":124,"_type":79,"children":125,"markDefs":130,"style":87},"f93fb9bef558",[126],{"_key":127,"_type":83,"marks":128,"text":129},"f93fb9bef5580",[],"Here are some Stack Overflow questions related to the work we did in today's session:",[],{"_key":132,"_type":79,"children":133,"markDefs":139,"style":87},"2086defda6ad",[134],{"_key":135,"_type":83,"marks":136,"text":138},"2086defda6ad0",[137],"ff4ccba774b0","Conditional statement not activated for bouncing ball in p5.js",[140],{"_key":137,"_type":115,"href":141,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F54103088\u002Fconditional-statement-not-activated-for-bouncing-ball-in-p5-js",{"_key":143,"_type":79,"children":144,"markDefs":150,"style":87},"b933ae72744b",[145],{"_key":146,"_type":83,"marks":147,"text":149},"b933ae72744b0",[148],"bc7a25707e97","P5 - bouncing ball from left to right and back",[151],{"_key":148,"_type":115,"href":152,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F59646011\u002Fp5-bouncing-ball-from-left-to-right-and-back",{"_key":154,"_type":79,"children":155,"markDefs":161,"style":87},"b54753549ef6",[156],{"_key":157,"_type":83,"marks":158,"text":160},"b54753549ef60",[159],"3b2bb57b5d69","Using the random() function in p5.js",[162],{"_key":159,"_type":115,"href":163,"reference":12},"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58236354\u002Fusing-the-random-function-in-p5-js\u002F58236494#58236494",{"_key":165,"_type":79,"children":166,"markDefs":180,"style":87},"990b8cca9452",[167,171,176],{"_key":168,"_type":83,"marks":169,"text":170},"990b8cca94520",[],"If you enjoyed this lesson, you can catch up on the rest of the series on YouTube. If you’d like to watch a session live, follow the ",{"_key":172,"_type":83,"marks":173,"text":175},"990b8cca94521",[174],"ad6858ac6c4d","Codecademy YouTube channel",{"_key":177,"_type":83,"marks":178,"text":179},"990b8cca94522",[],".",[181],{"_key":174,"_type":115,"href":182,"reference":12},"https:\u002F\u002Fwww.youtube.com\u002Fc\u002Fcodecademy\u002Ffeatured",{"_key":184,"_type":79,"children":185,"markDefs":198,"style":87},"6d5b85712102",[186,190,195],{"_key":187,"_type":83,"marks":188,"text":189},"6d5b857121020",[],"Every Tuesday from now until April 27th, we’ll be streaming a new session at 4PM EST. You can set a reminder for the stream for March 23rd ",{"_key":191,"_type":83,"marks":192,"text":194},"6d5b857121021",[193],"0cd7f42f207a","here",{"_key":196,"_type":83,"marks":197,"text":179},"6d5b857121022",[],[199],{"_key":193,"_type":115,"href":200,"reference":12},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Gdakp8ZeMFo",{"_key":202,"_type":79,"children":203,"markDefs":216,"style":87},"219088ed01cd",[204,208,212],{"_key":205,"_type":83,"marks":206,"text":207},"219088ed01cd0",[],"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":209,"_type":83,"marks":210,"text":194},"219088ed01cd1",[211],"eaec8b031ed6",{"_key":213,"_type":83,"marks":214,"text":215},"219088ed01cd2",[],". This course was developed by Jiwon and has many more quizzes, projects, and helpful articles that we can’t fit into our streams!",[217],{"_key":211,"_type":115,"href":218,"reference":12},"https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Flearn-p5js?utm_source=stack_overflow&utm_medium=partners&utm_content=cclive_creative_so_1",true,"2021\u002F03\u002F23","In this session, we will turn our static drawings into animations!",{"_type":56,"asset":223},{"_ref":224,"_type":59},"image-a743776940b4b4a76ba838bdcf211688bcc56ca1-2400x1240-png",{"code":226,"language":227},"\u003C!-- wp:paragraph -->\n\u003Cp>In this session, we will turn our static drawings into animations! We will animate the positions of shapes using the draw() function by incrementing and decrementing values over time.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Together, we will work on the \u003Ca href=\"https:\u002F\u002Fwww.codecademy.com\u002Fcourses\u002Flearn-p5js\u002Fprojects\u002Fp5js-bouncing-balls?utm_source=stack_overflow&utm_medium=partners&utm_content=cclive_creative_so_1\">Bouncing Balls\u003C\u002Fa> project on the Codecademy platform. Using \u003Ca href=\"https:\u002F\u002Fwww.codecademy.com\u002Flearn\u002Flearn-p5js\u002Fmodules\u002Fp5js-animation\">p5.js animation\u003C\u002Fa> techniques, arrays and for-loops, we will create an animation of circles bouncing around the canvas. We will also look at how to randomize the position, speed, size, and color of each bouncing ball using arrays.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:html -->\n\u003Ciframe width=\"640\" height=\"600\" src=\"https:\u002F\u002Fwww.youtube.com\u002Fembed\u002FfqkdBC7Ki00\" 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 today's session:\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F54103088\u002Fconditional-statement-not-activated-for-bouncing-ball-in-p5-js\">Conditional statement not activated for bouncing ball in p5.js\u003C\u002Fa>\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F59646011\u002Fp5-bouncing-ball-from-left-to-right-and-back\">P5 - bouncing ball from left to right and back\u003C\u002Fa>\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>\u003Ca href=\"https:\u002F\u002Fstackoverflow.com\u002Fquestions\u002F58236354\u002Fusing-the-random-function-in-p5-js\u002F58236494#58236494\">Using the random() function in p5.js\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 the rest of the series on YouTube. If you’d like to watch a session live, follow the \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fc\u002Fcodecademy\u002Ffeatured\">Codecademy YouTube channel\u003C\u002Fa>.\u003C\u002Fp>\n\u003C!-- \u002Fwp:paragraph -->\n\n\u003C!-- wp:paragraph -->\n\u003Cp>Every Tuesday from now until April 27th, we’ll be streaming a new session at 4PM EST. You can set a reminder for the stream for March 23rd \u003Ca href=\"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=Gdakp8ZeMFo\">here\u003C\u002Fa>.\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_1\">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-03-23T19:27:21.000Z",{"current":230},"level-up-creative-coding-with-p5-js-part-2",[232,239,244,248,253,257,262],{"_createdAt":233,"_id":234,"_rev":235,"_type":236,"_updatedAt":233,"slug":237,"title":238},"2023-05-23T16:43:21Z","wp-tagcat-animation","9HpbCsT2tq0xwozQfkc4ih","blogTag",{"current":238},"animation",{"_createdAt":233,"_id":240,"_rev":235,"_type":236,"_updatedAt":233,"slug":241,"title":243},"wp-tagcat-code-for-a-living",{"current":242},"code-for-a-living","Code for a Living",{"_createdAt":233,"_id":245,"_rev":235,"_type":236,"_updatedAt":233,"slug":246,"title":247},"wp-tagcat-codecademy",{"current":247},"codecademy",{"_createdAt":233,"_id":249,"_rev":235,"_type":236,"_updatedAt":233,"slug":250,"title":252},"wp-tagcat-creative-coding",{"current":251},"creative-coding","creative coding",{"_createdAt":233,"_id":254,"_rev":235,"_type":236,"_updatedAt":233,"slug":255,"title":256},"wp-tagcat-drawing",{"current":256},"drawing",{"_createdAt":233,"_id":258,"_rev":235,"_type":236,"_updatedAt":233,"slug":259,"title":261},"wp-tagcat-level-up",{"current":260},"level-up","level up",{"_createdAt":233,"_id":263,"_rev":235,"_type":236,"_updatedAt":233,"slug":264,"title":266},"wp-tagcat-p5-js",{"current":265},"p5-js","p5.js","Level Up: creative coding with p5.js - part 2",[269,275,281,287],{"_id":270,"publishedAt":271,"slug":272,"sponsored":12,"title":274},"28e560af-f0aa-4d46-bd90-f435ad604aa7","2026-06-26T14:00:27.102Z",{"_type":10,"current":273},"paging-charity-how-can-engineering-leaders-avoid-becoming-bond-villains","Paging Charity! How can engineering leaders avoid becoming Bond villains?",{"_id":276,"publishedAt":277,"slug":278,"sponsored":12,"title":280},"4b22c2a3-3779-4966-93eb-5230391dbdce","2026-06-23T14:08:58.595Z",{"_type":10,"current":279},"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":282,"publishedAt":283,"slug":284,"sponsored":12,"title":286},"5cf362e1-fe7b-45af-b69c-914731c6a052","2026-06-23T14:00:00.000Z",{"_type":10,"current":285},"the-2026-developer-survey-is-now-open-for-human-developers-only","The 2026 Developer Survey is now open (for human developers only)!",{"_id":288,"publishedAt":289,"slug":290,"sponsored":12,"title":292},"30b995f7-7cb9-4dd8-bf71-d0685940a32b","2026-06-19T14:00:00.000Z",{"_type":10,"current":291},"dispatches-from-o-reilly-from-capabilities-to-responsibilities","Dispatches from O'Reilly: From capabilities to responsibilities",{"data":294,"sourceMap":-1},{"count":295,"lastTimestamp":296},1,"2023-05-25T09:47:33Z"]