2.4 Vector or Bitmap

Students use the Vector Art Tool to create or alter a vector graphic. Students loop through costumes to create an animation.

OBJECTIVES:



OBJECTIVES: By the end of this lesson, students will:

    • compare bitmap and vector graphics.

    • analyze best time to use bitmap versus vector.

    • demonstrate use of vector art tool.

TEACHER RESOURCES

Standards

    • CSTA 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.

    • CSTA 2-AP-16: Incorporate existing code, media, and libraries into original programs, and give attribution.

CSTA

DO NOW:

Do Now Digital Citizenship (5 minutes)

    1. Watch "Nicole’s Story: Copyrighting Creative Work" (3:28)

    2. Discuss:

      • Nicole is a creator when she writes stories. Have you ever shared your art, writing, music, videos, or ideas online?

      • Why is the copyright protection so important to Nicole? What could happen if there was no copyright protection?

      • Nicole talks about being influenced by others online but also about making sure not to steal others’ ideas. What do you think is the difference?

TEACHER GUIDANCE:

    • Copyright law allows you to share your work online without other people stealing it.

    • Nicole is inspired by other authors she reads online, but she ensures she isn’t using and then taking credit for others’ ideas.

Mini-Lesson (5-10 minutes)

Difference between Bitmap and Vector graphics. Video

Bitmaps graphics store picture information as pixel squares.

  • Each pixel is assigned a color value. Photographs are Bitmaps.

  • It takes a lot of room to store the data of each pixel, so file size is large.

  • When you scale up a bitmap, you start to see the pixel squares.

  • Bitmaps show lots of detail, but do not scale well.


Vectors graphics store picture information as mathematical equations.

  • File size is small, since it stores the equation not pixel information.

  • It scales well, since it recalculates the equation as it scales.

  • Crisp clean graphics such as Cartoons, Shapes, Logos, etc are stored as Vectors.


Photographs are stored as Bitmaps. They capture realistic details in each pixel. Cartoons, Logos and illustrations are normally stored as Vectors, so they can be scaled for different applications.

Scratch 2 video, but still useful.

Project (20-30 minutes)

Students will use the Vector Art Tool to create or alter a vector graphic. They will loop through costumes to create an animation.

Close-Out (5 minutes)

Discuss the following questions:

    1. Which graphic mode (bitmap or vector) will produce smoother outlines?

    2. Which graphic mode (bitmap or vector) scales well?

    3. Which graphic mode (bitmap or vector) stores lots of realistic details?

    4. What is a contact point, and why is it important for realistic animation?

Potential Responses

  • Bitmaps store lots of realistic details.

  • A contact point, ( or pivot point) is a point/pin/stud/hinge stuck in place. it allows rotations but not translation movement. As an animator, it is important to think about how things move and use contact points when replicating real world dynamics.
    Examples of pivot points: a wing flap that rotates from a hinge; the point of contact between the ball of the foot and the ground in a walk cycle.

Standards CSTA

    • CSTA 2-AP-12: Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.

    • CSTA 2-DA-07: Represent data using multiple encoding schemes.