And my programming sources are a slew of HTML5 books and video guides (most of which were put to use in creating this website). If you are looking out to get some of these, look out for deals and specials by subscribing to Udemy’s email announcements or subscribing to places such as SafariBooksOnline. If you are starting out in any web development tasks, I highly highly highly recommend w3schools–they have been the best and they are free.So… let’s get one with it!

STEP 1: Think of a good idea that I could possibly pull off.I begun this project withHTML5 in mind using only HTML, CSS, JavaScript (JS), and PHP and using concepts I knew about (but didn’t necessarily know). So I thought that I could make shapes appear on the screen using HTML

‘s and formatting them in CSS. HTML’s “onclick” event handler could then determine if I clicked on them and make them disappear.

STEP 2: Find a way to push myself a bit (realistically).With the basic concept in mind, I came up with ideas to push the idea further, but still make something I had the ability to do. Below are my notes:

I don’t have the best handwriting but here’s the basics:

The goal of the game is to have nothing but circles on the display.

The program will create a number of squares.

When the user clicks on the squares, they turn into circles.

If two squares touch they turn into triangles.

When the user clicks on a triangle, it turns into a square.

Level difficulty involves the speed the shapes move around, the chaos of the movements, the number of shapes at once, and the size (smaller is harder).

Point and morphing sprites are added for effect.

STEP 3: Map out my way ahead.

Never start a learning project out by trying for the end result right off the bat–build developmental steps in between. They can be mini-games that only test out one feature at a time, or they can be simpler versions of the game that increase in complexity with each update.

This is going to be a long-term project, possibly taking a year or more. I’m not planning on pushing it faster because this is all off-time after everything else is done (work, baby put to sleep, dishes washed, groceries bought and put away, etc).

Spoiler free, but technical tidbits that might change how you perceive the movie.

Format: This subject is getting a lot of playtime on the TV and internet reviews, but I think a lot of people misunderstand. Interstellar was filmed in what’s called 15/70, which is 70mm film but at 15 perforations because it’s shot horizontally rather than vertically (vertical 70mm film yields 5 perforations per frame–the perforation is those holes where the mechanism grabs the film and rolls it forward [I just had a scary thought that my kids may never see film]). To compare, it’s like taking Blu-Ray (1.9K) to 6K by turning the film sideways. Keep in mind that not many films are shot in 70mm; Ben-Hur, Lawrence of Arabia, and The Sound of Music come to mind–all at 5/70 not 15/70). Most non-digital films are shot in 35mm vertical, which is like VHS to our Blu-Ray/6K comparison.

Cinematography: I bring up the above to demonstrate that you are getting a lot of detail for your dollar on each frame. However–and this is a BIG however–the cinematography was not done by Wally Pfister, who did many of Christopher Nolan’s other movies. That is a big loss–Mr. Pfister is amazing with film, and the cinematographer for Interstellar is Hoyte Van Hoytema, who I feel takes a more typical approach to film.

This is where the misunderstanding in format comes into play: cinematography isn’t just about the size of the negative, it’s also about the quality of the lenses, focal depth, color balance, lighting, film grain, pace, and the “life” birthed through the developing process (contrast, grit, etc). Mr. Pfister delivers a clear image in all lighting conditions, with the proper mood and life for each scene. My impression is that Mr. Van Hoytema does the “expected” thing for each scene and doesn’t push the limits of the equipment or technology.

Verdict on the cinematography and film–Mr. Van Hoytema’s contribution to Interstellar voids the use of 15/70, so you might as well save yourself the $8 premium and watch it in the traditional theater format.

Sound: Hanz Zimmer does all of Christopher Nolan’s scores, and you either like his style or hate it–few are on the fence. In Interstellar, the music overpowers the dialog in several places, so you are left guessing what they are saying. The use of the organ was creative and unexpected–a big plus on that.

Time: This move takes three hours–take that into account on where you sit and how large of a soda you get. I would say it’s a three-act movie, with the conclusion maybe standing apart as a mini fourth act.

Science: If you are into physics, you’ll understand all of the stuff–but if you don’t know physics they present it in a way that you don’t lose anything. It’s not a confusing movie, but you do have the element of time. Folks who aren’t familiar with the term relativity may struggle a little bit, but anybody who’s watched a little bit of Nat Geo or PBS’s NOVA will be fully up to speed.

Theater, DVD, or Cable? If you like Gravity, then theater. If you didn’t like Gravity, then DVD. If you didn’t like Gravity or Inception or Twister, then Cable. If you didn’t like Gravity, Inception, Twister, or Dances With Wolves, then you probably don’t like watching movies and are probably not reading this review.

I’ve been reading various Python books trying to teach myself Python 3*–and almost all of them go on and on about lists and tuples and dictionaries early on. So early in fact, that I feel most aspiring programers (myself included) don’t really know why we would ever need lists, tuples, or dictionaries.

So I figured I’d write a little “game” where you put items in a basket (list), remove them, or replace them with a different item.

* I’m back on the “learning programming” bandwagon… I fell off trying to be an artist for several months.

My first draft was pretty straightforward and worked well, but once I started creating functions it went down hill fast. stackoverflow.com was a great help! Every problem I ran across, somebody had already experienced it and the community came up with a solution.

For example: items in the basket had ‘[ ]’ wrapped around them. A solution on stackoverflow suggested using print(str(mylist).strip(‘[ ]’))–and it worked perfectly! I did print(str(listItems).strip(‘[]’)) in my program.

I’m still confused about calling global variables, which I had to do for some if the items but confusingly not for others–so it was a trial and error process to get the variables to play nicely within the functions.

What item would you like to put in your basket? (press q to quit) Woody
What item would you like to put in your basket? (press q to quit) Buzz
What item would you like to put in your basket? (press q to quit) Ham
What item would you like to put in your basket? (press q to quit) q

In the autumn of 2013 my unit (the 70th Intelligence, Surveillance and Reconnaissance Wing or 70 ISRW) held a contest to design a new Commander’s Coin. Here’s what the previous coin looked like:

Having previously designed the 22d Intelligence Squadron’s coin, I decided to give my hand at designing the Wing Commander’s coin. Not long after submitting my entry I was notified that my design was selected.

In this article I will describe the design process and the open-source tools used to refine the final design.

(Photo by Air Force Staff Sgt. Matthew Fournier) – CC/BY

The 70 ISRW is Headquartered at Fort Meade, MD with over 4,000 Airmen serving at several Groups, Squadrons and smaller Operating Locations around the world. The 70 ISRW employs about 50 career fields performing hundreds of different missions, from language analysts to HVAC specialists. As the premier Cryptologic Wing in the USAF, the 70th’s primary mission is to deliver accurate and timely intelligence products to national, NATO and allied leaders for strategic and tactical awareness of our adversary’s intentions and activities.

I started the process by free sketching all ideas that came to me. In this stage I felt it important to not discount any idea and sketch it out anyway, even if I knew it was a bad design from the start. Sometimes putting a half-baked idea down on paper will spur the imagination or thought process to create something better.

My initial sketches. Click for full size.

The best or most effective ideas from the initial sketches were combined or refined.

Once I selected a design to develop further, I went into GIMP to line out the shape and features. At this particular time I wasn’t as familiar with Inkscape yet, so what could have been easier done in Inkscape was done in GIMP.

The coin’s back was filled in with text, shadows and a cloud texture backdrop created by merging a wonderful cloud painting by riantrost and a cloud photograph by Quincula for color and subtle texture variances. The text reads “Intelligence, Surveillance and Reconnaissance in morse code (pre-WW2), German and Japanese (WW2), Korean (US-Korean Conflict), Vietnamese (US-Vietnamese Conflict), Russian (Cold War), Arabic (Gulf War), Pashto/Urdu (I ended up using Persian-Farsi in a pinch) (Afghan War), and binary (emerging Cyber battlespace) to represent the different conflicts that the Air Force (and Signal/Air Corps before that) has been involved in since it’s inception.

First draft of the back design. Created in GIMP.

To simulate a rough metal finish on the coin’s front, I selected the surfaces I wanted the texture applied to and then used the HSV noise filter on a transparent layer. By selecting the surfaces first, the noise was only applied to those areas, leaving the areas I intended to be smooth noise free. I could have also applied the noise filter to the entire layer and used masks to block out the noise free areas.

Noise texture to give a rough finish for certain parts.

To simulate the smooth metal of the edges, I used a layer with a gradient that had a mask of the design’s edges. I left the blend mode as normal but did lower the opacity to half.

First draft of the front design. Created in GIMP.

After discovering Inkscape’s “Trace Bitmap” feature that I wrote about recently, I was able to generate and modify .svg versions of the Air Force logo, 70 ISRW shield and various other portions. In order to bring the a shape into Blender that I could build further on, I used various basic shapes and whatnots in Inkscape and set them up to import into Blender.
I’m not sure if there is a way to combat this during the import process, but my .svg shapes were always tiny–sometimes I had to scale them by 1,000%. If you import an .svg and can’t see anything, check your Outliner and see if a “curve” shape is there that wasn’t there before. By clicking on it and then hitting the Delete or “.” key on your numpad while your mouse is over the 3D window will zoom your view to center over the imported .svg parts.

Finally started using Inkscape–which I should have from the start.

The an early .svg used to import into Blender. With each successive try it got better.

How to activate the .svg import script in Blender.

All the pieces that imported. Each color imported it’s own curve object and then some, so I ended up with a few duplicates or oddities.

The .svg will not import as one curve, but many curves depending on your source .svg file. For example, importing the world “Hello” will create five curves (one for each individual shape) rather than just one curve of five letters. But, we should get back to the coin…

This outline along with the extracted shapes were brought into Blender for building, extruding, texturing, and lighting. I used Cycles for materials and rendering. Since the individual objects were solid colors, I didn’t worry about unwrapping or generating texture coordinates. (Although for the clouds I did use a texture mapping node and “pushed” the texture to where I needed it by fiddling with the XYZ/UVW position and scale values.)

A fly-apart view of the different elements.

The first render. It looks bad now, but I was happy with it considering I didn’t have to model it by hand.

The Back was done in GIMP and the front in Blender. I was (am!) still weak on my modeling skills and time was running short, so I stuck with a 2D back. I figured as long as I can give them a nice 3D front, they could mentally pull those ideas and visuals to imagine the back.

Rough surface texture node setup. Click for larger image.

The rough texture was created by using a musgrave texture as the material’s displacement. I used a math node to control the intensity of the displacement/bump. There might be better ways to control the intensity, but this is a method I’ve found that works well for my workflow.

I built a nice proposal to really sell the idea. I firmly believe that presentation is more important than content, so I tried to make my presentation as nice as possible. I included a Freestyle render in blue to give the design a more blueprint feel as a way to gain credibility as a designer by stealing the confidence you subconsciously have for an architect or engineer when they roll out a blueprint on your desk.

The settings for Freestyle were actually fairly default. I just changed the color and set the thickness down a little bit. In GIMP I blurred it slightly and then added a non-blurred version above it to make it look more like it was printed on paper.

Not long after submitting my idea…

The formal submission of the coin design. Commander’s notes can slightly be seen in one of the upper corners.

…I was notified that I was selected ahead of 10 other submissions <yay!>. I met with the Commander who gave me his feedback.

He liked the presentation and the idea, but he was weary of the clouds and also thought that the translations appealed to only the linguists in the Wing.

Based on that feedback I modified the original version. We met to critique the design after each revision. The Commander wanted a way to capture the whole Wing, rather than just the linguist or analyst folks. To accomplish that I decided to use the Occupational Badges (unique symbols for each career field that we wear on our uniforms, much like the original Star Trek badges) for each of the career fields featured in the Wing. I tried different layouts, but there was no good way to capture them all and have it show clearly on the final coin. I even went back to languages hoping that might help. When that idea failed I tried using the emblems of the various Groups under the Wing. I also tried listing out the AFSC codes (Air Force Specialty Codes–letters and digits that designate an Airman’s job, position, and skill level) one after another using different fonts to make it look like a code. The idea was that those “in the know” would know they were AFSC codes and would have the inside “intel” that non-Air Force folks wouldn’t have.

The different ways I tried to capture the vision of representing everybody in the Wing.

You might have noticed a slight shape change in the middle there. I made a more accurate version of the coin and increased the GIMP file’s resolution from 800×842 at 100dpi to 3,000×3,000 at 300dpi.

Since our Wing has Airmen stationed in all corners of the world, I decided a globe would be the best way to show “we’re all here”. I first tried a globe outline, but settled on a dot-matrix globe instead. Making this was a source of huge frustration, trying various filters and whatnot. I applied a filter over a map in GIMP that gave it a half-tone pattern. I then brought that into Inkscape and did a “trace bitmap” function to create the .svg version. You can see in the below image that I masked the area where a key and text would be placed (more on that in a second).

Globe dots created using the half-tone pattern in GIMP and then brought into Inkscape. The key and words were masked before converting to an .svg file, that’s why Europe, South America, and middle Africa have chunks missing.

Another change you likely noticed was that the sky texture was abandoned. Folks who saw the design were getting confused with the clouds or thought it looked too busy. I tried a render using the clouds as a bump map and having it as a relief, but that didn’t look good at all so I scrapped the clouds and went with rays, which was something the Commander indicated he would prefer to have. By abandoning the clouds texture, we had a cleaner look and saved $100 on image screening fees.

Rays replaced clouds for a cleaner look and cheaper cost.

The Commander wanted to show that the Wing has missions in the Air Force’s battle domains and asked that we add “Air – Space – Cyber” to the coin. Along with those three words, he wanted a key icon to be incorporated around those words somehow. “The key represents the AF ISR Agency’s effort to unlock its protagonist’s secrets. The teeth on the ward symbolize the disciplines of intelligence gathering – SIGINT, HUMINT, IMAGERY, and MASINT” (AIA/HO, 2000). [SIGINT is Signals Intelligence, HUMINT is Human Intelligence, and MASINT is Measurement and Signature Intelligence (bleeps, blips, fumes, and rays).]

Trying different ways to make it look nice. I also tried versions with the dashes between the words being the keys, but that didn’t translate to well.

We finally landed on a final design that we were comfortable with. I cleaned up the meshes, made a back version in 3D, improved the lighting and materials, and made a cleaner render.

The final beauty shot! (Click for larger size.)

All the Blender bits that made up the two halves in the beauty shot. The black ‘floor’ was actually an ANT terrain mesh with a gloss+musgrave material.

I gathered the .svg files, high-resolution front orthographic renders of the front and back, and color swatches and submitted them to the coin company to have them minted.

What I was surprised with once we got the proofs back was that it seemed like they did not use the .svg files I had sent them. There were alignment issues, especially on the ISR portion with the ‘R’ being too low. We asked them to correct this, but when the final coins came back the ‘R’ was still dropped too low. This is the second coin I’ve designed, and both times the coin company did not use the source .svg files, so if you work in this industry and are reading this article–please let me know why this is? Even if you don’t use that .svg to do the actual designing, why weren’t the .svg files used as a springboard during the in-house design stage? In this instance, it was a few minor things were off, but in the 22 IS coin there were significant differences.

Size comparison using a EU coin, I’m guessing a Russian coin, and a U.S. “George Washington” dollar coin (he’s on the other side).

Close up of the ISR. Note how the ‘R’ is dropped lower–it should be even with the ‘S’. Also note the bubbles in the paint.

The gold paint on the edges is rather fragile. The image makes it look like welding marks the way it rubs off.

Close up of the dots that make up the globe.

Here you can see how the alternating bands of the rays were created.

Close up of the word ‘Cyber’. The scratches were the result of rubbing two coins against each other as I was trying to set the photo shoots up.

Several days after being shown the final coin design by the Commander, I was presented with this awesome plaque with the two faces of the coin and an engraving. I was very touched that the Commander and his Executive staff thought enough of the new coin to present me with this gift. It brings me great joy knowing this coin will be presented by the Commander to a few of the Wing’s Airmen for doing great work.

GIMP 2.8 supports layer folders–If you do any work in GIMP, I highly recommend maximizing use of this layer management method. Not only does it keep your layers organized in a hierarchical manner, but it also keeps overlay effects influence contained within that folder’s other layers. In total there were 48 layers–everything from shadows to text.

Even though Blender was not used to initially create the back, having the 3D mockup provided us an opportunity to visualize what the coin would look in physical form. It also allowed me to generate additional files for the coin manufacture’s CAD system. I really think having the front in 3D helped “sell” the coin design as well, even though the render itself wasn’t all that great.

I would like to leave you with a sequence of each of the variations in order. Thank you for taking the time to read this article, and please feel free to leave a comment if you have any questions or comments about this design process.

Inkscape is a free-and-open-source 2D vector program similar to Adobe Illustrator. Think of vector graphics like Blender’s curve tools. You can create a vector image (.svg) and scale it up ten bazillion percent and it will still be clean. Unlike a .jpg or .png file that will fall apart at anything above 100% zoom.

For example:
Here’s an .svg file at 300×300 pixels (100% zoom):

Now here’s a tiny segment zoomed in to 1,000%:

And again at 5,000% (GIMP wouldn’t let me do 30k px which would be 10,000%):

When you combine Blender with Blender, you can do some neato things. Instead of creating a logo using curves, or worse poly-modeling, you can quickly mock it up by importing the .svg file, like so:Image made by Blender artist “K M”.

Image made by me! :p

Here’s one I recently made (not the best, but it served it’s purpose):

So, if I wanted to do something simple like the above AF logo, you could make it really quickly by setting it as the background image in Blender and either using curves, or more appropriately for this shape–polygon modeling, you could whip it up rather quickly.

But what if I told you for about the same amount of time as it would take to convert the AF logo .jpg file into the above Blender render, you could do either of the below images:

That makes using Inkscape more appealing, right? Sure, sure, the images themselves aren’t the best renders–but let’s focus on the time-saving aspect here! So why don’t we go ahead and make both of these.

5. In this image we only have two colors–white and blue–so were going to do “Multiple Scans” by colors, and set the Scans: to 2.
Depending on what kind of image you are trying to convert, you can do either multiple scans or a single scan. Keep in mind, that if you import an .svg created with multiple scans into Blender, each of those scans will create a path–so if you have a full color image and make a 256-color scan, you’ll have 256 paths to deal with. Single scan, on the other hand, may not give you the results you want. In this image you can also do “Color quantiziation” with 2 colors and get a black-and-white result as well.

6. Un-check Smooth. Do check Stack scans, and Remove background. Our source image is pretty large, so we won’t need the benefit of smoothing to clean out the rough edges. We’ll stack the scans so there won’t be a gap made, and we’ll remove the background since we don’t need the white part of the GE logo left over.

7. In the Options tab, uncheck Supress speckles, Smooth the corners to 1.00, and Optimize paths to 2.00. This is a smoth, dual-tone image, so there aren’t any speckles to supress. We want the corners as smooth as possible for Blender, and the more optimized (clean) the paths are the better–we want as few segments to mess with as possible.

8. Click Update, OK, then close the Trace Bitmap window (OK will not dismiss it).

9. Left-click and drag your new .svg out of the way. Left-click select the .jpg logo and delete it. Move the .svg back into place.

10. With the logo selected, click Save As, and save as a Plain SVG (rather than Inkscape SVG, since I tend to notice Plain SVG works better in both Blender and GIMP under most conditions.)

4. Zoom in and take a look at your file to make sure there isn’t any bits like “Made by CrazyKid!” that you want cut out (be sure to credit CrazyKid in your final product, though–this image was uploaded by nipic user ingvar as part of his .ai file).

5. Select the curve object (I’ll call logo from here on out), and reset the origin to the center of the logo (Object Tools (left-hand panel) > Origin > Origin to Geometry (or Geometry to Origin to save you the next step).

6. Move the logo to 0x0y0z.

7. Now zoom the logo out 10-20x times (however large you want it).

8. In the path tab, you can extrude and bevel to your heart’s delight–however note that the amounts will have to be tiny. I’m still trying to figure out a way to make them more “normal sized” increment amounts. Applying the scale doesn’t seem to have any effect. I also recommend boosting your resolution to more than 12 (48 is what I normally do).

9. If you bevel and the logo puffs out too much, you can compensate by making a negative offset. This will create curve overlaps that we’ll have to manually fix.

10. This is what we got so far–not bad!

Okay, you’re saying, I could have also done that in Blender by using curves. Well, I say, how about the University of Maryland logo? That’s a bit more complex.
Grab the logo here: UMD Ball LogoImage copyright University of Maryland (http://www.umd.edu/)

1. If I used the same settings as before, I get some odd artifacts–especially around the text:

So I had to adjust some of the settings as you see below:

(Note: I also boosted the number of colors on the first tab to four: a pass each for red, yellow, black, and white.)

2. After importing the .svg into Blender, you can see there are some areas that are still not swell:
So I did some moving vertex handles around here and there to clean that up.

3. After throwing on some textures and lighting in Cycles, this is what we come up with:

Not bad for a few minutes work. Definitely a time saver trying to model each of those elements individually.

Creating .svg files and importing them into Blender are best for two-dimensional limited-color images like logos and text. More complex images or items you anticipate making into more dramatic 3D elements are best served by poly-modeling, sculpting, or more advanced NURB-modeling from within Blender.

Speaking of text, this is one of the most useful features of Inkscape—text along a path. Let’s quickly run through that, and afterwards you should be all set with the basics and ready to pursue some great Inkscape tutorials out there for more advanced .svg creation.

1. Create a path in Inkscape. You by clicking you create a vertex with a hard angle, click and holding lets you have a smoother curve.

2. Click the text button and type something out.

3. First select the text, then select the curve. Go to Text > Put on Path.

4. Now you can add your text how you see fit. You can change the font, size, kerning, etc.

4.5 (Going to GIMP only): You’ll want to make your path invisible–do that by changing the alpha to zero. Otherwise it’ll be part of the text image when you open the .svg in GIMP.

5. To make the text displayable in GIMP or Blender, you’ll have to convert the text from an object to a path. Do that by clicking on Object > Object to Path.

6. Save as .svg and import it into Blender just as in the previous examples. Same deal applies with the extruding, etc.

7. Add your textures, lighting, and camera angle–bam!

I hope you have found this tutorial useful!

Thank you. 🙂

~ ~ ~ ~

Annex:

I skipped over how I got the Cycles renders in the sample images above to, well, render the way they are in the sample images above. (That was a horribly written sentence, sorry.)

The lighting setup is entirely environmental. After switching from Blender Internal to Cycles, you set up your environmental lighting by accessing the World tab and making the below changes:

And then you’ll get something similar to this:

Next, you’ll switch to the render tab, in the Film group you’ll check “transparent”.

And you’ll get this:

Now hit render, and you’ll get something nicer. I have mine set to render 100 samples:

Adjusting the direction of the normal (the round white ball) in the World tab will give you radically different lighting. Also, changing between Preetham and Hosek/Wilkie will give you different results as well.

In order to focus and develop my programming ability, I will be taking a year-long sabbatical from Blender. I’ve enjoyed using Blender since I began with 2.48 in early 2009. In fact, I’ve been dabbling in 3D since 3ds for DOS beginning in 1995 and then 3ds Max 7 in 2005.

3ds R4 for DOS, circa 1995

My first foray into programming was with GW-Basic on a Tandy 1000 back in 1990.

Tandy 1000, my first computer back in 1990.

We didn’t have a tutorial manual, but we did have a reference manual. In retrospect, learning from the reference manual was probably the better way since there was no hand-holding or “first steps”–it just tossed you in. If you didn’t know the terminology that went with a routine, you had to look up the referenced command or figure it out through tinkering. I played with Basic until I got hooked on 3ds for DOS and left programming behind. A few years ago I tried to learn programming again, but with limited success–and again while I was deployed with some minor gains.

Screencap from Basic.

As a SNCO and active LDS member, I have a lot of duties that need to be taken care of preventing me from focusing on the various hobbies I wish to progress in. My thinking is that by taking a year-long break from 3D/2D to focus on programming will give me gains that can be applied back into Blender/GIMP through scripts or code contribution. Also, I’ve always wanted to recode Blender’s Video Editor to rival Sony Vegas (I don’t know much about After Effects, but let’s rival that, too!)

So, continue to look here for my musings, gains, and pains of learning Python during the next year–and I’ll pick up Blender in 2.7x!