Creating simple graphics for documents

What happens when you’re tasked with “beautifying” a web site? Or when you need to spruce up a document to add some colour? In both cases, the graphics required don’t even need to
be done by professionals, just good enough to be close to professional quality. The graphics aren’t even the main focus, nor will they make or break a deal.

What you need is an easy way to come up with something moderately good. What you need is Paint.NET. After you’ve set the software up (it’s free), draw some rectangles on the canvas.
Four rectangles

Then use the Radial Blur effect
Radial blur menu

Set it to say 10 degrees
Radial blur option

And you’ll get this
Radial blur result

Or you can experiment with the zoom effect
Zoom blur menu

Set the zoom amount to 30
Zoom blur option

With the zoom result below
Zoom blur result

Maybe you’re in the artsy mood for twisting
Twist effect menu

Set the twist amount to 20 and the quality to 5
Twist effect option

And the final result
Twist effect result

Ok fine, so they don’t look like much. But they can fill in the space for a top right corner of the web page or something. Or as an unobtrusive background of some header text. You can try using block colours, but they really look terrible. With some imagination, you can create some nifty graphics. Go to the tutorial forums of Paint.NET and get some ideas!

Rapidly calculating Bezier points

The standard cubic Bezier curve is given by
B(t) = (1-t)3p0 + 3(1-t)2tp1 + 3(1-t)t2p2 + t3p3
where p0, p1, p2, p3 are the control points and t is in the interval [0, 1].

Very elegant, but not very practical. Too many multiplications and additions to be used in a fast-paced environment such as game development. If it’s a 3D Bezier curve, 3 separate calculations are needed for the x-, y- and z-component for a given t value. What we need is a simplication of the equation.

Expanding the polynomial equation, we have
B(t)
= (1 – 3t + 3t2 – t3)p0
+ (3t -6t2 + 3t3)p1
+ (3t2 – 3t3)p2
+ t3p3

Rearranging the coefficients of tn, we have
B(t)
= t3(-p0 + 3p1 – 3p2 + p3)
+ t2(3p0 – 6p1 + 3p2)
+ t(-3p0 + 3p1)
+ p0

The coefficients can now be reduced to constants by precalculating them, and calculation of a Bezier point takes less computation.

In matrix form, the equation looks like
Coefficient matrix form of Bezier curve

Mathematicians make better programmers

Prove root 2 is irrationalMany programmers I know graduated either with a degree from computer science or obtained a professional certificate in programming. Yet simple programming errors or lengthy solution constructs still exist. These programmers only know the how, but not the why. Given a math graduate and a computer science graduate, both with similar academic results, you’re better off hiring the math graduate.

Abstract thinking
In solving problems, a mathematician comes up with a theory given what is known, and work towards a solution. For example, the Königsberg Bridge Problem was solved by translating what is known (the layout of bridges and land) into a mathematical equivalent, a graph of nodes and connections. Solving the graph theory problem is then equal to solving the bridge problem.

This ability to transform problems from unfamiliar to familiar grounds is crucial. Business requirements often have ridiculous conditions defying normal programming laws. An experienced programmer can draw upon his vast knowledge and piece together a solution. A mathematician can come up with an equivalent problem but is easier to solve. Tip: Hire the math graduate. He’s cheaper.

Naturally logical
I have seen program code with wrong if conditions, such as incorrect inverse disjunctions like if (!(p || q)) is equivalent to if (!p && q). It is disastrous to form wrong tests for conditional statements and loops, 2 commonly used programming constructs.

Mathematicians exhaustively explore all test conditions to ensure a complete solution. This ties in with their chain of thinking. A solution with sequential steps is only correct if all the steps are correct. If A then B. If B then C. If C then D. Therefore if A then D. What if B is false? Then the whole thing collapses. Mathematicians are used to checking their OR’s and AND’s.

Elegant solutions
In my university days, I used to fear the Terrifying Triple, consisting of a 4-letter, 5-letter and 7-letter word. They are “Show”, “Prove” and “Justify”. I get a lurch in the stomach whenever one of these words start off a problem.

  • Show that [whatever] is equal to [whatever]
  • Prove that [whatever] is true
  • Justify your answer

However these exercises made me shrink my answers to the most concise solution I could think of. The less of a solution to be picked on by my professor, the better.

I find that some programmers simply write a solution code to the problem at hand, and if it compiles, oh yeah! And if it does what it’s supposed to do, woohoo! Next! Unbelievable… This is why the following code exists:

void SomeFunction(){
   int i;
   i = 0;
   abcd[i++] = 111;
   abcd[i++] = 222;
   abcd[i++] = 333;
}

Either the original programmer don’t know that a literal number value can be used as the array index, or he just found out about post-incrementing and is absolutely ecstatic that he can apply his new found knowledge.

Problem solving
Mathematicians are used to grabbing theorems from say calculus and apply them to chaos theory. They are accustomed to interdisciplinary thinking. Thinking out of the box is good. Sometimes making the box larger is better.

Then there are the programmers who copy and paste example code without giving a hoot to what the code is actually doing or why the author coded it that way. Then they compile and test it, and ask why it didn’t work. The situation is different for the copiers and a slight change is required to make the example code work, yet the effort required to understand the code is beyond them, thus escalating the slight change into a major shift in thinking.

Conclusion
Programming is simply giving instructions to the computer to solve problems. Learning to program for the sake of programming is limiting to the focus on problem solving. Sure, math isn’t the be-all-end-all of interdisciplinary thinking. But it’s a start.

Write code that helps write code

Writing tool codeI have discovered a rather surprising fact about my fellow programmer colleagues. Some of them, hate, programming. They go through the day writing code, copying and pasting where appropriate, crushing bugs and then go home. Their distaste for writing code has blinded them to the notion of creating programs to help them in their work. They will only create a program for a project, and not create smaller helper programs to ease the work.

Code generators
For my university thesis, I wrote a simulation program for computer virus behaviour. It was coming along fine, until I wanted to have graphs of my results. The simulation program was written in C and I didn’t know how to create graphs from C. Luckily, I had some experience in Matlab, and remembered how to create graphs for mathematical functions.

So I added some code in my simulation to output the results in a text file, which became the input for my graph generating Matlab code. Basically I used two different programming languages to help in writing my work. The output of one became the input of another.

Random data generation
There was a time when I had to generate a huge amount of data in the database, for a presentation of a web application I developed. And it had to be relatively similar to the real production data. Copying and pasting SQL insert statements wasn’t going to cut it.

So I wrote a small program to generate the insert statements into a SQL script. Then I ran that script in the database. A couple of minutes to run the generation program, and another couple of minutes to run the script, and bingo, mass random data records.

Testbed applications
I have 3 testbed projects, one for console output, one for Windows programs and one for web applications. They are used to test out theories, like what would the output of DateTime.Now.ToString(“dd/MM/yyyy”) look like.

By having these testbeds, I can test my code in a tightly controlled environment, because that testbed application can do only one thing, the code I want to test. Sometimes, testing the code in the actual program is hard, because there can be a lot of other stuff around. Testbeds allow me to just test that chunk of code without all the other distracting fluff. Which helps me write better code.

Custom tool programs
Sometimes, a fully working program is written just so its output can be used in another program. The demoscene and game production are examples of this need.

Demos are computer programs generating stunning visuals and music in real time. Some demo groups, like Conspiracy, have created full-blown applications to help create content such as 3D models and sound files.

Game production teams have tool programs, such as a preview program of texture mapping on a 3D model for artists, or dungeon creation programs to produce the 3D dungeon model used in the game.

These tool programs are not packaged in the final product, yet are essential to the success of the product, because they help make creating the product easier.

Conclusion
Writing code can be easier. Using a professional code generation software might be overkill for a tiny bit of code. Copying and pasting can be tedious. With a little imagination, you can make your programming life easier, by writing code to help you write code.

Editing screenshots with Paint.NET

Providing screenshots of a step by step process to a user is one of the most powerful guidance techniques. However, dumping a few megabytes of unprocessed image data into an email can crash your user’s mailbox. And if you copied the email to several other people as well? You had better be on very good terms with all of them.

This is where Paint.NET comes in. The software has features rivalling those of professional image editors. There’s the rotation and zooming, standard tool functions from Windows Paint, better colour selection interface, and unlimited * undos!

Doing more than just Print Screen
So you are at the screen for the screenshot, and you’ve hit the Print Screen button. Start up the Paint.NET program and paste the contents. You might be asked to expand the canvas or the working area for your image.
Expand canvas

Image cropping
Then you want to select the image area you are interested in (you are rarely interested in the entire image). Select the [Image] menu item, then [Crop to Selection], and you’ll get something like this:
Cropped image

Box and arrows
Then you make use of the rounded rectangle and line drawing tools on the Tools bar (located on the left by default).
Lines and rounded rectangle tools
You can also add pointed arrows at the end(s) of your lines, making process diagrams easier to draw.
Arrows for ends of lines

Add text for finish
Add some text and you’ll have a self-explanatory screenshot.
Screenshot with explanatory text

Bonus tip: Gaussian blur unimportant areas
You can even guide your user to focus on a certain area for emphasis. First select the area you want to highlight:
Highlighted area

Then do an inverse selection. Select the [Edit] menu item, then [Invert Selection]. Then select the [Effects] menu item, then [Blurs], then [Gaussian Blur] with 2 pixels as the radius. And you’ll get this:
Inverted selection with gaussian blur

So there you have it, simple steps to create good looking screenshots. The screenshots can then be used in documents or placed on the Internet (or Intranet) as part of an FAQ. So go get Paint.NET now!

* limited only by hard disk memory