Simulating Mathematical Functions

Mathematical (trigonometric) functions such as sine, cosine, tangent, and their derivatives are commonly used in the world of programming. The art of programming is merely applying mathematical concepts to accomplish a goal – procedural generation is no different. In fact, one is more likely to come across these functions when reviewing concepts for procedural systems, especially more advanced ones such as L-systems. This post covers the sine function and how it can be represented via graphical means. To start, it’s important to note what the sine function does.

According to Wikipedia, the sine function:

is a trigonometric function of an angle. More generally, the definition of sine (and other trigonometric functions) can be extended to any real value in terms of the length of a certain line segment in a unit circle.

This might seem like a lengthy or dry explanation, but as long as you think of sine as a wave on a graph that oscillates between -1 and 1 indefinitely, you’ll be able to understand the content of this post. That’s the behavior that we are looking to model. Again, we will be using P5.js to accomplish this.

Here is the code below:

var diameter; 
var angle = 0;

function setup() {
  createCanvas(710, 400);
  diameter = height - 10; // height is 400 as per our call to createCanvas() above
  noStroke();
  fill(255, 204, 0);
}

function draw() {
  background(0);

  var d1 = 10 + (sin(angle) * diameter/2) + diameter/2;
  var d2 = 10 + (sin(angle + PI/2) * diameter/2) + diameter/2;
  var d3 = 10 + (sin(angle + PI) * diameter/2) + diameter/2;
  
  ellipse(0, height/2, d1, d1);
  ellipse(width/2, height/2, d2, d2);
  ellipse(width, height/2, d3, d3);
  
  angle += 0.02;
}

Without getting too technical or math intensive, let’s begin a brief overview of this code.

First we initialize two global variables that will be the base of our logic for the entire program. Then we call our setup()function to create a canvas of 710 pixels wide by 400 pixels tall and declare the color to draw with as a deep yellow. Because P5js calls draw()repeatedly, we don’t need to base any of our logic in a loop, it’s already going to act as though we have a loop. Regardless, we simply say that our background should be black and then we create three variables with a calculated diameter, aptly named d1, d2, and d3. We then use these to draw three circles that will use those diameters in the middle and edges of the of canvas. Finally, we increment our angle variable by a small amount and that will actually produce the oscillating wave effect/behavior that we desire. We increment the angle variable because this is the base of our sine function. The angle that we use will determine the real number that we receive from our sine function call. Because the sine wave only includes all real number values between -1 and 1, we can be sure that whatever our angle is, there is a mapping from the sine function to a usable value. You can read more on this concept here as going too much more in depth with it is beyond the scope of this post.

The original code with a working example can be found here.