ZIM js JavaScript Framework

Canvas Components, Controls and more!

ZIM VR Launches with ZIM 6.8.0 for Virtual Reality on the Canvas!

hostsVR

ZIM VR has launched at http://zimjs.com/vr.html a scroll-parallax mini-site that pays homage to Magic Leap.  The site was made in two days by Inventor Dan Zen.  Dr. Abstract and Pragma animations are by Antonio Caggiano.

The ZIM VR() class lets developers and designers easily make side-by-side VR for headsets like Google Cardboard, Samsung Gear VR, and any number of cheap headsets for your mobile device.  We use a $24 Utopia VR headset and it is fine!

helmet

WORKING EXAMPLE

Here is a working demonstration made for VR helmets.  On a computer you can swipe the content to emulate head movement.  On mobile, you turn your head and the images move accordingly.   This should work on most mobile devices.

http://zimjs.com/vr/

vrexample

The circles shoot out at you in 3D.  As you turn your head, there is slight parallax and the images move.  There are arrows at the edge of the content to indicate no more content.   If you turn past these, the screen turns yellow

HOW IT WORKS

You create content for the left “channel” and give the objects a depth.  Then pass the content in to ZIM VR() and it will copy the content to the right channel and shift the left and right channel according to the depths so that the viewer sees in 3D.  You can specify angle of movement as well as parallax.

Check out our Bubbling Video on ZIM VR on the YouTube ZIM Learn channel.

Here is an excerpt from the ZIM VR Docs:

// Prepare content inside one container
var content = new Container(stageW/2, stageH);

// This background tile has no depth or is at "screen" depth
// There will be no depth shift and no parallax
new Tile(new Rectangle(10,10,frame.light), 20, 1, null, 10).center(content);

// These rectangles are given depth using the dep() method - or set the depth property
// The rectangles will be shifted in the x by VR
// centerReg the objects for proper parallax
var box = new Rectangle(50,50,frame.green).centerReg(content).dep(10);
new Rectangle(70,70,frame.clear,frame.blue,5).centerReg(content).dep(12);

// 1. this just shows content in 3D with no motion:
// var vr = new VR(content).addTo(stage);

// 2. this will move when the head is turned (device is rotated) but with no parallax:
// var vr = new VR(content, 160, 400).center(stage);

// 3. this shows parallax when the head is turned but with no positional movement:
// var vr = new VR(content, 0, 400, 2, 60).center(stage);

// 4. this shows motion and parallax as the head is turned:
var vr = new VR(content, 160, 400, 2, 60).center(stage);

ABOUT ZIM

ZIM at http://zimjs.com is an open source JavaScript Framework for the HTML Canvas. You code in a text editor and view the code in a Browser. You can make visually rich games, apps, art and sites. ZIM is powered by the wonderful CreateJS with many thanks to their team!

The ZIM site features the following sections:

  • LEARN tutorials on how to start and code in ZIM
  • CODE ZIM Frame template and code context
  • DOCS the objects and commands all defined
  • NEWS latest features and articles
  • ABOUT features, applications, archives, reviews, etc.
  • EXAMPLES sample projects created in ZIM

 

 

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

w

Connecting to %s

Information

This entry was posted on February 6, 2018 by in interactive media, javascript, launch, mobile and tagged , , , , , , , , , .
Advertisements

Categories

%d bloggers like this: