#1 Designing Rubik's cube in PHP: The basics, phpgd usage

Firstly I should introduce you one library we will need today. It's called phpgd and it brings some useful functions. We wouldn't get far without them so it's important to have this lib installed. In Linux you can simply install it using your add/remove application. Once you have it installed you can check if it's enabled using phpinfo();



Ok, let's say the phpgd is ready, what are the new possibilities you can do with that now? We will start with something simple for beginning. Keep in your mind that every line/polygon/whatever in the final image needs to be scripted first, so, first think than write. We will script a square on a blank screen now. There are 2 ways how to do it /I believe you are able to figure out any third/forth way but let's say there are only 2/. You can command four lines and position them so they make a square. Yeah, that's possible of course but fortunatelly there is a native function for rendering a square. My point is that if you aren't sure what you can/can't do, go through this list of all phpgd functions in the official php documentation http://php.net/manual/en/ref.image.php and find the best which fits your idea. Let's get back to what we started, firstly we need to define the blank image.


<?php
/**
* Blank image 400x400 using phpgd...
*/
// set the HTTP header type to PNG
header("Content-type: image/png");
// set a new image 400x400px
$im = imagecreatetruecolor(400, 400);
// set the white color
$white = imagecolorallocate($im, 255, 255, 255);
// fill the image with white (defined in previous step) starting at position [0,0]
imagefill($im, 0, 0, $white);
// send the new PNG image to the browser
ImagePNG($im);
// destroy the reference pointer to the image in memory to free up resources
ImageDestroy($im);


This code doesn't need much explanation, the important things are mentioned in the comments. Maybe you are looking for the php ending tag ?>. Well, it's not important to write it there, it's not a mistake. Both versions with/without this tag are acceptable. If you don't see the output in your browser, press ctrl+a so you select the image, it should went blue. Or fill the image with any other color than white. E.g. black:
$black = imagecolorallocate($im, 0, 0, 0);
Let's move on now and script the square. We will use the function imagerectangle()

imagerectangle ( resource $image , int $x1 , int $y1 , int $x2 , int $y2 , int $color )

The usage is pretty simple. The first parameter is the "image" (variable $im in our case). Next four pamaremeter are the coordinates. I should also mention that the [0;0] coordinate is the top left corner of the image. [400;400] is the bottom right corner of the image (in our case). So we can make a border around the image for instance...

<?php
/**
* Blank image 400x400 with a black sqare on it using phpgd...
*/
// set the HTTP header type to PNG
header("Content-type: image/png");
// set a new image 400x400px
$im = imagecreatetruecolor(400, 400);
// set the colors
$white = imagecolorallocate($im, 255, 255, 255);
$black = imagecolorallocate($im, 0, 0, 0);
// fill the image with white (defined in previous step) starting at position [0,0]
imagefill($im, 0, 0, $white);
// make a border around the image
imagerectangle($im, 0, 0, 399, 399, $black);
// send the new PNG image to the browser
ImagePNG($im);
// destroy the reference pointer to the image in memory to free up resources
ImageDestroy($im);

This brings a nice black square. I think I should say a few words about setting the colors in phpgd. The function imagecolorallocate() has four parameters.

imagecolorallocate ( resource $image , int $red , int $green , int $blue )

This function returns a color identifier representing the color composed of the given RGB components. The first parameter defines the "image", next three define the color. These parameters are integers between 0 and 255 or hexadecimals between 0x00 and 0xFF. So how would you define for example a blue color? Simply...

$blue = imagecolorallocate($im, 0, 0, 255);
$darkblue = imagecolorallocate($im, 0, 0, 100);
$lightblue = imagecolorallocate($im, 100, 100, 255);

I added a light blue and dark blue color, I hope it helps you to understand how it works.

I think that's enough for today. Next time we will script a cube and make it all a little more "universal". So see you

Read more...

Brain Tuner - Give your brain a tune-up

BrainTuner is a free app for iPhone which tests how fast you are in counting. The interface is really easy to navigate. Firstly you select the mode. It depends on how many problems you want to solve, but you have to choose among 20/50/100 problems. Every mode has its own "best time". After you start the game, you have to decide whether the equations are right or wrong. It's quite addictive after a while.

My personal best time for the 20 problems is 9.36 seconds, I don't know if it's good or bad, you can let me know in the comments.

Read more...

Copy&paste on the iPhone and iPod Touch with Clippy

Have you ever thought of being able to copy&paste on iPhone or iPod Touch? Apple announced that this feature will be a part of the firmware 3.0, which will be introduced somewhen in summer. For those who can’t wait is here the Clippy app. This app enables you to copy&paste on the iPhone and also iPod Touch. The only limitation is that you have to have the Cydia app, which is only avalible on the jailbroken iPhones. You can’t find Clippy on the Appstore ‘cause Apple is against this kind of utilities.





I’d now like to describe how to install it ‘cause I had some problems with finding it in Cydia. First, you need to have the iSpazio repo in your sources. If you don’t have it than go to Manage (in Cydia), click Edit and Add. Then use this source: http://ispaziorepo.com/cydia/apt and click Add source. After that go to Sections (the bottom menu in Cydia) and click Edit. Find the System cat and turn it ON. Now search for Clippy and it should appear.
The usage of Clippy is pretty simple and intuitive (and also pretty awesome at the same time). Normally when you hold a finger on the screen, the magnifier appears. Holding the finger for a bit longer brings a menu where you can select whether you want to copy or paste or view the stack. The clipboard works through the applications. That means that you can copy some text from a web page and paste it into your notes and save.




Obviously there were many hours spent on programming Clippy, so I'm quite curious with what Apple comes in the firmware 3.0.

Read more...

Designing iPod Touch in Gimp!

Today I'd like to show you how to design iPod Touch in Gimp. First of all I should say that iPod Touch doesn't look exactly the same as the iPhone. There are some differences in the appearance. Let's try to make it!
1) Open up Gimp and create a new document. It depends on the size of the picture because the iPod has some proportions and we don't want to break them. I chose 350x580.You should get a blank white picture.
2) Select all (shortcut: ctrl+a) go to the menu and shrink the selection by 30px. Go to the selection menu and press the Rounded rectangle (30%).
3) Now you have still a blank picture but with a rounded selection in the middle. In this step we will fill it with a gradient. Create a new layer (call it Outer Border) and pick the gradient tool (shorcut: L). Use the default colors (black as the foreground and white as the background) and change the gradient shape to 'Radial'. Start in the middle and drag out of the picture. You should get something like this:

4) I hope you didn't cancel the rounded selection, otherwise you can delete the image and start again. Or you can also right-click the 'Outer Border' layer and select 'Alpha to selection' :)
5) Create a new layer and call it Dark Border. Go to the menu and shrink the selection by 2px. Fill it with black (shortcut: shift+b)

6) Right-click the Dark Border layer and select 'Alpha to selection'. Shrink the selection by 2px and create a new layer called Light Gray. We are going to fill it with a gradient so pick the gradient tool (shortcut: L). Don't change the shape, it will be radial again.
7) Now pick some light gray colors and again as in the 4th step, start in the middle and drag out of the canvas. I used #dcdcdc as the foreground color and #c6c6c6 as the background color. The result should look like this:

8) Right-click the Light Gray layer and select the 'Alpha to selection' option. Shrink it by 1px. That's not all, we will play with the selection a little in this step. Pick the Rectangle select tool (shortcut: r) and click into the selection. Four handles should now appear (one in each corner); that means we can modify the selection. We will adjust the height of the picture (1px on the top and 1px on the bottom). This picture should say more:

9) After the modification go to Select - Rounded Rectangle (30%) and fill it with black. This should you get:

10) At this point we will make the Home button. Pick the Elipse select tool (shortcut: e) and make the selection in the bottom of the image, in the place where the home button should be. While making the selection I advice you to hold Shift 'cos it will make a circle not an elipse.
11) After that create a new layer and call it Home Button. I prefer to fill it with white and than adjust the opacity but you can fill it directly with some gray color, that's up to you.
12) The grey circle is fine but there is also a white square on the iPod. Same procedure as in the 10th step. I made another layer (Home Button #1) which isn't necessary. Pick the Rectangle select tool (shorcut: r), go to select - rounded rectangle (I used 50%) and fill it with white or whatever color you like. Than go to select, shrink it by 1px and click the delete button. Here is what I got:

13) Attentive readers noticed that we forgot one necessary thing, it's the power button. There is nothing difficult about that. Create a new layer called Power button and move down under all layers (but above the Background layer).
14) Make a little rectangle selection (shortcut: r) and fill it with black (shortcut: shift+b). Than move it (shortcut: m) wherever you want.
15) In the final step we will draw the display. Right-click the Inner Background layer and select 'Alpha to selection'. Pick the Rectangle select tool (shortcut: r). Hold ctrl+shift and select the area where the display should be, like on the picture below. Select a bit larger area, we will shrink it in the next step.


16) As I said, we will shrink the area to get some distance between the display and the edge. Go to the menu Select and shrink it by 10px. I think 10px is ok, but again, it's up to you. Even at this point you can adjust the area how you want.
17) After that create a new layer and call it Display. Fill it with white and adjust the opacity.

And that's it. I know it's not 100% real but the first association should be the iPod. Here is my result:

And here is the same result with the background image:

And here is the result with some additional adjustments. That means I added some gradients, shadows, lights and brushes:

Thanks for reading, I hope it was useful.

Read more...