🎨
[JS] Intro to Computational Media 2.0
CS4All Resources
  • Curriculum Overview
  • How to Use this Curriculum
  • 📬Leave Us Feedback
  • Curriculum Extras
    • 🔮Curriculum Extras Overview
    • Imposter Syndrome (pt. 1)
      • Imposter Syndrome (pt. 2)
    • Timers in p5.js
    • Time Functions: Crazy Clock Mini Project
    • Using Sliders
    • Pathfinding Algorithms && Facial Scanning
    • Playing with Pixels
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Draw & Draw With Functions
    • 🔮Unit 1 Overview
    • U1LA1.1: p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4: Other Shapes && Styling
    • 🗃️U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1: Intro to Color with RGB && HSB
    • 🤓EXTRA: Color & Data Storage
    • 🤓EXTRA: Color Palette Practice
    • ✨U1LA3.1: Introducing Variables
    • ✨U1LA3.2: Creating Custom Variables
    • ✨U1LA4.1: What is Abstraction?
    • ✨U1LA4.2: Intro to Functions && Function Calls
    • U1LA4.3: Draw with Functions
    • U1LA4.4: Using the Random Function
    • 🗃️U1LA4 Mini Project: Custom Emoji
    • U1LA5.1: Your Custom Function Library
    • 🎨Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond and Draw on Canvas
    • 🔮Unit 2 Overview
    • ✨U2LA1.1: Conditionals and If Statements
    • ✨U2LA1.2: Conditionals and if, else if, and else statements
    • ✨U2LA1.3: Logical Operators And/Or
    • 🗃️U2LA1 Mini Project: Make a Traffic Light
    • U2LA2.1: Draw with Mouse
    • U2LA2.2: The Map Function
    • ✨U2LA3.1: Data Type Scavenger Hunt
    • ✨U2LA3.2: Functions that Return Values
    • 🤓U2LA3.3: Functions with Purpose
    • U2LA4.1: Collision Functions && Collide2D
    • U2LA4.2: Mouse Clicks && Shapes as Buttons
    • 🗃️U2LA2 Mini Project: Light Switch Game
    • U2LA5.1: Key Presses && Nested Conditionals
    • 🎨Unit 2 Final Project: Interactive Drawing App
  • Unit 3: Arrays, Loops, Media
    • 🔮Unit 3 Overview
    • U3LA1.1: While Loops
    • U3LA1.2: For Loops Pt 1
    • U3LA1.3: Nested For Loops (For Loops pt 2)
    • 🗃️U3LA1 Mini Project: Wallpaper Design
    • U3LA2.1: Introduction to Arrays
    • U3LA.2.2: Arrays with floor() and random()
    • 🗃️U3LA2 Mini Project 1: Fortune Teller
    • U3LA2.3: Loops and Arrays
    • U3LA2.4: Updating and Deleting from Arrays
    • 🗃️🤓 U3LA2 Mini Project 2: CodeWars Array Challenges
    • U3LA3.1: Preload, Images, Tint
    • 🤓U3LA3.2: Images and Arrays with ml5
    • U3LA3.3: Fonts && Text Styling
    • 🗃️U3LA4 Mini Project 4: Typography
    • U3LA4.1: Loading & Playing Sound Files
    • 🎨Unit 3 Final Project: Patatap
  • Unit 4: Motion, Objects, Transformation
    • 🔮Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move in All Directions && Make it Bounce
    • U4LA2.1: Introduction to Classes and Objects
    • U4LA2.2: Reading and Updating Object Properties
    • U4LA2.3: Methods Off Canvas
    • U4LA2.4: Objects on Canvas
    • 🗃️U4LA2 Mini Project: Build a Tamagotchi
    • U4LA3.1: Creating Many Objects
    • 🤓🗃 Optional U4LA3 Mini Project: Rebuild with Objects
    • U4LA4.1: Translation Battleship
    • U4LA4.2: Rotations
    • 🤓U4LA5.1: Sine && Oscillating Motion
    • 🤓U4LA5.2: Cosine && Circular Motion
    • 🎨Unit 4 Final Project: Animated Greeting Card || PSA
  • Unit 5: Final Project
    • 🔮Unit 5 Overview
    • 🎨Course Final Project Guide
Powered by GitBook
On this page
  • Teacher Notes && Overview
  • Suggested Duration
  • Prompt
  • Sample Output
  • Extensions
  1. Unit 4: Motion, Objects, Transformation

🗃 Optional U4LA3 Mini Project: Rebuild with Objects

How can I rebuild a prior project using object oriented programming?

PreviousU4LA3.1: Creating Many ObjectsNextU4LA4.1: Translation Battleship

Last updated 2 years ago

Teacher Notes && Overview

This is an entirely optional mini project; it's most recommended for schools that are either moving rapidly through the curriculum, or are not planning to complete Unit 5, as it does take time away from the rest of the content. In this mini project, students are challenged to rebuild a prior project (the Interactive Drawing app) using object-oriented programming.

This project could also be used to rebuild any other project or to try and create something entirely new using objects. is a great example, or trying to replicate a board. With objects introduced, the sky is really the limit for your students!

Suggested Duration

3-4 45 minute periods

Prompt

You've created a lot of amazing projects so far, but they have all been done with what we call procedural programming. That means you have relied on procedures - your custom functions - to organize the bulk of your computing. As of this unit, though, you have now learned about objects and are capable of object-oriented programming where the bulk of your computing will be organized around objects and their methods.

This is a powerful programming tool that can make life SO much easier. To showcase and celebrate that development, we want you to rebuild a past project - and unless you are given another specific prompt, we are going to make that the Interactive Drawing Project from Unit 2!

Requirements

  1. Create a Brush class that will have one object instance. Think about what properties and methods this class will require!

  2. Create a Button class so you can make each clickable button (your colors, etc) an object instance of this class. Think about what properties and methods this class will require!

  3. Think back to the spicy options from Unit 2, such as giving different brush style options - are they now easier to complete or integrate into this program?

  4. Consider other parts of your program that may benefit from becoming a Class/object and implement accordingly. (Could the background/draw surface become a Class/object? WHO KNOWS!)

  5. Use everything you have learned so far to make this program run as efficiently as possible!

Sample Output

Visually, this sample output will not vary from the Unit 2 Project - what will really change is the code!

Similar to the struggles students may have faced in developing functions to make their intial program, their may be confusion around what exactly to include in their Classes. Consider pseudocoding some of this out with students or doing a group brainstorm to help put them on the right track.

Extensions

While there are no specific extensions for this project, students should be challenged to make this version better than their original, and to try to make their code as efficient as possible.

🤓
Pong
Plinko