Categories
General

Drawing 3D perspective lines in Flash

I love the Line3D in papervision, but wouldn’t it be great if it actually got larger as it came towards you? Currently the lines are just drawn using the Flash drawing API, and the line’s thickness is the same no matter how far away it is.

I’ve been working on a new line drawing algorithm. I wanted the lines to look more like tubes, cylinders in fact. But I obviously don’t want the overhead of drawing actual cylinders! I just want a 3D line that gets bigger as it comes towards you but with a big roundy end like it’s got a spherical end.

So I started drawing pictures on paper and came up with this :

What my brain looks like

I knew I had to draw two circles (one for each end of the line) but I didn’t know which points on the circles to draw the line between. Well I won’t bore you with my working out, but in the end I opted for a trig solution, even though I’m fairly sure there’s a really nice vector solution. (Please comment if you’re a vector maths genius 🙂

Here’s the final working swf, you can move the points around and adjust the radii and always get a nice drawn line with no noticable join at each circle.

[kml_flashembed movie=”/wp-content/uploads/manual/2008/linetests02.swf” width=”480″ height=”300″ FVERSION=”9″ QUALITY=”high” /]

So now I’ve just got to implement these new lines into PV3D… I’m hoping to do it later today.

11 replies on “Drawing 3D perspective lines in Flash”

Been working on a vector based solution… I can get so far but then have to resort to trig to do the final step.
Start with these definitions:
* the vector _x0_ is the centre of one circle
* the vector _x1_ is the centre of the other
* the vector _r0_ is the radius of the first circle, in the direction of the point we want to draw our line from (_t0_)
* the vector _r1_ is the radius of the second circle, in the direction of the point we want to draw our line to (_t1_)

We know that the vector from _t0_ to _t1_ (_t1_ – _t0_) is at 90 degrees to _r0_, and _r0_ is parallel to _r1_ (based upon your diagrams, which I assume are correct).

Therefore (_t1_ – _t0_) * _r0_ = 0, but we know that _t0_ = _x0_ + _r0_ and _t1_ = _x1_ + _r1_, and we can define _r1_ as n * _r0_, where n = |_r1_| / |_r0_|, so we end up with this:

[(_x0_ + n_r0_) – (_x1_ + _r0_)] * _r0_ = 0

Do a bit of rearranging and you end up with this:
_r0_ * (_x0_ – _x1_) = (1 – n) * |_r0_|^2
…where everything is a known quantity except the _r0_ on the far left. This is where I have to resort to trigonometric methods – you could use the definition of the dot product as |a||b|cos(theta) to work out the angle of _r0_ and from there get to the answer. But maybe there’s a neater way to solve that last step.

Hope you followed all that!

Andy
(from barcampbrighton2)

Hey guys, glad you like it so far – integrating it into PV3D is gonna be a bit tricky though… but I’m on it.. .

Andy! Nice work, your vector maths is clearly a lot better than mine… I pretty much understood your explanation though.

Maybe I’ll post a code snippet later, the only possible problem with my algorithm is that I need to get the distance between the 2 points, and as we all know, the Math.sqrt method is heavy on the CPU.

I don’t mind trig solutions though, as long as there aren’t any sqrts involved! So how would you calculate the angle of r0?

cheers!

Seb

hey keith! All that work and you just notice your sliders huh? 🙂

But yes should have credited you, sorry! Thank you for your nice easy components… love em!

@nik, yeah I’ve got a couple of sessions planned for FlashBelt, wait and see 🙂

cheers
Seb

Very inspirational Seb! Can’t wait as I see this
line effect all the time on commercials on television and it will be cool to have it in Papervision.

Hey Seb, as always your examples are inspirational.

Lately I have found a nice workflow between Illustrator -> Blender -> Papervision3D combined with Jim Armstrong’s Singularity library to generate cubic bezier curves.

Basically it would allow one to draw abstract line effects similar to those shown on this site.

//veerle.duoh.com/blog/comments/using_the_blend_tool_and_distort_zig_zag_effect_in_illustrator/

Let me know if you are interested and I can forward it on. It might make a nice tut.

Cheers, Tim

@Evan – thanks!

@Irishman – I’m not sure exactly what you mean but sounds interesting… fire me a mail and I’ll let you know!

cheers

Seb

[…] perspective correct line by ourselves. I have found a brilliant piece of code just for the task at Seb Lee-Delisle’s blog. This is fantastic piece of geometry […]

Comments are closed.