Challenges with Objects and Arrays

Challenge: Make it rain... objects!

Make a spin-off of your "Make it rain" project, and change it to use 1 array of objects instead of many arrays. So instead of xPositions, yPositions, speeds, etc arrays you'll simply have 1 raindrops array, and each raindrop will have:
  • An x property
  • A y property
  • ...
More ideas:
  • Try adding more properties to each object:
    • A speed property
    • A size property to each object and randomise it at the start.
    • A color property to each object - you can make a random colour like this: color(random(255), random(255), random(255))
  • Try using squares or rectangles instead of ellipses
  • Try using images instead of ellipses

Challenge: Fishtank v2 - using objects

In the spin-off, change your code so that each fish is represented by an object. Fish objects might have these properties:
  • x
  • y
  • speed
  • colour
  • size
Add bubbles (if you have not already). Make these bubbles objects, too, with these properties:
  • x
  • y
  • size
  • speed (if you want some to move at different speeds)
Add a sea-bed with pebbles which could be objects too. What properties do you think the pebble objects should have?
Add some seaweed.
  • Try to use the random() function for the x position, but with a fixed y position
  • Try to make the height random
  • Try a random color variation

Advanced challenge 1

Make each bubble clickable - when you click it it changes in colour. To track which bubbles have been clicked, you should add a clicked property to each bubble object.
Use the function dist(x1, x2, x2, y2) to find the distance between two points.

Advanced challenge 2

Try to make the fish swim the other way.

Challenge: many snowmen, with objects!

Go back to the "Simple snowman" challenge and make a spin-off.
You don't need to animate this one, so you don't need a draw() function.
  • Change the code so that you draw 100 snowmen in random places
  • Use an object to keep track of the position of each snowman
  • Optional: try to have each snowman be a different size
  • Optional (very advanced): can you have each snowman choose from 3 different faces? One way to do this would be to have three functions: drawFace1(x, y, size), drawFace2(x, y, size), drawFace3(x, y, size) and somehow choose between them for each snowman/snow-woman
  • Optional: it would be nice to give the snow-people a colourful hat and scarf

Challenge: shooting stars, with objects

Go back to the "Shooting stars" project and make a spin-off.
  • Change your code so that shooting stars are represented by objects. Each star would have an x and y property, and a xSpeed and ySpeed property. (To move the star increment x by xSpeed, and y by ySpeed)
  • If you didn't already, add some buildings for a skyline
    • Each building should be an object with x, y, and height
    • You don't need to draw the windows if you haven't already done that

p5.js Challenge - font outline

Only attempt this challenge if you've already learned about p5.js and OpenProcessing.
  • In this challenge you'll draw circles (or other shapes) at points around the outline of some text to display it in a novel way. (An array of points from the text outline will be provided.)
  • Read the code comments for details of the challenge.

p5.js Challenge 2 - Random Words poster

Only attempt this challenge if you've already learned about p5.js and OpenProcessing.
This is a tutorial but it is made up of many small challenges and there is plenty of room for creativity. In it you will make a "poster" of random words in random colours at random positions, in one or more custom fonts of your choice (advanced: rotated to random angles).
Last modified 2yr ago
Export as PDF
Copy link
Outline
Challenge: Make it rain... objects!
Challenge: Fishtank v2 - using objects
Advanced challenge 1
Advanced challenge 2
Challenge: many snowmen, with objects!
Challenge: shooting stars, with objects
p5.js Challenge - font outline
p5.js Challenge 2 - Random Words poster