Portofolio Header

Case study #p5.js

Design Statment

My Interactive Media Motion class was tasked to create an interactive header that tells our individual stories for our portfolios. Through self-reflections, -a lot of- personality tests and creative code, I began to gain a better understanding of myself and the image I want to be perceived as friendly, reliable, and adaptable. The results were a p5.js interactive header that speaks to my current self.


Growing up by the beach, water has always been a part of me. Water as an element communicates adaptability and reliably, it can fit any shape and is known to keep secrets. The motion of water adds to the friendliness with it being playful and momentary, as soon as you hover outside of the sketch area it freezes and lets you go on. A minimalistic approach was favoured to keeping the focus on the content while saying hey I am approachable. Then there is the settle gradient from calming Teal to graceful Lavender, with grace being part of my name. Finally, the overlapping of the water blob with the text breaks some tension into the overall calmness feel of the design.

The canvas is set within an HTML div for precise control over its location on the page. The waterBlob is created as a function for making it easier to add more to the sketch. The hue value is mapped to the mouse Y creating a gradient color change as the viewer moves down adding some playfulness. The range is limited from 140 to 200 for minimalism and grace.
The water blob shape draws a circle from noise points, creating organic water like shape. A phase variable is added to the noise increment Xoff and Yoff to create movement.
The phase variable value increases each loop only while the mouse is within the sketch area. Allowing the viewer to focus on the case studies once they scroll past it.
wm (position X), SizeX, and SizeY variables are tied to the screen width allowing the water blob to resize and relocate in relationship to the device or screen size, creating a responsive experience that works on all screens from desktops to mobile phones.

This project wouldn’t have been possible without these resources and inspirations:
Francois Portfolio. Interactive portfolio with fluid sketches http://www.francoisrisoud.com/
Waves codepen by Rico Sta. Cruz. https://codepen.io/rstacruz/pen/oxJqNv
Polar Perlin Noise Loops coding challenge by Daniel Shiffman https://thecodingtrain.com/CodingChallenges/136.1-polar-perlin-noise-loops.html
Mark’s series of approaches for P5.js interactive headers.