Activity 6, Intermediate - Drawing with Colby

In this adventure, students will learn introductory programming concepts by planning and using Colby's path to create shapes. Students will be introduced to perspective and using coordinates on a coordinate grid.

Setup - Activity 6

This activity can be broken down into several elements for lesson planning.

Objectives

• Understand that a coordinate grid system is used to describe the position of object on that grid
• Represent an ordered pair as a point on a coordinate grid

Materials Needed

• Coordinate grid with quadrants (.prn file)
• Coordinate grid with quadrants (.pdf file)
• Graph paper with 1” grid, (.prn file)
• Graph paper with 1” grid, (.pdf file)
• Stickers
• Wiki Sticks
• Markers
• Ruler
• Wheatley Tactile Diagramming Kit

Ideas for Carrying Out This Activity

• Encourage students to work with partners if possible
• Use legos to help with the concept of coordinate grids. Use the lego baseplate as the grid and each of the round studs can represent a point where two lines intersect.

Adventure Map: Activity 6

Teaching tip: Provide sufficient time for the student to explore, develop skills, and have fun at each step! Encouraging creativity and personal preferences for drawing as much as possible. Some students may be able to accomplish each step in one session; most students will need several sessions to complete the adventure.

1. Introduction

• Ask your student: Why is the skill of plotting and interpreting points on a coordinate grid valuable in creating computer graphics?
  • Review vocabulary with your student:
  • Coordinate Grid - A coordinate plane is a two-dimensional plane formed by the intersection of two perpendicular lines. Think of the coordinate plane as a large flat surface, like a tabletop or the floor. It's a space where we can locate different points.
  • X-axis - The horizontal line that divides the top and bottom of the coordinate grid.
  • Y-axis - The vertical line that divides the left and right of the coordinate grid.
  • Origin - The point at which the x and y axis intersect.
  • Ordered Pair - An x and y coordinate given within parentheses and separated by a comma. The x value always comes first. The coordinates of a point (x, y) describe how far you've moved horizontally (x) and vertically (y) from your starting point. If you move two steps to the right (x = 2) and three steps forward (y = 3), your position would be (2, 3).
  • Quadrants - The coordinate plane is divided into four equal parts by the intersection of the x-axis (the horizontal line) and the y-axis (the vertical line). These four regions are called quadrants because they each represent one-quarter of the whole coordinate plane. quadrant 1 is the upper right, quadrant 2 is the upper left, quadrant 3 is the lower left and quadrant 4 is the lower right.
• In computer graphics, the screen is represented only by quadrant 4. The origin, or (0,0) point is in the upper left corner. Since there is no other quadrant used in computer graphics the y values are positive. If we were in math class and using the coordinate grid system, a point in quadrant 4, all y values would be negative.
• Show an example of a full coordinate grid and just the grid of quadrant 4 that will be used for this activity.

2. Perspective

• Visual perspective refers to how objects appear relative to each other based on their position and distance from the viewer.
• To understand perspective, imagine looking straight down at Colby's path on the coordinate grid. From this bird's eye view directly overhead, the sizes and positions of Colby and the grid all look proportional and accurate.
• Now imagine zooming out, so you are viewing Colby's path from farther away. As you zoom out, Colby will appear smaller and smaller on the grid. The distances between Colby's path points will seem closer together.
• If we zoomed out so far that Colby was tiny, we could represent his position with just a dot, rather than his full image. This demonstrates how visual perspective changes how we perceive size, distance, and position as our viewpoint changes.

3. Plotting Points

• Plotting points on a coordinate grid involves identifying the location of a point based on its coordinates (x, y) on the grid. Here are the steps to plot points on a coordinate grid:
  • Identify the Coordinates: Each point on the grid is represented by a pair of coordinates (x, y). The x-coordinate tells you how far to the right the point is from the origin. The y-coordinate tells you how down the point is from the origin.
  • Plot the Point: Start at the origin (0, 0), which is in the upper left corner. Move horizontally (right) the number of units specified by the x-coordinate. Move vertically (down) the number of units specified by the y-coordinate. Place a mark or sticker at the intersection of the horizontal and vertical lines to represent the point.
• Example: If you have a point with coordinates (3, 4), you would start at the origin (0,0) and move three units to the right along the x-axis and then four units down and mark the point at that intersection.
• Additional Tips: The order of the coordinates matters. X is always first, Y is always second (x, y).
• The Y values are not negative, even though we are in quadrant 4. This is different when using coordinate grids in math class.
• We are counting the intersections of lines and marking points where two lines intersect. We're not using the open space between the lines.

4. Drawing with Colby's Path

• We are going to start out with a rectangle. Colby is going to start on point (2,2). Start at the origin (0,0), in the upper left corner and move 2 lines to the right. Now move 2 lines down and mark that point. Next we're going to move to the 2nd point, (5,2). Mark the new point and mark Colby’s path, you can use a marker or wiki stix. We will repeat this process for points 3 and 4. Point 3 is (5,3), mark the point and Colby’s path to that point. Point 4 is (2,3), mark the point and Colby’s path to that point. And the last move is to return to the starting point, (2,2).
• Colby has just drawn his first shape!
• We will call this rectangle: (2,2), (5,2), (5,3), (2,3) and (2,2)
• What shape will tracing the path between these points create?
  • (1,3), (5,3), (5, 7), (1, 7) and (1,3)
• What shape will tracing the path between these points create?
  • (8, 1), (8, 4), (5, 4) and (8, 1)
• Now you try to draw a simple shape and list the points your shape uses.

5. Sharing and Discussion

• Have students share the shapes they created by tracing Colby's path between points.
• Ask students to explain the ordered pairs they used and how they plotted each point.
• Discuss how changing the coordinates affects the shape that is drawn. For example:
  • What happens if you increase or decrease the x or y values?
• How can you make the shape bigger or smaller?
• Have students share any challenges they faced in visualizing or plotting the points. Provide guidance as needed.
• Discuss real world applications of using coordinate grids, such as:
  • Mapping locations using latitude and longitude
  • Designing objects in CAD (computer assisted design) programs
  • Designing digital graphics

6. Conclusion

• A coordinate grid is used to precisely specify locations of points using x and y values.
• Ordered pairs denote the x and y coordinates that identify a unique point on the grid.
• By plotting points and tracing the path between them, we can create different shapes.
• Perspective affects how we perceive size and distance of objects.
• Coordinate grids are useful for mapping positions, designing objects, and creating graphics.
• Review vocabulary such as coordinate plane, x-axis, y-axis, origin, ordered pair, quadrant.
• Explain how today's adventure serves as an introduction to working with coordinates, which is important for programming graphics using SVG code.