Yet some more of the book, not long after i posted the flutterby experiments.
Renders very quick but kinda expected it to as it is very simple, 3D maybe…?
Click to generate a new set of coloured cross sections…
Vote for this on HexoSearch! Archive for the 'Generative Art' Category
Another bit of the book, and also a bit of ceverage by Keith at artfromcode.
Decided to optimize as much as possible and results were good, first app click to create a new butterfly at mouse’s coordinates.
Second app ‘Butterfly Trails’, every tenth of a second a new butterfly is created and pointing towards the mouse [cheap effect i know but looks good
], runs quite smoothly even on an older system 
.
Vote for this on HexoSearch! 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 for this on HexoSearch! 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 for this on HexoSearch! 
