Let’s look at the following equations:
1.
2.
From (1) we get that , thus
From (2) we get that , thus
But
And thus …
QED
Let’s look at the following equations:
1.
2.
From (1) we get that , thus
From (2) we get that , thus
But
And thus …
QED
The Bézier curve is a popular way to draw curves in graphic editors such as GIMP and Inkscape. A curve of degree n is defined using n+1 points, where the first and last are the start and end points of the curve, respectively, and the rest are control points.
For example:
The curve in the image above is a cubic Bézier curve. It has start and end points (filled with blue) and two control points (with no fill).
Each control point is attached by a straight line to a start or an end point, for a reason:
A Bézier curve is defined as the collection of points that are the result of the function
B(t) for every t in [0,1].
A linear Bézier is simply a straight line between to points P0 and P1. The function is:
(1 – t)BP0 + tBP1
For n>1, Be P0, P1 … Pn the list of the curve’s points. Then the curve’s function is defined as
BP0P1…Pn(t) = (t – 1)BP0P1…Pn-1(t) + tBP1P2…Pn(t)
Or, in its explicit form:
(Not a very precise definition because 00 is not a number, so use the value 1 instead.)
This equation can be proved easily using the Pascal triangle.
From the explicit definition, you can see that the translation is done by adding the same coordinates to which of the curves start, end and control points.
because:
Rotations and translations are done by a transform matrix. So, if T is a transform matrix:
TBP1,P2,…Pn = BTP1,TP2,…TPn
Now, in a Bézier curve, BP0P1…Pn(t), The line P0 – P1 is tangent to the curve at point P0, and Pn – Pn-1 is tangent to the curve at point Pn
To prove this we’ll have to show that the derivative of a Bézier curve of degree n at the start and end points is a non-zero scalar multiplied by the difference between P1 and P0, and between Pn and Pn-1.
That scalar is n
.
For n=1;
BP0,P1 = (1 – t)P0 + tP1
Let’s derive:
B’P0,P1 = -P0 + P1
Good!
Let’s assume it’s correct for n, and prove for n+1
BP0,P1…,Pn+1(t) = (1 – t)BP0,P1…,Pn(t) + tBP1,P2…,Pn+1(t)
Let’s derive:
B’P0,P1…,Pn+1(t) = -BP0,P1…,Pn(t) + (1-t)B’P0,P1…,Pn(t) + BP1,P2…,Pn+1(t) + tB’P1,P2…,Pn+1(t)
Now, to get the tangent to the curve at p0, let;s assign t=0:
B’P0,P1…,Pn+1(0) = -BP0,P1…,Pn(0) + B’P0,P1…,Pn(0) + BP1,P2…,Pn+1(0) =
= – P0 + n(P1 – P0) + P1 = (n+1)(P1 – P0)
Good!
Now, to get the tangent to the curve at p0, let;s assign t=1:
B’P0,P1…,Pn+1(1) = -BP0,P1…,Pn(1) + BP1,P2…,Pn+1(1) + B’P1,P2…,Pn+1(1) =
= – Pn + Pn+1 + n(Pn+1 – Pn) + P1 = (n+1)(Pn+1 – Pn)
QED
SVG supports Bézier curves of up to the third degree. A path consisting of such curves are good approximations of shapes provided that you have enough points.
If you’ve taken courses in computer sciences, you probably know the Tower Of Hanoi algorithm. The task is to move a tower of discs from the source rod the the destination using an auxiliary rod. Each disc should be placed on a bigger one all the time.
The solution is to move all discs on top of the biggest one to the auxiliary rod, then move the biggest disc to the destination rod and then move all the rest to the destination (according to the rules of course, and one disc at a time).
The function that moves n
discs from src
to dst
using aux
looks like:
function moveDiscs(n, src, dst, aux){
if (n > 1)
moveDiscs(n-1, src, aux, dst);
print("Move from " + src + " to " + dst);
if (n>1)
moveDiscs(n-1, aux, dst, src);
}
We’ll use that function later to prove that the non-recursive algorithm does the same.
A naive iterative solution is to use a binary search and find for each move of a disc, the parameters passed to moveDiscs
when n=1
. This is crazy! We don’t want time complexity o(n)
just to move the first disc.
Let’s look at a better solution:
Repeat the 3 steps in table 1 until all discs are moved, depending on the value of n
:
Table 1:
If n is even | If n is odd |
---|---|
perform a legal move between src and aux | perform a legal move between src and dst |
perform a legal move between src and dst | perform a legal move between src and aux |
perform a legal move between aux and dst | perform a legal move between aux and dst |
Note: perform no more step after all discs have been moved to the destination.
For n
= 1, just move a disc from src
to dst
For n
= 2, take a look at the recursive function.
For n
≥ 3:
The total number of moves is 2n – 1
Let’s assume our algorithm works for any natural number n
and prove for n
+1:
Let’s look at the first call to moveDiscs
inside itself:
moveDiscs(n-1, src, aux, dst); // Remember that we prove for `n+1`, so `n-1` in the function actually means `n`
Let’s look how it is performed:
Per our assumption, the sequence for steps 1 thru 2n – 1 is
If n is even | If n is odd |
---|---|
perform a legal move between src and dst | perform a legal move between src and aux |
perform a legal move between src and aux | perform a legal move between src and dst |
perform a legal move between aux and dst | perform a legal move between aux and dst |
Because if n
is odd, n+1
is even and vice versa, we get that the first steps are performed correctly by the iterative algorithm
This is when we move a disc from src
to dst
If n
is even, 2n≡1 mod 3, thus it matches step 1 in Table 1 for odd n+1
.
If n
is odd, 2n≡2 mod 3, thus it matches step 2 in Table 1 for even n+1
.
Thus, our iterative algorithm is still correct.
Those steps are performed by the second call to moveDiscs
inside itself:
moveDiscs(n-1, aux, dst, src); // Remember that we prove for `n+1`, so `n-1` in the function actually means `n`
If n is even | If n is odd |
---|---|
perform a legal move between aux and src (step 2 for odd n+1 ) | perform a legal move between aux and dst (step 3 for even n+1 ) |
perform a legal move between aux and dst (step 3 for odd n+1 ) | perform a legal move between src and aux (step 1 for even n+1 ) |
perform a legal move between src and dst (step 1 for odd n+1 ) | perform a legal move between src and dst step 2 for even n+1 ) |
In this table we see the steps that follow step 2n.
Thus, the algorithm works correctly for the last part, and thus our whole algorithm is correct.
You can now watch a working Hanoi animation here.
Table Of Contents:
Would you like to add posts to your blog with a cool editor? Do you want to publish in Blogger, WordPress, Tumblr, etc.?
Try StackEdit Click the link you’ve just seen, and start editing a markdown document. Forget about switching from WYSIWYG to HTML and back. Enjoy a split-screen instead: one side is where you type in markdown format, and the other is the WYSIWYG result.
Editing a post is simpler than editing an HTML page, and sometimes even simpler than working with the text editor provided by the blogging site. For example, if you add code to your post, just write it between two lines starting with three back-ticks (back-quotes).
For example:
‘‘‘
var j=3;
‘‘‘
will be displayed as:
var j=3;
You can learn more about markdown syntax, by clicking the syntax icon in from the floating menu at the bottom:
Before publishing, let’s set variables, such as tags. Type your variables, between two lines, consisting of three dashes as follows:
—
variable: value
—
For example:
—
tags: tag1, tag2, tag3
—
You can see which variables you can set, when you decide where to publish your post.
To publish a post, click on the ‘#’ menu, and choose publish as shown in the following image:
After choosing the site to which you want to publish, click OK or Cancel (if you want to set the interpreted variables, for example.)
NOTE: It is recommended to upload images to the site before including it in your document.
Now, you can use StackEdit to update your post.
Enjoy!
Written with StackEdit.
How do you declare a static variable in a JavaScript function?
Not with the word “static“.
In JavaScript “function” is a variable type similar to “object“.
The difference is that the reference to a function inside itself is not this
but arguments.callee
.
An example of using arguments.callee
is the following function that returns itself:
function func(){
return arguments.callee;
}
You can add arguments to arguments.callee
. To initialize it the first time, check first if it is not defined. For example:
if (typeof(arguments.callee.myStaticVar)!="undefined")
arguments.callee.myStaticVar=0;
Following is an example function in [rhino(http://rhino.org) JavaScript(run from the command line):
function _example(){
var thisFunction = arguments.callee;
if (!thisFunction.static){
thisFunction.static=0;
}
++thisFunction.static;
print("This function has been called: " + thisFunction.static + " times");
};
In this example, you can change the static variable’s value without calling the function using _example.static = "some value";
.
To prevent this, encapsulate your function using a function called once, for example:
(function(){
function _example(){
var thisFunction = arguments.callee;
if (!thisFunction.static){
thisFunction.static=0;
}
++thisFunction.static;
print("This function has been called: " + thisFunction.static + " times");
};
example=function(){
_example();
}
})();
Now, each time example()
is called, it will increment the variablestatic
, but the variable cannot be incremented without calling example
because _example
is private.
Written with StackEdit.
I am a blog post written in Markdown, and sent from the StackEdit editor.
Do you know those files with suffix ‘.md’? They are markdown documents, and they are easy to write and easy to read because they don’t have to contain HTML tags!
Here’s an example of how to add a link:
Type “[The Example Site](http://example.com)” to get the following link:
This tool can export your document as HTML. sponsors can use this tool to export documents as PDF..
Written with StackEdit.
Browsers supporting HTML5 allow you to draw on the browser’s screen without preparing an image file before. Drawing on a canvas is done using the wonderful Javascript language. If you want to draw a 2-dimensional image on canvas element ‘cnv’, get the drawing context using:
var ctx = cnv.getContext("2d")
And use that context to draw everything using the standard functions:
moveTo, lineTo, arc, fillRect, etc.
Learn more about drawing here.
You can use the functions to create more complicated shapes easily thanks to transform functions:
The origin(0,0) of the canvas is defined to be the top-left pixel of the canvas element. And the coordinates are given in number of pixels. This can change by using transforms.
The transformation functions are:
a,b,c,d,e,f are values in the matrix:
The values a,b,c,d are used for rotating and scaling. e,f for translating.
Other useful methods of the context are:
The algorithm for drawing the Koch Snowflake can be found in the post Drawing The Koch Snowflake Fractal With GIMP.
Here’s an example in Javascript:
function drawSide(ctx, len){ if (len > 1) { var thirdOfLen = len / 3.; var rotationAngles = [0, -Math.PI / 3, 2 * Math.PI / 3., -Math.PI / 3]; rotationAngles.forEach(function(val){ if (val != 0){ ctx.translate(thirdOfLen, 0); ctx.rotate(val); } ctx.save(); drawSide(ctx, thirdOfLen); ctx.restore(); }); } else { ctx.moveTo(0,0); ctx.lineTo(len,0); //ctx.stroke(); } } ctx.translate(startX, startY); for (i=0; i<3; i++){ ctx.save(); drawSide(ctx, sideLength); ctx.restore(); ctx.translate(sideLength,0); ctx.rotate(2*Math.PI/3); } ctx.stroke(); }
Warning: using ctx.stroke() after every little line you draw might make your code inefficient, and slow down your browser.
Transformation functions are also part of the Processing language.
cURL is a tool used for browsing the web from the shell or command-line. It supports many internet protocols, such as HTTP, FTM, POP3, IMAP, SMTP and more. See the full list here.
With libcurl installed in your system and the C API, you can browse using a C program. You can also install the extension cURL for PHP.
$curl_handle = curl_init();
curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,true);
will cause cURL to store the output in a string; the value ‘false’ will cause cURL to send it to the standard output.
$out=curl_exec($curl_handle);
curl_close($curl_handle);
As long as the handle is open, you can repeat steps 2 and 3 as many times as you need.
Another useful cURL function is curl_getinfo. In the example below, I have used
"$httpCode = curl_getinfo($curl_handle, CURLINFO_HTTP_CODE);"
to determine if the login action was successful.
Publishing a text message in LinkedIn is simple: surf to LinkedIn, find the relevant form in the response and submit it. I’ve found the login form and the publish form using HTML Dom documents. Then populated post vars according to them, and connected to the URL given in the “action” attribute of the form. The code is run in PHP CLI in Linux (“stty -echo” is a system call that suppresses the echoing of input characters in Linux).
In this step cURL will send a request to get the content in linkedin.com This is the first time, so the user is not logged in, and there are no cookies. The option CURLOPT_USERAGENT will make the server believe that the request has been sent from a real browser. The option CURLOPT_COOKIEJAR will define the file from which to store and retrieve cookies.
Following is the code:
<?php error_reporting(E_ERROR | E_PARSE); //Suppress warnings $curl_handle = curl_init(); // Connect to the site for the first time. curl_setopt($curl_handle,CURLOPT_URL,"https://www.linkedin.com"); curl_setopt($curl_handle,CURLOPT_USERAGENT,'Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:35.0) Gecko/20100101 Firefox/35.0'); curl_setopt($curl_handle,CURLOPT_RETURNTRANSFER,true); curl_setopt($curl_handle,CURLOPT_COOKIEJAR,'/tmp/cookies'); $out = curl_exec($curl_handle); if (!$out){ echo "Error: " . curl_error($curl_handle) . "\n"; die(); }
In this step your script will read your e-mail address and password from the standard input (“php://stdin”), then populate the login form, and submit it. Using the Firefox extension DOM Inspector, I found that the Id of the form element is ‘login’, the username (e-mail) field’s name is “session_key”, and the password field’s name is “session_password”. The script willl submit the form with the input fields of type ‘hidden’ and with the entered e-mail and password. If the login was successful, the http code returned in the header would be 302, which means the output is returned from another address.
Following is the code:
$stdin = fopen('php://stdin','r'); echo "Enter e-mail:"; $email = trim(fgets($stdin)); system("stty -echo"); echo "Enter Password:"; $pass = trim(fgets($stdin)); system("stty echo"); echo "\n"; // Get the form inputs. $doc = new DOMDocument(); $doc->loadHTML($out); $form = $doc->getElementById('login'); $inputElements = $form->getElementsByTagName('input'); $length = $inputElements->length; $inputs = Array(); for ($i=0;$i<$length;$i++){ $elem=$inputElements->item($i); $name = $elem->getAttribute('name'); $value = $elem->getAttribute('value'); $inputs[$name]=$value; } $inputs['session_key']=$email; $inputs['session_password']=$pass; $keys = array_keys($inputs); $postvars = ''; $firstInput=true; foreach ($keys as $key){ if (!$firstInput) $postvars .= '&'; $firstInput = false; $postvars .= $key . "=" . urlencode($inputs[$key]); } $submitUrl = $form->getAttribute('action'); curl_setopt_array($curl_handle, Array( CURLOPT_URL=>$submitUrl, CURLOPT_POST=>true, CURLOPT_POSTFIELDS=>$postvars )); $out=curl_exec($curl_handle); $httpCode = curl_getinfo($curl_handle, CURLINFO_HTTP_CODE); if ($httpCode != 302) die("Error - could not connect: $httpCode\n");
After a successful login, the relevant data is stored in the cookie jar associated with the cURL handle. This time the script will read the content of the home page with the user logged in. A logged-in user can post status updates. This time, the operation is not complete until the “browser” is referred to the new address. So, we set the cURL option “CURLOPT_FOLLOWLOCATION” to true. In addition, PHP cURL allows to send an associative array as the value of the option “CURLOPT_POSTFIELDS”, a more elegant way to send POST data.
Following is the code:
// Post the message curl_setopt($curl_handle, CURLOPT_URL, 'https://www.linkedin.com'); $out = curl_exec($curl_handle); $doc = new DOMDocument(); $doc->loadHTML($out); $form=$doc->getElementById('share-form'); $inputElements = $form->getElementsByTagName('input'); $length = $inputElements->length; $inputs=Array(); for ($i=0;$i<$length;$i++){ $elem=$inputElements->item($i); $name = $elem->getAttribute('name'); $value = $elem->getAttribute('value'); $inputs[$name]=$value; } $inputs['postText']="Hello! I am a message sent by a PHP script."; $inputs['postVisibility2']='EVERYONE'; $keys=array_keys($inputs); $formAction = $form->getAttribute('action'); if (substr($formAction,0,5)!='http:') $formAction = 'http://www.linkedin.com' . $formAction; curl_setopt_array($curl_handle, Array( CURLOPT_URL=>$formAction, CURLOPT_POST=>true, CURLOPT_FOLLOWLOCATION=>true, CURLOPT_POSTFIELDS=>$inputs )); $out = curl_exec($curl_handle); curl_close($curl_handle); ?>
CSS3 is the newest CSS standard, and is supported by all modern browsers. Among the new style properties supported in CSS3, there are animation properties. Those properties allows you to animate HTML elements without the need of Javascript. CSS3 allows more animation options than those done by the non-standard yet supported marquee tags. It also allows gradual changes of font sizes, colors, rotation angles, etc.
To make an element or a group of elements (defined by a selector) animated, add animation properties to its selector’s property block. For multi-browser support, writing each animation property twice – once with the prefix ‘-webkit-‘ and once without – is recommended.
In addition, you should add two animation rules: “@keyframes” and “@-webkit-keyframes” to describe the animated changes of elements.
NOTE: Chrome, Safari & Opera require the ‘-webkit-‘ prefix` Firefox and Explorer 10+ do not.
For my own convenience, please allow me to drop the ‘-webkit-‘ prefix from the following attribute names:
Here’s a little code example:
div { position: relative; overflow: hidden; /* Chrome, Safari, Opera: with the prefix '-webkit-', others without. */ -webkit-animation: myfirst 10s; animation: myfirst 10s; -webkit-animation-iteration-count: infinite; animation-iteration-count: infinite; -webkit-animation-direction: normal; animation-direction: normal; -webkit-animation-timing-function: linear; animation-timing-function: linear; }
Read more about animation properties here.
A key frame rule describes the gradually changed values at each key frame. The key frame value can be ‘from’, ‘to’ or the percentage of progress.
The syntax is:
@[-webkit-]keyframes animation-name {
keyframe-value: {property-list}
.
.
.
}
Here’s a little code example:
/* Chrome, Safari, Opera */ @-webkit-keyframes myfirst { from {color: red; font-size: 12px; left: 0px;} to {color: black; font-size: 48px; left: 100%; transform: rotate(-90deg)} } /* Standard syntax */ @keyframes myfirst { from {color: red; font-size: 12px; left: 0px; } to {color: black; font-size: 48px; left: 100%; transform: rotate(-90deg);} }
Read more about key frames here.