Some day I’d like to have the kind of life where I can drive around the country working and living out of a trailered Tiny House. I love modeling stuff in SketchUp, so I indulged my dreams and designed an ideal tiny house.
The house is design to be 22 feet long, and with a fairly simple envelope: basically, it’s just a big rectangular solid with a rounded “aerodynamic guard” cap bolted on the front. The cap is designed so that the house has a lower amount of drag than an unadorned box when the house is being driven along a highway.
The cap is designed to also swing open on a hinge so that things like bicycles could be stored inside. The cap would lock when in the closed position to provide security for the bikes.
I’ve also designed a Rogue Fitness-like barbell rig that folds out off the back of the house that I could use when I’m not near a Crossfit box.
Off the right side of the house is a patio/pavilion that can fold out when the house is stationary. There’s also a table that can be hung below the right wall’s main window that provides outdoor seating.
The patio, rig, and the front door’s landing stairs all fold up against the side of the house when the house needs to be moved.
I’ve designed the house to be as space efficient as I could on the inside. In the rear of the house, next to the entry door, is the workspace and an eating area. Above that area is a sofa which faces a large television mounted on the backside of the bedroom’s wardrobe. Toward the front of the house is the kitchen, and off that, the bathroom. Above the kitchen and the bathroom is the bedroom. The first and second floors are connected by a branching staircase.
The workspace is designed to have a large desk (large enough for a big iMac). The desk is tucked away underneath one branch of the interior staircase. The table behind it could be used for eating, but it could also be used as more desk space when working.
The bottom trunk of the branching staircase also can be flipped up, revealing a combination washer/dryer for clothes underneath.
The kitchen is designed to have a full-size oven/range and sink. Mounted on the backsplash behind the oven/sink is another flatscreen TV (along with a spice rack that spans the width of the backsplash). Above the backsplash is a a microwave and a cabinet.
Opposite the oven/sink is a wide prep table. Further to the front of the house is a full-sized refrigerator and pantry. The door seen next to the refrigerator leads to the bathroom.
Seen here in a cutaway from the other side of the house is the bathroom. The toilet is tucked away in its own water closet underneath the forward branch of the interior staircase. The shower is 2′6″ by 3′9″. The bathroom’s sink has a fairly wide and deep basin which extends into the shower area, which provides a vanity both above the sink and in the shower. Along the wall (which has been hidden in this view) is a flip up/down bench for seating.
There are two places for watching TV–one in the entertainment area upstairs, and one out on the patio facing the TV on the kitchen’s backsplash.
The house features an extensive shelving unit that rests on the branching staircase, featured in this cutaway of the house. The unit is molded into the staircase, and the doors are all designed to swing freely open in the tight space.
One of the reasons I’ve created a Squarespace website for myself was to host Processing animations I’ve written that I want to share. If you’re not familiar with it, Processing is a language and development environment used to create visual artwork with code. Read more about it on the project’s website.
My plan is to create a full gallery of Processing sketches in my Squarespace. That project isn’t finished yet, and in the mean time I thought it would be nice to show off one sketch on a Cover Page. Cover Pages are Squarespace’s optional entry-ways to a website. If you load http://nathan.exchange today, you’ll see the product this work.
While Processing sketches are written in a subset of Java, one of the nice features of the development environment is the ability to export to Javascript. The Javascript that is created renders to a <canvas> tag in a web page.
In order to embed the animation onto my cover page, I would then have to figure out a way to dynamically load a <canvas> tag into the right part of my cover page’s DOM tree and also target that canvas element with my exported Processing Javascript.
I wanted the animation to be full-width and height and to render below the other elements on the page (my name, the subtitle text, and the social network buttons). Therefore, I’d have to find the HTML representing the existing page content and prepend a new canvas to one of its ancestors. I’ve diagrammed a depiction of what this would look like in the DOM tree:
The next step was to look at the DOM in Safari’s web inspector and find those elements. The first screenshot below highlights the <div> containing the page content. The second screenshot highlights a good candidate to attach the canvas tag to.
With this information, I wrote two scripts. The first script (‘cover_page_sketch_embed.js’) uses Jquery to select this element from the DOM tree and then calls the second script ('color_lines_sketch.js’), which performs the work of attaching a canvas tag to the selected element and initializing the Processing sketch.
You’ll notice that I’ve commented out the sketchCode function from the second script. The contents of the sketchCode function is the actual Javascript animation code generated by Processing. The method for generating this Javascript export is outlined in this StackOverflow question/answer: How to precompile processingjs sketch to speed load times? I followed the guide provided by that answer and pasted the results into the sketchCode function. You can see the full resulting script in this Gist.
To get these scripts into my Squarespace, I followed the instructions on Squarespace’s answers forum: Where do I upload JavaScript files? - Squarespace Answers. Note that this might be easier to do if you’ve got a Squarespace developer account (which I really should consider upgrading to). Once I’d uploaded the scripts, I had to make sure to inject them into my Cover Page’s <head>, as shown below:
Of course, I had some troubleshooting to do originally, but after resolving the bugs, I had my successful result. There was one more thing I had to take care of: I wanted my <canvas> tag to resize when the window resized. To do this, I added the following function to cover_page_sketch_embed.js:
This script calls the resize function of my Processing sketch object:
The resize function does a bit of extra work to make sure that what has already been drawn to the canvas is preserved after the resize event.
I’m writing a Hype subclass of HCanvas and calling it PCHLightweightCanvas. The subclass supports automatic removal of HDrawables after they are added to the canvas and either drawn once or after a specified amount of drawing cycles.
The class isn’t reliably removing children when the option to persist them for a number of drawing cycles is chosen. The patterns in the screen captures below are evidence of this bug.
The empty/white areas are HRects that have successfully been removed from the canvas. The filled areas are HRects that have incorrectly persisted on the canvas. If the class is to work as expected, these captures would instead be almost entirely empty space.
In progress: a drawing/painting application that senses an iPad’s gyroscopic position to create brushes that respond to the how the iPad is tilted.
First brush developed: when touching the screen, a gradient is painted between two colors in the direction of the iPad’s tilt.
The tilt position reading can be “locked” in place so that the device does not update it when drawing. This allows you to tilt the device in the desired direction and then persist that angle when drawing and holding the iPad at any angle.
App is being developed directly on the iPad in Codea.
