Monthly Archives: August 2017

Bot Draw : Logo like framework for building VR experiences

Posted on by
Reply

Sample AFrame experience

Welcome to Bot Draw!(aka Project Dark Bat)

Looking for a fun way to practice your JavaScript skills and build cool VR experiences? InspiredToEducate.NET designed this code sample to enable you to play with very simple ideas in JavaScript. This sample uses a JavaScript framework called AFrame to build 3D content in your browser or mobile phone browser. The display engine supports major VR platforms including Google Cardboard, Vive, and Oculus. (Thank you AFrame community!)

In Bot Draw, you command a small bot who can travel in 3D space. The robot can place boxes, spheres, images, and other 3D shapes. This tool borrows ideas from popular code education tools like Logo, code.org, ScriptCraft by Walter Higgins.

You can review a sample scene here: https://dark-bat.glitch.me/

You can use the keys WASD to move around the scene.

You can edit and study the code here: https://glitch.com/edit/#!/dark-bat

If you make something cool, please let us know!

Hope you find this fun and helpful!

 

File Overview

  • views/index.html – This file contains HTML and JavaScript for the VR scene. To learn more about AFrame related content, please refer to AFrame.IO. Feel free to remix this glitch sample and start tinkering!!
  • public/demo.js – This file provides other demo functions using bot draw.
  • public/bot_aframe – Interested in enhancing the “Bot” code? This is the file for you!

Bot Draw methods

In order to draw, you start by creating an instance of the bot. The bot object has additional methods for drawing, turning, or moving.

Moving and turning:

  • moveUp(steps) – Move the bot upward a few steps
  • forward(steps) – Move bot forward a few steps
  • moveLeft(steps) – Move bot left
  • moveRight(steps) – Move bot right
  • setAngle(degrees) – Set angle of direction for the robot. Enter direction in degrees
  • getAngle() – Get current angle for the robot.
  • turn(angle) – Turn the robot a few degrees.

Drawing stuff:

  • drawBoxAt(width,height,depth,x,y,z) – Draw box at a particular location.
  • drawBox(width,height,depth) – Draw box at current robot location.
  • drawSphere(radius) – Draw sphere at current robot location.
  • drawSphereAt(radius,x,y,z) – Draw sphere at particular location
  • drawCone(radius,height)
  • drawCylinder(radius,height)
  • drawImageAt(strPath,width, height, x,y,z) – Draw image at particular location. The path should be a fully qualified path to a valid web image.
  • drawImage(strPath,width,height) – Draw image at bot location. The path should be a fully qualified path to a valid web image.

Remember locations, Return to locations

  • saveLocation(locationName) – Store bot location and give it a name.
  • moveToLocation(locationName) – Return to location by name

Change colors:

bot.drawColor = “red”

 

AFrame: Building WebVR experiences with HTML and JavaScript

Posted on by
Reply

Sample AFrame experience

Hey, makers and web developers! Looking for a fun weekend coding challenge? In this post, I wanted to introduce you to a simple tool called A-Frame for building VR experiences using HTML and JavaScript.  Originally sponsored by the Mozilla foundation, A-frame enables you to quickly build WebVR scenes, panoramas, games, or data visualizations.  With very basic HTML skills, you can build delightful VR experiences.  I believe you’ll find the declarative or tag based coding style very approachable.  For advanced developers, you can drop to the JavaScript and ThreeJS abstraction layers to customize the experiences in more detail.

Don’t have an expensive VR rig? No problem!  AFrame supports platforms as simple as desktops, mobile phones or Google Cardboard.  I find it impressive that the AFrame platform supports advanced rigs like Vive and Rift.    I’m looking forward to seeing support for Microsoft Mixed Reality too.

Here’s a quick “hello world” experience for you to test drive.

Projects Built with AFrame

How can you get started with AFrame today?

Make sure to check out the impressive community of plugins on the AFrame registry

If you’re in the Florida area, I would like to invite you to the DevFest Florida 2017.  All the Google developer groups in Florida have combined forces to throw an awesome developer party and learning conference.   Join us for a great weekend of networking, learning, and hacking! Learn more at https://devfestflorida.org/.