Posted: February 9th, 2010 | Author: Zack | Filed under: Experimental, HTML 5, JavaScript, Standards | Tags: Gaussian Distribution, Gaussian Noise, HTML 5, JavaScript, Noise | No Comments »
While playing around with some new ideas to execute with the HTML 5 drawing capabilities I realized it has a very limited set of drawing commands. Sure, the commands are an amazing leap forward for standards, but there were some concept I wanted to port over from ActionScript that I couldn’t. This is because of the lack of BitmapData manipulation available with the canvas. I started off wanting to create Perlin Noise, but realized quickly there is no built method for drawing noise, which led me to this post.
I am by no means a mathematical genius, but with a bit of research I found a great article by Taygeta Scientific Incorporated explaining the Gaussian Distribution formula, which is the core of Gaussian Noise. I used the polar form of the Box-Muller transformation which is faster to process and offers a more robust range of numbers, according to the above mentioned article.
Performing these calculations at the client side with JavaScript is never going to touch the speed of C++ or even built operations in ActionScript 3. That being said, it is still possible and my version renders up to 20000 dots or particles at an respectable speed.
The aforementioned algorithm creates two pairs of Gaussian Numbers. While trying to get the effects just right, I experimented with plotting the particles at different combinations of the resulting Gaussian Numbers. Immediately I began to recognize patterns and shapes. Here are my results:
VIEW EXAMPLE
SOURCE FILES
Posted: February 6th, 2010 | Author: Zack | Filed under: ActionScript 3, Experimental, Papervision 3D | Tags: 3D, ActionScript 3, generative art, procedural, tree | No Comments »
One of the true powers of PaperVision 3D is getting down and dirty at the geometry level and creating custom meshes. Doing this requires knowledge of what a mesh consists of and how to construct a TriangularMesh.
Basically a mesh consists of two things: Vertices and Faces. Vertices are basically the corner points of a Triangle. A triangle consists of three corner points. Faces are created from these Triangles. For instance, a Plane primitive is created from two Triangles and four Vertices see this diagram:
3D modelers create tons of Vertices and Triangles to form models. We can do the same with Papervision 3D via code. The biggest issue facing developers wanting to create models in Papervision 3D is that we are restricted to the amount of geometry we can create due to performance issue. In short, lots of triangles = little performance.
This is why I have created this example, to show how you can create custom meshes and reuse geometry to optimize a model. I could have used a bunch of boxes or cylinders to create the branches, but this would have left a lot of extra Vertices that were not connected and there would have been duplicates, which is not optimized at all.
The example consists of two classes, ProceduralTree.as and Tree.as. I won’t go into the ProceduralTree.as class much because it is pretty self explanatory. It sets up a BasicView and environment as well as some of the functionality, such as “click to create” and “rotate to mouse”.
The Tree.as class is where the tree is created with two primary methods. The generateTree method is where the procedure starts. We start with a “trunk” branch and then continue looping until we’ve reached the specified depth or width is less than zero. Each loop we look in the _branches array for branched to either split or continue straight from. That’s the entire theory behind branching. Look at the last branch end and continue from there. The more branhces that split off, the more branches will be created at the next depth. Let’s take a look at this method:
private function generateTree(depth:Number = 5, startWidth:Number = 100):void
{
_branches = [];
_width = startWidth;
var totalBranches:Number;
// step through each level of the branch
for(var i:Number = 0; i < depth; i++)
{
// in the "createBranch" method branches are stored.
// these are all the end branches, so loop through and create new branches from them
totalBranches = _branches.length;
if(totalBranches > 0)
{
for(var ii:Number = 0; ii < totalBranches; ii++)
{
if(Math.random() > .5)
{
// split the banch, one left and one right
createBranch(_branches[0], depth-i, "left");
createBranch(_branches[0], depth-i, "right");
}else{
// continue with a straight branch
createBranch(_branches[0], depth-i, "straight");
}
// we've created new branches from the last branch, so remove it from the array
_branches.shift();
}
}
else
{
// no branches exist yet, so create trunk
createBranch([], i);
}
// reduce width of next branches
_width = _width - (_width / (depth - i));
}
// finalize geometry of tree
finalizeTree();
}
You’ll see above that a branch is created through the createBranch method. Within this method we create all the geometry and calculate how to move the top points based on the direction passed in. This diagram shows the basic anatomy of each branch:
Here’s the createBranch method:
private function createBranch(startPoints:Array, depth:Number, direction:String = "straight"):void
{
var verts:Array = geometry.vertices;
var faces:Array = geometry.faces;
var ftl:Vertex3D;
var ftr:Vertex3D;
var fbl:Vertex3D;
var fbr:Vertex3D;
var btl:Vertex3D;
var btr:Vertex3D;
var bbl:Vertex3D;
var bbr:Vertex3D;
var triVerts1:Array;
var triVerts2:Array;
var texMap1:Array;
var texMap2:Array;
var triFace1:Triangle3D;
var triFace2:Triangle3D;
// create arondom height for the branch.
// max of 250, min of 50
var height:Number = Math.floor(Math.random() * 200)+50;
var xMod:Number = 0;
switch(direction)
{
case "right":
// branch is travelling to the right so set the X modifier to the right
xMod = Math.floor(Math.random() * -200);
break;
case "left":
// branch is travelling to the left so set the X modifier to the left
xMod = Math.floor(Math.random() * 200);
break;
}
// set a random z modifier
var zMod:Number = Math.floor(Math.random() * 800) - 400;
if(startPoints.length == 4)
{
// create bottom front from last branches top points
fbl = startPoints[0];
fbr = startPoints[1];
bbl = startPoints[2];
bbr = startPoints[3];
// create bottom vertices
ftl = new Vertex3D((startPoints[0].x + xMod)+(-_width * 0.5), startPoints[0].y + height, (startPoints[0].z + zMod) + (-_width * 0.5));
ftr = new Vertex3D((startPoints[0].x + xMod)+(_width * 0.5), startPoints[0].y + height, (startPoints[0].z + zMod) + (-_width * 0.5));
btl = new Vertex3D((startPoints[0].x + xMod)+(-_width * 0.5), startPoints[0].y + height, (startPoints[0].z + zMod) + (_width * 0.5));
btr = new Vertex3D((startPoints[0].x + xMod)+(_width * 0.5), startPoints[0].y + height, (startPoints[0].z + zMod) + (_width * 0.5));
}
else
{
// create bottom vertices
fbl = new Vertex3D(-_width * 0.5, 0, -_width * 0.5); // front bottom left vertex
fbr = new Vertex3D(_width * 0.5, 0, -_width * 0.5); // front bottom right vertex
bbl = new Vertex3D(-_width * 0.5, 0, _width * 0.5); // back bottom left vertex
bbr = new Vertex3D(_width * 0.5, 0, _width * 0.5); // back bottom right vertex
// create top vertices
ftl = new Vertex3D(-_width * 0.5, height, -_width * 0.5); // front top left vertex
ftr = new Vertex3D(_width * 0.5, height, -_width * 0.5); // front top right vertex
btl = new Vertex3D(-_width * 0.5, height, _width * 0.5); // back top left vertex
btr = new Vertex3D(_width * 0.5, height, _width * 0.5); // back top right vertex
}
// add vertices to array
verts.push(ftl, ftr, fbl, fbr, btl, btr, bbl, bbr);
// next, create four side of branch, basically a box with no top or bottom
// branch segment is created by creating front, back, right and left triangles (
// two triangles each create a square
// map the UV's
// create front face
triVerts1 = [fbl, ftl, ftr];
triVerts2 = [fbr, fbl, ftr];
texMap1 = [new NumberUV(0, 0), new NumberUV(0, 1), new NumberUV(1, 1)];
texMap2 = [new NumberUV(1, 0), new NumberUV(0, 0), new NumberUV(1, 1)];
triFace1 = new Triangle3D(this, triVerts1, material, texMap1);
triFace2 = new Triangle3D(this, triVerts2, material, texMap2);
faces.push(triFace1, triFace2);
// create back face
triVerts1 = [bbl, btl, btr];
triVerts2 = [bbr, bbl, btr];
triFace1 = new Triangle3D(this, triVerts1, material, texMap1);
triFace2 = new Triangle3D(this, triVerts2, material, texMap2);
faces.push(triFace1, triFace2);
// create right face
triVerts1 = [fbr, ftr, btr];
triVerts2 = [bbr, fbr, btr];
triFace1 = new Triangle3D(this, triVerts1, material, texMap1);
triFace2 = new Triangle3D(this, triVerts2, material, texMap2);
faces.push(triFace1, triFace2);
// create left face
triVerts1 = [fbl, ftl, btl];
triVerts2 = [bbl, fbl, btl];
triFace1 = new Triangle3D(this, triVerts1, material, texMap1);
triFace2 = new Triangle3D(this, triVerts2, material, texMap2);
faces.push(triFace1, triFace2);
// save last 4 end points to build next branch from
_branches.push([ftl, ftr, btl, btr]);
}
Finally, in the ProceduralTree.as class, there is the addLeaves method. This method grabs the last fifty vertices from tree object and randomly adds green spheres at them. The reason I kept this method separate from the tree itself is because this way you can add whatever type of leaves you’d like to the ends. Maybe you want no leaves at all. Either way, this approach keeps it flexible.
private function addLeaves():void
{
_leaves = [];
// create materials for leaves and composite them together
var flatShader:FlatShadeMaterial = new FlatShadeMaterial(_light, 0x5EDD8F);
flatShader.doubleSided = true;
var wm:WireframeMaterial = new WireframeMaterial(0x0C5A23);
wm.doubleSided = true;
var leafComposite:CompositeMaterial = new CompositeMaterial();
leafComposite.addMaterial(wm);
leafComposite.addMaterial(flatShader);
leafComposite.doubleSided = true;
// create leaf object, which is a sphere
var leaf:Sphere;
var total:Number = _tree.geometry.vertices.length;
// loop through the last 50 tree points and add the spheres at those positions
for(var i:Number = total-50; i < total; i++)
{
// 10 spheres have been created, stop creating spheres
if(i < 0 || _leaves.length > 10) return;
// decided whether to place sphere or not
if(Math.random() > .7)
{
// place sphere and position
leaf = new Sphere(leafComposite, Math.floor(Math.random() * 100) + 20, 6, 6);
leaf.x = _tree.geometry.vertices[i].x;
leaf.y = _tree.geometry.vertices[i].y;
leaf.z = _tree.geometry.vertices[i].z;
// makes the sphere more oval shaped
leaf.scaleX = leaf.scaleZ = 2.5 + Math.random();
_treeHolder.addChild(leaf);
_leaves.push(leaf);
}
}
}
I hope this helps reveal some of the possibilities of the custom meshes and the underlying mechanics of how they work. We also got into some procedural/branching theory. As always, enjoy the example and source below.
VIEW EXAMPLE
SOURCE FILES
Posted: February 5th, 2010 | Author: Zack | Filed under: ActionScript 3, Experimental | Tags: ActionScript 3, bezier, generative art | 2 Comments »
For this experiment I took some code I had written for a recent project and repuprosed it in a more artistic and abstract manner. The idea is basically to loop for a specified distance and create points, which are later connected into a continuous cubic bezier line. Here is the code:
public function createLoopingLine(distance:Number):void
{
var points:Array = [];
var currentDistance:Number = 0;
var step:int = 50;
var xDis:Number = 0;
var yDis:Number = stage.stageHeight * .5;
var iterations:int = Math.round(distance / step);
var wasLastLoop:Boolean = true;
var loopSize:Number;
// push start point
points.push(new Point(xDis, yDis));
// loop through and create random looping points to span total distance
for(var i:Number = 0; i < iterations; i++)
{
// if last segment of line was a loop, make it straight
if(!wasLastLoop)
{
if(Math.random() > .5)
{
// loop up
loopSize = randomNum(70, 200);
// left point of loop
points.push(new Point(xDis + (loopSize * .5), yDis - (loopSize * .5)));
// top point of loop
points.push(new Point(xDis, yDis - loopSize));
// right point of loop
points.push(new Point(xDis - (loopSize * .5), yDis - (loopSize * .5)));
// bottom point of loop, origin point
points.push(new Point(xDis, yDis));
}
else
{
// loop down
loopSize = randomNum(-70, -200);
// left point of loop
points.push(new Point(xDis - (loopSize * .5), yDis - (loopSize * .5)));
// top point of loop
points.push(new Point(xDis, yDis - loopSize));
// right point of loop
points.push(new Point(xDis + (loopSize * .5), yDis - (loopSize * .5)));
// bottom point of loop, origin point
points.push(new Point(xDis, yDis));
}
// last points were a loop
wasLastLoop = true;
}
else
{
// continue to step through
xDis = currentDistance + 100;
points.push(new Point(xDis, yDis + randomNum(-100, 100)));
wasLastLoop = false;
}
// add to distance traveled
currentDistance = xDis;
}
// push end point
points.push(new Point(currentDistance+200, stage.stageHeight * .5));
// create loop container
var lineContainer:Sprite = new Sprite();
addChild(lineContainer);
// pass container and points
curveThroughPoints(lineContainer, points, .5, .5);
}
The calculations to create the control points between the distance values generated in the loop above is based heavily on Andy Woodruff’s CubicBezier class. I just have added some strong typing and optimized some of the loops. To learn more about Andy’s CubicBezier class, visit http://www.cartogrammar.com/blog/continuous-curves-with-actionscript-3/. After the cubic control points are created, we loop through the distance points and create BezierSegments objects. The BezierSegment class takes four parameters, the start point, two control points, and the end point. For more on BezierSegment visit http://help.adobe.com/en_US/AS3LCR/Flash_10.0/fl/motion/BezierSegment.html. The segment is then looped through and “stamps” are added on each step.
var stamp:Sprite;
var thisPoint:Point;
var nextPoint:Point;
var bezier:BezierSegment;
for (i = 0; i < lastPt - 1; i++)
{
// create a BezierSegment from point, following point, and 2 control points generated above
bezier = new BezierSegment(p[i], controlPts[i][1], controlPts[i + 1][0], p[i + 1]);
for (var t = .01; t < 1.01; t += .15)
{
// get point to position stamp
thisPoint = bezier.getValue(t);
// get next point, this is used to calculate rotation
nextPoint = bezier.getValue(t + .15);
// position stamp and set rotation
stamp = new Stamp()
stamp.x = thisPoint.x,
stamp.y = thisPoint.y;
stamp.rotation = Math.round(Math.atan2(nextPoint.y - thisPoint.y, nextPoint.x - thisPoint.x) * (180 / Math.PI));
// add the stamp to the container
container.addChild(stamp);
}
}
The stamps are library sprites. These are interchangeable with whatever you like. Some really interesting designs and patterns can be made. Here are some more renders I made by playing with graphics within the stamp sprite:
Note: The BezierSegment class is within the fl.motion package, which exists for Flash, you will not find this packge in the Flex SDK as of the time of this post.
Stay tuned, I have more planned for this experiment to evolve into. In the meantime, enjoy the source!
SOURCE FILES
Posted: February 1st, 2010 | Author: Zack | Filed under: Experimental, HTML 5, JavaScript, Standards | Tags: HTML 5, JavaScript | 2 Comments »
With all the buzz around the HTML 5 Canvas Element, I wanted to give it a try myself. So i pulled together this particle emitter, using JavaScript as the controller and the Canvas Element as the renderer.
I started of with what I am going to call the “Base Class”, within the particleEmitter.js file. In JavaScript you can create classes by following this simple structure:
function Emitter(arguments...)
{
...
}
Properties are then created on the object as follows:
function Emitter(arguments...)
{
this.property = value;
}
You can see in the Emitter class i create some properties that will affect the environment of the emitter. Then, there are the methods of the class, which are created as follows:
function Emitter(arguments...)
{
this.method = function() { ... }
}
The logic behind the the “createParticle” method is that it checks to see if there are more than the allotted number of particles, if so, it grabs the “oldest” particle and reuses it by resetting it’s properties. The “step” method loops through all the particles and applies the conditions of the environment, i.e. gravity, velocity, lifespan, etc. Finally, the “draw” method actually renders the particles to the Canvas Element. The particles in JavaScript are just represented by placeholder objects that store the position, velocity and lifespan of the particle. There are no “display objects” in the Canvas Element, you can only draw to it.
The Canavs Element is very easy to draw to. Once the element is created in HTML, you need to get the Canvas’ context, which is what you draw to.
var canvasContext = document.getElementById('canvasElement').getContext('2d');
For there you can draw in the Canvas context a number of different ways. In this example, I am using a simple circle using the “arc” method:
canvasContext.fillStyle = 'rgba(red, green, blue, alpha)';
canvasContext.beginPath();
canvasContext.arc(x, y, radius, startAngle, Math.PI*2, antiClockwise);
canvasContext.fill();
Pretty simple huh? From here, the “Base Class” creates and monitors some slider controls and color picker. It also creates a timer that fires off the specified amount of particles at the specified interval. From here, you can really go anywhere with this simple combination of JS and HMTL 5. To dive further into the Canavs Element, stop over at the Mozilla Developers Center where you can find a great set of tutorials. You can snag my source below.
VIEW EXAMPLE
SOURCE FILES
Posted: February 1st, 2010 | Author: Zack | Filed under: Editorial, Standards | Tags: Flash, HTML5, The Future | No Comments »
Is HTML 5 going to change the future for Flash developers? The answer is “yes”, but the change will be in a positive way.
I think that Flash will continue to flourish and ground-breaking content will continue to be delivered on the Flash Platform in the coming years. That being said, these new standards-based technologies are going to provide some interesting possibilities for Flash Developers to cross over to the standards world in the future.
When you boil it down, Adobe based ActionScript 3 on ECMAScript, the same specifications that JavaScript 1 and JavaScript 2 are based on (more or less). Flash Developers can easily leverage their ActionScript 3 skills via JavaScript. Any good developer can grapple the basics of DOM just as easily. So the missing links and HTML and CSS.
For developers like me, who have a standards background, this possibility is exciting. I look forward to the adoption of W3C Standards across all browser. I’ve never believed that one platform should be used over another because of obligation. If I was a carpenter i wouldn’t use a hammer to do a screwdriver’s job just becuase I paid more for the hammer. Which brings us to “free”.
These standards technologies are all free to get started with and require no browser plugins for users, on top of their SEO and accessibility benefits. A lot of Flash developers seem to be apprehensive of this movement when, to me, it makes sense to accept it with open arms. It affords us new opportunities in a different realm and the ability to leverage skills we already posses.
The proposed specs for HTML 5, CSS 3, and JavaScript 2 are far from universally implemented, in addition to not being backwards-compatible. It could easily be five years before these specs become widely accepted and used by major brands.
So, stay calm people and don’t be scared of progress. Remember that the entire reason flash was created was to accomplish what you couldn’t do with standards. Now we’ve finally got our gift horse, and we are already looking it in the mouth.
Posted: January 30th, 2010 | Author: Zack | Filed under: News | No Comments »
Hi there and welcome to the freshly redesigned Zen-Sign Interactive. I have moved the site to the Wordpress platform to accommodates more news updates, experiments and technical articles to share some of my knowledge with the Interactive Developer community. Stay tuned as the site progresses and grows.
