Update 2024-12-18-intro-to-p5-grid.md

Author: jeancommits

_posts/resources/2024-12-18-intro-to-p5-grid.md

@@ -20,11 +20,14 @@ excerpt: "Resources for introducing the p5.js environment and the x-y coordinate
 ### Standards
 
 - Math Standard: CCSS.MATH.CONTENT.6.NS.C.6: Understand a rational number as a point on the number line; locate and position points on a coordinate plane.  
-- Media Arts Standard: 6.MA:Cr1 Generate and conceptualize artistic ideas and work  
+- Media Arts Standard:
+  * 6.MA:Cr1 Generate and conceptualize artistic ideas and work
+  * 6.MA:Cr2 Organize and develop artistic ideas and work.
 - Computer Science Standards:   
   * 6-8.AP.10 Use flowcharts and/or pseudocode to design and illustrate algorithms that solve complex problems. (P4.1, P4.4)  
   * 6-8.AP.11 Create clearly named variables that store data, and perform operations on their contents. (P5.1, P5.2)  
   * 6-8.AP.19 Document programs in order to make them easier to use, read, test, and debug. (P7.2)
+  * 6.MA:Cr2 Organize and develop artistic ideas and work.
 
 ### Learning Intention
 
@@ -40,20 +43,22 @@ Students will understand the x, y coordinates on a p5.js grid and create pattern
 
 - Laptops or Chromebooks with internet access  
 - Projector and screen for demonstrations  
-- ***Note***: You may want to create a Google Classroom to share the resources below as “Materials” for students and, also print the grid, guide, and vocab for students.  
+- ***Note***: You may want to create a Google Classroom or page on a Learning Management System (LMS) to share the resources below as “Materials” for students and, also print the grid, guide, and vocab for students.  
   * [P5.js web editor](https://editor.p5js.org/)
   * [Grid Resource (Google Docs)](https://docs.google.com/document/d/1C1D7WO_I7R9AgqfV3X967jRJo07qO0U5GdJ0U6VlT0c/edit?usp=sharing) with labeled x and y axes (or [png image](https://drive.google.com/file/d/1_oQwoiHC_3Nlew-lp9mAVtKtDgDu4Rgt/view?usp=drive_link))
   * [Intro to P5 Vocabulary Reference Guide](https://docs.google.com/document/d/1dTPg13E6M4Vi9Xudwa49bYxZEf1qRs50oZjlDAtJARo/edit?usp=sharing)
   * Online Color Resources:  
     + [RGB Color Picker](https://www.google.com/search?q=rgb+color+picker&oq=rgb+color+picker&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRhB0gEINzU5M2owajGoAgCwAgA&sourceid=chrome&ie=UTF-8&safe=active&ssui=on)   
     + [RBG Colors](https://www.w3schools.com/css/css_colors_rgb.asp)  
     + [Color Names](https://www.w3schools.com/colors/colors_names.asp)    
-  * Lesson 1 p5.js code: [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)
+  * [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)
+
+![Image of the Grid resource]({{ "assets/images/resources/mariana-sandoval/Mariana Grid Image.png" | relative_url }})  
 
 ### Intro (15 minutes)
 
 - Begin with a brief discussion: “Where have you seen grids in real life?” (e.g., graph paper, maps, games, math). Share how we will be using a grid in the p5.js coding platform to create with code.  
-- Project [Google Doc Grid Resource](https://docs.google.com/document/d/1C1D7WO_I7R9AgqfV3X967jRJo07qO0U5GdJ0U6VlT0c/edit?usp=sharing) grid and go over the following:  
+- Project the [Google Doc Grid Resource](https://docs.google.com/document/d/1C1D7WO_I7R9AgqfV3X967jRJo07qO0U5GdJ0U6VlT0c/edit?usp=sharing)  and go over the following:  
   * The horizontal axis is the x-axis, and the vertical axis is the y-axis  
   * The origin, or point where the x-axis and y-axis meet (0, 0)  
 - Ask students to share similarities and differences to the coordinate plane in math (TPS)  
@@ -63,17 +68,17 @@ Students will understand the x, y coordinates on a p5.js grid and create pattern
 ### Guided Practice & Demonstration (25 minutes)
 
 - Open the p5.js editor. Briefly go over the platform and how to login and save files.
-- Explain a function and state how it uses x, y coordinates to position shapes.
+- Explain a function (see the intro to p5.js [Vocablary Reference Guide](https://docs.google.com/document/d/1dTPg13E6M4Vi9Xudwa49bYxZEf1qRs50oZjlDAtJARo/edit?usp=sharing)) and state how it uses x, y coordinates to position shapes.
 - ***Vocabulary:*** Go over the [Intro to p5.js Vocabulary Reference Guide](https://docs.google.com/document/d/1dTPg13E6M4Vi9Xudwa49bYxZEf1qRs50oZjlDAtJARo/edit?usp=sharing). Mention to students that we will not focus on all vocabulary for example, lines, triangles, or stroke but they are free to try these out on their own.  
-- In the p5.js editor and demonstrate the following:
-  * [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)  
+- In the p5.js editor, demonstrate the following while students follow and code along:
+  * How to code lines by recreating the lines in the [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)  
   * Scaffold and chunk out these pieces by demoing how to:
     * Code the Canvas
     * Use the Function Draw
       * Code the Background color
       * Code a fill color for the shapes
       * Code the shape coordinates to create each shape
-    * Typing comments to explain code
+    * Type comments to explain code
 
 ### Reflection (5 minutes)
 
@@ -94,11 +99,12 @@ Discuss: “How might knowing coordinates help in creating digital art or games?
 ### Standards
 
 - Math Standard: CCSS.MATH.CONTENT.6.NS.C.6: Understand a rational number as a point on the number line; locate and position points on a coordinate plane.  
-- Media Arts Standard: 6.MA:Cr1 Generate and conceptualize artistic ideas and work  
+- Media Arts Standard:
+  * 6.MA:Cr1 Generate and conceptualize artistic ideas and work.
+  * 6-8.AP.19 Document programs in order to make them easier to use, read, test, and debug. (P7.2)
 - Computer Science Standards:   
   * 6-8.AP.10 Use flowcharts and/or pseudocode to design and illustrate algorithms that solve complex problems. (P4.1, P4.4)  
   * 6-8.AP.11 Create clearly named variables that store data, and perform operations on their contents. (P5.1, P5.2)  
-  * 6-8.AP.19 Document programs in order to make them easier to use, read, test, and debug. (P7.2)
 
 ### Learning Intention
 
@@ -113,39 +119,41 @@ Students will understand the x, y coordinates on a p5.js grid and create pattern
 
 - Laptops or Chromebooks with internet access  
 - Projector and screen for demonstrations  
-- ***Note***: You may want to create a Google Classroom to share the resources below as “Materials” for students and, also print the grid, guide, and vocab for students.  
+- ***Note***: You may want to create a Google Classroom or a page in a Learning Managment System (LMS) to share the resources below as “Materials” for students and, also print the grid, guide, and vocab for students.  
   * [p5.js Editor](https://editor.p5js.org/)
   * [Grid Resource (Google Docs)](https://docs.google.com/document/d/1C1D7WO_I7R9AgqfV3X967jRJo07qO0U5GdJ0U6VlT0c/edit?usp=sharing) with labeled x and y axes (or [png image](https://drive.google.com/file/d/1_oQwoiHC_3Nlew-lp9mAVtKtDgDu4Rgt/view?usp=drive_link))
   * [Intro to p5.js Vocabulary Reference Guide](https://docs.google.com/document/d/1dTPg13E6M4Vi9Xudwa49bYxZEf1qRs50oZjlDAtJARo/edit?usp=sharing)
   * Online Color Resources:  
     + [RGB Color Picker](https://www.google.com/search?q=rgb+color+picker&oq=rgb+color+picker&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRhB0gEINzU5M2owajGoAgCwAgA&sourceid=chrome&ie=UTF-8&safe=active&ssui=on)   
     + [RBG Colors](https://www.w3schools.com/css/css_colors_rgb.asp)  
     + [Color Names](https://www.w3schools.com/colors/colors_names.asp)    
-- Previous Lesson 1 p5.js code: [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)
+  * [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4)
 - [Lesson Exemplar 1](https://editor.p5js.org/msandoval/sketches/ZMkSLnu6N)
 - [Lesson Exemplar 2](https://editor.p5js.org/msandoval/sketches/7k8nQBPHD)
 
+![Sample sketch created with p5.js]({{ "assets/images/resources/mariana-sandoval/Mariana Exemplar 2 Final.png" | relative_url }})  
+
 ### Intro (10 minutes)
 
 - ***Prior Knowledge Review:*** Check to make sure students know how to use the [Grid Resource (Google Docs)](https://docs.google.com/document/d/1C1D7WO_I7R9AgqfV3X967jRJo07qO0U5GdJ0U6VlT0c/edit?usp=sharing) by having students show you how points are located using coordinates (e.g., (100, 200) means moving 100 units right and 200 units down).
 
 - ***Remind students:***
   * Reference the [Intro to p5.js Vocabulary Reference Guide](https://docs.google.com/document/d/1dTPg13E6M4Vi9Xudwa49bYxZEf1qRs50oZjlDAtJARo/edit?usp=sharing)   
     + The students will only be required to focus on circles, rectangles, ellipses, fills for the shapes, and adding comments, but they are free to try anything else from the vocab guide.  
-  * Go over the color resources (you may want to add them as materials in a Google Classroom for students to reference easily).  
+  * Go over the color resources (you may want to add them as materials in an LMS for students to reference easily).  
     + [RGB Color Picker](https://www.google.com/search?q=rgb+color+picker&oq=rgb+color+picker&gs_lcrp=EgZjaHJvbWUyBggAEEUYOTIGCAEQRRhB0gEINzU5M2owajGoAgCwAgA&sourceid=chrome&ie=UTF-8&safe=active&ssui=on)   
     + [RBG Colors](https://www.w3schools.com/css/css_colors_rgb.asp)  
     + [Color Names](https://www.w3schools.com/colors/colors_names.asp)    
-- Have students view Exemplars to help them generate ideas and learn the code:  
+- Have students view exemplars to help them generate ideas and learn the code:  
   * [Lesson Exemplar 1](https://editor.p5js.org/msandoval/sketches/ZMkSLnu6N)
   * [Lesson Exemplar 2](https://editor.p5js.org/msandoval/sketches/7k8nQBPHD)
 
 ### Student Activity (30 minutes)
 
 - Students will create their own digital artwork using p5.js:  
   * The students will create a pattern that repeats at least once using shapes by plotting the shapes in different locations and add comments to each line of code.  
-  * Have students start with the lesson 1 code: [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4) (Share in Google Classroom)  
-  * Encourage experimentation with coordinates and colors using fill  
+  * Have students start with the lesson 1 code: [Intro to p5.js, Coordinates and Coding Shapes Code](https://editor.p5js.org/msandoval/sketches/L3GWiHYe4) (Share in an LMS)  
+  * Encourage experimentation with coordinates and colors using fill.  
 - Walk around the room to check for understanding and provide support as needed during independent practice.
 
 ### Reflection (5 minutes)
@@ -155,7 +163,7 @@ Students will understand the x, y coordinates on a p5.js grid and create pattern
 
 ### Assessment
 
-- Students will share their designs. Have students share their link to their design in Google Classroom.  
+- Students will share their designs. Have students share their link to their design in an LMS.  
 - Check students’ ability to correctly place shapes using coordinates.  
 - Review completed projects for understanding of x, y concepts and correct use of p5.js functions and patterns created.  
 - Code will be reviewed for correct syntax and use of vocabulary and comments.