In this case study, I explore the application of trigonometry in graphics programming and especially in digital painting using Processing as the platform.

Case Study

Computational Form

INTRODUCTION

Part 1
Context

When it comes to problem-solving strategies in the area of computer graphics, including computer animation, computer games, etc., a wide range of mathematical techniques have been applied either to create and position an object around the screen, or to make it move, rotate and otherwise change over time as a way of interaction. (Trigonometry for Game Programming, Raywenderlich.com; Trig for Computer Graphics, Imaginary-institute.com) Professor Turk at the School of Interactive Computing in Georgia Tech stated in his article that different areas in computer graphics require different mathematical techniques, but even for someone planning to take an introductory course in computer graphics, trigonometry would be one of the important and fundamental topics. (Mathematics for Computer Graphics, Cc.gatech.edu)

Part 2
Trigonometry for me

“When we split the word ‘trigonometry’ into its constituent parts, ‘tri’ ‘gon’ ‘metry’, we see that it is to do with the measurement of three-sided polygons, i.e., triangles.” From this dissection in Professor Vince’s book Mathematics for Computer Graphics, we can conclude that trigonometry is the study of triangles. (Vince 21) I got to know basic trigonometric theory in the middle school, and for me, trigonometry is the study of relationship and the wonder of it lies in the potential infinity and similarity insides. And I think that’s exactly the reason why trigonometry has been abundantly used in computer graphics. The potential infinity and similarity allow of objects that have been created previously being proportionally manipulated later in an effective way.

GOAL &

PROCEDURE OVERVIEW

Starting from introducing basic trigonometry functions, this case study explores the application of trigonometry in graphics programming and especially in digital painting using Processing as the platform. There are 3 stages of work following a procedural process. Serving as a foundation, stage 1 reveals characteristics of trigonometry by drawing curves and applies it to create natural-looking motion. The next stage focuses especially on cyclical motion and shows trigonometry’s potential in generating patterns based on endless repetition. And ultimately, the last stage experiments with digital painting ideas by creating a dynamic brush using trigonometry and show the modified result with an example.

PROCEDURE

Stage 1
Trigonometry curves and natural-looking motion

There are 3 trigonometric functions demonstrating the ratio relationship among the length of 3 sides in a right-angled triangle: Sine, Cosine and Tangent. Figure 1 below is a diagram showing the details.

Figure 1: 3 Trigonometric Functions. Taken from: https://processing.org/tutorials/trig/

Based on this, we can easily deduce the position of a point P lying on a unit circle in the Cartesian coordinate system, and here’s what we actually write in Processing:

float x = cos(radians(angle)) * radius

float y = sin(radians(angle)) * radius

It would be intuitive to show the relationship between Sine and Cosine by drawing a trigonometry curve as shown below in Sketch1, 2 and 3:

Sketch 1: Drawing speed set as 0.02

Sketch 2: Drawing speed set as 0.2

Sketch 3: Drawing speed set as 0.005

Here are some observations: the curves of Sine and Cosine are both based on a periodic change, while the only difference appears in the phase position; by changing the speed of drawing, namely the translation in the horizontal direction in every unit time, the curve will be compressed or stretched; if we change the drawing speed to float speed = 2 * PI * 0.01, we can get a continuous curve with complete periods.

In addition to translation, we can also apply the periodic change of Sine to the radius of a circle (Sketch 4), the angle of a rotation (Sketch 5) and a series of translation over time (Sketch 6).

Sketch 4

Sketch 5

Sketch 6

The above 3 experiments show a great potential of trigonometry in creating some really natural-looking motion. However, in order to manipulate the motion more accurately, we need to be familiar with the periodicity as well as the range of input and output.

Stage 2
Cyclical motion and repetitively generated pattern

In addition to natural-looking animation, the strict law of trigonometry also qualifies itself in drawing some physics-based animation such as pendulum animation and shaft-piston animation. (Fusion Expressions Session 03: Trigonometry | Piston, Youtube.com) And what serves as the basic model behind would be the cyclical motion. If we using Cosine and Sine to change the coordinate of an ellipse with time, we would get a circle running around a center (Sketch 7).

Sketch 7

Now, if we apply the cyclical motion to two small ellipses, namely points, and connect them with a line, we can get a beautifully “weaved” pattern (Sketch 8-10). This reminds me of the looming machines, which could be considered as one of the original precedents of the computational form idea.

Sketch 8

Sketch 9

Sketch 10_1

Sketch 10_2

Stage 3
Dynamic brush

In the last stage, I’m thinking about what if applying the trigonometry periodic movement to an array of objects, and displaying that array continuously to build a dynamic digital painting brush. Below (Sketch 11-12) are some of my experimental results.

Sketch 11

Sketch 12

The outcome of digital brushes, with which I experimented previously, show a feature of fluid. In this case, I modified some parameters of this brush a little bit more, and used it to “draw” some oil painting with bright colors in the final sketch of this case study. Results (Sketch 13-14) can be seen below.

Sketch 13

Sketch 14

CONCLUSION

By experimenting with basic trigonometry functions in Processing, this case study shows the potential of the application of trigonometry in various topics in computer graphics. The periodicity and variation tendency of Sine and Cosine allow of creating natural-looking motion and repetitive patterns. Following the idea of a procedurally developed work, this case study doesn’t really strive for a visually compelling result or a body of advanced algorithms, but try to show how a simple mathematical theory could be iteratively applied and extended based on its nature.

 

It’s a case study of trigonometry, but also a study of nature.