Introduction to Computational Media with p5.js

Unit 3 Random Meme Generator

Prompt

Create a random meme generator! This is your opportunity to make your peers and teacher laugh so get creative and silly with this project.

Requirements:

Create a random meme generator: pick a collection of images and a collection of phrases from an array. Each time you run your sketch, it should select one random image and one random text, creating a (potential) meme. Think about...

  1. What font(s) you want to use?
  2. What is your source for your images and fonts?

Your sketch should have:

  1. A random() function
  2. At least 3 images stored in an array
  3. At least 3 phrases or strings stored in an array
  4. The text has to show up on top of the image.

Suggested steps:

  1. Gather images. Pick or create four or five images: find them online, or take your own photos. What kind of images will you include? Will they all be cats? Perhaps every image comes from the same movie? Or perhaps they are all already popular meme backgrounds? Once you have your images, put them all in your sketch folder, inside a folder called images (or any name you prefer).
  2. Write caption texts. Write down five or six captions that you think would work well with the images you chose. You will write these into your code later.
  3. Choose a few fonts. Go to Google Fonts or to the Open Font library and pick four or five favorites. Include them in your index.html file
  4. Select an image at random and draw it. Create an array variable and pick a random position in the images array. Load into another variable and display it.

Writing Prompt

  1. Why did you choose these images?
  2. Which is your favorite and why?
  3. How do memes play a role in society and with technology?

Writing Prompt

Writing Prompt

Make your meme generator interactive!

  1. Add sounds to your project
  2. When the user presses a key or clicks on the screen…
    • Play a corresponding sound
    • Phrase changes colors, position, size or font type.