Inner Sanctum Design

Writing, illustration, modeling, coding

[innersanctumdesign]

Designs for a Tiny Home

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 designed 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. In some sense, the house is designed around the 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 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 inside and outside the shower. Along the wall (which has been hidden in this view) is a flip up/down bench for seating. The doors for the bathroom and the water closet are both pocket doors.

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.

[nmelehan]

How to embed an animated Processing sketch on a Squarespace cover page

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.

Github: cover_page_sketch_embed.js

Github: color_lines_sketch.js

[innersanctumdesign]

2015-0801 #processing #hype #hype_processing http://ift.tt/1E0G5mt

[innersanctumdesign]

Debugging PCHLightweightCanvas #processing #hype #hype_processing http://ift.tt/1Vfyxqw

[innersanctumdesign]

Debugging PCHLightweightCanvas #processing #hype #hype_processing http://ift.tt/1DnIG9L

[innersanctumdesign]

Debugging PCHLightweightCanvas #processing #hype #hype_processing http://ift.tt/1J7ZBDn

[innersanctumdesign]

[innersanctumdesign]

2015-0620d #processing #hype #hype_processing http://ift.tt/1H7MOBs

[innersanctumdesign]

2015-0531

[innersanctumdesign]

A pattern for using reflection with Processing.org

I’m writing this in hopes that someone else searching for a solution to this problem finds it in their search results. The code for the Processing sketch mentioned can be found on GitHub at sketchbook/2015-p5gridlib-tumblr1

I’ve been trying to create a utility class for Processing which helps me to display sketches I’m writing in a grid. 

The aim behind this is so that I can vary parameter values of each sketch over the grid and then pick which one I think is the most visually ‘successful'

An example is below.

Each grid cell is a sketch which displays a circle rotating around the center of that cell.

In this iteration, the drawn circle’s radius, frequency of orbit, and orbit radius are varied over the grid.

To accomplish this, I wrote a simple Griddable interface that the sketch that draws to each cell adheres to.

The context variable which is passed to the draw method is the canvas of the cell on which the sketch draws.

public interface Griddable { public void draw(PGraphics context); }

I then wrote a SketchGrid class which is passed an instance of a Griddable sketch.

The SketchGrid class first gets the class type of the Griddable sketch:

// Class of my example sketch was named “ShapeSketch”. ShapeSketch implemented Griddable. public SketchGrid(Griddable sketch) { // ... Class sketchClass = sketch.getClass(); // ... } // Constructor as called from the setup() method of my project’s main .pde file void setup() { size(200, 200); grid = new SketchGrid(new ShapeSketch()); }

My first attempt to instantiate this class for each grid cell failed at compile time with a java.lang.InstantiationException error:

sketches = new Griddable[numRows][numCols]; for (int i = 0; i < numRows; i++) { for (int j = 0; j < numCols; j++) { try { sketches[i][j] = (Griddable)sketchClass.newInstance(); } catch (Exception e) { } } }

What I had forgotten was that Processing wraps classes created in .pde files in a class with the same name as your project. In this case, my project was called p5gridlib.

Therefore, the sketchClass was an inner class of this wrapper class. The sample sketchClass could be printed as p5gridlib$ShapeSketch.

The solution was to implement a Constructor object which was passed the parent/wrapper class as an argument. 

My analogy for why this is necessary is because the instance of the parent class ‘flavors’ the inner class that is declared inside of it.

The following code reflects this change:

public SketchGrid(Object parentSketch, Griddable sketch) { // ... try { Constructor<?> ctor = sketchClass.getDeclaredConstructor(parentSketch.getClass()); sketches[i][j] = (Griddable)ctor.newInstance(parentSketch); } catch (Exception e) { println(e); } //... } // Constructor as called from the setup() method of my project’s main .pde file grid = new SketchGrid(this, new ShapeSketch());

Which compiled correctly. Further use of reflection was required to ‘watch’/vary the parameters of each sketch. Code for that is found in the watchParameter() and set() methods of the following committed code: SketchGrid.pde

[innersanctumdesign]

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.

[innersanctumdesign]

An in-browser isometric drawing canvas

[nmelehan]

In the course of development of a drawing app on iPad for iPad

[innersanctumdesign]

Lines are drawn from mouse coords to nearest side

[innersanctumdesign]

Simulating handwriting jitter for Processing's shape rendering functions

github

[innersanctumdesign]

[innersanctumdesign]