# PHP & More

## A technical blog about programming in PHP and about technology in general: programming, workarounds and troubleshooting ## Bézier Curves

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:

• The control points allows the user to control the curve intuitively.
• The straight line between the start(or end) point and its control point is tangent to the curve at the start(or end) point.

## The Definition

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.

## Tower Of Hanoi Without Recursion

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 Recursive (and Naive) Solution

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.

## The Iterative Solution

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:

Note: perform no more step after all discs have been moved to the destination.

### Proof

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:

#### Steps 1 thru 2n – 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

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

#### Step 2n

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.

#### Steps 2n + 1 Thru 2n+1 – 1

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`
```

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.

## Blogging with StackEdit

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 the Post

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;``
• To display headers of level H1 or H2, type a line of equal-signs or dashes respectively under tho header text.
• For H1 thru H6, begin the lines with number of pounds equal to the level (#, ##, …, ######).
• Place your bold text between two pairs of asterisks (**bold text**).
• Place your italic text between single asterisks or underscores. (_italic_).
• Hyperlinks: there are two ways to add them, one is to simply type the URL, for example ‘http://example.com, the other is to type the text in brackets, and the link in parentheses, for example: [Example Site](http://example.com). 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.

## Static Variables in JavaScript

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 variable`static`, but the variable cannot be incremented without calling `example` because `_example` is private.

Written with StackEdit.

# Hello, World!

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!

Type “[The Example Site](http://example.com)” to get the following link:

The Example Site

This tool can export your document as HTML. sponsors can use this tool to export documents as PDF..

Written with StackEdit.

## HTML5 Canvases & Transforms

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.

You can use the functions to create more complicated shapes easily thanks to transform functions:

## Transformations: Linear Algebra Made Easy

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:

• scale(x,y): this will make every shape x times wider and y time taller.
• translate(x,y): now coordinate (0,0) will be shifted x units to the right, and y units down.
• rotate(angle): will rotete the axes by given angle in radians.
• transform(a,b,c,d,e,f): If you want to use a transformation matrix
• setTransfrom(a,b,c,d,e,f): reset all transform, and perform transform(a,b,c,d,e,f).

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:

• ctx.save() – to save current transform in a stack (Last In First Out).
• ctx.restore() – to retrieve the trnasform from the top of the stack.

## An Example – The Koch Snowflake

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.

## Implementing Web Sockets With cURL

WebSocket is an internet protocol that allow full-duplex communication between a client and a TCP/HTTP server. This means that data can be passed in both directions simultaneously. Unlike HTTP, in WebSocket protocol, the client doesn’t have to send a request in order to get responses. Incoming messages are handled by event handlers. HTML5 supports the javascript object WebSocket.  This object has the function ‘send’ that sends a message to the server, and event listener defined by the developer:

onOpen(evt) – Connection Opened.

onError(evt) – Error occured.

onClose – Connection Closed.

A little example can be found here.

Support This site

If you like what I write here, please donate.

\$5.00

## How to do it with cURL?

cURL does not support the WebSocket protocol. It won’t process a request if the URL string begins with ‘ws://’. You should use the ‘http’ or ‘https’ prefixes instead -for example ‘http://example.com‘, and define request headers and cURL event listeners yourself. In cURL, you’ll define:

•  A header function using the option ‘CURLOPT_HTTPHEADER’ to check if a connection has been established.
•  A write function using ‘CURLOPT_WRITEFUNCTION’ to handle in-coming messages.
•  A socket function using CURLOPT_OPENSOCKETFUNCTION to obtain an IO socket thru which to send messages to the server.

The WebSocket protocol is standardized by RFC 6455,

The following sections will discuss the parts of a C program implementing a Web Socket.

### The Main Loop

This part creates a cURL handle by calling curl_easy_init(), defines headers, URL and callback functions using curl_easy_setopt(), and finally call ‘curl_easy_perform().

Following is an example:

```#define concat(a,b) a b
handle = curl_easy_init();
header_list_ptr = curl_slist_append(NULL , "HTTP/1.1 101 WebSocket Protocol Handshake");
curl_easy_setopt(handle, CURLOPT_URL, concat("http","://echo.websocket.org"));
curl_easy_setopt(handle, CURLOPT_OPENSOCKETFUNCTION, my_opensocketfunc);
curl_easy_setopt(handle, CURLOPT_WRITEFUNCTION, my_writefunc);
curl_easy_perform(handle);
```

### Obtaining a Socket

The socket is a resource used for sending messages to the server. Messages received from the server will be handled by the write function. Following is a function that returns the desired socket:

curl_socket_t my_opensocketfunc(void *clientp,
curlsocktype purpose,

}

The request header is defined in section 4.1 Client Requirements of RFC 6455.

The response header is defined in section 4.2.1. Reading the Client’s Opening Handshake of RFC 6455.

The response header fields should be checked by the header function. The format of a field is:

title: value <CRLF>

When the last field is received, the data contained in the first argument to the header function is a buffer of lenght two bytes,: <CRLF> i.e. byte 0x0d followed by 0x0a.

The structures of responses is defined here.

### Sending and Receiving Messages

The format of messages is defined in section 5.2. Base Framing Protocol of RFC 6455.

A simple example is an unmask text message. In such a message the 1st byte will contain the hexadecimal value ‘0x81’. The 1st bit denotes that it is the final fragment, and the last 4 bits denotes a text message. The next byte will contain the length if shorter than 126 bytes. If the length is a 16bit number larger than 125 the byte will hold the value 0x7E, and the following 2 bytes the 16bit length. If the message is longer than 65,535 bytes, the 2nd byte will hold the value 0x7F, and the following 8 bytes will hold the length. The rest of the bytes are the payload data.

To send a message, use the C function ‘write’, as foolows:

write(sock, buff, length);

Incoming messages will be handle by the write function, given as the 3rd parameter to the curl_easy_setopt with the option ‘CURLOPT_WRITEFUNCTION’.

## Browsing From The Command Line / Server With cURL

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.

## Steps of a cURL Program

1. Obtain a curl handle
For example:

`\$curl_handle = curl_init();`
2. Set options to the handle.
Define the behavior of curl when executing the request: setting the URL, cookie location, variables passed to the server, etc.
In PHP, you can use curl_setop to set a single option, or curl_setopt_array to pass a PHP array.
For example:

`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.

3. Execute the request.
`\$out=curl_exec(\$curl_handle);`
4. Close the 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.

## An Example – Sharing a Message in LinkedIn

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).

### Step I – Surf to LinkedIn

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_USERAGENT,'Mozilla/5.0 (X11; Ubuntu; Linux i686; rv:35.0) Gecko/20100101 Firefox/35.0');
curl_setopt(\$curl_handle,CURLOPT_RETURNTRANSFER,true);
\$out = curl_exec(\$curl_handle);
if (!\$out){
echo "Error: " . curl_error(\$curl_handle) . "\n";
die();
}```

### Step II – Get the Login Form, Populate It, and Submit It

Following is the code:

```\$stdin = fopen('php://stdin','r');
echo "Enter e-mail:";
\$email = trim(fgets(\$stdin));
system("stty -echo");
\$pass = trim(fgets(\$stdin));
system("stty echo");
echo "\n";
// Get the form inputs.
\$doc = new DOMDocument();

\$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;
\$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");```

### Step III – Post the Silly Message

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
\$out = curl_exec(\$curl_handle);
\$doc = new DOMDocument();
\$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:')

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);
?>```

## CSS Animations (Without Javascript)

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.

## Animation Attributes

For my own convenience, please allow me to drop the ‘-webkit-‘ prefix from the following attribute names:

• animation: animation-name duration;
• animation-iteration-count: number-of-iterations;
number-of-iterations may be an integer or “infinite”
• animation-direction: direction.
direction of change, not only left-to-right or top-to-bottom, but also, for example, from onecolor to another. the values for this property can be: normal, reverse, alternate, alternate-reverse, initial, or inherit,
• animation-timing-function: function
Function can be: linear, ease, cubic-bezier, etc. Read more here.

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;
}```

## Key Frame Rules

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);}
}

```

## Processing: Sketches – Your Multi-Programs

When you start Processing, you get an editor with a sketch name. You will probably want another name for your program, a name that means something. So, to change the name generated by the tool, you choose file->save as. Choose a name, and the tool will create a folder with that name, and a file named <name>.pde.

When you run your sketch – by clicking the button with the triange or selecting ‘sketch->Run …’ (Run In Browser, Run on Device, Run In Emulator, Run, etc. Depending on the mode) – Processing will parse the ‘.pde’ files and the program used for running will create an instance each time you run it.

# Setup and Draw

If you want have things to do upon initiation of your program, define a function named ‘void setup()‘.  To size your canvas call size(width, height). It is recommended to use ‘size’ only once in the setup function, and the whole sketch. A setup command is not called in run time. It is recommended to set the frame rate inside the setup function by calling ‘frameRate(rate)‘, the rate is the number of time the function ‘draw()‘ is supposed to be call every second. If you want an action to take place each time a frame changes, write a “draw” function in one of  your ‘.pde’ files.

# More Than Just Pure Processing

Sometimes, pure Processing is not enough for your application. For example, sound functions do not exist in pure Processing. There are libraries, such as Maxim,  that extend Processing.

Another reason to use more than pure Processing is will to use native widgets (HTML elements, Android Menus & Dialogs, etc.). In pure Processing, you would have to draw the button and detect in the ‘mouseClicked‘ function if the mouse pointer is inside the button.

Here’s a little video example of using the android menu to change the number of polygon sides:

In addition, I’ve created a Javascript module, and added buttons to the HTML page displayed when running in Javascript mode.

The following sections will explain how to do it.

## The Common Part: Just Draw a Polygon

The sommon part that draws the polygon is found in a ‘.pde’ file in the ‘polygon’ sketch directory. The function ‘draw’ detects changes in the global variable n, the number of sides.

The functions ‘translate’ and ‘rotate’ make drawing rotated shapes and lines easier.

In addition, the module contains a call to a function named ‘alert’. This function exists in Javascript, so I’ve made another in the Android module using Toasts.

Following is the code:

```// This program draws a regular polygon with n sides.
int n;
float halfVertexAngle; // Will be used for moving from the center
// of the sreen to a vertex of the polygon.

float rotateAngle;

void set_no_of_sides(int inputN){
if (inputN < 3){
alert("Polygons must have at least 3 sides. Try again");
return;
}
n=inputN;
}

void setup(){
//size(640,480);
set_no_of_sides(8);
background(0xffffff00);
strokeWeight(1);
}

void draw(){
background(0xffffff00);

// Center coordinates of the screen and circumbscribed circle.

int centerX = width / 2;
int centerY = height / 2;

float radius = min(width / 2, height/2);  // The radius of the circumscribed circle.

// Use the cosine theorem to find the length of a side.
float side = sqrt(2 * radius * radius * (1 - cos(2 * halfVertexAngle)));

translate(centerX, centerY);  // Move the origin of axes to the center of the screen.
rotate (-halfVertexAngle);    // Rotate the axes to find the first vertex without
// dealing with trigonometry.
rotate(halfVertexAngle);      // Rotate back to make the first side horizontal.

for (int i=0; i<n; i ++){
line(0,0,-side,0);
translate(-side,0);
rotate(rotateAngle);
}
}

```

## The Android Module

I found that in my Linux system Android files are created in the ‘/tmp’ directory. Processing Android mode generates an extension of the class PApplet from your pde files. The good news is that PApplet extends the android Activity class, which makes adding event handlers easy.

Additional functions to a class extending PApplet should be written in a separate pde file. Following is the extension’s code:

```import android.os.Bundle;
import android.widget.Toast;
import android.widget.EditText;
import android.widget.LinearLayout;

Toast toast=Toast.makeText(getApplicationContext(), text, Toast.LENGTH_LONG);
toast.show();
}

public void onCreate(Bundle savedInstanceState){
super.onCreate(savedInstanceState);

}

return true;
}

// Create a dialog to change the number of polygon sides.
final EditText input = new EditText(polygon.this);
LinearLayout.LayoutParams lp = new LinearLayout.LayoutParams(
LinearLayout.LayoutParams.MATCH_PARENT,
LinearLayout.LayoutParams.MATCH_PARENT);
input.setLayoutParams(lp);
public void onClick(DialogInterface dialog, int which){
int numberParsed;
try {
numberParsed = Integer.parseInt(input.getText().toString());
set_no_of_sides(numberParsed);
} catch (NumberFormatException ex){
}
}
});

public void onClick(DialogInterface dialog, int which){
}
});

}

case 37:
break;
default:
break;
}
return true;
}

```

Notes:

• If you have an Android module, but you want to run in another mode, renaming the Android mode’s pde file with a ‘.bak’ extension is recommended.
• If the Android module is not installed, you can install it from a Processing editor window, by selecting <mode button> -> Add more…

## Javascript Functions & Changes to the HTML Page

You can change the appearance of your output HTML page by editing the file <sketch-name>/template/template.html . If the file and directory do not exist yet, you can create them by choosing “Javascript->Start Custom Template”. If they do exist use “Javascript-.Show Custom Template”.

For example, I’ve added a button in the HTML template as follows:

`<input type="button" value="Change Number of Sides" onclick="get_no_of_sides(this);" />`

In addition, I’ve added an ‘onload’ event to change the size of the canvas after the polygon object is created. This function works fine in my favorite browser, Firefox. Fortunately, from ‘.js’ module one can call ‘size’ to resize the canvas:

`    <body onload="new_size(640, 480);">`

Following is my javascript code defined in ‘js_functions.js’:

```function new_size(w, h){
var divElement=document.getElementById('content');
if (window.Processing.getInstanceById("polygon")){
divElement.removeEventListener("DOMSubtreeModified", arguments.callee);
divElement.style.width = w + "px";
window.Processing.getInstanceById("polygon").size(w,h);
}
});

function get_no_of_sides(obj){

var k=prompt("How many sides?");
var num=Number(k);
if (isNaN(num) || num != parseInt(k)){