MICROSOFT WORD GENERATIVE LOGO
Recreating a logo in p5.js and generating varying compositions using mouse interactivity and randomization, while maintaining visual identity.
THE DEFINING QUESTION
How can the Microsoft Word logo be coded to give random compositions, but maintain its visual identity?
Microsoft Word LOGO ELEMENTS
SKETCHES
BUILDING THE LOGO
When building the logo in p5.js, many things had to be taken into account. If I wanted to manipulate the logo in multiple canvas sizes, variables had to be the main source of plotting the points instead of actual numbers.
MANIPULATING SIZE
Focusing on how I can manipulate size while maintaining the identity, I coded the logo to be responsive based on mouse position. When hovering over it, it increased, and the farther, the smaller it became. Keeping the W the same size helped further maintain identity.
MANIPULATING POSITION
Manipulating the location of the rectangles in the back gave me another opportunity to change the composition of the logo. Although there were some crazy changes, there were still multiple pieces going untouched that helped maintain a recognizable identity.
REAL WORLD APPLICATION
Generative logos are so applicable because they can evoke multiple feelings from the audience, both familiar and evolving. If the audience recognizes a logo is changing but can still associate it with a brand, the design has achieved its ultimate goal.
Mockup at top by Freepik