Learn Famo.us [part 2]: Displaying and Positioning Elements

In part 2 of my series on Famo.us, it’s day 1 of the thesis project of Hack Reactor and the Famo.us HQ is amazing! WP_20140729_006   An entire side of the building on the Penthouse Suite + Patio with a view + Free food + Showers = Can I live here? Unfortunately, I can only stay as long as late as the last employee each night…

During our first day, we took an in-depth dive to Famo.us University, it was much more detailed and nicely explained the nuances not touched in the tutorials. For this post, I decided to go really in-depth as well due to the lack of documentation and resources out there. Simply put, I want this to be the best resource for those now starting to learn Famo.us.

What is a Surface?

A Surface is a renderable. In laymen terms, a renderable is something you can to the main context (more on this later) and see on the screen. The function of a surface is to display, visually, the data you give it. Surfaces have no knowledge of its position on the screen or its opacity. Also, in terms of the render tree (will write a post on this soon, in the meantime, read this), you can think of a surface as a leaf. You cannot add anything to a leaf in a tree.

How to create a surface Creating a surface is simple. Just require the surface class and use the new keyword. I’ve also included the boilerplate code that is required with almost every Famo.us app.

define(function(require, exports, module) {

  // main requires
  var Engine  = require('famous/core/Engine');
  var Surface = require('famous/core/Surface');

  // create the main context
  var mainContext = Engine.createContext();

  // create a new surface and
  // pass in the options object
  var mySurface = new Surface({
    size: [100, 100],
    content: 'Hello Famo.us!',
    properties: {
      backgroundColor: 'red',
      color: 'white'
    }
  });

  // add our surface to the mainContext
  // so we can see it on the screen
  mainContext.add(mySurface);

});

Size. You can define the size [width, height] in pixels inside of the options object. A size of [100, 100] is 100 pixels wide and 100 pixels long. You can also pass in true, for example a size of [true, true] would be just enough space for the content. And a size of [undefined, undefined] will take up the entire screen and also resize accordingly. You can also interchange the true and undefined with specific pixel values. A size of [500, undefined] would be a surface that is 500 pixels wide but is as long as the screen. Stringified percentages (‘50%’) can also be used.

Content. of the content, you can use HTML to help with formatting. Trying passing in ‘Hello Famo.us!’ to see the effect. You can also attach an image using a div with a src to the picture url (ImageSurface would be better in this situation).

Properties. For those with more CSS experience, you can pass in CSS in the properties object. It’s a little different though with camelCase instead of dashes. For example, background-color -> backgroundColor.

Other. You can add classes to surfaces and apply CSS that way. You can use different classes that extend from surfaces such as a CanvasSurface, ContainerSurface, ImageSurface, InputSurface, TextareaSurface and VideoSurface. I won’t go into these in this post, but just know that they exist and that some might be better suited for your situation.

What is a Modifier?

A Modifier is also a renderable. It can be applied to the main context to change the position and other properties, such as opacity, of surfaces. In terms of the render tree, modifiers will affect anything below it on the same branch. And unlike surfaces, modifiers can be chained together. You can have as many modifiers affecting a surface or a group of surfaces as you want.

How to create a Modifier We’ll use the same code as above and add in a StateModifier.

define(function(require, exports, module) {

  // main requires
  var Engine     = require('famous/core/Engine');
  var Surface    = require('famous/core/Surface');
  var Modifier   = require('famous/modifiers/StateModifier');
  var Transform  = require('famous/core/Transform');

  // create the main context
  var mainContext = Engine.createContext();

  // create a new surface and
  // pass in the options object
  var mySurface = new Surface({
    size: [100, 100],
    content: 'Hello Famo.us!',
    properties: {
      backgroundColor: 'red',
      color: 'white'
    }
  });

  // now let's create a modifier
  // and pass in some options
  var myModifier = new Modifier({
    origin: [0.5, 0.5],
    align: [0.5, 0.5],
    transform: Transform.rotateZ(10)
  });

  // add our surface (and now our modifier as well!)
  // to the mainContext so we can see it on the screen
  mainContext.add(myModifier).add(mySurface);

});

The modifier we applied will simply set the origin and align to [0.5, 0.5] effectively centering the red surface on the screen. It also resizes according to the screen size, maintaining its center position.

Kyle’s analogy. Say you have a cork board (the brown board you stick push pins in) on the wall. We’ll let this represent the main context. Now let an index card represent a surface. You want to add the index card in the bottom left of the cork board. How would you do this in Famo.us?

Origin vs Align. By understanding the difference between the two, you can position surfaces effectively on the screen. In the above example, you can control where you stick the push-pin through the index card with origin. And you can control where you place the index card (currently with the push-pin through it) on the cork board using align. In more technical terms: origin controls the child anchor and the align controls the parent anchor. Be sure to always include an align if you set the origin since the align, by default, is set to the origin.

Transform. You can also rotate and translate using Transform.rotate and Transform.translate. You can rotate in a single dimension by doing Transform.rotateX(), Transform.rotateY(), Transform.rotateZ() or rotate all at once by doing Transform.rotate(x, y, z). Transform.translate(x, y, z) works in a similar fashion. I recommend playing around with the rotations and translations to get a better feel for using Transform. An interesting distinction is that translate is in pixels and rotation ranges from 0 to 2π.

Chaining. You can apply as many modifiers as you want to the context. The way it works is that any surface below modifiers on the render tree will be affected by those modifiers. This covers the basics on surfaces and modifiers.

In my future posts, I will explain the render tree with visuals and  show more practical code examples. Also, I am working on compiling every last bit of information and learning resource there is on Famo.us into a post. Subscribe if you’d like access.

Learn Famo.us [part 1]: What is Famo.us?

 

What is Famo.us?

famo.us_pic

Famo.us is an open source (soon to be open development) JS framework capable of rendering to HTML, Canvas, and WebGL. It’s been in the works for a couple of years and was released a few months ago (April 9th).

Located in San Francisco, it was founded by Steve Newcomb (sold Bing to Microsoft) and Mark Lu (Berkeley graduate). They have $30MM in funding.

Steve and Mark’s goal for founding Famo.us

To build the ultimate JavaScript development platform
– free & open source
– fixes the performance problems of HTML5
– enables rendering to DOM, Canvas and WebGL
– multi-view capable
– controls animation with a physics engine
– enables designers with new tools for animation
– enables junior engineers to use widgets
– enable senior engineers to build their own primitives
– can build apps and games
– works on phones, tablets, computers and televisions
– one code base, deploy everywhere [1]

Famo.us core
1) a 3D rendering engine
2) a 3D physics engine
3) a gesture engine for touch, mouse, keyboard, and Leap Motion
4) a multi-view engine

With Famo.us, you can create near-native (60 FPS) experiences in web + mobile apps by writing very little code.

Famo.us enables application developers to build beautiful native speed based apps and games in HTML5 that take advantage of famo.us’ 3D rendering, 3D physics, multi-screen and gesture engines. Designers can access the motion via the physics engine without coding, application developers can build quickly using app templates and widgets without worrying about performance and platform engineers can build their own primitives from scratch with direct source code access to the full power of the famo.us engines. [1]

Much more to come on Famo.us, expect code walkthroughs, tutorials, and extensive documentation of Famo.us’ Github examples.

Sources
[1] – angellist

Frequently Asked Question
– The basics
The tough questions

Installing PostGreSQL database on Microsoft Azure Virtual Machine

azure_logo

Login to Microsoft Azure.

Create a new virtual machine

  1. Click on the ‘+ New’ in the lower left corner
  2. Select Compute -> Virtual Machine -> From Gallery
  3. Tab 1: Use an Ubuntu 12.04 LTS image
  4. Tab 2: Keep default settings, type in ‘Virtual Machine Name’ and a password (I didn’t use the SSH certificate)
  5. Tab 3: Keep default settings, change region, choose a DNS name and create a TCP endpoint called ‘postgres’ (port #’s don’t matter)
  6. Tab 4: Nothing to change here, click the checkmark and wait a few minutes for azure to do its magic (grab some tea from Punjab Kebab!)

SSH into the virtual machine

  1. Open up terminal
  2. type in:
     ssh azureuser@[DNS-Name].cloudapp.net 

    and enter your password

You are now inside your virtual machine!

Now we need to install PostGreSQL on your virtual machine

Type in a few commands:

sudo apt-get install postgresql
sudo apt-get install postgresql-9.1-postgis
sudo apt-get install postgresql-contrib

To get  into your database type

 sudo -u postgres psql postgres 

And that’s it, now you can write psql commands to create tables for your database!

How to Run Javascript Code in Sublime Text

Had many Hack Reactor students ask how I was running our daily toy problems straight from Sublime.

Disclaimer: This is not an interpreter and only allows you to see console.log() output. Alert() will not work. Besides that, it’s a quick way to test code. For those wanting an entire interpreter, try out SublimeREPL

Here’s how you can create a Javascript Sublime console:

  1. Open Sublime
  2. Go to ‘Tools’ on the tab bar
  3. Hover over ‘Build System’
  4. Click on ‘New Build System’

At this point, Sublime should have opened up a new tab for you, that looks like this:

Screen Shot 2014-06-17 at 9.57.29 AM

Delete the default text and paste this in:

{
"cmd": ["node", "$file"],
"selector": "source.js"
}

Save it as node.

Now the next time you want to code in JS, go to Tools > Build System > Javascript.

To run your code, simply Command-B.

EDIT: If the above does not work, try this instead:


{
"cmd": ["/usr/local/bin/node", "$file", "$file_base_name"],
"working_dir": "${project_path:${folder}}",
"selector": "*.js"
}

N-Queens Implementation in Javascript

Week 2, Day 4 of Hack Reactor:

Having already passed the data structures sprint where we implemented 4 different instantiation patterns in JavaScript. Our next two-day sprint focused on algorithms and working on an implementation of the classic N-Queens problem.

The problem is simple: How many ways are there to arrange n queens on an n by n chessboard such that no queens are in a direct line of attack.

Our first implementation was very, very slow, taking ~15 minutes for N=8.

How we stored the chessboard: 2D-array


[ [0,1,0],

  [1,0,0],

  [0,0,1] ]

Having (barely) passed the core requirements, we then set our eyes on the extra-credit section. There was a lot of room for improvement in the time complexity. Since the nature of the problem requires a brute-force technique along with a collision detect on every queen being placed. I discovered that the large majority of our code’s time was being spent checking for collisions. Since our algorithm spent most of its time checking collisions, that was the first place to improve. At a glance, our implementation of collision detection had a time complexity of O(n^2) on each row for a total time complexity of O(n^3)…(after n^2, it pretty much goes downhill from there).

My initial thought for improving efficiency was a different way of representing the chessboard that was more efficient than the 2D-array we were currently using.

From a 2D-array to a 1D-array:


[1, 0, 2]

Since we know that every solution will have a queen in every row, we don’t care about the spaces where there aren’t queens. We only care about the locations of each queen in the row. With this implementation, each index of the array represents the row, and the value represents the location of the queen in that row.

For example, row 0 has a queen in position 1, row 1 has a queen in position 0, and row 2 has a queen in position 2. By using this representation, the time complexity for checking collisions is O(N) since we are only traversing one array.

But  how we can do better? I’ll give you a hint: hash tables.

From a 2D-array to an object:


{0: 1, 1: 0, 2: 2}

Using the same logic as rows, the keys represent the rows and the values represent the location of the queen in that row. However, since objects are implemented as hash tables in javascript, we can take advantage of the constant time lookup, O(1).

We had less than a day at this point to refactor our original N-Queens implementation. We felt the other two implementations, although more efficient, would not give us much of a challenge. We instead went with a bitwise implementation because who doesn’t love a good bitwise from time to time.

Following this very old code, here is our bitwise javascript implementation of N-Queens:


var countNQueens = function(n){
  var all = Math.pow(2,n) - 1;
  var solutionCount = 0;

  var findSolutions = function(cols,ld,rd){

    var pos = ~(cols | ld | rd) & all;

    while(pos>0){
      var bit = -pos & pos;
      pos = pos ^ bit;

      findSolutions((cols | bit), (ld | bit) << 1, (rd | bit) >> 1);

    }
    if (cols === all) {
      solutionCount++;
    }
  };
  findSolutions(0, 0, 0);
  console.log(solutionCount);
  return solutionCount;
};

 

 

3D Printing Glasses: First Run Results

Fun day at DeltaMaker this week, got to print myself a pair of glasses!

Glasses1

Yes, they’re way big on me. But it was a decent first test run to see what printed glasses look and feel like. Credit to Beehive for uploading the 3D model! The model can be found here on Thingiverse.

WP_20130806_001

WP_20130806_006

The glasses were printed face down and needed support structure due to the nosebridge being slightly curved outward. Still have many pieces of support structure to pry off, but the majority of the support was removed using an exactoknife.

WP_20130806_005

WP_20130806_007

Inside is much smoother which is needed since it’ll be the surface against your face. The temple pieces did come to a point so I had to be careful sliding it on and off.

WP_20130805_012

WP_20130805_009

We cut some paperclips to use for makeshift screws. It has a simple 3 barrel hinge which works, but is very weak and fragile. I would recommend going with 5 barrel metal hinges and just leaving space for them in the model. Printed hinges are just too weak for everyday use.

As you can see quality is pretty rough. It was done in .2mm print layers, a standard quality for personal printers, such as the DeltaMaker. We can go as low as 1mm (100 microns) but it’d take a little longer to print.

WP_20130805_002

Printing the support structure first.

WP_20130805_004

Good view of the support structure with the glasses sitting on top.

WP_20130805_003

WP_20130805_006

WP_20130805_007

The glasses were printed on a beta DeltaMaker using our own PLA (only $39 a spool!) with a printing temperature of 230º C. The infill density has slipped my mind… It took about 3 and a half hours to print.

The frames are also tracer ready so if you want to put lenses in these, find a local optometrist who “traces” the frames and cuts their own lenses.

If I were going to wear this in public, the first thing I’d do is lightly sand the printed surface and then watch this video.

If you don’t have time to watch the video, here’s the gist of it:

  1. Apply many light coats of primer. This will fill in the tiny holes and crevices of the printed surface and help the paint stick better.
  2. Next, apply a few coats of paint. The person in the video uses Krylon fusion.
  3. Finally, apply a few coats of acrylic clear-coat. This will give your printed model a shiny, glossy look that stays over tim

I’ll try this finishing technique and post the results with pictures right here – be sure to subscribe.

3D printing + DeltaMaker Initial Thoughts

Recently started with working Orlando based 3D printing company, DeltaMaker, to help build subassemblies for 150 printers. Decided to show my personal shots for those asking me about the experience.

Started off simple, making wheels. Over 1000 of them. As a software guy, I can say that my hands were tired after my first day.

Carriage Wheels

After a couple more days of bearings, washers, and wheels, it was onto carriages assemblies. About 450 of them. Learned how to use a torque wrench and why we Loctite our bolts. Also used a caliper for the first time to score some brackets.

Carriages

At the time of writing, I have about 100 more carriages to complete.

A nice shot of my work area where I crank out carriages.

Some shots of the main room, loving the wall colors. The scoreboard has been programmed to tell the time with the Guest score indication seconds. TV with horns, why not.

Testing out a prototype.

In just 45 minutes of printing, a frog was born.

This amazing owl was one of DeltaMaker’s initial prints!

I’ve been learning a lot since I started not too long ago, also doing some online marketing (check us out on Facebook!).

* * *

Apart from DeltaMaker, I’ve been working on the business side of 3D printing eyewear. Excited to see how they will come out once I have the lenses confirmed. I will also be posting 3D printing news from around the Web to showcase what the technology is really capable of.

Much more to come, this is just the beginning.