Dairo: Avatar using p5js

Dairo is an avatar I designed using p5js. I knew I wanted to play with colors for my sketch, giving it a more interactive element. I decided to use these colors as a part of my background, giving Dairo a context in the environment she is seen in for the viewer.  I sketched out a rough doodle of how I would have liked her to look, although through my journey of coding on p5js web editor I realized that there was a lot more that I could add and edit to my initial design.

I decided to begin with shapes and lay them out as per the originally planned form. While coding them, I was simultaneously watching The Coding Train’s p5js web editor tutorials. These videos gave me insight on how to better put the shapes together and add movement to my entire sketch. I coded ellipses in the background to not only coordinate with Dairo’s attire but to also make it an interactive experience for the user. 

The challenges I faced while coding Dairo were:

• Not realizing that the function mouseX and mouseY would not be applicable unless the function noLoop() is removed from the previous lines of coding. 

• Failing to add curvy eye-brows to Dairo. On trying out the arc() function, I deformed the angle of the arc around the eye, hence took it off.

• Not having the background colors clash with the avatar since they all were similar. 

To view Dairo in her world, click here.