Mariana Sandoval

Mariana is a Media Arts TOSA (Teacher on Special Assignment) for Ceres Unified School District in Central California. She teaches elementary students lessons in Media Arts and Coding Art. For the past 10 years, she was a District Educational Technology Specialist (EdTech). Previously, she taught adults and was also a 6th–12th grade teacher. She has taught computer and technology courses, including video production and robotics. She holds a B.S. in Computer Information Systems and an M.A. in Education.

Updated:

Sample sketch created with p5.js

Lesson 1: Navigating the x, y coordinates in p5.js to create shapes

Grade Level: 6th Grade
Lesson Duration: 45 min lesson

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
    • 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

Students will understand the x, y coordinates on a p5.js grid and create patterns of shapes by using code.

Success Criteria

  • Plot x, y coordinates on a p5.js grid
  • Create comments to explain code
  • Create basic shapes using code

Materials

Image of the Grid resource

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 the Google Doc Grid Resource 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)
  • Demonstrate how points are located using coordinates (e.g., (100, 200) means moving 100 units right and 200 units down).
  • Hand out the Google Doc Grid Resource for students to keep as a resource.

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 (see the intro to p5.js Vocablary Reference Guide) and state how it uses x, y coordinates to position shapes.
  • Vocabulary: Go over the Intro to p5.js Vocabulary Reference Guide. 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, 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
    • 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
      • Type comments to explain code

Reflection (5 minutes)

Have students share with a partner the shapes they plan to use, the colors they will use for their shapes, and what type of design they could do to create a pattern. (TPS) Discuss: “How might knowing coordinates help in creating digital art or games?”

Assessment

  • Walk around the room to check for understanding and provide support as needed during guided practice.
  • Check students’ ability to correctly place shapes using coordinates.
  • Code will be reviewed for correct syntax and use of vocabulary.

Lesson 2: Create a Pattern by Coding Shapes

Grade Level: 6th Grade
Lesson Duration: 45 min lesson

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.
    • 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)

Learning Intention

Students will understand the x, y coordinates on a p5.js grid and create patterns of shapes by using code.

Success Criteria

  • Create comments to explain code
  • Use visual design elements, by precisely positioning shapes on a digital canvas to create a pattern

Materials

Sample sketch created with p5.js

Intro (10 minutes)

  • Prior Knowledge Review: Check to make sure students know how to use the Grid Resource (Google Docs) 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
      • 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 an LMS for students to reference easily).
  • Have students view exemplars to help them generate ideas and learn the code:

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 (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)

  • Invite a few students to share their creations and explain how they decided on the placement of shapes.
  • Introduce the idea that grids and coordinates are foundational for animation and interactive design. Example: Flowers - Function & Param with If Statement

Assessment

  • 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.