Here is the final product!


The user must click around the screen to find the RMIT pixel logo. It will only appear when the user clicks on a specific area of the screen. The point is that while they are looking for the logo, the words Creative Coding Specialisation will be revealed.

Process

Following my initial experiments with the falling text on mouse click, I came up with a concept for the project assignment: a scavenger hunt!

I came up with the idea as I was playing around with this function, thinking about how I could turn it into a simple game. I did some more exploring with this function, using if else statements to create boundaries on the x-axis for the words “Creative Coding Specialisation”. Each word would fall in a limited section of the screen so that the words could be read in order. An array is used for the coordinates (xpos, ypos) where each word would “drop”.


In addition to this, I browsed through the RMIT Brand Guidelines document and found that the uni logo would be the perfect piece of treasure to find. With this in mind, I then went about trying to find out how to create custom shapes in p5. Although it would be easier to use the image as an asset, I wanted to explore how I could create a custom shape in p5.

I first explored custom shapes (learning from The Coding Train’s tutorial) by using beginShape ():


Then, I found this great reference by sgrigg, who used an array to combine shapes together. I figured that the RMIT logo was just three shapes put together: a semi-circle, a rectangle, and a smaller rectangle; so I created those shapes using the individual shape functions and positioned them together.

I ended up creating this:

Now, all I had to do was combine this concept with the dropping words, and I would have my mini scavenger hunt! To add something interesting in the background, I used the same bouncing shape in Thomas’s original header, but adjusted some of the function properties and used a nice, big ellipse instead. In doing so, I was able to explore using pi to create a kind of stylised sine wave graph. And that’s it!

Back to home