Assignment 1: Algo Pattern of Traffic Design Language

The design language of traffic signs tends to be universal around the world:  bold line patterns with high contrast colors, simple and readable symbols. However, the iterations could be generative following these principles. 

Enlarge

Enlarge

There all consist of Simple geometric shapes: Circles, Rectangles, Squares, and Octagons. Also, to maximize the attention of people, it all uses bright and printable colors. Hence, Trying my best to mimic the color set, I defined an array of colors in GLSL code. From 0 to 4 the colors are yellow, orange, green, red, blue. 

vec3 colorArray[5] = vec3[5](vec3(.96,.7,0.),
                             vec3(.98,.56,.19),
                             vec3(.01, .45, .36),
                             vec3(.8,.1,0.),
                             vec3(.1,.3,.8));

After that, I applied these colors to a Signed Distance Function of polygons.

Enlarge

Also, with circles.

Enlarge

Since I defined an array of colors, I can make a continuous morphing movement from one color to another. (also with the background color by switching +1 to -1 when stacking two color vectors together).  

Enlarge

Also, since SDFs are functions with values between 0~1, they can be input into the mix() function, create a morph between two SDFs in each pipeline. It would take a weighted average between two distance values. Thus, it would create a smooth transition between any given distance function shapes.

Enlarge

Also, when we multiple the shapes by the grid, we get unexpected results when different parameters are set differently. And they fit well with the sin() function.