# Generative Design Variations M.2.1 Harmonic oscillations

I have entered the chapter M.2 Oscillation figures. It starts with an example that explains Lissajous figures. Named after Jules Antoine Lissajous. The basis of all Lissajous figures is harmonic oscillation. In the physical world, a harmonic oscillation is created when, for example, a weight suspended from a spring is pulled down and then released. If the loss of energy through friction is disregarded and the position of the weight over time is recorded, the following oscillation curves are created. The frequency tells us how many oscillations occur per time period. These oscillation systems can easily be described mathematically with a sine curve. This can be imagined as a point that moves along a circular path. If one now measures for each angle the vertical distance between the point and the horizontal axis (this segment is defined as the sine of the angle) and plots this in a coördinate system, a sine curve is created. The curve can be moved horizontally by using a point at an angle other than 0 degrees. This offset angle is commonly referred to as ‘phi’ and the shift of the curve is referred to as phase shift. The following program draws oscillation curves that better describe these relationships. Here is the original program I started with.
M_2_1_01

But first a word of joy: Hurray! This time JavaScript does work! But now JavaScript replaced the fonts I used with a sans serif font which looks terrible. Also the letter- and word spacing is wrong. JavaScript does not work with .vlw fonts. So I had to download a font which comes close to the Futura Bold and Futura Book I used in Processing. I used LeagueSpartan-Bold from https://www.theleagueofmoveabletype.com It comes close but it does have only one weight. That worked in a few sketches. But because the font metrics of LeagueSpartan-Bold are different from the font metrics of the Futura my layout gets ruined. So I have to adapt al positions to the LeagueSpartan-Bold font. Or I could leave everything like it is now. Than I can keep my original Processing code clean and I do not have to uncomment all lines where fonts are involved. And it works. But it does look pretty crappy with that font and the wrong word and letter spacing. JavaScript and fonts seem to be horror! Anyway, you find all programs here.

Ok. This example is a graphic representation which explains how oscillation works. What can I do with that. Well… make the background black? Sorry… I just start with renaming some variables to get a better understanding about what the program does. But I came at one variable which is called ‘t’. I really don’t know what ‘t’ stands for. But because frameCount is used to fill the variable I think it has something to do with time. Let’s see what happens if I change the modulo’s value. Changed it to 40 but nothing happens. What about dividing pointCount into 2? Ok! The animation runs now twice as fast. So I change that local ‘t’ variable into a variable which I call theTime. Not really sure about this. I also spend some time to find out which line of code represents which line in the graph. Added comments about those in the code itself. Another thing is that the graphic on the right runs through the right side of the display. I would like to have as much space there as appears on the left side of the circle. I think I am going to strip down the animation. I only keep the most essential things. I have no idea why there are two circles at the beginning of the timeline and at the 0 point of the circle. So I will delete those.
M_2_1_01_GDV_01

I think this graph needs a title. I just call it: ‘Harmonic oscillations with frequency x.  Would be nice when the frequency is updated (by hitting the 1 or 2 keys) the x in the title updates too.
M_2_1_01_GDV_02

Beside frequency we also have to deal with phase shift. So maybe its better to include that too and then make it a separate text with the frequency. Frequency is the number of occurrences of a repeating event per unit time. It is measured in Hertz (Hz). Maybe I should add that too. Phase shifts are typically measured in degrees where a complete cycle is 360 degrees. Ah… now I know why there where two lines over each other in the right half of the left circle. One line represents the angle and the other represents the 0-line. So I should bring that line back in the graph. I just color it red.
M_2_1_01_GDV_03

Another problem which has to be solved is the positioning of the frequency amount and Hz. When the frequency gets higher than 10 or 100 the number is going to run through the Hz characters. Used the utility function nf to display always 3 numbers for Hz. For phase shift I can use the same nf function. Eh… why is that a float by the way? I will make it an int.
M_2_1_01_GDV_04

As a last step I just put some more explanation to the graphic. Oh… there is a line missing at the right side of the timeline graphic. Used the PointCount variable for that. And I found another useful line which connects the endpoints of the moving lines in the circle and timeline with each other. I will make that yellow. There is something wrong with the degree Celsius sign. If I paste it from my text editor into the Processing pde it has a little line beneath it. But it comes out fine when rendered in the animation.
M_2_1_01_GDV_05

I am continuing with the design of the graphic. I think there should also be a line from the zero point of the timeline to the moving dot in the timeline. Don’t know if its functional.
M_2_1_01_GDV_06

Lets see if it works when I display the real degrees next to the moving dots. Ok. It seems that the AngleDegrees variable would do that job. I found that the rather strange number of 57.4 is the amount to be multiplied with AngleDegrees. I have no idea why this works. Now that both numbers are on the moving horizontal line I have one problem left. How to position the degree sign. When the degrees are smaller than 100 containing only two digits the degree sign is way too far from the number itself. I could not find any function which calculates the width of 2 and or sometimes 3 characters. So I solved that problem with the new variable numberOfCharacters. And than it is simple a matter of writing an if statement. If numberOfCharacters is smaller than 100 than position the degrees sign on that position. Otherwise position the degree sign at this position.
M_2_1_01_GDV_07

I was busy with displaying some other data while I found that there is a much easier way to calculate the width of characters. You just don’t calculate them. You can display the calculations on one line by combining the calculation and the strings you would like to display with the ‘+’ sign. That solves a lot of trouble / work.
M_2_1_01_GDV_08

I don’t think that small text in the animation will work well. I leave it out and I continue to work on the overall design. Put a grid of points in the background. I don’t know why the point function does not work. Found out that this is due the smooth function. Could use rect or ellipse but that is slowing down the animation. So I have put noSmooth in front of the for loops. Deleted the line which displays the text lines: x amount of orbits and  x times through the circle and timeline. Did not find that very helpful information anyway.
M_2_1_01_GDV_09

Found those dots in the background pretty distracting. Added a gray background. Replaced all color in the graphics by blue. Made the moving dots magenta. Finally I did not change much in these examples. It also did not lead to many variations. I replaced some colors and positioned some text. But it helped me to get a better understanding of what harmonic oscillations do and how they work.
M_2_1_01_GDV_10