I’m going to deviate from my usual topics today. Let’s consider a small topic in Multimedia. Did you ever tried to create your own 3D glasses for watching 3D movie? If not, today I’m going to tell those steps. If you are not preferred you can buy one around US$ 1 on eBay. But remember, this is so easy and you can create your own one within 15 minutes.
 |
| Anaglyph Glass |
Before directly jump to our steps, let’s get an idea about this 3D glasses?
There are some videos and images, which provide stereoscopic 3D effect. Our naked eyes are not capable of capturing this effect 100%. So we need to use special glasses called, 3D glasses or “Anaglyph glasses” to help our brains to understand the effect. These anaglyph images/videos are made up of 2 colored layers, offset with respect to each others, which helps to produce the depth effect.
 |
| Sample anaglyph image from Wikipedia (Author: Richard Bartz) |
Okay, that’s little bit about the concept. Now it’s working time. Here are the materials we need:
- Card board
- Template for the glasses. A sketch is available here and you need to have a print out of it. Or else, you can draw your own one too.
- Red and Cyan (Blue) cellophane papers.
- And finally the hardest thing, Glue...
Here are the steps:
- Cutout the template on the cardboard using the printed (or drawn) sketch.
- Cut the cellophane to fit the holes in the template.
- Glue or tape them to the holes in the template. (And make sure you put Red cellophane for the left eye and the cyan cellophane for the right eye.)
- Now it’s finished creating your own 3D glasses. Enjoy 3D movies and images using your new 3D glasses.
Watch sample 3D video at http://www.youtube.com/watch?v=-RKI0mtedZw
- Leave your comment • Category: 3D, Anaglyph, How, Multimedia, Technology
- Share on Twitter, Facebook, Delicious, Digg, Reddit
One of the main issues involved with web designing is using proper fonts for the interface. That is because in most of times matching fonts for the user interface design are not standard web fonts. Therefore all the users must have the font to view the web properly. Otherwise the default fonts will be displayed.
There are some alternatives to overcome this issue. One of them is using images instead of text. So the images are rendered with the original font, and that will solve our problem. But it is also not issue free. These are the main issues with it.
Images consume more bandwidth than text. Hence it consumes time also.
Search engines are less sensitive for images. They can’t read the content of image and therefore Search Engine Optimization (SEO) will be an issue too.
Hence images are not the best option. There is another alternative, i.e. using CSS font-face. Font-face is used to define fonts in a style sheet.
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
Here, you can specify the source (src) of the font. local means if the font defined is available in the local PC, then use it. url means if it is not, download it from the given location. Let’s see how this can use.
/*
file: styles.css
"Bambino" is the font I used. "Bambino.ttf" is the relevent font file.
*/
@font-face {
font-family: Bambino;
src: local("Bambino"), url("Bambino.ttf") format("opentype");
}
h1 {
font: bold 28px Bambino;
}
p {
font: 18px Bambino;
}
<!-- file: font.html --> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>CSS Typography</title> <link rel="stylesheet" type="text/css" href="styles.css" /> </head> <body> <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras bibendum dui id arcu ornare eu lobortis orci bibendum. Mauris rhoncus tincidunt vestibulum. Duis imperdiet neque sed turpis viverra suscipit gravida est varius. Nullam euismod tellus quis velit semper vitae vehicula ligula congue.</p> </body> </html>
Today I’m going to show you something regarding GD library of PHP. The GD library is the main library using for Graphics in PHP. By using functions of this library, it is possible to manipulate images with PHP.
In this post, I will show you how to create a dynamic progress bar with PHP. In here the “dynamic” means you can parse 2 values, (i.e. maximum value and the current value) and the PHP script will calculate and render the progress bar dynamically on the screen. The output will come in the format of PNG image file. Hence it is very easy to use in you HTML file.
That’s all about the explanation. So let’s go for codes…
<?php
// filename: progressbar.php
// author : lasantha samarakoon
// set the type of data (Content-Type) to PNG image
header("Content-Type: image/png");
// extract GET global array
extract($_GET);
// set defaults
if(! isset($max)) $max = 100;
if(! isset($val)) $val = 100;
// this method prepare blank true color image with given width and height
$im = imagecreatetruecolor(400, 20);
// set background color (light-blue)
$c_bg = imagecolorallocate($im, 222, 236, 247);
// set foreground color (dark-blue)
$c_fg = imagecolorallocate($im, 27, 120, 179);
// calculate the width of bar indicator
$val_w = round(($val * 397) / $max);
// create a rectangle for background and append to the image
imagefilledrectangle($im, 0, 0, 400, 20, $c_bg);
// create a rectangle for the indicator and appent to the image
imagefilledrectangle($im, 2, 2, $val_w, 17, $c_fg);
// render the image as a PNG
imagepng($im);
// finally destroy image resources
imagedestroy($im);
?>
OK… that is the PHP script. Now it’s time to display it in the browser. First create a HTML file to display the image. In the IMG tag of the HTML file, type the location of your PHP script and specify 2 values, maximum and current as follows.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Progress Bar</title>
</head>
<body>
<img src="progressbar.php?max=100&val=70" />
</body>
</html>
That’s all, and you can see the output…
