Did You Know? #51

Did You Know...

That the "Fn" key on some laptop keyboards is a pretty unique key?

For one, your computer generally doesn't even know it exists - Pressing the Fn button does not send a message to your operating system at all. If you have a laptop or Ultra Mobile PC, you can try it, let your screensaver run. Technically any button press would stop the screensaver, but you can press the Fn key as many times as you like, and there would be no effect.

Of course we know what the Fn key does, it changes the function of certain keys on your keyboard - This allows normal buttons such as the arrow keys to do other functions like change the volume or brightness in the case of laptops.

Knowing this, and that the works of the Fn key is transparent to the operating system, this means another thing: Your operating system isn't the one changing the functions of the keys when you press Fn - Instead, the keyboard does all the work: When you hold down the Fn key and change the volume, for isntance, your operating system thinks your keyboard has a special volume button (like many keyboards do), and thinks you're just pressing that button.

Here's a little more trivia, if you're interested: Some laptops or Ultra Mobile PCs especially allow the user to choose to boot into a little "Quick Boot Operating System". This means we're not running Windows at all. If it is a software program that changes the functions of keys when "Fn" is pressed, then you may find that the special keys don't work because the quick boot operating system likely does not support the special driver software - But this is not the case.


There you have it, that's two did you knows rolled into one post!

Hitting the Right Gold

Have a quick look at this:



For 3D artists, one of the type of objects you'll probably be faced with making once in a while is Gold - The precious metal isn't so easy to reproduce in 3D programs, and, if not done properly, the material either looks dull yellow or dull orange. So here's the trick to creating a gold material in any 3D software that will pass off as pretty convincing.

In this post I will refer to a number of technical terms with regard to materials in 3D programs, and, in case you don't understand any of them, I will make a short explanation, but if you need more details you can refer to one of my older posts, Coloring in 3D.

As mentioned, I have tried my best to write this tutorial in a way that is not program-specific. However, to aid the discussion, I will use screenshots from my favorite 3D program Blender.

So let's dive right in!


So that you have an idea of what the screenshots will look like, here's a screenshot of the original, unedited material provided by my software. Your software need not have the same default settings, but through experience, it should not differ much.



For any material, you usually can define a number of different colors. The first is of course the actual surface colour of the material. So first we'll go ahead and give the surface a nice yellowish colour, like so:



The color I picked is #FFC83D - A colour that emphasizes red and green, but gives a little blue to. Depending on what program you use, I'd recommend that you do not set any colour to 0. Even if you completely do not want a particular colour, give it a small value greater than zero, for more natural effects.

Next, we move on to the specular highlight. Very quickly, that refers to the glow a material experiences when light hits it:



Most non-metallic materials have white specular colours - As long as white light hits it, the glow is white. For gold, however (and other coloured metals), this wouldn't do - The specular highlight should be a colour similar to the actual surface colour. I have chosen a deep orange for the highlight. However, since none of the component colours (red, green and blue), have been set to zero, the glow is white at its brightest spot, like so:



The specular colour I've chosen is FF6D33, which , compared to the surface colour has less green, thus creating a deeper shade of orange. As you can see, this change hasn't done much - It has only made the specular spot less distinct.

In actual fact, gold is far more shiny than this - We need to give the surface a greater specular value. Note that this is different from what we set just now, which is the colour of the specular hightlight. Now we will change the amount of specular highlight.

I had to increase the existing specular value more than threefold to get the desired effect. Experiment and see!



If your 3D package allows it, you can also try to experiment with the spot size of the specular highlight (this setting is known as Hardness in Blender). I personally prefer a slightly larger spot, thus reducing the hardness parameter, giving this result




Now we've come to the most crucial part of the material - Reflections. Gold is shiny, and while it's not mirror-like, it still is reflective, and some mirroring of the surroundings will give your gold a better look.

If your modelling program does not support raytracing (the ability to simulate the behaviour of light in real life), then life will be more difficult - The tutorial becomes irrelevant from this point on, but not all hope is lost since it is still possible to acheive the same effect using reflection maps. However, that is beyond the scope of this tutorial.

Without preamble I'm going to go ahead and make the material about 60% reflective, producing this result:



No - not very convincing. In fact, it looks bad! Completely washed out! The reason for this is that the surface reflects all colours, and we know that's wrong - Gold should reflect yellows only, and less of blue. Thus, search for a mirror colour option, and set that colour to an orangey-yellowish hue, which produces this result for me:



And yes, that is pretty much it!


While you can have the best material, the setup of your scene is also important. Know how to set up your lighting (use high powered omni-lamps to really bring out that specular spot), and make sure the scene is well lit. Don't be afraid to tweak the material too.

Since we're dealing with reflections, there also needs to be an environment to actually reflect. For example, the default scene in Blender isn't going to make the reflective material very useful since it is a solid colour!

Instead, add a background or walls and floor, to take full advantage of the gold's reflectivity!

And there you have it - Some nice convincing gold!

Did you Know? #50

Did you know...

That you can extend the contents of the right-click Context Menu? This has been proven to work on Windows Vista, but I am not sure if it works on Windows XP or earlier.

Instead of right-clicking, hold down Shift, then right-click.

Additional options will appear in the context menu, depending on what you've right clicked. There are two options which I find particularly useful.

First is the "Open Command Window Here" option. While it is usually easy enough to start an MS-DOS session, you can do so by going to Run and typing "CMD", it usually starts in a certain default folder - Which is probably not where you have stored the files you want to access.



As you can see, it starts in my default folder. If I want it to start in, say my desktop, all I need to do is to hold down shift, right click on my desktop, and choose "open command window here", which puts it in the correct folder:





Tada!



Another right click feature I like is the "Copy as path" function, which lets you copy the direct path to the file. If I do the following:



This is what I get on my clipboard:
"C:\Users\0612\Pictures\roflmao.gif"



Depending on what icon you're right-clicking, other features may also appear. Explore and have fun!

Digital Ramblings - Now with a Tiny URL!

TinyURL is a web service that takes a URL of any length, and gives a new URL that points to the same location.

This is particularly useful for long URLs, or URLs containing messy hash code (such as the code for YouTube videos). TinyURL makes accessing these sites by memory much easier, since you only need to remember a shortened URL, which can have any name you choose.

Digital Ramblings' URL is unfortunately not very easy to remember either (especially the 0612 at the end, standing for my pen name), so we now have our very own TinyURL:

http://tinyurl.com/digital-ramblings

So, go ahead and give this link to your friends! No reason to forget it now!


Just to be clear, the original URL still works. This is true for any site that tinyURL is used on, because tinyURL doesn't actually do anything to the original site - It only adds an entry in its own database, such that accessing the entry redirects the user's browser to the original web page.

So there you have it - Many thanks to tinyURL for making this possible. And if you ever need your own tinyURL, just visit their web page (the link is the first word of this post!) - Making tinyURLs is a completely free process!

CSS - A preface

Before we begin I must mention that I am no expert at CSS - Quite the contrary, in fact, as I have no formal training, and I've never even read a book on the subject before. The purpose of this preface is to let you have a "bare-minimum" look at CSS - Enough for you to solve simple problems, and also to guide you on how to search online for solutions to those tougher problems.


First of all, what is CSS? The name stands for Cascading Style Sheets. We usually refer to these simply as CSS, or occasionally as "Style Sheets". As the name implies, CSS defines the style of a web page - How data is presented and formatted in a web page.

Why is there a need for CSS? Consider this situation: In a web page, you have a number of tables, all of which are meant to have the same background color, as well as font face (ie type of font, eg Arial, Tahoma), font size, and color. If you wanted to change the background color, you'd have to do so for each table individually.

Now take a look at it from a even wider perspective: Your web site has 20 of such pages, and you want to make the change across the board - The amount of effort involved would be simply intolerable.

That's the simplest reason for CSS - To unify the formatting definitions from any number of sites into one single style sheet, which can be used across the board: One change in the style sheet updates all the pages accordingly.


We will pause for a bit here to take a look at the core of web pages: HTML, short for Hyper Text Markup Language.

HTML basically consists of the actual content you see on the web page. All the text, in addition to a number of tags, which specify how the content is formatted, and is also used to add additional features such as tables or images.

We will not go in-depth with HTML, but suffice to know that HTML alone is capable of formatting.

However, we can also choose to not have our formatting in HTML, and instead let CSS handle it. A small coding change to the HTML, along with the style parameter, will allow us to do this. Let's take a look at a little bit of example HTML:

<table border=1 bgcolor=#FFDDAA width=50% align=center>
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>
</table>

The above code generates a table that looks like this:

Cell 1	Cell 2	Cell 3
Cell 4	Cell 5	Cell 6

What you should take note of in the above code are the lines "bgcolor=#FFDDAA", "width=50%" and "align=center". All these define the formatting of the table.

The first "bgcolor" defines the background color of the table (a pale orange).

"Width" sets the table width to 50% - In other words the entire width of the table will fill up half the horizontal space allowed for this post.

"Align=center" simply centers the table in the viewing area.

Actually, "border=1" also defines the format of the table - Setting its border to have a thickness of 1. However, its CSS counterpart is slightly more complicated that I'd have liked it to be, so for the purposes of this explanation I will leave it as it is.


We will now attempt to create a CSS style definition to replace the formatting of the table. Before we do that, however, take note of the correct way to set CSS definitions.

A HTML page structure basically looks like this:

<html>
<head>
...
</head>

<body>
...
</body>

</html>

What you need to do is that you have to add style tags into the head portion itself, like so:

<html>
<head>

<style type="text/css">
CSS Stuff Goes Here
</style>

</head>

<body>
...
</body>

</html>

Now that we're settled with that, let's plunge straight into CSS!


What we're going to do now is to define a style for our table - It will contain the exact same defintions as in our HTML, meaning that we will define the background color, width, and alignment. The CSS code looks something like this:

.tblstyle { background-color:#FFDDAA;
    width:50%;
    table-align:center; }

The three format settings, "background-color", "width", and "table-align" basically work like their HTML counterparts. ".tblstyle" is just the name of this formatting - We will see how this is used by considering the HTML portion of the table itself:

<table class="tblstyle" border=1>
<tr><td>Cell 1</td><td>Cell 2</td><td>Cell 3</td></tr>
<tr><td>Cell 4</td><td>Cell 5</td><td>Cell 6</td></tr>
</table>

Notice that I have removed all the "bgcolor" and "width" and so on - Since we're defining it with CSS, we do not need to define it at the <table> tag. "border=1" still remains there for reasons we have discussed - Swapping it out is a little too tedious for this tutorial.

Do you see how "tblstyle" works? The definitions we had in the CSS were named "tblstyle" (this can be any arbitrary name). As long as the value under "class =" matches the name of the definitions, the styles would apply.


Basically that's CSS in a nutshell! There are much, much more variations than those covered in this post, but the concept remains along these lines - Styles are defined under <style> in the head, and the various HTML tags refer to these styles, and is formatted accordingly!

Earlier on I mentioned that if you had lots of tables supposed to follow the same style, CSS will speed up the change - Do you see how that is now? If in the example above, I had a hundred tables all using tblstyle, I could simply change the CSS, and the changes would be reflected in all the tables using "class=tblstyle" - Simple!

So, it's time for you to step out into the world of CSS. There are lots of things we haven't covered today, but you'll be surprised at how much you can do with this knowledge.

Want to change something? Just look at the HTML code, and see which class it is using, and modify the class accordingly. If you don't know what to type in under the CSS, you can first try logical names such as image, or color (if you're mentioning "color", remember to use the American spelling, ie not "Colour" but "Color").

If you can't hit on the right name, just Google! Things such as "CSS Background Image" or "CSS Table Alignment" are all simple yet effective google search keywords that you can try.

Have fun with CSS!