Exercise 5: Visual Poetry

Description: Randomly spaced hash symbols slowly move across the canvas from left to right. Placed front and center is a white box and the text #hashtag.

Tips for user: If the hash pattern makes it all the way across the screen and disappears, refresh the page to bring it back.

Finished code: http://alpha.editor.p5js.org/full/BkDRAx16-

I started this project with a sketch of my intended end result. I got the idea of using hashtags because I always think it’s funny when people tag their photos #hashtag on Instagram. It’s redundant and silly and serves no specific purpose.

The first program I wrote did not use arrays or objects. I first wanted to work out very simply how to display a randomly placed hash pattern and a text box. There are no moving parts in this version.

Code: http://alpha.editor.p5js.org/full/ByxKoo0hZ

Then I started experimenting with the layout and came up with this next version. The background is very energetic because I put the Hashtag function inside the draw function, so it is drawn over and over again. The semi-transparent background gives a cool effect of being able to see images from previous frames.

Code: https://alpha.editor.p5js.org/full/rkdVfARn-

I still didn’t know how to incorporate arrays and objects into my code. This example called Array of Objects from p5js and page 167 in the textbook both really helped me out. After studying these examples, I was able to start planning my code with the inclusion of arrays and objects.

I decided to establish two empty arrays to hold all the x-coordinates and y-coordinates of each hashtag in the pattern. In the setup function, I used a for loop to fill these arrays with random values. In my notes I wrote for(var i=0; i<300; i++) meaning that the arrays would be filled with 300 values each, but in my actual code I increased the number to 500.