Graphics

Drawing Bezier Handles

May 4th

I keep on getting e-mails on my Bezier code and in between them, how to draw the Bezier Handles.

It is very simple and it is pure trigonometry knowledge to pull it off.

To draw the handle is very easy. Tap or Click where you would like the first anchor point is going to be, then drag towards the desired curvature is achieved. This draws the first handle. (startPt, anchorPt). If it is the first point in the curve, you will have to make sure to check in case yo don’t want to draw the reflection of the handle for the “previous curve segment”. If it is not the first point on the curve, then most likely you will want to draw the reflection of the handle for the next curve section. (A-la Illustrator Pen tool).

It goes something like this.

1st click = startPt
endDrag = anchorPt.
draw the first part of the handle
find the length of the handle using standard distance formula
find the arctangent of startPt.x and anchorPt.x over startPt.y and anchorPtr.y
set opposite.X to the startPt.x minus the length of the segment multiplying it by the cosine of the arctangent
set opposite.Y to the startPt.y minus the length of the segment multiplying it by the sine of the arctangent
now draw the second part of the handle.

As an exercise, I will leave it up to you to write the code, but this is basic 101 trig and you should not have any problem drawing the Bezier handle.

Carlos

Geometric Data Structures for Computer Graphics

Mar 24th

Posted by Carlos in Carlos Icaza

No comments

New weekend reading.

Get it at Amazon.

Like the book title says, geometric data structures play an important part in CG and this book is an essential book to have in your arsenal with anything having to do with GC. Particular attention in Ch. 7 “Proximity Graphs” in regards to polygonal meshes. Interesting.

Also, “Polygon Mesh Processing”, great book on one of my favorite CG subjects. (Does the fact that you can also ping this site through http://b-splines.com/ tell you anything?)

Also from Amazon.

Carlos.

Afternoon Coffee with Dr. Brian Barsky.

Feb 7th

Posted by Carlos in Carlos Icaza

No comments

Yesterday, Monday the 6th of February, I had the pleasure to sit down and enjoy a cup of cappuccino with one of the most influential figures in the field of splines and its used in Computer Graphics and Geometric Modeling. I had coffee with Brian Barsky, co-author of the book “An Introduction to Splines for use in Computer Graphics and Geometric Modeling”.

It was a nice afternoon and could not have asked for a better bay-area day. No clouds, sunny and by the time we met for coffee, the sun had began to set in. The UC Berkeley campus was a block away from where we sitting and by the time we got our drinks the action on the street was happening with students filling up the sidewalk with murmurs about classes, school topics and where to catch dinner and planning for the day ahead.

But inside the coffee shop it was different. It was relatively quiet. And after we got our coffee’s, we sat and managed to chat for about two hours, perhaps a bit longer, on topics ranging from splines, digital/film photography, to mobile devices and its use in medicine, and other technologies that will carry us into the future.

To transcribe the over two hours of talk would do injustice to our chat, but having coffee with one of the giants in a field of computer graphics, which has given us the special effects we see today in movies, and its use in other fields is purely amazing. Dr. Barsky was very effusive, and he glistened while taking about current and future technologies and how we can use those technologies in the mobile world to bring the world closer than what it is now.

Thank you Dr. Barsky for allowing me to enjoy a cup of coffee with you while we talked about “splines” and other topics.

Barsky’s book

To learn more about Dr. Barsky, visit his web site >>

Coincidentally, Dr. Tony DeRose, who is now Research Group Lead at Pixar Animation Studios >> was Dr. Barsky’s PhD. student.

Carlos.

Innovation Paralysis and The Shiny Object Syndrome

Sep 5th

Posted by Carlos in Adobe

1 comment

Innovation Paralysis

It shouldn’t be a surprise to all of us here what has been happening in our industry in regards to innovation and the paralysis wrought into itself.

Why this innovation paralysis? For starters, companies get too big and complacent. Companies reach number one and then, it is a matter of holding on and milking the cash-cow to the last drop. Getting too big is not the problem actually, as I have seen this in smaller companies as well; holding on to the cash cow it until you suck the life of it, and even continue to maintain it after it has had its heyday, on life support.

The most blatant and recent example of this paralysis, and I have seen plenty, is that of Nokia. Finland’s mighty mobile company, which at one point was producing 1 million phones every three days. MBA Schools had “case studies” on how Nokia’s assembly line and production lines were to be studied in order to build successful and profitable assembly lines. And today, we find ourselves pondering the future state of this one and formidable mobile handset maker Nokia. Am not saying that they are doomed and will fold in a few days, but it is the paradox of holding on to the cash-cow which produces innovation paralysis, near slightness and my favorite, the Emperor with No clothes Syndrome.

My personal experience with Nokia was that of hubris. They were Nokia, and you never asked how high, you just jumped.

That was a few years ago, circa 2005. We are half way through 2011 and seven “computer years” is not a lot considering the process of manufacturing new devices, etc, and look at Apple, reshaping the world of mobile, a company that was not and was not known to have become a mobile company. Apple, true innovators at heart, knowing, and knowing from experience, that you have to “sacrifice” ( a softer word than killing ) your first borne.

Apple killed the Apple ][ line in order to make way for the Macintosh. Lesson learned. Macintosh is cannibalizing its sales of its laptop, desktops with the iPad/iPhone. They learned their lesson early. They experienced it first hand. We all remember clearly when Apple was ready to go out of business. Can you imagine what this mobile world would look like if companies like Nokia, Microsoft, RIM would not have been shaken up. Android from Google was a competitor to RIM, what would this world look like. I can only imagine an OS like Windows 95 running on a Series 60 from Nokia and with the worst interface ever.

But what irks me the most is what his happening lately. Innovation paralysis is happening not just because the companies find a cash-cow and decide to milk it and CEOs walk around naked, but because of the pure and simplest form of stifling innovation due to of the patent wars. If I could draw who is suing who on a piece of paper, it would look like one giant doodle. Arrows pointing everywhere and no clear winner.

Patents are a mere form of innovation paralysis. Lodsys suing independent developers, Apple suing Google and Samsung, Microsoft suing HTC, Oracle suing Google and HP, HTC suing who?. Kodak suing Apple. Kodak up for sale. Buy Kodak so we can get the patents and lets sue the pants of everyone we can. Patent troll companies suing X, and Y and Z. Am not an expert on patents, nor do I want to be one, I am not allowed to read patents, or get near any piece of paper that describes a patent, but when there is this over abuse of power, it stifles innovation, and the ones who end up paying the price are the independent developers and users, aka your trusting loyal customers.

And honestly, I have not seen this blatant suing over patents in my history in the computer industry dating back to 1984. Some of the most "shocking" cases of yesteryear were those of when an executive jumped to a competing company and "took" trade secrets or employees with her. Nobody talks about monopolies anymore. Now days is not even "what's in your patent portfolio? lets cross license" rather, "You are violating my patent. Pay up."

The Shiny Object Syndrome

A few weeks back I introduced our Advanced Technologies Group inside of Ansca. See http://atg.anscamobile.com

I received a lot of feedback and big thumbs up for starting a new group focused entirely in researching advancements in the field of computer graphics, mobile, UI, programming principles and others. It is a group that can focus on new initiatives without disturbing the core of our Corona SDK team. It is, as I wrote "to be able to deliver forward thinking technologies that can ultimately either become products themselves or implement as features into our current or future products."

So what does this have to do with the shiny object syndrome? A lot. Companies large or small think that being the best is by the number of features the product has vs the competition. Its true. I see our competitors trying to add features to their products because the marketing department thinks that winning is by having 10 more features than a competitor. The problem is, those ten so-called features are not essential to the success of its customers nor the success of the product. And worst, the features set is limited due in large part because the only thing against software development is time. Time is our only enemy. Getting there first is what matters says the marketing team. Really, how many search engines were there before Google?

I have seen products large and small suffer from "feature-ritis" and I know first hand what the syndrome can do to the product. It becomes a nightmare to maintain and to support. And when it comes to backwards compatibility, good luck. It can sink your product faster than the Titanic.

So what do features have to do with the shiny object syndrome? Exactly that. Two fold. One, this "shiny object syndrome" becomes the "must have" [insert your favorite new mobile/computer jargon] feature, completely disrupting the flow of the company’s product and engineering team, and two, the feature is half-ass implemented (crippled) because you only need enough of the feature (and not enough time) to be able to “check” it off on the feature list comparison matrix.

Strangely enough, we all suffer from feature-ritis, but there is a difference between the feature list of the MVF requested by the users, vs the MVF requested by marketing. (Most Valuable Features in case you didn’t recognize the TLA).

I come from a world of monolithic applications with 18 months cycles and with a code base over ten years old to mobile products where the lifecycle is in mere months. (Nokia was notorious for shipping new devices every so many months apart). In mobile, 18 months matters, companies have been bought (motorola) and companies throw away entire business units (Palm/webOS). And I have first hand experience on both sides of the fence (Illustrator/FlashLite).

And this is where our ATG comes into play. A new group chartered with the freedom to explore the Shiny Objects of our industry without disturbing our core Corona SDK engineering team.

One thing that all of you must understand, innovation/ideas/exploration/disruption and challenge is encouraged in my company, so everyone is free to participate to introduce ideas, etc., not just ATG, so I don’t want you to think that only ATG is pegged with coming up with new ideas. We will switch people around if we can and time permits, but the impetus behind this new group is to foster innovation, break out of the paralysis, and avoid the trap of the shiny object syndrome.

It is, after all, what I always believe in, in the entrepreneurial spirit in us, which drives us and enables us to innovate and forge ahead into uncharted territories.

And we are not afraid to change, to adapt and to disrupt. And we will continue to out-innovate, out pace and displace our competitors.

Carlos

Moving an object along a Bezier Curve. Part III

May 19th

Posted by Carlos in ansca

No comments

In my previous post, Moving an object along a Bezier Curve. Part II, I discussed how to compute the first derivative of a Bezier curve in order to find its tangent. Today, we will find the 2nd derivative of a beizer curve.

The 2nd derivative is computed by

$\frac{ (d^2)}{(dt^2)} = ((1-t)^3 P_0+3 (1-t)^2 t P_1+3 (1-t)^2 P_2+t^3 P_3)$ =

$6 (P_0 (-(t-1))+P_1 (3 t-2)+P_3 t+P_2)$

.
.
local px2ndDer = 6 * (p1.x * ( -1 * ( 1-t )) + p2.x * ( (3 * t) -2 ) + ( p4.x * t ) + p3.x )
local py2ndDer = 6 * (p1.y * ( -1 * ( 1-t )) + p2.y * ( (3 * t) -2 ) + ( p4.y * t ) + p3.y )
.
.

Why is it important to find the 2nd derivative of a curve in regards to moving an object along a path? It is to calculate the curvature radius of the path at specified parameter t. It measures the rate of change of direction of the curve. It is the tangent’s line turn per unit distance moved along the curve.

To compute the curvature, using the first and second derivative, it is as follows:
$K = \frac { \begin{vmatrix} x'y'' - y'x'' \end{vmatrix} } { (x'^2 + y'^2)^\frac{3}{2} }$

To compute the curvature radius, it is easy, its the inverse. And it is denoted as follows:

$R = \frac { (x'^2 + y'^2)^\frac{3}{2} } { \begin{vmatrix} x'y'' - y'x'' \end{vmatrix} }$

Carlos

Calculating The Length of a Bezier Curve. Part I

May 12th

Posted by Carlos in ansca

No comments

One of the fastest way to calculate the length of a bezier curve is by breaking down the curve into straight-line segments, and then, obviously, add the length of each segment to get the final length of the curve.

Looking at the code from my previous post “The Cubic Bezier Form and Code”, you can see where each segment is calculated. All that we would need to do is to add a hold value to hold the previous segment end point and compute the distance to the current start of the new segment.

.
.
.

local length = 0;

if ( j > 1 ) then

local xx = x - prevPt.x
local yy = y - prevPt.y

length = length + math.sqrt((xx*xx) + (yy*yy))

end

prevPt.x = x;
prevPt.y = y;

.
.
.

This method is what I would consider a brute force method. I will do a follow up on finding the length of Bezier curves by using subdivision, and arc-length computation, To learn more about calculating the length of a bezier curve, see Jens Gravesen: “Adaptive subdivision and the length of Bezier curves” and Gravesen, Jens, “The Length of Bézier Curves”, Graphics Gems V, p. 199-205, code: ch4-7.

Moving an object along a Bezier Curve. Part II

May 5th

Posted by Carlos in ansca

No comments

Part II of our of our journey in having an object move along a Bezier curve, and moving towards re-parametrizing the curve, we first need to understand a very important aspect of a specific attribute of a Bezier curve and that is computing its tangents via its first derivative.

By using the form on my first post on Beziers,

$\mathbf{P}(t)= (1 -t) ^3 \mathbf{P}_0+3(1-t)^2t\mathbf{P}_1+3(1-t)t^2\mathbf{P}_2+t^3\mathbf{P}_3$

we can easily observe the first derivative is obtained as follows

$c'(t)=-3(i-t)^2\mathbf{P}_0+3((1-t)^2-2t(1-t))\mathbf{P}_1+3(2t(1-t)-t^2)\mathbf{P}_2+3t^2\mathbf{P}_3$

which in turn can be reduced to

$c'(t)=3(\mathbf{P}_1-\mathbf{P}_0)(1-t)^2+3(\mathbf{P}_2-\mathbf{P}_1)2t(1-t)+3(\mathbf{P}_3-\mathbf{P}_2)t2$

lastly, giving us

$c'(t)=3(1-t)^2(\mathbf{P}_1-\mathbf{P}_0)+6t(1-t)(\mathbf{P}_2-\mathbf{P}_1)+3t2(\mathbf{P}_3-\mathbf{P}_2)$

local pax = 3*(p2.x-p1.x)*((1-t) *(1-t));
local pbx = pax + 6*t*(p3.x-p2.x)*(1-t)
local pcx = pax + pbx + 3*(p4.x-p3.x)*(t*t);

local pay = 3*(p2.y-p1.y)*((1-t) *(1-t));
local pby = pay + 6*t*(p3.y-p2.y)*(1-t)
local pcy = pay + pby + 3*(p4.y-p3.y)*(t*t);

And why is this important? Because when you want to do text on a path, move the text object along the path, (as well as an object that you want to be perpendicular to the curve) it needs to project away from it. Thus the Y direction is perpendicular to the curve.

Here is an image of the tangents of a curve at a given t, perpendicular to the curve. You can also see the parametrization not being equal in the corner cases of the curve.

Moving an object along a Bezier Curve. Part I

Apr 23rd

Posted by Carlos in ansca

No comments

Moving along in our topic of bezier curves and having an object move along the curve path, I will briefly demonstrate the easiest way to move an object along a curve path, and talk about its limitations.

It is pretty straight forward to move an object along a path. For a bezier curve, we first get all the points that draw the curve and depending on how granular the curve, the number of points you will get back. It is a common trick to render the curve with average granularity, and then re-compute the points at a higher granular level to have as many points as possible to move the object along the path, conversely, you can computer lesser points to give the impression of the object moving ‘faster’.

Unfortunately, the difficulty lies in specifying the object’s speed if using t values. The computed x and y coordinates are not representative of a curve’s length, and a curve’s length and its relationship to the value of t is non-linear.

Pseudo code for this would be something like

local object = display.newImage("tank.png",-100,-100);
local points = computeBezierPoints(granularity,segment[i]);

local p = points[1];

local prevX = p.x;
local prevY = p.y;

local angle = 0;
local prevAngle = angle;

for i = 2; #points do
p = points[i];
angle = math.atan2(p.y - prevY,p.x - prevX);
angle = angle * (180/PIE)

object.x = p.x;
object.y = p.y;

object:rotate(angle-prevAngle);

prevAngle = angle;
prevX = p.x;
prevY = p.y;

end

The above sample shows the first step towards moving an object along a curve path. But as you will see from the two images below, due to the nature of parametrization, t values are not evenly spaced, and depending on the curve, the object will move at different speeds at different t values on the curve segment.

The sample code to move an object along a bezier curve can be obtained by clicking here >>

So the question is, how do we make it so that the object moves seamlessly along the path and not at different speeds depending on its t value?

The answer is simple, computing it, is not. A way to do this is by computing the arc length the curve and re-parametrizing the curve . See “Arc Length Parametrization of Splines Curves” by John W. Peterson at >> .

Next up, what it takes to re-parametrize a curve, but before that, how to render Corona text along a path to demonstrate more fun with Bezier curves.

Carlos.

$latex-image-4$

The Cubic Bezier form and code.

Apr 20th

Posted by Carlos in ansca

2 comments

On our march towards creating an object to move smoothly along a cubic bezier curve, we first note that the formula for a Bezier curve is defined as follows:

Which in turn, for a cubic Bezier curve, it expands into

Then, in Corona, we would create a function to compute the points of a curve given the two anchor points, and the two end-handles of the curve. Assume segment is a table of anchor points(P0,P3), anchor handles (P1,P2), and bezierPoints is a table to hold the x,y computed values.

local function computeBezierPoints(granularity, segment)

local inc = (1.0 / granularity )

local t = 0
local t1 = 0

    for j = 0, granularity do 

     t1 = 1.0 - t

     local t1_3  = t1*t1*t1
     local t1_3a = (3*t)*(t1*t1)
     local t1_3b = (3*(t*t))*t1
     local t1_3c = (t * t * t) 

     local p1 = segment[1] -- P1
     local p2 = segment[2] -- P2
     local p3 = segment[3] -- P3
     local p4 = segment[4] -- P4

     local x = t1_3 * p1.x
     x = x + t1_3a * p2.x
     x = x + t1_3b * p3.x
     x = x + t1_3c * p4.x

     local y = t1_3 * p1.y
     y = y + t1_3a * p2.y
     y = y + t1_3b * p3.y
     y = y + t1_3c * p4.y

     bezierPoints[j+1].x = x
     bezierPoints[j+1].y = y 

     t = t + inc

    end -- for
end -- func

Then to draw the curve itself, one just needs to create a line by calling newLine with the computed points in bezierPoints.

 local function drawBezierSegment ()

     local line = display.newLine ( bezierPoints[1].x,bezierPoints[1].y,bezierPoints[2].x,bezierPoints[2].y);

     for i = 3, granularity do
           line:append(bezierPoints[i].x,bezierPoints[i].y)
     end 

     line.setColor(r,g,b)
     line:width = 1
end

For more on drawing/manipulating a Bezier curve in Corona look in our code exchange at Bezier Curves

Up next, why it is important to reparametrize the curve and the actual moving of an object along the curve.