What is this

My personal logo design. I wanted to reflect my world of view and design believe in this visual piece. Different textures and attached noises reflect the fact that the world is way much more complicated than we could ever imagine and changing all the time. As you can tell that I am showing my respect to the classic Tai Chi icon and the fascinating Taoism that I always believe in. 


The initial idea was using two triangles and overlapping them to compose "M" and "R" which are the initial letter in my name (Mo Ran, family name goes first in China). 

Graphic Design

I decided to visualize it in CorelDraw to see if this looks neat or not. I tried add more elements into it. Like color. However, to be honest, initially I was not expecting it looks better in color. I like black and white. I keep writing Chinese calligraphy since I was a child. That is a black and white world but with huge diversification of different degrees and textures of grey (You can check my Drawing on Everything work here).  


I drawn four triangles as the plates as the sketch shows, than I created a bunch of diminishing triangles in each triangle to generate the pattern. However, the effect looked bored. I wanted to add some dynamics into the graphic and it felt totally different. 

Moreover, as you can see, I tried different patterns and textures to fill these triangles which worked pretty good too. By following the thinking of "make the image more dynamic", I was thinking it would be cool if I made this in Processing. 


Before jumping into Processing part, I would like to talk about another inspiration to my project-- works from Ken Perlin. I was shocked when he was showing his concept and projects about adding noise into computer graphics to make it looks more natural, vivid and intriguing in our Application class. As a result, I decided to do the same thing to make my logo as a kinetic one. 

The biggest problem I met during programming actually was math... instead of drawing pattern in design software, I have to figure out how to generate this diminishing values. Basically what I did in processing sketch is drawing a bunch of "PVector". I was calculating each triangle's vertexes' distance to the center of that triangle (by using this formula) and drawing PVector from those three points. You can visit my Github repository page to get better knowing of my sketch here

As I mentioned above that I made another version with spiral pattern too. Now the problem switch from "math" to "mask". Since I have to limit the spiral pattern only show up in the range of the triangle shape. However, I found that it does not working well... and I ended up with going back to math again... Here comes another math formula: Barycentric Coordinate, which is an efficient way to see if a point is in a specific triangle or not. 

Actually, I prefer the spiral version to the triangle one. The reason I ended up with using triangle version is because, I think, too many PVector tremendously drags the frame rate down (as you can see in the video). 


Many people like it, so I decided to use it on my website. As a result, I turn it into a p5.js sketch and put it on the home page (I bet you have already seen it.)