{"version":1,"pages":[{"id":"9ARJYEz1qqcoFx7Yj06o","title":"Curriculum Overview","pathname":"/js-intro-to-computational-media-2.0","siteSpaceId":"sitesp_0UOgM","description":"A NYS Computing Standard-Aligned Introductory High School Computer Science Curriculum using p5.js"},{"id":"VFmT81zNSUwcVMri79Qg","title":"How to Use this Curriculum","pathname":"/js-intro-to-computational-media-2.0/how-to-use-this-curriculum","siteSpaceId":"sitesp_0UOgM","description":"A brief overview on how to read the resources"},{"id":"wlyyWadhKKJJx6M3wSK8","title":"Leave Us Feedback","pathname":"/js-intro-to-computational-media-2.0/leave-us-feedback","siteSpaceId":"sitesp_0UOgM","emoji":"1f4ec","description":""},{"id":"yzLz5Xu2o1LEDq45b7eP","title":"Curriculum Extras Overview","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/curriculum-extras-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"Extra and optional lessons for the Introduction to Computational Media Curriculum","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"X7MMEZwQWJqynfpFCs9c","title":"Imposter Syndrome (pt. 1)","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/imposter-syndrome-pt.-1","siteSpaceId":"sitesp_0UOgM","description":"What is Imposter Syndrome, and how can I combat it?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"MDntDPZ7lYYtKEceqO5I","title":"Imposter Syndrome (pt. 2)","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/imposter-syndrome-pt.-1/imposter-syndrome-pt.-2","siteSpaceId":"sitesp_0UOgM","description":"How can we design applications to combat imposter syndrome?","breadcrumbs":[{"label":"Curriculum Extras"},{"label":"Imposter Syndrome (pt. 1)"}]},{"id":"61fBJtDRWYV8b2TaawDy","title":"Timers in p5.js","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/timers-in-p5.js","siteSpaceId":"sitesp_0UOgM","description":"How can I create simple timers using p5.js functionality?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"9Lv9jU59jYGye5ShBk26","title":"Time Functions: Crazy Clock Mini Project","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/time-functions-crazy-clock-mini-project","siteSpaceId":"sitesp_0UOgM","description":"How can I get data from functions that track time?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"qrGXaGuoP71QzdZ5KQLX","title":"Using Sliders","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/using-sliders","siteSpaceId":"sitesp_0UOgM","description":"How can I use sliders to control elements of my program?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"Dxrcf8E4xmOKmNbeYqDh","title":"Pathfinding Algorithms && Facial Scanning","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/pathfinding-algorithms-and-and-facial-scanning","siteSpaceId":"sitesp_0UOgM","description":"How does code relate to real-life scenarios and social implications of computing?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"VVTM1daLFh9NkluyZagl","title":"Playing with Pixels","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/playing-with-pixels","siteSpaceId":"sitesp_0UOgM","description":"How can I utilize the pixel values on a canvas to create interactive work?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"SzLA2b5JUFCTBD3Ji9KP","title":"Getting Sound from Mic","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/getting-sound-from-mic","siteSpaceId":"sitesp_0UOgM","description":"How can user generated sound control program elements?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"MD7rKrN1pHl4QUpNI8Kb","title":"Sound Recognition with ml5","pathname":"/js-intro-to-computational-media-2.0/curriculum-extras/sound-recognition-with-ml5","siteSpaceId":"sitesp_0UOgM","description":"How can I use machine learning to recognize sound?","breadcrumbs":[{"label":"Curriculum Extras"}]},{"id":"fbWWATTR2ZNHHrrjyr0c","title":"Unit 1 Overview","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/unit-1-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"How can code be used as a creative and expressive medium?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"aadcIHnguCyfjbUvn38J","title":"U1LA1.1: p5.js Introduction & Deconstruction","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la1.1-p5.js-introduction-and-deconstruction","siteSpaceId":"sitesp_0UOgM","description":"How can we break down a robot into basic shapes in p5.js?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"X5LXjgMD4PKv1hQGAvwa","title":"U1LA1.2 Line Functions and Parameters","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la1.2-line-functions-and-parameters","siteSpaceId":"sitesp_0UOgM","description":"How do the parameters of function effect positioning on the p5 canvas?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"P4bIStvctVdHWzhqjn7G","title":"U1LA1.3: Rectangles, Ellipses, and Layering","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la1.3-rectangles-ellipses-and-layering","siteSpaceId":"sitesp_0UOgM","description":"How can we use shape functions to create images?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"NnvFJ9MBe0ojzfmTY4zX","title":"U1LA1.4: Other Shapes && Styling","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la1.4-other-shapes-and-and-styling","siteSpaceId":"sitesp_0UOgM","description":"How can we use shape functions to create images?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"9coXfGxsYRijtcalI59G","title":"U1LA1 Mini Project: Taijitu Symbol","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la1-mini-project-taijitu-symbol","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can code be used as a creative and expressive medium?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"PVPpwaafiqBMywMPMaqo","title":"U1LA2.1: Intro to Color with RGB && HSB","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la2.1-intro-to-color-with-rgb-and-and-hsb","siteSpaceId":"sitesp_0UOgM","description":"How do color values work in my code?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"U435Et5y99ySfukYpe7J","title":"EXTRA: Color & Data Storage","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/extra-color-and-data-storage","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"An optional, extra lesson on different ways to represent color that will connect HEX with RGB. Fantastic AP CSP prep!","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"UQylScMBwvNfHRXeLCpq","title":"EXTRA: Color Palette Practice","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/extra-color-palette-practice","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"An optional, extra lesson on creating color palettes to practice design skills as well as calling colors.","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"ykkeudFQzjdVvancqNsg","title":"U1LA3.1: Introducing Variables","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la3.1-introducing-variables","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can I use variables to store data and control values in a program?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"AN9H3BeMoEMf6aHA1O7D","title":"U1LA3.2: Creating Custom Variables","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la3.2-creating-custom-variables","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can I create my own variables to hold values in p5.js?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"bcdPb6NcRM3Lf0kzrR4B","title":"U1LA4.1: What is Abstraction?","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la4.1-what-is-abstraction","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"What is abstraction, and how does it relate to my code?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"V1PNZXTkdw4h3DroLkpp","title":"U1LA4.2: Intro to Functions && Function Calls","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la4.2-intro-to-functions-and-and-function-calls","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"What do functions look like in code?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"HINTGWOBUEbhGaoHrnLl","title":"U1LA4.3: Draw with Functions","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la4.3-draw-with-functions","siteSpaceId":"sitesp_0UOgM","description":"How can I create a function that will draw a design?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"iJPvKkWHy9QysvnjKqTZ","title":"U1LA4.4: Using the Random Function","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la4.4-using-the-random-function","siteSpaceId":"sitesp_0UOgM","description":"How can I use the randomness in my code?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"m5WzK83jZi98Muxymtqa","title":"U1LA4 Mini Project: Custom Emoji","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la4-mini-project-custom-emoji","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can I create a function for a custom emoji?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"jj9vEBJzpp2IwjF3rzV3","title":"U1LA5.1: Your Custom Function Library","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/u1la5.1-your-custom-function-library","siteSpaceId":"sitesp_0UOgM","description":"How can I create a library to store my custom functions?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"bS00xptHTG9tDOjApm1J","title":"Unit 1 Final Project: Abstract Album Art","pathname":"/js-intro-to-computational-media-2.0/unit-1-draw-and-draw-with-functions/unit-1-final-project-abstract-album-art","siteSpaceId":"sitesp_0UOgM","emoji":"1f3a8","description":"How can I use my skills in p5 to convey a specific mood or theme?","breadcrumbs":[{"label":"Unit 1: Draw & Draw With Functions"}]},{"id":"36OdRP6l6h2jjP5wuZcQ","title":"Unit 2 Overview","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/unit-2-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"1tEKy9Pg1w2f53sbdlFI","title":"U2LA1.1: Conditionals and If Statements","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la1.1-conditionals-and-if-statements","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can we add conditional statements to make our programs more interactive?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"ykOfecn1jnDX4V2T2dVn","title":"U2LA1.2: Conditionals and if, else if, and else statements","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la1.2-conditionals-and-if-else-if-and-else-statements","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can we write multiple conditions to our code?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"zE32raBS6hxBVHF9LdMO","title":"U2LA1.3: Logical Operators And/Or","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la1.3-logical-operators-and-or","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can logical operators make more specific and complex conditionals?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"2ZE0lAyWWXFFv0imuYQI","title":"U2LA1 Mini Project: Make a Traffic Light","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la1-mini-project-make-a-traffic-light","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can I use conditional logic to create a responsive program?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"hDW20Oq2umQeWm5DUG0P","title":"U2LA2.1: Draw with Mouse","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la1.2-draw-with-mouse","siteSpaceId":"sitesp_0UOgM","description":"How can I use built-in variables to create a program that lets the user draw?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"fHNL27SAcKJZYKNgHt2Y","title":"U2LA2.2: The Map Function","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la2.2-the-map-function","siteSpaceId":"sitesp_0UOgM","description":"How can the map function help me control a range of values?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"z3BvvsfUEQO1jiR5jTDc","title":"U2LA3.1: Data Type Scavenger Hunt","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"What are the different types of data used in JavaScript?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"wrvqMgwNZcSbrO7OJbqE","title":"U2LA3.2: Functions that Return Values","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la3.2-functions-that-return-values","siteSpaceId":"sitesp_0UOgM","emoji":"2728","description":"How can I write functions that take in numeric inputs and return a value?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"EdiBO8dg8Ojr2IXqdI6n","title":"U2LA3.3: Functions with Purpose","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la3.3-functions-with-purpose","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"How can I abstract processes for clarity and reuse?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"In3HjFzdPWjuGwkzNPRX","title":"U2LA4.1: Collision Functions && Collide2D","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la4.1-collision-functions-and-and-collide2d","siteSpaceId":"sitesp_0UOgM","description":"What visual cues tell me where my mouse is?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"LhVogjO9AotYemzXyK1X","title":"U2LA4.2: Mouse Clicks && Shapes as Buttons","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la4.2-mouse-clicks-and-and-shapes-as-buttons","siteSpaceId":"sitesp_0UOgM","description":"How can I use mouse clicks in p5.js?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"z46IsrPxA8bqjqeOaPAd","title":"U2LA2 Mini Project: Light Switch Game","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la2-mini-project-light-switch-game","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"Unit 2 Mini Project Light Switch Game","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"wR4lok9FhpZLluwKi84i","title":"U2LA5.1: Key Presses && Nested Conditionals","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/u2la5.1-key-presses-and-and-nested-conditionals","siteSpaceId":"sitesp_0UOgM","description":"How can I use key presses to control elements of my program?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"qWea2GWIQ7WQhpKwfQa6","title":"Unit 2 Final Project: Interactive Drawing App","pathname":"/js-intro-to-computational-media-2.0/unit-2-respond-and-draw-on-canvas/unit-2-final-project-interactive-drawing-app","siteSpaceId":"sitesp_0UOgM","emoji":"1f3a8","description":"How can I use my skills in p5.js to create an interactive drawing application?","breadcrumbs":[{"label":"Unit 2: Respond and Draw on Canvas"}]},{"id":"REKdmwujbKibTWv5vN0x","title":"Unit 3 Overview","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/unit-3-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"Gf8eVxD5F6bpnSR8cfSV","title":"U3LA1.1: While Loops","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la1.1-while-loops","siteSpaceId":"sitesp_0UOgM","description":"How can we use iteration to abstract artwork?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"8WNIHf8eQBGt457A35Dg","title":"U3LA1.2: For Loops Pt 1","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la1.2-for-loops-pt-1","siteSpaceId":"sitesp_0UOgM","description":"How can we use iteration to abstract artwork?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"132p4mA8bm7x9Sh3aa7Z","title":"U3LA1.3: Nested For Loops (For Loops pt 2)","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la1.3-nested-for-loops-for-loops-pt-2","siteSpaceId":"sitesp_0UOgM","description":"How can we use iteration to abstract artwork?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"qvtaWhAX0qpF5bGOIR7A","title":"U3LA1 Mini Project: Wallpaper Design","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la1-mini-project-wallpaper-design","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can sounds, images, and fonts be combined and manipulated with code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"qBCKjsqDhLEqlOYxEO5j","title":"U3LA2.1: Introduction to Arrays","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la2.1-introduction-to-arrays","siteSpaceId":"sitesp_0UOgM","description":"How can arrays help us simplify code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"60rqZUk6Gvsnsswbnhk2","title":"U3LA.2.2: Arrays with floor() and random()","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la.2.2-arrays-with-floor-and-random","siteSpaceId":"sitesp_0UOgM","description":"How can arrays help us simplify code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"6es1R9JnNW5cSl0OroBf","title":"U3LA2 Mini Project 1: Fortune Teller","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la2-mini-project-1-fortune-teller","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can arrays help us simplify code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"m7HlqIuoaAisK1VADQh9","title":"U3LA2.3: Loops and Arrays","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la2.3-loops-and-arrays","siteSpaceId":"sitesp_0UOgM","description":"How can arrays help us simplify code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"DqHLhXJxvgb4W1Vpxr3t","title":"U3LA2.4: Updating and Deleting from Arrays","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la2.4-updating-and-deleting-from-arrays","siteSpaceId":"sitesp_0UOgM","description":"How can I manage data in my array?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"vONvaWZBSyPVuX8Tzov6","title":"🤓 U3LA2 Mini Project 2: CodeWars Array Challenges","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la2-mini-project-2-codewars-array-challenges","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can I use arrays and loops to solve code challenges?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"7rkuVktta4LRba9OiiMr","title":"U3LA3.1: Preload, Images, Tint","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la3.1-preload-and-and-images","siteSpaceId":"sitesp_0UOgM","description":"How can I utilize the preload function and load images into my program?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"5Y0ce6MVLvtta3uBrYPN","title":"U3LA3.2: Images and Arrays with ml5","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la3.2-images-and-arrays-with-ml5","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"[OPTIONAL LESSON] How can our computer interact with an array of images?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"hu2I478zwJ7mIbGowdkI","title":"U3LA3.3: Fonts && Text Styling","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la3.3-fonts-and-and-text-styling","siteSpaceId":"sitesp_0UOgM","description":"How can I use custom fonts and text to enhance my programs?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"1RPCYanyJN8UhZpoJWJu","title":"U3LA4 Mini Project 4: Typography","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la4-mini-project-4-typography","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can type be interactive while conveying mood and meaning in projects?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"CURwg10RD7Eu7SxoKbiX","title":"U3LA4.1: Loading & Playing Sound Files","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/u3la4.1-loading-and-playing-sound-files","siteSpaceId":"sitesp_0UOgM","description":"How can sounds be embedded with code?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"DtLlxt3reXZ8Q1hEFFAB","title":"Unit 3 Final Project: Patatap","pathname":"/js-intro-to-computational-media-2.0/unit-3-arrays-loops-media/unit-3-final-project-patatap","siteSpaceId":"sitesp_0UOgM","emoji":"1f3a8","description":"How can I create a visual, interactive project with sound?","breadcrumbs":[{"label":"Unit 3: Arrays, Loops, Media"}]},{"id":"vvsjflKghW6u9QPEEIN0","title":"Unit 4 Overview","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/unit-4-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"MmNKKSSlui8S6tb5Gy05","title":"U4LA1.1: Intro to Motion with Flipbooks","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la1.1-intro-to-motion-with-flipbooks","siteSpaceId":"sitesp_0UOgM","description":"How can I move a shape on the x axis?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"JiyOaD45vXJVCKxSUNJZ","title":"U4LA1.2: Move in All Directions && Make it Bounce","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la1.2-move-in-all-directions-and-and-make-it-bounce","siteSpaceId":"sitesp_0UOgM","description":"How can I make objects move in different directions?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"OQsm9pz1zvLaHT8jwRNF","title":"U4LA2.1: Introduction to Classes and Objects","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la2.1-introduction-to-classes-and-objects","siteSpaceId":"sitesp_0UOgM","description":"How can I use a class to construct multiples of an object?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"1IgRds4CZxEKDh0L7W3C","title":"U4LA2.2: Reading and Updating Object Properties","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la2.2-reading-and-updating-object-properties","siteSpaceId":"sitesp_0UOgM","description":"How can I read and update properties/attributes of an object?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"nhOfJdSZMjPpHstmUrs6","title":"U4LA2.3: Methods Off Canvas","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la2.3-methods-off-canvas","siteSpaceId":"sitesp_0UOgM","description":"How can I add methods to a class to give more functionality to my objects?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"sBEW5XiGxUulDYPTGgX8","title":"U4LA2.4: Objects on Canvas","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la2.4-objects-on-canvas","siteSpaceId":"sitesp_0UOgM","description":"How can I use classes and objects with the p5.js library?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"PxWxCOSRDRylrPTmWuPx","title":"U4LA2 Mini Project: Build a Tamagotchi","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la2-mini-project-build-a-tamagotchi","siteSpaceId":"sitesp_0UOgM","emoji":"1f5c3","description":"How can I use Classes/Objects on canvas to build a digital pet?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"wLbo2LSn3TEEyf5nqSNf","title":"U4LA3.1: Creating Many Objects","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la3.1-creating-many-objects","siteSpaceId":"sitesp_0UOgM","description":"How can I use Classes, arrays, and for loops to generate many objects?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"j4ubCYjixNtN7CFqFfMB","title":"🗃 Optional U4LA3 Mini Project: Rebuild with Objects","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/optional-u4la3-mini-project-rebuild-with-objects","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"How can I rebuild a prior project using object oriented programming?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"KHWg1PS8dqYQZdtLxj7Y","title":"U4LA4.1: Translation Battleship","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la4.1-translation-battleship","siteSpaceId":"sitesp_0UOgM","description":"How can I move the canvas origin to effect the position of shapes?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"ltevofCKZceP6ydWQGfl","title":"U4LA4.2: Rotations","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la4.2-rotations","siteSpaceId":"sitesp_0UOgM","description":"How can I make objects rotate?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"0Q2DrMBUgZNY9N6MESLk","title":"U4LA5.1: Sine && Oscillating Motion","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la5.1-sine-and-and-oscillating-motion","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"How can I draw with trigonometric functions in p5?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"sAhe3ezdoea5hwG63wHw","title":"U4LA5.2: Cosine && Circular Motion","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/u4la5.2-cosine-and-and-circular-motion","siteSpaceId":"sitesp_0UOgM","emoji":"1f913","description":"How can I use cosine to create circular motion?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"WcieoMplPhvQWyNkRs1t","title":"Unit 4 Final Project: Animated Greeting Card || PSA","pathname":"/js-intro-to-computational-media-2.0/unit-4-motion-objects-transformation/unit-4-final-project-animated-greeting-card-or-or-psa","siteSpaceId":"sitesp_0UOgM","emoji":"1f3a8","description":"How can I showcase my skills in an animated program?","breadcrumbs":[{"label":"Unit 4: Motion, Objects, Transformation"}]},{"id":"AM4QI9cElbyFkp8BpGBV","title":"Unit 5 Overview","pathname":"/js-intro-to-computational-media-2.0/unit-5-final-project/unit-5-overview","siteSpaceId":"sitesp_0UOgM","emoji":"1f52e","description":"[🚧 UNDER CONSTRUCTION 🚧]","breadcrumbs":[{"label":"Unit 5: Final Project"}]},{"id":"DNYe9noObR49UvEPA3wT","title":"Course Final Project Guide","pathname":"/js-intro-to-computational-media-2.0/unit-5-final-project/course-final-project-guide","siteSpaceId":"sitesp_0UOgM","emoji":"1f3a8","description":"These are instructions for the course final project - other sections of Unit 5 represent optional modules that you can use or not use based on time.","breadcrumbs":[{"label":"Unit 5: Final Project"}]}]}