Archive for the 'Mathematics' Category

02
Nov
11

Creative Javascript – 3D Tree with Leaf-fall

By swingpants Leave a Comment
Categories: 3D, Effect, HTML5, Javascript and Mathematics
Tags: , , , ,

A HTML5 prototype…

Finally getting around to have a play with HTML5 Canvas – enabled by attending Seb Lee Delisle’s excellent CreativeJS course.

I’m impressed with performance from Canvas nowadays – my first sight of it many moons ago left me pretty disappointed – but now it actually feels useful and some pretty impressive visual effects can be achieved without resorting to WebGL.

The prototype I threw together here demonstrates a growing tree, in 3D with numerous branches, leaves, leaf fall, faux-shading and colour phasing. The demo will re-grow a tree on mouse click, and will allow for left and right rotation by means of mouse position (left/right).

creativeJS

3D Tree with Leaf Fall

To talk through the code a little: The tree is constructed using a recursive buildBranch function. Every branch spawns two new branches, or in the last generation it has a 90% chance of spawning a leaf. The branches are coloured from brown to green related by the recorded generation of the branch.

No 3D libraries were used in this demo – all of the 3D is via a simple scaling calculation for 3D points [ fov / (fov + point.z) ]. This allows for any 3D point to be translated (scaled) onto the 2D canvas.

The Painter’s Algorithm (priority fill) is applied via the sorting of all branches and leaves on their mid-point. This means that those furthest away are drawn to screen first.

Shading is applied by mapping colour to the z value of a branch’s position. This is very simply applied. There is a related alpha to add a fog effect to the furthest away elements, this gives some subtle but nasty artefacts and could be improved.

When a branch is fully grown the leaves will then appear and grow to their full size. When they fall a sine value is applied to rotation to make it rock as it falls. Leaves will collect on the ground.

Performance is pretty good here, but I did have to restrict the number of branch generations to 9. Of course some of the out-of-the-box features that Flash has such as Glow and Blur filters don’t exist – which means work-arounds or approximations have to be used – sound implementation isn’t very consistent across browsers – it is still early days, more and more JS will be used across the web, as it is the browser manufacturers will hopefully drive their products into more useful areas and consistent implementations.

The demo is a fast turn-around ‘prototype’, so not optimal or well formed. Feel free to have a play with the code, offer improvement suggestions or adapt in anyway you wish.

No attempt has been made to cover HTML5 cross-browser issues – so don’t expect this to work in IE!

Direct Link: 3D Tree with Leaf Fall

Advertisement
05
Mar
11

Introduction to Mercator Projections, Latitude and Longitude

By swingpants 4 Comments
Categories: Actionscript, as3, Code Snippet and Mathematics
Tags: , , ,

Or how to place a map coordinate into 3D space. This post is a brief walk through of the basics from my 2010 presentation “Where in the world? Intercontinental Ballistic Flash”.

Belgian, Flemish geographer and cartographer Gerardus Mercator, in 1569 presented a cylindrical map projection. The Mercator Projection quickly became the standard map used for nautical purposes. It’s advantages were that the scale is linear in any direction around a point, meaning all angles were preserved (conformal).

Geographer and cartographer Gerardus Mercator

Gerardus Mercator

Around the equator feature shapes are accurately portrayed but as the poles are approached there is a size and shape distortion. The scale increases as the pole is neared, eventually becoming infinite when the pole is reached.

If you imagine the world as a beach ball. The Mercator Projection is the equivalent of cutting open the ball at each pole and stretching the skin to form a cylinder. Now slice down the cylinder and you have the map.

The first Mercator projected map. 1569.

All map projections distort the shape or size of the Earth’s (or for that matter any other planet’s) surface. The Mercator Projection exaggerates areas far from the equator. Greenland seems as large as Africa, but is in fact 1/14 of the size, Antartica appears to be the largest continent but is in fact only 5th in terms of area.

Despite the obvious distortions, the Mercator Projection makes a great interactive map. Thanks to the conformality it can be zoomed nearly seamlessly.

So here we have a system that converts a 3D scene, the real world, onto a 2D plane, the map. This system can just as easily convert the 2D back to 3D. It is a coordinate system that requires two positional parameters and one constant: the planet radius.

The positional parameters are latitude and longitude. As developers we are used to standard coordinates x and y. Across then up. Horizontal then vertical. With latitude and longitude we have to think differently. Latitude is vertical and longitude is across. Up then across. Latitudes run from pole to pole, while longitudes run around the planet.

There are 180 degrees of latitude from the South Pole to the North pole, and 360 degrees around the planet. Imagine yourself sat at the centre of the Earth with a laser pointer. Point at the Equator then you are at 0 degrees latitude, at the South Pole -90 degrees and at the North Pole 90 degrees. Now point at the Equator again you can turn 180 degrees around the equator to the right (-180 degrees longitude) and to the left (180 degrees longitude).

With these any point on the surface of the planet can be recorded or indeed any position on a map.

So we have a system for calculating a position on the surface of a sphere, a 3D coordinate, but how do we convert latitude, longitude and the planet’s radius into a 3D x,y,z coordinate?

public static function convertLatLonTo3DPos(lat:Number, lon:Number, radius:Number):Vector3D
{
var v3d:Vector3D = new Vector3D();

//Convert Lat Lon Degrees to Radians
var latRadians:Number = lat * TO_RADIANS;
var lonRadians:Number = lon * TO_RADIANS;

v3d.x = radius * Math.cos(lonRadians) * Math.sin(latRadians);
v3d.z = radius * Math.sin(lonRadians) * Math.sin(latRadians);
v3d.y = -radius * Math.cos(latRadians);

return v3d
}

Here the latitude and longitude are converted into radians ( TO_RADIANS:Number = Math.PI / 180 ). Then the trigonomic functions are applied to the planet radius to return a vector3D x,y and z.

15
Jan
10

Away3DLite: Translating 3D Coordinates to 2D Screen Position

By swingpants 10 Comments
Categories: 3D, Actionscript, as3, Code Snippet, Flash and Mathematics
Tags: , , , ,

I have been playing with the awesome Away3DLite. Playing with 1000s of polygons is very liberating, but still doesn’t mean we can slack off with the optimisation. It is important to take any opportunity to lessen the number of calculations performed per frame by the player.

To this end, I was just putting together a 2D layer above my 3D scene when I found that the camera.screen function (available in the standard Away3D library) that projects 3D coordinates(x,y,z) to 2D screen positions (x,y) wasn’t present.

In Away3DLite we have to calculate this ourselves. The salient information can be gained through a model or container’s viewMatrix3D property. To get an accurate screen position the the x,y,and z positions are drawn from viewMatrix3D. Each of x and y are divided by the z value and any screen offsets are applied.

Here is the method as a function:

public function calc2DCoords(screen_element:*):Point
{

var posn:Vector3D = screen_element.viewMatrix3D.position
var screenX:Number = posn.x / posn.z;
var screenY:Number = posn.y / posn.z;

return new Point(screenX+screenW_offset,screenY+screeH_offset)
}

Pass through a screen element (a model, primitive or object container) and the 2D result will be returned. The screenW_offset and screenH_offset are required if the ‘view’ has been centred on the stage.

I have put together a demo here to demonstrate the function. I load a couple of models into the scene and let a 2D info panel follow each around the screen.

Got to keep a close eye on those tubbies

Demo: Translating 3D Coordinates to 2D Screen Position
Source: ZIP

18
Dec
09

Creating Mathematical Formulae from sample data using Excel

By swingpants 1 Comment
Categories: Actionscript, as3 and Mathematics
Tags: , , , , , , ,

So you’re in Flash and want to move an item on the stage, rotate a camera or dynamically change a volume depending on another value. You could use the curves available in various Maths libraries, but you can spend a lot of time matching and applying constants.

A quicker – more accurate way can be to come up with your own formulae.

What!!? It is easy – you really don’t have to understand the mathematics, you can get Excel and Flash to do the heavy lifting for you.

Let me explain this by means of an example:
I was building a 3D application. I had a camera and needed it’s X rotation to be close to certain values depending on the camera’s position on the Z axis. I manually moved the camera into position and noted down samples of the values I required and placed them into Excel: One column for the z value and one for the required angle. – I only need a handful of samples to allow me to plot a regression trend line.

I now select the values on the spreadsheet and create an XY scatter chart. Great, my points are on the graph. I can see it makes a curve. In the ‘Chart’ drop down menu I now ‘Add Trendline…’. If I choose ‘Linear’ I get a straight line, but I want a curve so I can choose from a number of different methods. In this case ‘Exponential’ seems good. Select that and a look at the Options tab allows me to select ‘Display Equation on Chart’.

Now as soon as I press OK, I get my equation. Simple.

Regression Curve Formula in Excel from sample data

How do I represent this formula in Actionscript? Basically it is saying 202.62 times the exponential of 0.0014 times the chart’s x value. So in AS:

The final formula in Actionscript

As required, I have calculated the formula using the camera.z value and applied it to camera.rotationX. Now whenever the z value changes I have a smooth curve applied to rotationX.

Nice!

2nd Oct 2010:
A quick addition to this post. If a more complex curve is needed then a polynomial should be chosen. A polynomial can have multiple ‘orders’. This more orders you have the more compelx the curve can be. (Excel allows up to 6). A great thing about polynomials is speed. It is merely a series of multiplications which are very light on the processor.

So a polynomial trend gives you (for example) the formula:
109.13×4 – 265.48×3 + 125.34×2 + 40.012x + 2

To represent this in Actionscript I’d need to replace x4 (x to the power of 4) with the x value paramter – say delta – so x4 becomes delta * delta * delta * delta (or indeed Math.pow(delta,4)), and so on. The final formula would be:
109.13 * Math.pow(delta,4) – 265.48 * Math.pow(delta,3) + 125.34 * Math.pow(delta,2) + 40.012 * delta + 2

18
Nov
09

Ranged Numbers. Non-Linear response curves for Sliders and TouchPads.

By swingpants 2 Comments
Categories: Actionscript, as3, Code Snippet, Flash and Mathematics
Tags: , , , , , ,

I’ve been building a few apps recently and have found that a linear response over a range of numbers has been a poor solution. I needed to be able to apply different response curves to user interface components (knobs, sliders, touchpads) as well as on screen display objects, characters, etc.

I needed a good name for the class, but instead came up with the pretty poor moniker ‘RangedNumbers’. I’ll change it when I come up with a better one.

So the idea is, a ‘ranged number’ is instantiated, initialised for the required range then a simple call with a value in that range will result with a percentage that can be applied to the intended recipient accordingly. I realised that an inverted curve would be handy too, so have added that functionality.

I have included exponential and powered curves as well as linear.

So to use the ranged number system:

//Instantiate and Initialise
var ranged_num:RangedNumber=new RangedNumber(min,max)
//Where min is the minumum number in the range and max is the maximum

//In use:
trace ( ranged_num.calculatedRangeNumber(value, curve_type, inverted) )
//Where:
// value is the value within the range to be calculated
// curve_type is the type of response curve.
// Curve types: RangedNumber.LINEAR, RangedNumber.EXPONENTIAL, RangedNumber.POWERED
// inverted is a boolean flag. True if the inverted response is required

I have put together two demos to show the RangedNumber class in action:

Firstly using a Slider component. Grab the slider and watch how the markers are represented on all the displayed response curves.

A demonstration of how to implement non-linear response curves

Now here is the same demo but this time using a TouchPad. Click on the touchpad to engage. In this demo horizontal movement controls the standard curves and vertical the inverted.

How to implement non-linear response curves with a touchpad

The source for these demos and the Ranged Number class can be found here: Ranged Number ZIP

Categories

Reasons to be Creative 2012

FITC Amsterdam 2012

Flash on the Beach 2011

Flash on the Beach 2010

Swingpants at Flash on the Beach

Flash on the Beach 2009

Swingpants at FOTB2009

Twitter Updates