Main Window Operation In Matplotlib

Matplotlib is a MATLAB-like library that allows Python programmers to create images and animations. For example, you can easily draw a graphic representation of functions with Y (and maybe Z) values generated by numpy and scipy functions.
Matplotlib can also be interactive and handle events. The command mpl_connect is used for connecting an event with a callback function.

The Backend Layer

Someone on the IRC has challenged me with questions on how to perform some operations when the window is closed. In addition, I want the window title to be other than the default, “Figure 1”.

Well, the layer that handles the main window is the backend layer,
To find what backend Matplotlib uses, you can add the line
print type(fig.canvas)
The result may be something like:
<class 'matplotlib.backends.backend_gtkagg.FigureCanvasGTKAgg'>
This means that the backend used is ‘GtkAgg’.
With the function ‘dir’, I’ve found that the canvass has a function named get_toplevel, and the returned value of fig.canvass.get_toplevel() is an object of type gtk.Window.
This object has the methods of a GTK window. So you can change its title with the ‘set_titlemethod. For example: fig.canvas.get_toplevel().set_title(‘Rubic Cube’) You can tell your application what to do when the user closes the window, by calling its 'connect' method, with 'destroy' for first arguments. For example: fig.canvas.get_toplevel().connect(‘destroy’, destroyFunc, ‘Goodbye, cruel world!’) destroyFunc is a function that accept 2 arguments (3 if a class member): the widget where the event has occurred and additional user defined data.
More about Python FTK can be found at http://www.pygtk.org/pygtk2tutorial/index.html

Last but not least, you can specify the backend Matplotlib will use, by calling the ‘use’ method of matplotlib.
For example:
matplotlib.use('GTKAgg')

Note: This method should be called before importing ‘pyplot’.

Written with StackEdit.

Cubic Equations And The Complex Field

One thing I wish to see in languages such as PHP is to find them supporting the complex type. Complex numbers are more than vectors in 2D, and I wish to see expression containing them parsed just like the ones with real numbers. Python supports them, and you have to import ‘cmath’ to use functions of a complex variable. To import cmath type

import cmath

For example, complex numbers are useful in solving cubic equations even if all its roots are real. And cubic equations can be used for Bézier curve manipulations.

Following is the Cardan formula for solving a cubic equation

Be $x^3 + ax^2 + bx + c=0$ a cubic equation.

Step 1

Convert the equation to the form latex y^3 + py + q = 0
Use the Taylor series formula, to find a k, such that y=x-k:
Be P(x) = $x^3 + ax^2 + bx + c$
Then, $P(x) = P(k) + P'(k)x + {P''(k)x^2 \over 2} + {P'''(k)x^3 \over 6}$
$P(k) = k^3 + ak^2 + bk + c$
$P'(k) = 3k^2 + 2ak + b$
$P''(k) = 6k + 2a$
$P'''(k) = 6$

Because P”(k)=0, 6k + 2a=0, thus:
$k= - {a \over 3}$ .
$p=P'(k) = b - {a^2 \over 3}$
$q=P(k) = {2a^3 \over 27} - {ba \over 3} + c$

For example,
$x^3 - 7x^2 +14x - 8 = 0$
will become
$y^3 -2{1 \over 3}y - {20 \over 27} = 0$
In Python:

a = -7
b = 14
c = -8
p = b - a**2 / 3.
q = 2*a**3 / 27. - b*a/3. - 8

Step 2

Find 2 numbers u and v that will help us solve the equation. If y=u+v , then the new equation will be:
$u^3 + v^3 + (p + 3uv)(u + v) + q = 0$
We can find u,v such that (p + 3uv) = 0,
Thus,

and latex u^3 + v^3 = -q
Since p+3uv=0, $u^3{v^3} = {-p^3 \over 27}$
From both equations, we get that latex u^3 and latex v^3 are the roots of the quadratic equations
$t^2 +qt - {q^3 \over 27} = 0$
The roots of the quadratic equations are:
(1) $u^3 = - {q \over 2} + \sqrt{{q^2 \over 4} + {p^3 \over 27}}$
(2) $v^3 = - {q \over 2} - \sqrt{{q^2 \over 4} + {p^3 \over 27}}$
In Python, the inner root can be computed using:

innerRoot = cmath.sqrt(q**2 / 4. + p**3/27.)

Now, u and v are cubic roots of (1) and (2) respectively. They must satisfy 3uv=-p.
In Python, you get your initial u using:

u=(-q / 2. + innerRoot) ** (1/3.)

If the pair u,v does not satisfy 3uv = -p, you can multiply your v by
$latex-1 + i \sqrt 3 \over 2$
until the pair satisfies the condition.
Now, having a solution, get the next by multiplying u by $latex-1 + i \sqrt 3 \over 2 and v by latex-1 – i \sqrt 3 \over 2 In our example: $u^3 = {20 \over 54} + \sqrt{{-263 \over 729}}$ $v^3 = {20 \over 54} - \sqrt{{-263 \over 729}}$ Let’s find our three solutions: $u_1= (0.8333333333333335+0.28867513459481187j), v_1=(0.8333333333333335-0.28867513459481187j)$ Thus, latex$y_1 = (1.666666666666667+0j)\$
$u_2 = (-0.6666666666666659+0.5773502691896264j), v_2=(-0.6666666666666657-0.5773502691896264j)$
Thus, $y_2 = (-1.3333333333333317+0j)$
$u_3 = (-0.1666666666666676-0.8660254037844383j), v_3=(-0.1666666666666677+0.866025403784438j)$
Thus, $y_3 = (-0.3333333333333353-2.220446049250313e-16j)$

(The above values are output from Python script. The real results look much better.)
Now, to get the roots of the original equation, add $k={-a \over 3}$ to each y.
In our example,
$k = 2{1 \over 3}$
Thus,
$x_1 = 4, x_2=1, x_3=2$

Writing expressions is much easier and more readable when the language supports the complex type.

Meltdown – The Computer Lab Prank

I remember that little prank from the days I was a student. You work on an X terminal, and out of the blue, all the display contents gradually disappear’ Pixel after pixel turns black. But don’t worry – you’ll regain control over your display shortly. shortly.
Everyone can access other X terminal display, and mess with it.

How Does It Work?

This program is a simple one using the GDK library, Gnome’s window management package. Including ‘gdk.h’ will also include:

The Program’s Flow

The main function of the program performs the following steps:
1. Initialize GDK.
2. Create a window whose dimensions are the same as those of the root window.
3. Make the window’s background transparent.
4. Make the window a full-screen window.
5. Add an event handler. to handle Expose events.
The event handler will perform the following steps:
1. Create a list of columns and lengths (number of blackened pixels).
2. Create the Graphics Context for the window.
3. Blacken pixels until all pixels are black.
4. Quit the main loop.

Includes And Structures:

#include <stdio.h>
#include <stdlib.h>
#include <gdk/gdk.h>

GMainLoop *mainloop;
GList *list;

typedef struct col_and_length_t{
short col;  // Column number
short len;  // Number of blackened pixels.
} col_and_length;


The main function:

int main(int argc, char *argv[]){
gdk_init(NULL, NULL);
GdkDisplay *disp=gdk_display_get_default();
GdkScreen *scr = gdk_display_get_default_screen (disp);
GdkWindow *root = gdk_screen_get_root_window(scr);
int rootWidth = gdk_window_get_width(root);
int rootHeight = gdk_window_get_height(root);
GdkWindowAttr attr;
attr.width=rootWidth;
attr.height=rootHeight;
attr.x=0;
attr.y=0;
attr.window_type = GDK_WINDOW_TOPLEVEL;
attr.wclass=GDK_INPUT_OUTPUT;

GdkWindow *newWin=gdk_window_new(root,&attr, GDK_WA_X | GDK_WA_Y);
gdk_event_handler_set (eventFunc, newWin, NULL);
GdkRGBA color;
color.alpha=0;

gdk_window_set_background_rgba(newWin, &color);
gdk_window_fullscreen(newWin);
gdk_event_handler_set (eventFunc, newWin, NULL);
gdk_window_show(newWin);
mainloop = g_main_new (TRUE);
g_main_loop_run (mainloop);
gdk_display_close(disp);

return 0;
}

The event handler

void start_meltdown(GdkWindow *newWin, int height){
cairo_t *gc=gdk_cairo_create(newWin);
cairo_set_line_width(gc,2);
cairo_set_source_rgb (gc, 0, 0, 0);
int cell_no,size;
size=g_list_length(list);

while(size>0){
cell_no=random() % size;
cairo_rel_line_to(gc, 0, 1);
cairo_stroke(gc);
--size;
}
}
g_main_loop_quit(mainloop);
}

void eventFunc(GdkEvent *evt, gpointer data){
GdkWindow *newWin = (GdkWindow *)data;
if (gdk_event_get_event_type(evt) == GDK_EXPOSE && gdk_event_get_window (evt) == newWin){
int width=gdk_window_get_width(newWin);
int height=gdk_window_get_height(newWin);
int i;
for (i=0; i<width;i++){
col_and_length *cell=(col_and_length *)calloc(sizeof(col_and_length), 1);
cell->col=i;
cell->len=0;
list = g_list_append(list, cell);
}
start_meltdown(newWin,height);
}

}

Compiling

In linux, compiling a program is easy thanks to the pkg-config command.
Run the following from the command line:

gcc meltdown.c pkg-config --cflags --libs gdk-3.0 -o meltdown

Now, to run the program type:

./meltdown

Written with StackEdit.

Teach Yourself D3.js

D3 is a JavaScript framework used for data visualization.
Learning how to work with D3.js is very easy. If you begin with the basics, you’ll see how easy it is to use D3, because:

• the DOM function names are much shorter than those in the legacy DOM library.
• the same functions are used for both setting and getting values.
• setters return a value, so you can keep working with the same element without repeating its name.

If you already know some framework, you probably feel that there’s nothing new under the sun, which is good because it makes learning the new stuff easier.

So, What’s New?

In D3, you can:
* add and remove SVG and HTML elements using the setters and getter.
* set and get the element’s properties, attributes, styles, text and… data

Getting Started

After you include it in your script, you can use selections, that is wrappers for elements.
To get a selection, use one of the functions:

• d3.select(selector) – to select the first element matching selector.
• d3.selectAll(selector) – to select the all elements matching selector.

Like the d3 object, selections has their select and selectAll methods to select descendant.

If selection is a selection, it’s easy to understand what selection.text(), selection.attribute(), selection.style(), selection.insert(), and selection.append() do. But, what does selection.data() do?

Data And Update Selection

The selection’s method data() helps you use the HTML DOM as a database.
selection.data() returns an array of all data that belongs to the elements of the selectionץ The data is held in the property __data__ of the element.
selection.data(arr, func) – defines an update selection and distribute the elements of array arr to the elements of selection.
func(d,i)is a function that:

• receives d an element of arr and its index i.
• returns a record key.

If func is not passed, the key is the element’s index.

A recommended way to create an update selection is:
var updSelection = selection1.selectAll(selector).data(arr)

Now, updSelection is a selection of existing elements whose data has been changed.
In addition, updSelection has to methods:

• updSelection.enter() – returns place holders for elements to be created under selection1.
• updSelection.exit()– returns elements that have lost their data, and are usually to be removed.

Using the data

The methods attr, style, property, text and data can accept a function as a value to set. The function will be called for each element of the selection’s data. And its arguments will be the array element and its index.

Now, let us see it in an example.
The following code arranges data in a donut layout::

<!DOCTYPE html>
<html>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Testing Pie Chart</title>
<script type="text/javascript" src="d3.min.js"></script>

<style type="text/css">
.slice text {
font-size: 12pt;
font-family: Arial;
}
</style>
<body>
<script type="text/javascript">
var width = 300,
height = 300,
color = d3.scale.category20c(); //builtin range of colors

// Step 1: creating a container for the donut chart, and attach raw data to it.
var vis = d3.select("body")
.append("svg")     //create the SVG element inside the <body>
.datum([{"label":"first", "value":20},
{"label":"second", "value":10},
{"label":"third", "value":30},
{"label":"fourth", "value":25}])
.attr({"width": width, "height": height})
.append("g")
.attr("transform", "translate(" + radius + "," + radius + ")") //move the center of the pie chart from 0, 0 to r, r

// Step two: defining the accessors of the layour function.
//           The function 'pie' will use the 'value' accessor to compute the arc's length.
var pie = d3.layout.pie()
.value(function(d) { return d.value; })
.sort(function(a,b){return a.label<b.label?-1:a.label==b.label?0:1;});

// Step 3: Create the update selection.
.data(pie);    // This will use the function 'pie' to create arc data from the row data attached to the visualisation element.

// Step 4: Using the data in the update selection to create shape elements.
var arc = d3.svg.arc()
;
.append('g')
.attr('class','slice')
.append("path")
.style("fill", function(d, i) { return color(i); } ) //set the color for each slice to be chosen from the color function defined above
.attr("d", arc);                                     // Create the arc from the arc data attached to each element.

.attr("transform",
function(d) {
return "translate(" + arc.centroid(d) + ")";
})
.attr("text-anchor", "middle")
.text(function(d, i) { return d.data.label; });

</script>
</body>
</html> 

And following is the chart:

For more funcions, see the API Reference.

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.

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:

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.

The Processing Language…

Processing is a programming language used mainly for animations and graphical applications. If your program is written in pure Processing, the same code can be run in many tools that use their own language: Windows with Java applets, HTML pages with Javascript, Android applications, etc. Running an application  is done by choosing a mode from the Processing GUI tool.

Here’s a screen shot of a Processing Window containing a program to draw a regular polygon:

Now, to run the program , push the “Play” button, or choose Sketch->Run, and you’ll see the result:

Now, to run this on Android, I commented out the call to the function ‘size’, following is the result on in an emulator window:

You can add to your programs command specific to the mode in which you run. For example you can  add an ‘alert’ command in Javascript mode. Better do it in separate files.