Monthly Archive for October, 2008

Spherical Lissajous Figures, plus 3D

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.






Vote in HexoSearch Vote for this on HexoSearch!

Spherical Lissajous Figures

Got my copy of Computers and the Imagination, and it’s quite awesome. Played with some code and created these to simple apps, have a play around.

Click to create a pattern at the mouse coordinates, any key to clear all patterns.




Modify the parameters to create some interesting patterns, any key to tween the values.


Vote in HexoSearch Vote for this on HexoSearch!

Spheres

Coding simple sphere engines, editable radius and number of points on the sphere, just got to tie in some polygons/triangles for or a solid sphere.

Vote in HexoSearch Vote for this on HexoSearch!