Flat game example

Introduction

Every street, building, and corner in your neighborhood has a story. Maybe it’s where your classmate used to live, where your friends hang out after school, or where you had your first ice cream meltdown.

In this project, you’ll mix hand-drawn drawings and p5.js to build an interactive digital collage of your neighborhood. You’ll create a character (that can be you, a made-up guide, or even a stray cat), who takes us on a tour of your world.

This is your chance to share memories, conversations, and stories that make your neighborhood yours.

Learning Objectives

Grade 6~8

  • Using images and code together to build a digital scene
  • Making characters move and react using your keyboard or mouse
  • Telling a story through interactive art
  • Observing the world around you and turn it into a creative project
  • Testing and analyzing the effects of changing variables while using computational models
  • Creating clearly named variables that store data, and perform operations on their contents
  • Designing and iteratively developing programs that combine control structures and use compound conditions
  • Decomposing problems and subproblems into parts to facilitate the design, implementation, and review of programs
  • Seeking and incorporating feedback from team members and users to refine a solution that meets user needs
  • Using flowcharts and/or pseudocode to design and illustrate algorithms that solve complex problems

Grade 9~12

  • Justifying the selection of specific control structures by identifying tradeoffs
  • Creating more generalized computational solutions using collections instead of repeatedly using simple variables.

Technical Terms & p5.js Elements

Grade 6~8

  • async setup()
  • image()
  • IF, Else, Else If
  • Operators
  • mouseIsPresse(), keyIsPressed()
  • Flowchart
  • dist()

Grade 9~12

  • Boolean variable
  • text()
  • Parallel IFs vs. nested IFs
  • describe()
  • Playtest

References & Artworks for Discussion: Interpretations of Time

Faith Ringgold's quit work Jacolby Satterwhite's Country Ball Pepón Osorio, No Crying Allowed in the Barbershop (En la barbería no se llora)

Timeline

This project will take approximately eight 45-minute sessions:

  1. Discussing art references and warm-up cxercise.
  2. Researching and gathering materials to represent the neighborhood.
  3. Illustrating the neighborhood by drawing on paper.
  4. Digitizing the images and importing them to p5.js.
  5. Coding the neighborhood in p5.js.
  6. Making iterations as needed. Sharing out.

Optional:

  • This project can begin with interviews with family members or neighbors to gather different anecdotes of the neighborhood.
  • Students who live in the same neighborhood have the option to collaborate on interviews and/or visual assets.

Warm-Up Exercises

Planning A Walk in the Neighborhood Project

  1. Collecting Visual Assets
    1. Researching and taking photos of landmarks, buildings, parks, plants, homes, shops, etc that hold special meaning to you in your neighborhood. You can take photos by physically visiting the space or taking screenshots using Google Street View.
    2. Writing down important memories associated with photos you’ve taken. Write in the tone and voice your character would speak in. The writing could take the form of short descriptions, conversations, monologues, etc.
  2. Hand-Drawn Illustrations!
    1. With a large sheet of paper, color pencils or crayons, and scissor, illustrate the different buildings, objects, people, and animals you’d like to include in your neighborhood drawing.
    2. Take photos of individual item you’ve drawn, and remove the white background of these photos on a computer.
    3. Import the photos into the p5.js Editor.