Generative Design Variations M.2.2 Lissajous figures

The description from the Generative Design book reads as follows: ‘The step from harmonic oscillations to Lissajous figures is very easy now. Instead of one oscillation, two are calculated, one of which defines the y-coordinates of the point to be drawn (as demonstrated) and the other its x-coordinates. The adjacent image depicts an oscillation with frequency 2, an oscillation with frequency 1, and a 90º phase shift, which together results in a Lissajous figure in the shape of a reclining 8.’ Here you can find the original program I started with.

This time the Processing JavaScript conversion works reasonably well. Except for a few hick-ups which you might read in the following paragraphs. Here is the overview page on the loftmatic site. Remember… these programs will not work in Google Chrome.

As usual I changed the global variable names. The size of the display window and I added some letter spaces to improve the readability of the program. Made the background gray and I filled all curves because the strokes displayed were giving a bad image quality.

Used only primary colors to fill the curves. Still bothered by that font problem of the previous example. Used an .otf-font in JavaScript which seems to work. It works in Safari and Firefox. But it doesn’t work in Chrome. So I stopped working on that problem. I just continue with working on the example. Looking for more info to make the page more interesting. In a later stage I decided to remove all fonts and imported a .png for the header. But even than Chrome does not want to display anything. Checked the content settings of Chrome and JavaScript is set to allow all sites to run JavaScript. On the Processing.js site the following is mentioned: ‘Font support for the Canvas element varies across browsers. Firefox currently has the best support, but still uses a pre-defined set of fonts. (Documentation to follow soon)’.

Added Horizontal and vertical frequency. And a line with phase shift. To avoid problems in JavaScript I added those texts in a background image. Which gives me no opportunity to change the position (except for changing it in Photoshop). But the problem with fonts is than solved for a major part (I hope). I only have to position the otf font at the specific places in the subtitles. Tried that but with no success. It gives the same results as with the Futura.otf. So I stick to that. Programs only work in Safari and Firefox. So I did a bit work for nothing. This is not an ideal solution because the leaguespartan-bold.otf looks a bit like the Futura bold. But it isn’t the same.

Ok. I found a new option. I am going to get rid of the Futura font. I am only going to use it in the background. Furthermore I am going to give more information about the curves at the little circles which are orbiting the curves. Because the zero point have been translated I need to re-calculate the positioning data. But first of all I need to know if this is going to work in JavaScript. And it does (not run in Chrome). The zero position lies now at point 600, 600 but after a while I thought these positions are not relevant. I just display the frequencies and phase shift at the white circle’s positions.

This animation is fine as long as you don’t cranck up the frequency rate of one or both frequency curves to lets say 7 Hz. If it higher everything will be unreadable. So I think its better to make that information static. But it is also more boring. Until here I don’t want to go any further with these examples. I could make more variations but the intention is to understand how Lissajous figures work. And that is clear to me now.

My doubts about the Processing JavaScript conversion is getting greater with every Processing program I convert to JavaScript. And when you start using fonts it is even more worse. During these examples I spend more time on finding out how I could use fonts in JavaScript then I spend time on getting to know Lissajous figures. And beside of that there are several browsers which not fully support JavaScript. But I hope this will getting better in the near future.


Comments? Leave a reply.

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s