This week, I finally decided which of the 17 UN goals I wanted to do for my project!
I decided to go with “life below water” as I felt that it would be fun to design a website around it as a theme. Originally, I felt as though the health and wellbeing, gender equality and clean water and sanitation were my top considered options. In the end though, I felt like I could have a lot more fun designing an ocean themed website. I also felt as though there could be more interactive implementations as well.
I knew from the beginning I wanted to incorporate a ‘wave’ element. However I wasn’t sure how to incorporate it. Thinking back to last year I remembered a project I created with p5js.
I found a wave that later inspired the wave I am making.
I wasn’t sure if p5js could be implemented in react, but I found out it can! It did require a p5 wrapper however, and a slightly downgraded version of react. It did take a lot of research and trial and error attempts but I managed to make it work!
Currently I am adjusting the colour and wave height, and number of waves on the screen. Originally I was planning on creating a multicoloured changing wave, with a randomized G and B value (within the wave’s RGB value). This technique was inspired by what I used back last year in my havers road group project. However I feel that it is not too nice on the eyes, so I think I’ll stick with a solid colour
Later on this week, I imported a fish image that swims horizontally across the screen! I made the fish travel from left to right, and it travels a bit off screen before reappearing on the left edge. This is because I want the fish to feel like it’s naturally reappearing, rather than a loop. (even though it technically is)
once the fish has travelled to the ending right position, I randomise the y axis position of the fish. This randomisation has a range from just below the dip in the wave to the near bottom of the page. This is done so the fish doesn’t accidentally ‘fly’ above the water.