[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
  • Teacher Notes
  • Prompt
  • Sample Output
  • Culturally Responsive Best Practices
  • Extensions

Was this helpful?

  1. Unit 3: Arrays, Loops, Media

🗃U3LA2 Mini Project 1: Fortune Teller

How can arrays help us simplify code?

PreviousU3LA.2.2: Arrays with floor() and random()NextU3LA2.3: Loops and Arrays

Last updated 2 years ago

Was this helpful?

Teacher Notes

While this is marked as a mini-project, it is really a specific practice activity for working with arrays using floor() and random(). It can take as little or as long as you'd like, but generally, 2 class days (about 90 minutes) is the sweet spot for students to make something they are happy with that is fully functional.

If students are struggling to come up with interesting things to fill their arrays with, encourage them to Google - this is a coding task, not a creative writing one, and students feeling stumped should feel free to get inspiration where they can.

Students have not formally been taught to join strings, which is a part of this lesson. Many students can figure out that strings can be joined by looking at the text() function they use to display mouse coordinates - string + string creates a joined version. Students may need assistance remembering this, or reasoning out why they made need spaces in their strings to make sentences readable. Students who are looking to add another skill (and vocab word) to their toolbox may benefit from learning about the , either on their own or in the briefest of mini lessons.

Students may benefit from pre-planning before they jump to coding. This specifically designed for this project is available for their use.

Prompt

It's time for your code to tell the future, and as we know, the future is always changing! You will be creating a fortune teller project (and if you don't like fortunes, it can be a homework excuse generator, or anything else similar) that will look great and randomly give out a fortune.

Task

Create a project that will generate a random string of text from three distinct arrays when run by taking a random value from each array and joining them to create a sentence. In the case of the fortune teller, the three arrays might be TIME, PREDICTION, and REASON, so it gives you something like "Tomorrow during the full moon" (for time), "you will meet a masked stranger" (for prediction), "because of the position of Venus" (for reason). It would then generate the full sentence: "Tomorrow during the full moon you will meet a masked stranger because of the position of Venus."

The time array would contain strings similar to the example that give different times - likewise for prediction and reason, and you should be able to pick one element from each array and get a complete sentence.

NOTE: You do NOT have to make a fortune teller, but you do need to have three arrays that hold strings that can be combined to make any random sentence. If you were feeling crafty, maybe make a homework generator, or get creative with the other random things you could generate!

Requirements

Your project should:

  • Generate a sentence by sequentially combining random elements from three different arrays when run

  • Include a button that can be clicked or key that can be pressed to generate a new sentence

  • Be designed/styled in a creative way (not just text on a plain background)

  • Utilize any and all skills from prior units that you see fit to use!

Writing Prompt

Sample Output

Culturally Responsive Best Practices

Once again, allow lots of room for student choice within this project. Not all students may resonate with the idea of 'fortunes,' but there are many ways to generate random sentences without creating a fortune. Brainstorm other options that might appeal to kids, and give them the freedom to create their own options as long as they meet the criteria of the project.

(Please recall that communities can refer to a lot of things, including just the culture of being a teen, a Minecraft player, or a KPop fan - be mindful that you are allowing students to explore choice in their creations in a way that is authentic to them!)

Extensions

For students who are ready for the next level, consider asking them to create a MadLib. This should be a story that will fill random verbs/nouns/adjectives from arrays that they create to change the meaning of the story.

NB: If the fortune teller seems like it would just be too easy for your class, generally, you can always have them start with the mad lib option.

As many teachers over the age of 27 may be surprised to know, not all students know what mad libs are anymore. Students can to get ready for the extension!

🗃️
.concat() string method
planning page
start exploring here
Fortune Teller Exemplar