After a quick response on my last post, i thought i would post a quick how to and some explanation.
First of what the 5 variables mean, theta, phi, rep, r and r2.
Well theta and phi originate from the greek alphabet i think *Wikipedia’s the two* they are Theta and Phi courtesy of Wikipedia, and why they are used -
“The origin of theta into mathematical problems began with the Greeks. They logically chose this Greek symbol since it was the next in their alphabet not yet used and was easily legible to recreate for multiple uses.”, next is rep from experiments this is basically the amount the curve is repeated which when is low will only draw say a half a circle’s diamter of curve if that makes any sense.
R represents the radius of the curve and R2 is used in the second wrapping of the curve, “for added beauty, a second higher frequency curve winds about the initial Lissajous Figure”. All that mumbo jubo should look simpler via code, another note is a spherical lissajous figure lies on the surface of a sphere so it can be drawn in 3D, which i will also be showing in this post.
Right some code first up the core function:
//Theta and Phi both converted to radians var theta:Number = (30) * (Math.PI/180); var phi:Number = (12) * (Math.PI/180); //REPETITION var rep:Number = 30; //RADIUS var r:Number = 60; //HIGHER FREQUENCY var r2:Number = 2; //Pass in a BitmapData and it will draw it via a shape then to the bitmap data //with the X and Y coordinates passed in //You will notice it calculates the Z as well if you are not plotting in 3D just pass in 0 //I left the Z calculation in for experimentalists =P function lissajous(bmd:BitmapData=null,X:Number=0,Y:Number=0,Z:Number=0,colour:uint=0):void { var shape:Shape = new Shape(); shape.x = X; shape.y = Y; shape.graphics.lineStyle(0,colour); for(var t:Number = 0;t<rep*Math.PI;t+=.01) { var xPos:Number = r * Math.sin(theta*t) * Math.cos(phi*t)+X; var zPos:Number = r * Math.cos(theta*t)+Z; var yPos:Number = r * Math.sin(theta*t) * Math.sin(phi*t)+Y; if(t==0)shape.graphics.moveTo(xPos,yPos) else shape.graphics.lineTo(xPos,yPos); //bmd.setPixel(xPos,yPos,colour); } for(t=0;t<rep*Math.PI;t+=.01) { xPos = r2 * Math.sin(100*theta*t) * Math.cos(100*phi*t) + r * Math.sin(theta*t) * Math.cos(phi*t)+X; zPos = r2 * Math.cos(100*theta*t) + r * Math.cos(theta*t)+Z; yPos = r2 * Math.sin(100*theta*t) * Math.sin(100*phi*t) + r * Math.sin(theta*t) * Math.sin(phi*t)+Y; if(t==0)shape.graphics.moveTo(xPos,yPos) else shape.graphics.lineTo(xPos,yPos); //bmd.setPixel(xPos,yPos,colour); } bmd.draw(shape); shape.graphics.clear(); shape = null; }
Thats the basics of 2D rendering of spherical lissajous figures. The two apps below are the 3D rendering of the figures one using curves and the other using circles.
Play around with the values to get some cool patterns, there not using any mainstream 3D engine like PV3D or Away3D just some old fashioned home made 3D.






