Link

https://editor.p5js.org/zz4651/sketches/Tq0DsCkWE

Idea

This idea is about a family trip when I was 12. We visited Paris and saw this artwork in Art Center of Pompidou.  I really like this portrait that is because the artist Klee deconstruct the human body with short legs and a big head. So that is interesting for me and I've used this picture as my social media profile picture during junior high school.

Code Breakdown

1. Canvas Setup:

   • The setup function initializes the canvas with a width of 800 pixels and a height of 1200 pixels, providing me a canvas for the drawing.

2. Drawing Process:

   • The draw function sets the background colour to a shade of green and then proceeds to create various visual elements.

3. Shapes and Gradients:

   • Rounded Rectangle: A filled rounded rectangle is drawn at coordinates (150,100) with a width of 450 pixels, a height of 800 pixels, and rounded corners with a radius of 160 pixels.

   • Gradient Rounded Rectangle: A custom function, drawGradientRoundedRect, is used to draw a rounded rectangle with a gradient fill. This gradient transitions from one color to another, achieved by drawing multiple horizontal lines with gradually changing colors.

4. Contour and Details:

   • The contour of the initial rounded rectangle is outlined with a stroke, and additional line are drawn to create structure:

     • Upper and Lower Horizontal Lines: Define the top and bottom boundaries of the drawing area.

     • Vertical Lines for Eyes: Define positions for the eyes.

5. Eyes:

   • Left Eye: Comprises a vertical lines, a curved line for the eye shape, and two ellipses for the eye socket and eyeball.

   • Right Eye: Similarly detailed with a vertical line, a curved line, and ellipses for the eye socket and eyeball, but positioned differently from the left eye.

6. Legs and Shoes:

   •  Deciding the startpoint (x1,y1) and the endpoint (x2,y2) of leg from the code "drawLeg(x1,y1,x2,y2)"

   •  Drawing each foot using math from end point of the leg

beginShape();

vertex(x2 - 10, y2 - 5);

vertex(x2 + 10, y2 + 5);

vertex(x2 + 7, y2 + 15);

vertex(x2 + 25, y2 + 35);

vertex(x2 - 15, y2 + 15);

vertex(x2 - 10, y2 - 5);

endShape(CLOSE);

7. Arrow:

   • An arrow is drawn with a base line and a shape representing the arrowhead. The shape is created using vertices to form the arrow’s pointed end.

8. Body Curve:

   • There is a curve line in the middle lower of the body. I used the curve function to draw this line. The curve function is used to draw a Bézier curve with four control points. The code I used: curve(400, 500, 450, 750, 400, 600, 1000, 500); can be explaine like these:

• (x1, y1): starting control point (not on the visible curve, but affects the shape of the curve)

• (x2, y2): first point of the curve (the curve is visible from here)

• (x3, y3): second point of the curve (where the curve ends up visible)

• (x4, y4): end control point (not on the visible curve, but affects the shape of the curve)

Discovering

1. Gradient：

   • I've managed to implement a gradient fill effect on a rounded rectangle using a function. This effect draws a bunch of horizontal lines in a “for” loop and gradually changes the color of each line.

2. Curve：

   • I was able to draw smooth and complex curves using the curve function. It was a little tricky to control, but after a lot of trial and error I was able to draw a nice looking curve by using the code.

3. Combine Elements：

   • Using basic shapes (such as rectangles, ellipses, and lines) in combination with custom functions (such as gradient functions) makes the drawing process more flexible and varied. This approach not only improves the detail and complexity of the drawing, but also adds visual appeal.

4. JS：

   • By writing and debugging code, I improved my understanding of p5.js functions and how to use them to create complex visual effects. Learned how to apply art and design principles in programming.

Experiences and Reflections

The main challenge I had in this project was drawing using a completely new programming language. This was my first to use JavaScript, having no prior experience with them. Through browsing and learning p5.js, I learned how to use functions in JavaScript to implement gradient fills and draw curves.

During the learning process, I gradually mastered the techniques of gradient filling and curve drawing by reviewing the documentation and examples of p5.js. I found it complicated to work with Bézier curves directly in JavaScript. I couldn't quickly find the location of each line endpoint and curve curvature. Therefore, if I have similar projects in the future, I plan to first draw and adjust each control point of the Bézier curve in Adobe Illustrator and then move those points into the program. This approach will help me control the shape of the curve more precisely.

Frankly, I had trouble drawing the feet. If I use my method in my first version, I need to draw each foot one by one, which means a huge amount of work. So, in my latest version, I defined the shape of the foot pattern by creating a function which call "drawLeg". I first drew the four legs, and based on the endpoints of each leg's position as a reference, I drew the feet by performing spatial transformations on the position of each leg's endpoint. This saves me effort and also increases the efficiency of the drawing, allowing me to accomplish a lot of repetitive work using a little bit of effort.

Credit

I would like to give special thanks to Professor Godoy for introducing JavaScript as a programming language and teaching me some basic graphics. It allowed me to discover many new possibilities in programming and art creation. I am also very grateful to the teaching assistants for their help and guidance. Thank you for your patience!