MDX Logo

March 2018

Language: P5js Processing

Code Design

Overview

As logo design for a course, this project starts with the initials of class title "Make Design Interact"; and chooses circle as basic element to develop the design. Since this class is a foundation course of interactive design and technology, a set of font can react to mouse motion is considered as response to the course content.

Here is a p5js sketch, the logo interacts with mouse motion; mouse click can toggle debug mode.

Documentation

After the concept as an interactive font with initials have been developed, this project then focuses on font design. And circle shapes， more specifically a set of concentric circles, has been chosen to be the staring point;

Following the same design but different parameter have been tested, like numbers of division of circle; different cutting angle.

And various "stroke weight" have also be applied and all demonstrate different characters:

During the processing of testing different "stroke weight", the idea of shifting the inner circle and make it interactive pops up. Thus mouse position has been mapped to the center point of the inner circle. And the eccentricity of two circles successfully constructs an active and dynamic feeling for the design.