MikeRandrup

Find Point along Bezier Curve in JavaScript

mikerandrup — Fri, 31 Aug 2012 12:47:09 +0000

I adapted this from an excellent C++ example yesterday and wanted to share. This is for an HTML5 game (like) project I’m working on where interpolating along vector art created in Adobe Illustrator is needed (more on that in a future post hopefully!)


///////////////////////////////////////////////////////////////
// JavaScript Implementation of the DeCasteljau Algorithm
// Based on C++ Implementation from 
//       http://cubic.org/docs/bezier.htm
// which credits Nils Pipenbrinck aka Submissive/Cubic & $eeN
// this particular implementation written by Mike Randrup Aug 30 2012
///////////////////////////////////////////////////////////////
 
/* Usage:
 
	// A & D are the start and end points of the line
	// B & C are the handle (influence) points
 
	myPointA = bezier.point(40,100);
	myPointB = bezier.point(80,20);
	myPointC = bezier.point(150,180);
	myPointD = bezier.point(260,100);
 
	time = 0.5; // halfway through curve
 
	resultPoint = bezier.calc(
		myPointA, myPointB,
		myPointC, myPointD,
		time
	);
 
*/   
 
 
var bezier = (function(){
 
	var Point = function (x, y) {
		this.x = x || 0;
		this.y = y || 0;
		return this;
	}
 
	var interpolateLinear = function (pointA, pointB, time) {
		return {
			x: pointA.x + (pointB.x - pointA.x) * time,
			y: pointA.y + (pointB.y - pointA.y) * time,
		}
	}
 
	var bezObj = {
 
		point: function(x, y) {
			return new Point(x, y);
		},
 
		calc: function(p1, p2, p3, p4, time) {
			var ab = interpolateLinear(p1, p2, time),
				bc = interpolateLinear(p2, p3, time),
				cd = interpolateLinear(p3, p4, time),
				abbc = interpolateLinear(ab, bc, time),
				bccd = interpolateLinear(bc, cd, time);
 
			return interpolateLinear(abbc, bccd, time);
		},
 
	}
 
	return bezObj;
 
}());
 
console.log("bezier loaded", bezier);   
 
///////////////////////////////////////////////////////////////
// Also check out http://13thparallel.com/archive/bezier-curves/
// for an alternate bezier option in JavaScript
///////////////////////////////////////////////////////////////

Plotting and animating the resulting curve in a canvas is a good way to see it working. Here is what that might look like.


<html lang="us-en">
 
<head>
<title>Bezier curve test by Mike Randrup</title>
</head>
 
<body>
 
<canvas id="output" width="600" height="400"></canvas>
 
<script type="text/javascript" src="bezier.js"></script>
<script type="text/javascript">
   // the below javascript snippet goes inline here
</script></body></html>

This snippet goes into the HTML5 markup above. (I needed to separate to fix a problem with my new WordPress code formatting plugin)


	window.onload = function() {
 
		console.log("main running");
 
		var i,
			t,
			steps = 200,
			resultPoint,
 
			myPointA = bezier.point(40,100),
			myPointB = bezier.point(80,20),
			myPointC = bezier.point(700,180),
			myPointD = bezier.point(550,100),
 
			canvasEl = document.getElementById("output"),
			canvasContext = canvasEl.getContext("2d");
 
		var nextFrame = function() {
			moveControlPoints();
			drawCurve();
		};
 
		var moveControlPoints = function() {
			if (myPointA.x>0 && myPointA.x&lt;600) myPointA.x++;
			if (myPointB.x>0 && myPointB.x&lt;600) myPointB.x++;
 
			if (myPointC.y>0 && myPointC.y&lt;400) myPointC.y--;
			if (myPointD.x>0 && myPointD.x&lt;600) myPointD.x--;
 
		};
 
		var drawCurve = function () {
			canvasContext.fillStyle = "#FFF";
			canvasContext.fillRect(0,0,600,400);
 
			canvasContext.fillStyle = "#F00";
 
			for (i=0; i<steps ; i++) {
				t = i / (steps-1);
 
				resultPoint = bezier.calc(
					myPointA, myPointB,
					myPointC, myPointD,
					t
				);
 
				canvasContext.fillRect(resultPoint.x, resultPoint.y, 2, 2);
			}
		};
 
		setInterval(nextFrame, 50); // I don't like this here.
 
 
	}

Realtime 3D version of Water Flow Simulation written for Microsoft XNA Framework

mikerandrup — Thu, 30 Aug 2012 13:12:39 +0000

Though this is admittedly from earlier this year, hopefully it’s still interesting. This is the realtime 3D experiment written on the Microsoft XNA (Xbox, Windows, Windows Phone) Gaming Framework in C#. This is some of my earliest work in the C# language, so much refactoring could occur.

Here is the slide deck from a talk I gave on this (contains video clips of results):

http://prezi.com/getting-started-in-3d-xna/

The diff analysis on the code between tutorial stage and current stage illustrates my contributions and technique for the water calculation:

https://github.com/mikerandrup/XNA_WaterFlow3D/(diff between commits)

Starting point is tutorial from Riemer Grootjans here: http://www.riemers.net/eng/Tutorials/XNA/Csharp/series4.php Each additional commit shows my changes to achieve water effects. THANK YOU to Riemer!

The core technique is worth discussing, as is the experience of working in XNA, as well as observations on how realtime 3D rendering is handled in this framework. Hopefully a future blog post will follow.

3D Land & Water Coding Experiment

mikerandrup — Wed, 30 Nov 2011 17:35:18 +0000

Have you ever played the video game called From Dust? It contains intriguing land, water, and lava simulation. Since first playing it, I have been fascinated with the results of Ubisoft’s very interesting simulation system. I developed an inspired guess as to how the basic algorithm and technique might work. During some holiday downtime, I put code to the concept and came up with the following:

The algorithm steps through a pair of 2 Dimensional arrays containing the height of land and water at each coordinate in the grid. During each step, it determines if and where the water would run downhill, then adjusts the old and new values accordingly. The resolution of the grid was limited by the performance of Flash, which I could no doubt have improved dramatically by using more advanced stage drawing techniques. After running and adjusting the simulations in Flash, I switched the movie to export a JPG image of each frame. That sequence was then run through After Effects (frame blend) to smooth the adjustments. The final sequences were then applied as separate Y-axis displacement maps on “land” and “water” objects in Lightwave 3D.

In the first of the two animations (mountain springs running downhill into a valley), a trio of simple “water emitters” put out a finite amount of water at the tops of the hills, and the algorithm runs it downhill to pool at the bottom. The land was generated with high values at the edges, and low values at the center, with a touch of randomization of the terrain (a “valley”).

In the second (sea mountain rising), a flat land mass with water sitting on top (an “ocean”) is affected by a strong “land emitter” which pushes a mountain out of the sea floor. The water is reacting by being displaced downhill from the land. The circular wave of water was the natural product of the algorithm I created, which seems to indicate being on the right track for how the video game works internally.

Why generate the frames in Flash AS3? Frankly, that choice was due to my own limitations as a programmer. Also, my algorithm fails to ever resolve the water to a natural state of a flat surface.

I now have an even greater sense of awe for what the Ubisoft team achieved with their amazing video game. For example, the game contains dynamic water foam textures which give realistic cues to how the water runs downhill and around obstacles.

The Flash AS3 source code is below. I realize my coding techniques are horrible, and not even object oriented. Had this been for anything other than a proof-of-concept fun project, many loose ends would be wrapped up. There was nothing else in the Flash movie, as it creates all needed movieclips dynamically. If you want to try it, just create a new Flash (ActionScript v3) document and paste the below into the frame 1 actions. It reflects the coding for the “mountain rising out of the sea” effect.


import flash.display.MovieClip;
import flash.events.MouseEvent;
import flash.events.KeyboardEvent;
import flash.geom.Matrix;
//import com.adobe.images.JPGEncoder; // external library used for saving frames
 
stop();
var frameNum:int = 99;
 
var resX:int = 40;
var resY:int = resX;
 
var paintStrength:Number = 1;
 
var tileSpacing:int = 0;
var tileWidth:int = stage.stageWidth/(resX+(resX*tileSpacing));
var tileHeight:int = stage.stageHeight/(resY+(resY*tileSpacing));
 
var alreadyEmitted:Number = 0;
var maxEmitted:Number = 0;
 
var edgeValue:Number =  0;
var maxBoundary:int = resX-1;
var drawValue:Number = paintStrength;
var editMode:String = "water";
var hideLand:Boolean = false;
var hideWater:Boolean = false;
 
var waterInit:Number = 0.1;
var landInit:Number = 0.05;
 
var updateTimer:Timer = new Timer(250);
updateTimer.addEventListener(TimerEvent.TIMER, advanceFrame);
updateTimer.start();
 
// used to capture frames in non-realtime
//stage.addEventListener(KeyboardEvent.KEY_DOWN, advanceFrame);
 
function advanceFrame(e:TimerEvent):void{
	updateMap(null)//commands
}
 
var parent_mc:MovieClip = new MovieClip();
stage.addChild(parent_mc);
 
var landMap:Array = new Array();
var landHeight:Number = 0;
landMap.push(new Array());
for (var yInit:int=0; yInit<resy ; yInit++) {
	var newRow:Array = new Array();
	//newRow.splice(0,newRow.length);
	newRow[0] = new Array();
	for (var xInit:int=0; xInit<resX; xInit++) {
		landHeight = landInit;//+(Math.random()*.1);
		newRow[0].push(landHeight);
	}
	landMap[0].push(newRow);
}
 
var waterMap:Array = new Array();
waterMap.push(new Array());
for (yInit=0; yInit<resY; yInit++) {
	var waterRow:Array = new Array();
	//newRow.splice(0,newRow.length);
	waterRow[0] = new Array();
	for (xInit=0; xInit<resX; xInit++) {
		waterRow[0].push(waterInit);
	}
	waterMap[0].push(waterRow);
}
 
function calculate_new(x:int, y:int):void {
	var newVal:Number = 0;
	var newDelta:Number = 0;
	var proposedX:int = 0;
	var proposedY:int = 0;
 
	var minLevel:Number = 100;
	var minX:int = 0;
	var minY:int = 0;
 
	var curLand:Number;
	var curWater:Number;
	var checkLand:Number;
	var checkWater:Number;
 
	curLand = landMap[0][y][0][x];
	curWater = waterMap[0][y][0][x];
	for ( var neighborX:int=-1; neighborX<=1; neighborX++) {
		for ( var neighborY:int=-1; neighborY<=1; neighborY++) {
 
			proposedX = x+neighborX;
			proposedY = y+neighborY;
			if (
				(proposedX&lt;0) || (proposedY&lt;0) ||
				(proposedX>maxBoundary) || (proposedY>maxBoundary) 
			) {
				//trace('skipping edge');
			}
			else {
				checkLand = landMap[0][proposedY][0][proposedX];
				checkWater = waterMap[0][proposedY][0][proposedX];
				if (neighborX==0 && neighborY==0) {
					//trace('skipping self');
				}
				else {
					if ((checkLand+checkWater)<minlevel ) {
						minLevel = checkLand+checkWater;
						minX = proposedX;
						minY = proposedY;
						//trace('new tallness found: ' + minLevel);
					}
				}
			}
		}
	}
	compare_cells(x, y, minX, minY);
}
 
function compare_cells(curX:int, curY:int, checkX:int, checkY:int):void {
	var delta:Number;
	var curLand:Number = landMap[0][curY][0][curX];
	var curWater:Number = waterMap[0][curY][0][curX];
	var checkLand:Number = landMap[0][checkY][0][checkX];
	var checkWater:Number = waterMap[0][checkY][0][checkX];
	var idealLevel:Number = 0;
 
	// if there is water here
	if (curWater > 0) {
		//if this water should fall
		if ((curLand+curLand) > (checkLand+checkWater) ) { 
 
			// get the goal average height between the two including water
			idealLevel = (curLand + curWater + checkLand + checkWater)/2;
			if (idealLevel > curLand) { idealLevel = curLand};
 
			delta = curLand + curWater - idealLevel;
			delta *= 0.3;
			waterMap[0][curY][0][curX] -= delta;
			waterMap[0][checkY][0][checkX] += delta;
		}
	}
}
 
function updateMap(eventObject:MouseEvent):void {
	frameNum++;
 
	// clean up stage from last update
    if(parent_mc.numChildren!=0){
        var cond:int = parent_mc.numChildren;
        while( cond -- ) {
            parent_mc.removeChildAt( cond );
        }
    }
 
	var shading:Number = 0;
	for (var k in waterMap[0]) {
		for (var i in waterMap[0][k][0]) {
			var square:Shape = new Shape();
			var squareMC:MovieClip = new MovieClip();
			calculate_new(i,k);
 
			if (waterMap[0][k][0][i]>0.001 ) { // water is on this spot
				shading = get_water_color(k,i);
			}
			else { // land is showing on this spot
				shading = get_land_color(k,i);
			}
 
			square.graphics.beginFill(shading);
			square.graphics.drawRect(0, 0, tileWidth, tileHeight);
			square.graphics.endFill();
 
			squareMC.addChild(square);
			squareMC.x = (i * (tileWidth + tileSpacing + tileSpacing)) + tileSpacing;
			squareMC.y = (k * (tileHeight + tileSpacing + tileSpacing)) + tileSpacing;
 
			parent_mc.addChild(squareMC);
		}
	}
 
	//save_screenshot();  // used to capture frames in non-realtime
 
	// water emmitters
	emit_water();
	progress_land();
	trace(frameNum);
}
 
function get_land_color(y:int, x:int):Number {
	var color:Number = (int)(landMap[0][y][0][x] * 0xFF);
	if (color < 0) { color = 0 }
	if (color > 255) { color = 255 }
	color = (color < < 16) | (color << 8) | color; // maps to grey of RGB
	return(color);
}
 
function get_water_color(y:int, x:int):Number {
	var color:Number = 0;
	if (waterMap[0][y][0][x] >0)
		color = (waterMap[0][y][0][x] + landMap[0][y][0][x]) * 0xFF;
 
	if (color < 0) { color = 0 }
	if (color > 255) { color = 255 }
 
	// the below line draws the water in greyscale, otherwise shades of blue
	// as in an RGB value, the blue is in the least significant digits
	//color = (color < < 16) | (color << 8) | color; // maps to grey of RGB
	return(color);
}
 
/* 
function save_screenshot():void {
	var jpgSource:BitmapData = new BitmapData (stage.stageWidth, stage.stageHeight);
	jpgSource.draw(stage);
 
	var jpgEncoder:JPGEncoder = new JPGEncoder(100);
	var jpgStream:ByteArray = jpgEncoder.encode(jpgSource);
	var file:FileReference = new FileReference();
 
	file.save(jpgStream, 'riseLand-'+frameNum+'.jpg');
}
*/
 
function emit_water():void {
	if (alreadyEmitted < maxEmitted) {
		if (waterMap[0][int(resY*.30)][0][int(resX*0.95)]<.3) {
			waterMap[0][int(resY*.30)][0][int(resX*0.95)] += .2;
			alreadyEmitted += .2;
		}
		if (waterMap[0][int(resY*.10)][0][int(resX*0.45)]<.3) {
			waterMap[0][int(resY*.10)][0][int(resX*0.45)] += .1;
			alreadyEmitted += .1;
		}
 
		if (waterMap[0][int(resY*.85)][0][int(resX*0.15)]<.3) {
			waterMap[0][int(resY*.85)][0][int(resX*0.15)]+= .05;
			alreadyEmitted += .05;
		}
	}
}
 
var landAdded:Number = 0;
var landMax:Number = 200;
var cur_landshift:Number = 0;
var max_landshift:Number = 100;
 
function progress_land():void {
	var proposedX:int;
	var proposedY:int;
 
	// these are the land emitters in the center.
	if (landAdded < landMax) {
		landMap[0][int(resY*.5)][0][int(resX*0.5)]+= 2;
		landAdded += 2;
	}
 
	cur_landshift++;
	if (cur_landshift > max_landshift) { return; }
 
 
	for (var k in landMap[0]) {
		for (var i in landMap[0][k][0]) {
			for ( var neighborX:int=-1; neighborX< =1; neighborX++) {
				for ( var neighborY:int=-1; neighborY<=1; neighborY++) {
					proposedX = i+neighborX;
					proposedY = k+neighborY;
					if (
						(proposedX&lt;0) || (proposedY&lt;0) ||
						(proposedX>resX-1) || (proposedY>resY-1) 
					) {
						//trace('skipping land edge');
					}
					else {
						shift_land(i, k, proposedX, proposedY);
					}
				}
			}
		}
	}
}
 
function shift_land(curX:int, curY:int, checkX:int, checkY:int):void {
	var delta:Number = landMap[0][curY][0][curX] - landMap[0][checkY][0][checkX];
	delta *= .5;
	landMap[0][curY][0][curX] -= delta;
	landMap[0][checkY][0][checkX] += delta;
}
 
minlevel>resy>

Work Stuff: Motion Graphics for Splash Coupons

mikerandrup — Tue, 25 Oct 2011 16:21:23 +0000

These two videos were created to help the Splash Coupons sales force. The videos were available online, and also on iPads the sales team took to appointments. After Effects was my tool of choice. It was my first project getting to use After Effects after completing training. I’m looking forward to creating better and better results in future projects.

One feature in these videos is the “traveling line effect” in the background of both videos (most visible in 2nd video). The lines were created in Illustrator using an “expanded” “blend”. This was then brought into After Effects, where a 3D camera was attached to a variation of its own path. After Effects did an amazing job of rendering the vector artwork transformed in 3D space. The voiceover was edited in Adobe Soundbooth CS5. (I’ve now upgraded to Adobe Audition as part of Adobe CS5.5).

Credits: Shana Rose (voice performance), Various iStockPhoto.com Photographers, Mike Randrup (all other roles)

This was the full product introduction video. It contains a call-to-action, directing users to an online calendar that was on the original page (but is not on this blog page).

http://www.youtube.com/watch?v=Lsa3y5g-9eU

Work Stuff: Big Brands Poster Design

mikerandrup — Mon, 10 Oct 2011 15:17:17 +0000

This print project was for www.BargainBanners.com. Over the years, they have printed banners promoting quite a few national brands. The idea for a poster to show the diverse group of companies seemed natural.
The first task was gathering logo files. Most of them were possible to take from the original banner artwork, but a few needed to be picked up from www.BrandsOfTheWorld.com as vector files. Each logo is superimposed on a small “virtual banner”, which I created in Photoshop back in 2008 as part of the BargainBanners.com logo. The background contains a lovely US Map and “light steaks” courtesy of VectorStock.com. Everything was assembled in InDesign, and output to a PDF for the poster printing.
The finished piece is 4 feet wide by about 3 feet tall, and is now hanging in their banner workshop.

Work Stuff: Loading Animation for native iPhone App

mikerandrup — Mon, 03 Oct 2011 16:25:04 +0000

Earlier this year, I worked on the graphics used in a Native iPhone App (now live on the App Store) for www.SplashCoupons.com. The app lists offers for home improvement savings for people in the North Dallas, Texas area. When the App first launches, it downloads the latest set of coupons from a data server via XML. During this process, which can take a couple of seconds, I wanted to display a visually interesting animation. So out came the storyboard, and a new After Effects project was born.

Conceptually, the animation was designed to show a user that “coupons” are going “into their iPhone”. The After Effects project was relatively simple. The coupon image assets I created were animated along paths from off screen into the pulsing iPhone in the middle. The screen of the iPhone has an AJAX-style busy cursor superimposed on it. Two layers of After Effects “Particle Playground” effects were blending with a glow effect. Since the particle filter naturally emits from the center outward, I time reversed the particle composition so the particles would flow into the iPhone. There is a colored glow in the center, and concentric circles pulsing inward. The last element, “droplet” pieces of the Splash Coupons logo, fly outward from the phone. The color decisions were based on the style guide for the Splash Coupons logo and brand.

The end deliverable for the animation was an 18 frame looping sequence. It didn’t take up much memory or room in the IPA file, and loops to run as long as needed. I also provided several other button graphics for the user interface.

Hopefully it makes for a nicer wait as the XML downloads in the background. At any rate, it was fun to create.

Lightwave 3D v10: Yay! I’ve got new graphic software to create work in…

mikerandrup — Wed, 01 Jun 2011 03:25:52 +0000

I have such a back log of finished work this year to post on this blog, and yet haven’t been making it happen. Just added to the category of work will be 3D rendering using Lightwave. They just came out with version 10, and I did a lot of work with it way back in the day starting at version 3.5. So naturally I am blown away by the many new features.

I figure over the next year I can learn and develop some basic 3D skills again. I have a big monster project in mind. On a more practical level, this stuff has already come in handy for my work. We just received back from the printers a brochure with a big 3D illustration of a product name on it.

After installing, I rendered a couple of the example scenes:

That's a wolf, with the kind of artificial fur that Pixar made famous with the giant blue monster in Monsters, Inc. Fun stuff!

This example scene that came with the 3D software was very shiny.

Work Stuff: Sales Folder (Print Project)

mikerandrup — Thu, 14 Apr 2011 01:33:41 +0000

Fun Factoid: Everything in the photo is at half scale, even the tiny 1 inch tall business card.

This was a recent project I completed for our sales team at work. It will be a nicely printed folder filled with sales materials (brochures, price sheets, things like that).

Tiny Mockup of Dark Version:

Sales Folder Mockup - Black Version - Inside

Sales Folder Mockup - Black Version - Front

Tiny Mockup of Light Version:

Sales Folder Mockup - White Version - Front

Sales Folder Mockup - White Version - Inside

In the end, we went with the version over white. This better matches the other series of collateral items I produced earlier this year (envelope, sales team business cards, a promotional coupon, and notesheet sized letterhead). Can’t wait to get them back from the printer next week!

We are glad to have great suppliers

mikerandrup — Wed, 14 Apr 2010 03:27:34 +0000

Our raw materials supplier, which also has a service and technical support division, happened to request and offer to come by today.

The meeting was a great conversation, and we very much enjoyed their insight. We figured out pretty quickly that our sales rep was a great one. And our tech (when we need him for advanced service needs) is also very, very good.

What a great day. We definitely realized that we chose the right major supplier.

Can’t post our supplier name here unfortunately, but please private message me if you are in the banner printing business and need a suggestion for who to align with. They provide sign industry inputs (inks, materials, and other such items).

Maintaining the manufacturing equipment

mikerandrup — Fri, 09 Apr 2010 20:36:12 +0000

This is all done on the Mutoh ValueJet 1204AS we use in one of our businesses. The print feed motor failed, and for good measure, we intended to replace the print feed motor’s encoder (which provides feedback to the machine about the movement the motor generates).

So I did all this earlier today, pausing only to shoot pictures for the blog (and just in case I had to show a real technician what I had done to it later). Naturally this is pretty scary because the machine way expensive to repair or replace. But it went really well.

Next I plan to try some home surgery. There’s a kit for that called “Suture Self”. (thanks to my dad for telling me that joke when I was a kid)

It was the extra “space” that killed it.

mikerandrup — Thu, 08 Apr 2010 20:50:48 +0000

Just finished troubleshooting a bug in a customer system. It’s a piece of custom software, run from a website, and written in PHP. This software collects orders from customers online, and transfers them into QuickBooks via a custom XML service and the QuickBooks Web Connector. And the other day, after a simple update, it stopped working.

Guess what the problem was? Heinous code changes? Chinese hackers? Faulty QuickBooks update? Nope. It was a single ” ” (space) character.

Several functions of the system require that absolutely no output be sent to the browser screen for various redirect functions, especially surrounding SSL and initiating a SOAP session with QuickBooks. Well, the extra character had been accidentally typed into the visible part of a PHP script file filled with common functions.

I finally found what the problem was after pulling the backup version of the recently changed file out of our Amazon S3 cloud backups (performed via JungleDisk automatically on our affected server at The Planet). Restoring the old version of the file fixed the problem, so I used Komodo code editor to compare the files (results attached).

It turned out that there was an extra ” ” (space) at the end of the file that got sent to the screen too early. And the browser got really confused about the content of the page as a result.

Just more evidence of the complex nature of these systems that make the web go round. Good thing we have solid processes for tracking and fixing! Yay for automatic backups into the cloud.

A Difficult Day in Non-Profit Land

mikerandrup — Sun, 24 May 2009 00:48:07 +0000

The local environmental non-profit group I’m involved with had a significant event happen in its history today. Due to a variety of factors (primarily budget shortfall issues), the board today voted to become an all-volunteer organization effective at the end of June 2009. This is a huge change: the original founder had been a full-time, paid contractor prior to this point. No longer will this be the case, and the process of creating this change is a major one that has big consequences for the founder. No one likes to change jobs, even if their paycheck was sporadic at best. No one likes to release the reins of their own creation.

Our board has bitten off a huge responsibility to ensure that the organization continues to fulfill its mission, and to properly honor the contributions, vision, and work of our founder.

Let’s just say that it all made for a pretty heavy board meeting.

Turning Desktop Wallpaper into Real Wallpaper

mikerandrup — Sat, 04 Apr 2009 19:33:49 +0000

For this project, I picked an area up my upstairs office that was nestled between some built in shelves and cabinets on one wall. It measured 48 inches wide by 33 inchess tall.

Next I went to my favorite free high resolution desktop wallpaper sites, and looked for something that I wanted to see on my wall. I wanted to find something that included obvious perspective cues to give the illusion of depth, and seemed to have a light source in the middle of the picture where my lamp was going to be shining from. I picked this one without over-thinking it too much for the purposes of the experiment. Many others would have worked, and been much more interesting. I downloaded it at the highest resolution offered (2,560 x 1,600 pixels).

In order to know how my photo would look, I divided the number of pixels I had wide by inches wide (2,560 pixels/48 inches) = 53 DPI (dots per inch). For a section of wall that people will be at least 1-3 feet away from, 50 DPI is fine. 100 DPI is good if people will get less than a foot away at eye level to your wall. This requires less DPI than other printing applications in order to look good from the distance a viewer sees it.

Next I went to an online printing place to have it printed large. I went to BargainBanners.com, (my employer), here. My wallpaper printout arrived well within a week.

When it arrived, I thumb-tacked it to the wall under where the trim was attached.

Since there is a lamp that goes on that part of the shelf, I set it up without its shade to preview how the room’s real lighting would work with the image. Looks like the bulb is practically part of the sky. Exactly the effect I was hoping for.

Wood trim, lampshade, and various office junk put back into place. I’m pretty happy with how it turned out for a first try. What does everyone else think? I have more complicated wood paneling elsewhere in the house. I was thinking of trying something more complex, with a more meaningful image, in the future.

Regarding the copyright of the image, that part is sticky. I believe it would be a better practice to surf on over to iStockPhoto.com to buy the proper rights to an image they have for $5-$12. Better yet, if you have a camera with a lot of megapixels, you can print directly from your photographs, which you already own. My employer sees a lot of this for beautiful engagement photos on huge display at the wedding reception.

They didn’t taste very good, so diplomacy was the only option.

mikerandrup — Sun, 26 Oct 2008 12:13:11 +0000

I’m sure we’ve all heard quite a bit about Electronic Art’s new game called SPORE.

It allows you to design a creature and develop it over time. You begin as a simple critter swimming around in water, grow onto land and into tribes, and eventually even become a space-faring civilization that travels the galaxy.

All the while you make choices about your creature’s disposition. My creature, the ‘Croctaw’ (pictured), is a hyper-aggressive, hyper-carnivore, war-mongering species that normally devours all other species that get in its way. It was a survival strategy that worked.

Except for once, that is. And the situation called for something drastic and different for dealing with the neighboring creature. You see, they didn’t taste very good, so diplomacy was the only option (unpleasant of an option as it was).

At least the other 99% of the creatures my Croctaw empire have encountered are quite delicious. Plus, I’m sure the Croctaw themselves (being some combination of crawdad, lobster, and crocodile) are probably quite delicious. Lucky for them that they are the dominant species.

SPORE has been fun, and now the Croctaw have been flying around the galaxy conquering all. The game is definitely worth trying.

Reconciling 21 months of old personal bank statements?

mikerandrup — Mon, 28 Jul 2008 17:26:32 +0000

Checking line by line through 80 pages of old bank statements might not sound like fun. Well, it basically isn’t (though I don’t really mind).

Recently I just finished up a personal project to get the period of time between Jan 2006 and Sep 2007 completely reconciled in my personal books. There were about 1,600 transactions to individually verify.

Once I had eliminated about a dozen small transactions (recording $20 of money spent twice, etc) that didn’t belong on my side, something interesting showed up.

It looks like there was a bank error that had been hidden by my own small errors. The reconciled balance from Oct 2007 through the present had always been within a small margin of where it was supposed to be. Once the little duplicate transactions were stripped out, a $500 bank error became obvious.

So in exchange for the mind numbing work, it looks like the process will net $500 in adjustments that I wouldn’t have noticed otherwise. It had always bothered me a little that I hadn’t ever reconciled these ancient personal bank statements, and I finally did it, and it looks like there’ll even be a payoff.

Just thought I’d share. And now I’d better go something completely non-bookkeeping related before I get too many funny looks.