Final Project: Chinese Dragon Drawing Tool

Link to p5 Editor:

For my last project of this class, I designed a drawing tool for artists, designers, and other people that would like to include Chinese dragons in their work (but find drawing the details too time-consuming).


After looking up pictures on the Internet and talking with friends from both Chinese culture and Western culture, I concluded 4 primary distinguishing features of a Chinese dragon from Western dragons are (1) it is long like a snake (2) its body is like a fish’s body covered with flakes and no clear back and belly (3) it has back fins instead of wings (4) its color is very saturated.


This part consisted of many trials and adjustments. To summarise, I started with using randomization and for-loops to draw a series of ellipses that look like the flakes, then introduced mouse positions to the positioning of the ellipses so I can draw them with my mouse. Then I added triangles to my stroke to create the fins. I also created the claws with a few rotated quads and triangles. The sizes of all elements were proportional from the beginning.

After the basic structure was done, I continued with my project by adding more color choices to give some flexibility to the tool. With the help of Miki, fellow Dave, Com Lab assistant Sam, I also added a dat.GUI controller to enhance user experience. Below are some color choices and examples of how you might use the tool:

Recreating Poster with Randomization

For this week’s assignment, I’d like to recreate an artwork called Schotter by Georg Nees (shown below). It’s a flood of rectangles gradually scattering towards the bottom of the canvas, and it attracted my eye with its inclusion of both orders and chaos.

One fun fact was I didn’t really do any research into this artwork until I’m almost done, then I realized this was a generative art piece done by code and there are already tutorials shared online… However, my code is much more concise, and with only a for-loop and Easy Grid, I believe it looks just as good as any other tutorial code I found.

To add some personal touch to it, I also gave these rectangles colors:

Here is a link to my p5 Web Editor: (with color)

Midterm: Logo Design for Fitness World

For this midterm assignment, I designed a dynamic logo for a fitness center called Fitness World. These are their current logo and website tab icon, and as we can there’s only text and they don’t have any distinguishable characteristics except for the colors.


Therefore, I carried out the color scheme and recreated a logo for Fitness World. The new logo I designed consists of the initial letters “F” and “M” that make up 3/4 of a rotated square.

P5 Link:

Here’s an example of the possibility to use this logo to brand their website and pictures:

I also came up with three variations of this logo for the occasions when Fitness World holds health and fitness lectures in collaboration with local high school. Here are three topic examples and their respective logo variations. The logos can be used in their lecture printouts and give-away notebooks.

Nutrition: After the central stroke was shortened, the logo now looks like a weighing device with a pointer. It is like a food scale that reminds you quantity matters, and it also points out the importance of a balanced, nutritious diet for one’s health and fitness.

On P5 editor the pointer rotates around:

Real-life scenario using the logo:

Cardio: Apart from speeding up your fat lossing process, cardio exercises increase the strength of your heart and lungs and improve your endurance during workouts. This new logo represents one of the most common cardio exercises step climbing.

On P5 there’s an additional wheeling effect:

Real-life scenario using the logo:

Muscle building: Muscles improve health, aesthetics, and sports performance. Muscle building doesn’t have to take place in a gym, but many equipments in a fitness center can increase efficiency and safety. This logo resembles a curl barbell when being still.

On P5 Editor it moves with the cursor, and the two blocks and black lines now resemble cables being pulled:

Real-life scenario using the logo:


Logo Design for Fitness World

For the midterm, I’d like to design a dynamic logo for a Danish fitness center, Fitness World, for their marketing activities/educational programs in collaboration with local high schools. The variations will be used for the unique theme of each event, such as nutrition, cardio exercises, and muscle building. The logo can be printed in their posters, handouts, branded gifts, and so on.

This fitness center uses black and my favorite shade of green for branding, which I will maintain throughout my logo design, but I will get rid of the abbreviation “FW” and probably work on one single letter “F” representing the fitness purpose.



Typography Design

I was inspired by the class example of letters consist of only two arcs (with fill). I believe the alphabet can be made of arcs (no fill) and lines, therefore I developed the following rules for my typography design: All letters will be based on a reference, which is a circle with two lines across within it and four points that mark the quarter arc in-between the intersections of the lines and the circle. The letters will consist of a number of halfway-cut lines and arcs starting from and ends at marker points or the line-circle intersections. Below is a draft of the first few letters created by my rules. After some trails, I discovered that I could create most letters except K, Q, V, X, and Y, who consist of diagonal lines.

What words will I spell with my newly created font? “Hello world” is very intuitive. In order to keep a consistency, I used Easygrid to create a circular grid in my canvas and place my letters onto them. Then I used simple line() and arc() functions to draw out my letters. I also set up many “var”s and made everything a proportioned to the canvas width and length so in the future, I can manipulate the size of my sentence more easily. This is the first version:

I noticed the letter “R” isn’t as intelligible as I expected it to be. This led me to try to create a lowercase version (note that the button right section instead of bottom left is selected for lowercase “o” to distinguish it from potential lowercase”a”) :

This version surprisingly turned out well and to be frank I liked it better than the first version because the spacing is less suffocating and all of them are closer to regular English letters. Except for the “e”.

As a result, I combined both the capitalized letters and the lowercase ones. The top line would be uppercase and button line lowercase. I also tweaked the stroke length and margin sizes, and color some parts of some letters to give it a cartoonish vibe.

Here is my final product with reference lines, just to show that it’s still consistent with the rules I made in the first place.

This is the link to my p5 editor:

Recreating Brockmann’s Poster with EasyGrid

I found it a lot easier and clearer to recreate Müller-Brockmann’s poster with the grid system. Here is the link to web editor:

And here is what I made with EasyGrid and my previous work with ratios and manual calculations.

I continue to increase the number of rows to locate the text more accurately, but after manipulating the top block I realised a grid system might not be the most optimal choice here because it’s still manual and even more work:


Recreating Müller-Brockmann’s Poster

It wasn’t difficult to recreate the color scheme and rectangles using a for-loop. Then I set up the margins and the ratios of text boxes to canvas size.

I then also gave the background colors some variety and had them linked to the block sizes as well.

To have a little more fun, I also made the number of background color blocks/stripes a variable. I kept the number of text boxes 6 and their linkage to the canvas because messy text boxes all over the poster wouldn’t look good.

Here is a link to my p5 web editor:


The Martian Poster

It’s been long since I watched the movie, so I had to go on Google Image to search for inspiration. Then I saw this picture below and remembered how much The Martian reminded me of Robinson Crusoe because of the protagonist’s joy of survival from the first greens he grew by himself.

Therefore, I decided to recreate this scene and incorporate the color green. I started off creating a red to yellow gradient as the base, then drew a sprout with triangles and a line. To give a clearer sense of space I also wanted a sky in the picture. Because I don’t know how to paint gradient color in a shape, instead of drawing the planet Mars on my canvas, I drew a shape on the gradient to “fake the background”. This is my first draft:

To enrich the picture, I used a for loop to multiply the sprouts and added random effect so the sprouts are not identical. I also limited the green of these leaves to three lightness levels and had their color and size tied to their height, so that the higher the leaf is, the bigger it would be and the lighter it’s green will be. I also added a warehouse behind the field just to give the picture another layer. In addition, the size of almost everything is tied to the width and height of the canvas so now I could freely change the size of the canvas without worrying the picture becomes disproportionate.

Then I tweaked some other details to make things more coherent complementary. The sky and the warehouse share the same hue but different saturation and lightness. The earth and the sky have the same lightness. The color of the ring of Mars will be the yellow on the top of my red to yellow gradient. I also lowered the lightness of everything else but the sprouts and increased their lightness to create a clearer contrast.

Here are a link to p5 Web Editor and three screenshots of my final product:

Sharp + Wet

The first thing that came to my mind when I learned about this week’s homework assignment was a cave with pointed stalactites dripping water down. Therefore, I divided my canvas into half so the upper part could present the sharp triangle-shaped stalactite and the lower part would be the wet surface that receives the water drops.

I think for loop and bezierVertex() would be a great tool combined to create ripples that portray the “wet” water, so I started with trying to make the original loop. bezierVertex() is more helpful than ellipse() here because you can work on the perspective and create more realistic ripples. After I finished the first loop, I did some calculation and experiments and used a for loop to multiply and magnify the ripples. Forgot to mention: I used a translate function to move the center point of my drawing into the center of my canvas so I didn’t have to think too much about each point’s coordinate.

Then I moved on to the upper part of my canvas. I used a simple rectangle to cut the canvas in half to create some structure, a simple triangle, and added two ellipses as water drops to make the image more lively. This is what I got:


I liked it because it’s symmetric and futuristic to some extent, and I didn’t like it because it’s symmetric and futuristic. If it looked a bit like an explosion in the space to me the artist, I can imagine how not likely other people could see the words “sharp” and “wet” from this. Therefore, after some thoughts, I switched the whole image to the right a little and added two more triangles to create some dynamics to the upper half of the canvas. This is my final product:

While I’m happy with what I have, I think there’s one thing I could’ve done better. Most of the values in this programming design project were randomly given by me. I basically drew this picture with some codes. This means this image is very fixed, and I would need to update almost every line if I want to change the canvas size. I believe I will need practice in being more mathematical and being more conscious about the ratios instead of the actual sizes of shapes when designing.

Here is the link to p5 Web Editor: