# \[JS] Intro to Computational Media 2.0

## \[JS] Intro to Computational Media 2.0

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