sine in action - part 5

Making adjustments

When we first plotted our sine function we added ½ the screen height to the value of the function. This is because the sine function oscillates above and below zero, and to plot the entire function on screen we need to adjust the values so that it is centred.

Instead of merely adding a constant to the sin function, we could make more complex adjustments to vary the result.

This is the reason we have chosen to factor out the sine function as plotSineWave() and the adjustment() function as separate functions making it easier to change or entirely swap one or the other. In the final version of the program we have bundled several different adjustment functions into one, and the function to use can be set in the initial options. This is similar to the way we set up the choice of colours. It is designed to make it simple to change the program, as we merely have to set one variable instead of rewriting an entire section of our code.

There are three options for the choice of adjustment to make. The choice is set by the variable adjustmentChoice. If a valid adjustment choice isn’t made then the adjustment function returns 0, and the sine function is plotted without any modification.

The first choice is the one we have already discussed, that of a constant added to our sine function. The second choice of adjustment is based on a linear function. As we saw in section 24 the general form of a linear function is:

g(x) = intersect + gradient * x

In the function the variable intersect is where the line intersects the y axis and the gradient is the gradient of the line.

Our second adjustment function is based on this form of equation; however our gradient is varied based on the frame count.

The variable count takes the values 1 and -1. Each time the modulus of the frameCount reaches our variable range, count is set to the opposite value. This is done with the following code in the draw() method.

if ( frameCount % range == 0){
count = -count;
}

The variable count is tested in our adjustment function to determine whether we should be increasing or decreasing the gradient. In either case the gradient is varied from the minimum and the maximum each time. In our example the minimum is 0 and the maximum is 1, since we have set range to be equal to the image height. If range was set larger or smaller then the extreme values of the gradient would also be changed.

With the colour type set to greyscale this adjustment function creates an image similar to that in Figure 8.

Figure 8 greyscale sine function with linear adjustment function

Our third choice is somewhat more complex and the end result looks less like our simple sine function. Option three combines a linear function of the form g(x) above with a sine function. The linear function has a variable gradient although this time the variance in the gradient is based on a sine function with a period equal to the width of our image. This means that the gradient varies smoothly between plus and minus the amplitude of this sine function (In our example we have set this to be 0.25).

This time we have based the value of the intersect variable on our variable count. If count is positive then we increase the intersect until it reaches the value of our variable range. At this point count will become negative, and we decrease the intersect until it reaches the minimum (in our example this is zero, but if range is greater than the height of the image then this could be below zero). In this way the entire sine wave is moved up and down the screen.

The final part of this function includes slightly more variation, by adding another sine wave to the result. This sine wave has a low amplitude and fairly high frequency so it contributes a fairly subtle variance to the overall function and causes it to move in a more interesting manner.

The impact of making these adjustments can be seen when they are added to a constant value. This is shown in Figure 9.

Figure 9 adjustment function three plotted with a constant

Final Program

Putting all of these functions together gives us our final program included below. The result of which can be seen in Figure 10
Figure 10 coloured sine function with adjustment function three

code for the final program can be found in the earlier post below.

Sine in action - part 4

The getColourValue() function

In our main program instead of setting the point (x,f(x)) to a particular colour, we are choosing to set every other point (x,y) based on the proximity of y to f(x); where f(x) is defined as above.

In order to set the colour of pixel y based on its proximity to f(x) we need a function based on y and f(x) to calculate this. We have chosen to do this by creating another function getColourValue() that calculates how the range of colours should be distributed around f(x) and returns a value that represents the position of y within this colour range.

We pass y as the argument value, and f(x) as the argument maxValue to getColourValue(). The function then returns a value between 0 and 255 depending on how close the argument value is to the argument maxValue. The function scaleValue() we discussed above is used to scale the return values appropriately so that they are in this range.

At value = maxValue the function returns 255. As value moves further from maxValue then the return value is decreased. The rate of the decrease is set so that at least one of value = 0 or value = height will return 0; which of these returns 0 is dictated by which is furthest from maxValue. So that if maxValue is centred the decrease will be even on both sides. If maxValue is offset, either above or below the centre then only one side will reach zero, and the minimum colour. The other side will decrease at the same rate but won’t reach the minimum. This is shown in Figure 5.


Figure 5 Centred and offset colour distribution graphs

For

float h = img.height;

then the line

minValue = min(0, 2* maxValue - h);

is used to determine whether the minimum will be reached at 0 or at h.

If maxValue is above the centre of the screen then 0 will be the minimum point, minValue. The colours will be plotted with red at maxValue and blue at 0, with the colours changing at the same rate from maxValue to h so that the minimum colour isn’t reached before h.

If maxValue is below the centre of the screen, then the minimum point, minValue, will be below 0 at 2* maxValue – h. This means that if we continued to plot colours below 0 then the minimum colour blue would be reached at minValue. Our choice of minimum here ensures that as we approach h then getColorVal() approaches zero and we plot the full range of colours from red at maxValue and through to blue at h.

The variable float rangeColor is defined as
rangeColor = max(maxValue, h - maxValue);

This is the distance that colours will range over, it is the maximum of the distance from zero to maxValue (or f(x)) and the distance from h to maxValue (or f(x)). In common with to finding the minimum, if maxValue is above the centre of the screen then rangeColor = maxValue, otherwise rangeColor = h- maxValue, this is illustrated in Figure 6.

Figure 6 Plotting the colour range

The variable rangeColor is used to scale the return value so that it returns values from 0 to 255 over the distance rangeColor. This is done using the scaleValue() function we described earlier with the minimum as 0 and the maximum as rangeColor.

temp = scaleValue(temp, 0, rangeColor);

When combined with the function getColor(), the output of getColorValue() can be plotted as shown Figure 7 with f(x) as a constant.

Figure 7 Colour distribution plotted around a constant

Sine in action - part 3

Drawing with pixels

In section 21 we saw that individual pixels could be referred to by using their position in Cartesian coordinates. This technique can be used to set the colour of individual pixels in an image; which is how we colour points in relation to our sine function in our final program.

The steps needed are:

1. Create a PImage object img.
   
PImage img = createImage(300,200,RGB);


2. Set the colour of one or more pixels. The pixel at the point (x,y)of the image object can be set using the line:
   img.set(x,y,aColor);
   
3. Display the image after all points have been set using the line:
   image(img,0,0,width,height);

For example we use this method to plot a sine function by setting the pixel at point (x, f(x)) to be a particular colour; where f(x) is our sine function.

As we saw earlier the basic form of the sine function is

f(θ) = amplitude * sin( frequency * θ)

We have chosen to scale f(θ) so that it is calculated between 0 and 2 π over the width of the image, such that θ at x is defined as follows.

θ = ( 2 π /img.width ) * x

This gives us

f(x) = amplitude * sin( frequency * ( 2 π /img.width ) * x )

We can draw this function by colouring the pixels at white, as follows

size(600, 300);
//create the image
PImage img;
img = createImage(600,300,RGB);

//set variables for sine function
int y = 0;
float theta = 0;
float dTheta = TWO_PI / img.width;
float amplitude = img.height/2 ;
float damping = 0.994;
float position = img.height/2;
float frequency = 99;

//set colour of points
for (int x=0; x <= img.width; x++){
y = round(position + amplitude*sin(frequency*theta));
color c = color(255);
img.set(x,y,c);
theta += dTheta;
amplitude *= damping;
}
// display the results
image(img,0,0,width,height);

Figure 4 sine function plotted with pixels

In this example we have chosen a high frequency of 99. It is this choice of frequency that gives us the rather intricate distribution we can see in Figure 4. Although in this image it appears we are plotting four different strands, in fact there is only one and the distance between the plotted points at out chosen frequency gives us this effect.

Sine in action - Part 2

Colouring and the getColor() function

In our main program, instead of plotting the sine function we are going to colour the surrounding pixels in relation to how close they are to the calculated sine function.
The first step towards this is to define how we might colour a point in relation to a value calculated for that point.

We will begin by defining a function getColor(int colorVal, int choice) that will allow us to plot a smooth gradient of colour. Values of the argument colorVal should be in the range 0 to 255, any values above or below this range will return the maximum or minimum colour defined by the function.

Two colouring options have been specified for this function. Which of these is used is determined by the value of the argument colorChoice - valid options for which are 1 and 2. Setting anything else will return 0, and the colour black, for all other values of the argument colorVal. In our main program colorChoice is set in the initial setup options, which can be found in the function setOptions().

Setting colorChoice to 1 gives us our simpler option - greyscale. This is easier to define since the argument colorVal is already in the range 0 to 255, we can simply set the red, green and blue values all to be equal to colorVal.

Setting colorChoice to 2 gives us our second option - a smooth colour shift from blue to red through green. To achieve this, the input range, 0 to 255, was divided into four equal sections. In each section two of the RGB values were kept constant whilst the other was increased or decreased to give a smooth transition.

For example, in the first section - colorVal between 0 and 63 - to get from blue to cyan:

• Keep the red component of the colour as 0 and the blue value constant at 255
• Then increase the amount of green proportional to the argument colorVal. We need to ensure the green value increases from 0 to 255 (approximately) based on colorVal, which ranges from 0 to 63; hence we multiply colorVal by 4.
  

Similarly in the other sections we subtract the start of the range from colorVal before multiplying by 4 to give a value between 0 and 255 that can be used to vary one of the colours red, green or blue.

//set everything to 0, will return black if colorVal outside range
int tempColor;
int redVal = 0;
int greenVal =0;
int blueVal =0;

//first section of colour scale
if ( colorVal >= 0 && colorVal <= 63){ tempColor = 4 * colorVal; redVal = 0; greenVal = tempColor; blueVal = 255; } //The other three sections are defined similarly, //they complete the shift to red return color(redVal,greenVal,blueVal);

With all four sections this gives us the colour scale in Figure 2.





Figure 2 colour scale

Next we define the function scaleValue(float val, float minVal, float maxVal) which converts the argument val to a float in the range 0 to 255 proportional to the arguments maxVal and minVal; such that val = maxVal returns 255 and val = minVal returns 0. We will use this result later in the function getColor().

To scale val we first need to ensure that the minimum value returned will be 0. This is achieved by subtracting the argument minVal - the minimum possible value that that val could take. Hence if val is greater than 0 it is reduced to 0, and conversely if val is less than 0 then it is increased to 0. This new adjusted value is adjVal.

Next we need to ensure that the maximum value returned is 255. In order to this we create a scale factor which we will multiply by adjVal to give us the required results.

We begin by adjusting the maximum value in the same way as before - subtracting the minimum value minVal. Then we divide 255 by this new adjusted maximum value adjMax to create a scale factor. This scale factor is multiplied by adjVal to produce a number in the range 0 to 255 proportional to the maximum and minimum values passed to scaleValue().

We can apply these two functions scaleValue() and getColorValue() to our original sine function to colour each point. The maximum at any given point will be red and the minimum will be blue. This is shown in Figure 3.

The additions to our original code are shown below

//set up initial variables as before

//add variables to hold color and scaled value used to set color
float colorValue;
color aColor;

//add three lines to change color of points as function is plotted
for(int x=0; x < y =" position" colorvalue =" scaleValue(y," acolor =" getColor(round(colorValue),">












Figure 3 colourful sine function with damping

Note that the minimum and maximum values change as the function is plotted, so that each peak and trough is plotted in the same colour. This is because the amplitude is passed to the scaleValue() function after each iteration so the damping is taken into account when determining the maximum and plotting each point.

Sine in action part 1

Posting the final draft is proving a little problematic, so I will be splitting it into several sections.

Chunk 54 – Sine in action

In this section we are going to develop a program that uses the sine function. Our program is designed in a modular way, with fairly self contained functions each handling different aspects of the program operation. Where functions could be reused elsewhere they are kept independent of the rest of the program by using arguments passed from other functions instead of relying on global variables.

Although this approach leads to some additional complexity, it is designed to allow code reuse and make future alterations simpler.

We will begin by discussing the individual functions that make up our program. At the end of this section we will combine these to give our main program. The full code is listed at the end; although where it clarifies explanations small excerpts have been used in the discussion.

The sine function

As we saw in section 53 the sine function is a trigonometric function which generates a periodic repeating wave.

The basic function takes the form

f(θ) = amplitude * sin( frequency * θ)

The maximum value of the sine function f(θ) is equal to the amplitude, and the minimum value is equal to minus the amplitude. The function f(θ) varies smoothly between these values during the period of the wave.

The frequency affects the number of repetitions of the wave within the period 2 π radians; such that if frequency = 1 then the wave repeats once over the period and if frequency = n then the wave repeats n times.

A damping variable can be used to decrease the amplitude over time such that the maximum and minimum values of the sine function tend towards to zero.

In the following example, the amplitude is decreased with each point plotted by multiplying the amplitude by the variable damping. The angle theta is increased from 0 to TWO_PI as x increases from 0 to width. To do this we define theta as a function of and width. We initialise theta to 0 and then with each iteration we add dTheta, where

dTheta = TWO_PI/width;

Additionally the variable frequency is set to 4 so the wave repeats four times within the period. This is shown in Figure 1.

size(600, 300);
background(0);
stroke(255);
strokeWeight(5);

float y = 0;
float theta = 0.0;
float amplitude = height/2 ;
float damping = 0.994;
float dTheta= TWO_PI/width;
float position = height/2;
float frequency = 4;
smooth();

for(int x=0; x <>
y = position + amplitude*sin(frequency*theta);
point (x, y);
amplitude *= damping;
theta += dTheta;
}













Figure 1 Sine function with damping