[1.0 JS] Introduction to Computational Media
  • Introduction to Computational Media
  • How to Use this Curriculum
  • Submit 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
    • Getting Sound from Mic
    • Sound Recognition with ml5
  • Unit 1: Drawing, Variables, and Random
    • 🔮Unit 1 Overview
    • U1LA1.1 p5.js Introduction & Deconstruction
    • U1LA1.2 Line Functions and Parameters
    • U1LA1.3: Rectangles, Ellipses, and Layering
    • U1LA1.4 Various Shapes, Stroke, Weight, Fill
    • 🗃️🗃U1LA1 Mini Project: Taijitu Symbol
    • U1LA2.1 Intro to Variables - System Variables
    • U1LA2.2 Custom Variables in p5.js
    • U1LA2.3 Random Function & Variables
    • 🗃️🗃U1LA2 Mini Project: Custom Emoji pt. 1
    • U1LA.3.1 Intro to Color
    • U1LA3.2: RGB vs HSB Color Modes
    • U1LA3.3 Color Palettes & Design
    • 🎨🎨 Unit 1 Final Project: Abstract Album Art
  • Unit 2: Respond & Draw on Canvas
    • 🔮Unit 2 Overview
    • U2LA1.1 - Conditionals and if statements
    • U2LA1.2 - Conditionals and if, else if, else statements
    • U2LA1.3 - Logical Operators And/Or
    • 🗃️🗃U2LA1 Mini Project: Make a Traffic Light 🚦
    • U2LA1.4: Draw with Mouse
    • U2LA1.5: The Map Function
    • U2LA2.1 - Collision with Collide2D
    • U2LA2.2: Mouse Clicks && Shapes As Buttons
    • 🗃️🗃U2LA2 Mini Project: Light Switch Game
    • U2LA3.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 Mini Project 2: Random Starfield
    • U3LA3.1: Preload && Images
    • U3LA3.2: Tint && Image Manipulation
    • 🗃️🗃U3LA2 Mini Project 3: Vision Board
    • U3LA3.3: Images and Arrays with ml5
    • U3LA4.1 Fonts && Text Styling
    • 🗃️🗃U3LA4 Mini Project 4: Typography
    • U3LA5.1: Loading & Playing Sound Files
    • 🗃️🗃U3LA5 Mini Project: Keyboard/Patatap
  • 🎨🎨Unit 3 Final Project: Random Meme Generator
  • Unit 4: Motion, Animation, Transformation
    • 🔮🔮 Unit 4 Overview
    • U4LA1.1: Intro to Motion with Flipbooks
    • U4LA1.2: Move In All Directions & Make it Bounce
    • 🗃️🗃 U4LA.1: Make a Floating DVD Logo
    • U4LA2.1: Translation Battleship
    • U4LA2.2: Rotations
    • U4LA3.1: Sine & Oscillating Motion
    • U4LA3.2: Cosine & Circular Motion
    • 🎨🎨 Unit 4 Final Project: Animated Greeting Card/PSA
  • Unit 5: Functions & Abstraction
    • 🔮🔮 Unit 5 Overview
    • U5LA1.1: What is Abstraction?
    • U5LA1.2: Intro to Functions & Function Calls
    • U5LA1.3: Draw with Functions
    • 🗃️🗃 U5LA1 Mini Project: Custom Function Library
    • U5LA2.1: Data Type Scavenger Hunt
    • U5LA2.2: Functions that Return Values
    • U5LA2.3: Functions with Purpose
    • U5LA2.4: Functions with Boolean Returns
    • 🗃️🗃 U5LA2 Mini Project: Build Your Own Challenge
    • 🔮🔮 Unit 5 Final Project: Menu of Options
Powered by GitBook
On this page
  • Overview
  • Blueprint Foundations Student Outcomes
  • Assessment
  • Overview of Instructional Materials
  • Sequence of Lessons

Was this helpful?

  1. Unit 3: Arrays, Loops, Media

🔮 Unit 3 Overview

How can sounds, images, and fonts can be combined and manipulated with code?

Overview

In this unit, students learn about working with media and asynchronicity. They also explore arrays and loops as ways to organize data and iterate through information. The preload function is used to load image, font, and sound files before sketches are run, and callback functions are introduced. In the final project, students combine images, fonts, and sound to create their own random meme generator.

Blueprint Foundations Student Outcomes

Abstraction

ANALYZE - Describe how I might use patterns to express an idea.

PROTOTYPE

  • Describe different things I tried in order to achieve a goal.

  • Explain why I chose to include the specific components of my prototype over others.

  • Explain the characteristics or patterns that informed a function or an interface I created.

COMMUNICATE - Explain why using patterns is necessary when creating with a computer.

Algorithms

ANALYZE - Describe how instructions can have different outputs depending on inputs.

PROTOTYPE

  • Demonstrate the benefit of using an event, conditional, or loop in my prototype.

  • Explain how a function I prototyped can be used by someone else.

  • Suggest changes to an algorithm that impacts my family or my community.

COMMUNICATE

  • Compare and contrast how conditionals or loops were used in classmates’ prototypes.

  • Teach someone the difference between instructions and an algorithm.

Programming

ANALYZE - Experiment with the commands of a programming language.

PROTOTYPE

  • Describe the changes I made after testing at least three parts of my program.

  • Describe how I used community research to make technical decisions in the creation of my prototype.

COMMUNICATE - Discuss what can and cannot be done with a specific set of commands.

Assessment

Formative Assessments are given during each lesson.

Summative Assessments include:

  • Wallpaper project

  • Fortune Teller Project

  • Machine Learning/Image Array Research

  • Typography Project

  • Meme Generator

Overview of Instructional Materials

Below we have broken each learning activity down into succinct lessons. We have also structured lessons to promote best practices in pedagogy and student engagement, as well as including our own suggestions for implementation.

Sequence of Lessons

LA1 - For Loops

  • U3LA1.1 - While Loops

  • U3LA1.2 - For Loops I

  • U3LA 1.3 - For Loops II

  • U3LA1.4 - Variation in For Loops

  • U3LA1.5 - Nested For Loops

  • Mini-project: Wallpaper Design

LA2 - Arrays

  • U3LA2.1 - Introduction to Arrays

  • U3LA2.2 - Arrays and floor() function

  • U3LA2.3 - Arrays and Loops

LA3 - Media

  • U3LA3.1 - Preload && Images

  • U3LA3.2 - Images && Arrays

  • U3LA3.3 - Image Manipulation

  • Mini-project - Vision Board

LA4 - Typography

  • U3LA4.1 - Fonts && Text Styling

  • Mini-project: Kinetic Type

LA5 - Sounds

  • U3LA5.1 Loading && Finding Sounds

  • U3LA5.2 Playing sounds & stop/start button

  • Mini-project - Musical Keyboard

  • Final Project: Meme Generator

Previous🎨 Unit 2 Final Project: Interactive Drawing AppNextU3LA1.1: While Loops

Last updated 3 years ago

Was this helpful?

🔮