[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/Teacher Feedback
  • Prompt
  • Sample Output
  • Extensions

Was this helpful?

  1. Unit 3: Arrays, Loops, Media

๐Ÿ—ƒU3LA5 Mini Project: Keyboard/Patatap

How can I create a visual, interactive project with sound?

PreviousU3LA5.1: Loading & Playing Sound FilesNext๐ŸŽจUnit 3 Final Project: Random Meme Generator

Last updated 2 years ago

Was this helpful?

Overview/Teacher Feedback

This project comes right before the bigger, end of unit project. As such, it's up to you how large you'd like to make this - feel free to adjust the program requirements to keep it as more of a short, 1-2 period practice and exploration, or scale it up into a full week ordeal. Entirely up to you!

Prompt

You are going to be tasked with making a program that will be fully interactive and allow the users to play sounds that also correspond to something that happens on the canvas. (Think back to our lesson on sound with the changing face!) Your task can go in one of two directions: you can make something purely whimsical, or you can attempt to make a p5 keyboard (complete with visual) where the keys will play and change color as you type. If you go for the whimsical route,

Task && Requirements

Create a program that has/does the following:

  • Includes at least 5 sounds, each that plays when a specific key is pressed

  • Makes something appear or change on the screen when each sound is played

  • Utilize any relevant skills from past lessons - think back on past projects and get creative with skills you can integrate into this one!

Writing Prompts

  • Explain how your program works.

  • Describe a challenge you faced in making your program and how you solved it.

  • In what ways could this program be improved, given more time and resources?

Sample Output

If you went the keyboard route, it would look something like this. As keys are typed, the keyboard would light up and play a note:

Extensions

As we get further and further into the unit, the extensions become more about how students choose to challenge themselves by using the reference sheet.

In the sample project, a variation of timers are used (frameCount with modulo) to make things happen to a beat; this would be a great mini extension for students!

๐Ÿ—ƒ๏ธ
think something closer to this.
Sample Project
Be sure to visit the actual project - this isn't as exciting without the sound!